3.19课·········HTML---标签与表格
2016-03-20 08:42
573 查看
HTML（Hyper Text Markup Language，超文本标记语言）
<html> ------开始标签
<head>----网页上的控制信息
<title>页面标题</title>
</head>
<body>
页面上显示的内容
</body>
</html>------结束标签
body的属性
bgcolor--------------页面背景色
text-------------------文字颜色
topmargin-----------上页边距
bottomargin--------下页边距
leftmargin-----------左页边距
rightmargin---------右页边距
background---------背景壁纸
格式控制标签
<font color=""#000033"" face="宋体" size="3"></font>----------控制字体
<b>加粗</b>或<strong>加粗</strong>
<i>倾斜</i>或<em>倾斜</em>
<u>下划线</u>
<center>居中显示，默认前面或后面若有其他，直接进行上下换行，保证自身所包含的内容单独存在，然后执行居中</center>
回<br />车<br /><!--在设计页面中按shift+Enter即可生成<br>-->
空 格<br /><!--在设计页面中按ctrl+shift+space即可生成 -->
内容容器标签
<h1>123，标题格式控制标签，默认自动换行</h1>
<h2>123，默认上下空开一行</h2>
<h3>123，重要性依次减小</h3>
<p>p标签，段落标签若前后有其他，执行上下换行，并空开一行</p>
<font >第一种<div>层标签</div></font><!--默认占一行-->
<font >第二种<span>层标签</span></font><!--默认有多大空间占多大空间-->
<ol>...ordered list---有序列表
<li>默认自带序号</li>
<li>默认自动换行</li>
<li>若前后有其他，执行上下换行，并空开一行</li>
</ol>
<ul>
<li>默认不自带序号</li>
<li>默认自动换行</li>
<li>若前后有其他，执行上下换行，并空开一行</li>
</ul>
常用标签
超链接标签
<a href="http://www.w3school.com.cn" target="_blank">W3School在线教程</a>
第一步:做锚点的标签.<a name="top"></a><!--锚点标签-->
第二步:做锚点链接.<a href="#top">返回最顶端</a>
图片标签
<img src="../图片/My Pictures/无标题12.bmp" title="美景" name="看一看" alt="这是一张图片" width="256" height=""/>
高度跟宽度设置一个即可保持原有比例。
alt在图片无法加载时，显示文字，还可以帮助搜索引擎搜索。
title可以添加图片描述，鼠标放在图片上时可以显示描述。
width:宽度。可以用像素或百分比表示。常用960像素。
border：边框。常用值0。
cellpadding：内容跟单元格边框的边距。常用值0。
cellspacing：单元格之间的间距。常用值0。
align:对齐方式。
bgcolor:背景色。
background:背景图片。
<tr></tr> 行
align：一行的内容的水平对齐方式
valign：一行的内容的垂直对齐方式
height：行高
bgcolor:背景色
background:背景图片
<td></td> 单元格
<th></th> 表头，单元格的内容自动居中、加粗
align:单元格的内容的对齐方式
valign：单元格的内容的垂直对齐方式
width：单元格宽度 只规定第一行的每一列宽度,则剩下的每一列都会自动调整宽度
height：单元格高度
bgcolor:背景色
background:背景图片
内容必须放在单元格里，单元格必须放在行里，行必须放在表格里。设置单元格行高、列高时，会同时影响对应的行或列
单元格合并：（建议尽量用表格嵌套）
colspan="n" 合并同一行单元格（后面写代码要减去相对应的列） n是当前单元格横跨的列数
rowspan="n" 合并同一列单元格（从第二行开始减去对应的列） n是当前单元格纵跨的行数
高度跟宽度设置一个即可保持原有比例。
alt在图片无法加载时，显示文字，还可以帮助搜索引擎搜索。
title可以添加图片描述，鼠标放在图片上时可以显示描述。
练习:制作个人简历
个人简历
<html> ------开始标签
<head>----网页上的控制信息
<title>页面标题</title>
</head>
<body>
页面上显示的内容
</body>
</html>------结束标签
body的属性
bgcolor--------------页面背景色
text-------------------文字颜色
topmargin-----------上页边距
bottomargin--------下页边距
leftmargin-----------左页边距
rightmargin---------右页边距
background---------背景壁纸
格式控制标签
<font color=""#000033"" face="宋体" size="3"></font>----------控制字体
<b>加粗</b>或<strong>加粗</strong>
<i>倾斜</i>或<em>倾斜</em>
<u>下划线</u>
<center>居中显示，默认前面或后面若有其他，直接进行上下换行，保证自身所包含的内容单独存在，然后执行居中</center>
回<br />车<br /><!--在设计页面中按shift+Enter即可生成<br>-->
空 格<br /><!--在设计页面中按ctrl+shift+space即可生成 -->
内容容器标签
<h1>123，标题格式控制标签，默认自动换行</h1>
<h2>123，默认上下空开一行</h2>
<h3>123，重要性依次减小</h3>
<p>p标签，段落标签若前后有其他，执行上下换行，并空开一行</p>
<font >第一种<div>层标签</div></font><!--默认占一行-->
<font >第二种<span>层标签</span></font><!--默认有多大空间占多大空间-->
<ol>...ordered list---有序列表
<li>默认自带序号</li>
<li>默认自动换行</li>
<li>若前后有其他，执行上下换行，并空开一行</li>
</ol>
<ul>
<li>默认不自带序号</li>
<li>默认自动换行</li>
<li>若前后有其他，执行上下换行，并空开一行</li>
</ul>
常用标签
超链接标签
<a href="http://www.w3school.com.cn" target="_blank">W3School在线教程</a>
第一步:做锚点的标签.<a name="top"></a><!--锚点标签-->
第二步:做锚点链接.<a href="#top">返回最顶端</a>
图片标签
<img src="../图片/My Pictures/无标题12.bmp" title="美景" name="看一看" alt="这是一张图片" width="256" height=""/>
高度跟宽度设置一个即可保持原有比例。
alt在图片无法加载时，显示文字，还可以帮助搜索引擎搜索。
title可以添加图片描述，鼠标放在图片上时可以显示描述。
表格与表单
表格
<table></table> 表格width:宽度。可以用像素或百分比表示。常用960像素。
border：边框。常用值0。
cellpadding：内容跟单元格边框的边距。常用值0。
cellspacing：单元格之间的间距。常用值0。
align:对齐方式。
bgcolor:背景色。
background:背景图片。
<tr></tr> 行
align：一行的内容的水平对齐方式
valign：一行的内容的垂直对齐方式
height：行高
bgcolor:背景色
background:背景图片
<td></td> 单元格
<th></th> 表头，单元格的内容自动居中、加粗
align:单元格的内容的对齐方式
valign：单元格的内容的垂直对齐方式
width：单元格宽度 只规定第一行的每一列宽度,则剩下的每一列都会自动调整宽度
height：单元格高度
bgcolor:背景色
background:背景图片
内容必须放在单元格里，单元格必须放在行里，行必须放在表格里。设置单元格行高、列高时，会同时影响对应的行或列
单元格合并：（建议尽量用表格嵌套）
colspan="n" 合并同一行单元格（后面写代码要减去相对应的列） n是当前单元格横跨的列数
rowspan="n" 合并同一列单元格（从第二行开始减去对应的列） n是当前单元格纵跨的行数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!--开始标签--> <head><!--网页上的控制信息--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面标题</title> </head> <a name="top"></a><!--锚点标签--> <body background="../../图片/2005091014411292.jpg" text="#000066" topmargin="100" leftmargin="100" rightmargin="100" bottommargin="400" > <h2>1.1一般标签</h2> <h3>1.1.1格式控制标签</h3> <font color="#6600FF" face="Lucida Console, Monaco, monospace" size="+3">控制字体</font><br /><!--font控制字体,颜色,字体,大小--> <b>加粗</b><br /> <i>倾斜</i><br /> <u>下划线</u><br /><!--必须手动打--> <strong>字体加粗</strong><br /> <em>字体倾斜</em><br /> <center>居中</center><br /><!--默认前面或后面若有其他直接进行上下换行,保证自身所包含的内容单独存在,然后执行居中--> 回<br />车<br /><!--按shift+Enter即可生成<br>--> 空 格<br /><!--按ctrl+shift+space即可生成 --> <h3>1.1.2内容容器标签</h3> <h1>标题1</h1><!--重要性依次减小,默认自动换行,默认上下空开一行--> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <p>段落1</p><!--若前后有其他,执行上下换行,并空开一行--> <p>段落<br /> 2</p> <font >第一种<div style="background-color:blue">层标签</div></font><!--默认占一行--> <font >第二种<span style="background-color:green">层标签</span></font><!--默认有多大空间占多大空间--> <ol type="1">有序列表<!--默认自带序号,自动换行,若前后有其他,上下换行并空开一行--> <li>序号1</li> <li>序号2</li> <li>序号3</li> </ol> <ul type="square" >无序列表<!--不自带序号--> <li>第一</li> <li>第二</li> <li>第三</li> </ul> <h2>1.2常用标签</h2> <h3>超链接标签</h3> <a href="http://www.w3school.com.cn" target="_blank">W3School在线教程</a> <br /> 第一步:做锚点的标签.<br /> 第二步:做锚点链接.<a href="#top">返回最顶端</a><br /> <br /> <br /> 图片标签<br /> <img src="file:///E|/图片/My Pictures/无标题12.bmp" title="美景" name="看一看" alt="这是一张图片" width="256" height=""/>
高度跟宽度设置一个即可保持原有比例。
alt在图片无法加载时，显示文字，还可以帮助搜索引擎搜索。
title可以添加图片描述，鼠标放在图片上时可以显示描述。
<br /> <br /> <h2>1.3表格与表单</h2> <h3>1.3.1 表格</h3> <table width="960" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFF99" > <tr align="center" > <td width="80" height="40"><a href="http://www.baidu.com/index.php?tn=98012088_dg&ch=13">百度</a></td> <td width="80"><a href="http://www.tmall.com">天猫</a>•<a href="http://www.taobao.com">淘宝</a></td> <td width="80" >京东</td> <td width="80">人民网</td> <td width="80">爱奇艺</td> </tr> <tr align="center" > <td width="80" height="40">腾讯</td> <td width="80">搜狐</td> <td width="80">新浪</td> <td width="80">网易</td> <td width="80">乐视</td> </tr> </table> <a href="#top">返回最顶端</a> </body ></html><!--结束标签-->
练习:制作个人简历
<body text="#0000CC"> <center><font size="45">个人简历</font></center> <table width="600"border="1" cellpadding="0" cellspacing="0" align="center"> <tr align="center"height="40"> <td width="85">姓名</td> <td width="120"></td> <td width="85">性别</td> <td width="120"></td> <td rowspan="6"><font size="48">照<br /> 片</font></td> </tr> <tr align="center" height="40"> <td>民族</td> <td></td> <td>出生年月</td> <td></td> </tr> <tr align="center" height="40"> <td>毕业院校</td> <td></td> <td>专业</td> <td></td> </tr> <tr align="center" height="40"> <td>学历</td> <td></td> <td>政治面貌</td> <td></td> </tr> <tr align="center" height="40"> <td>籍贯</td> <td></td> <td>家庭住址</td> <td></td> </tr> <tr align="center" height="40"> <td>联系电话</td> <td></td> <td>电子邮箱</td> <td></td> </tr> <tr> <td colspan="5" align="center" height="30">工作经历</td> </tr> <tr> <td colspan="5" height="180"></td> </tr> <tr> <td colspan="5" align="center" height="30">学习经历</td> </tr> <tr> <td colspan="5" height="180"></td> </tr> <tr> <td colspan="5" align="center" height="30">自我评价</td> </tr> <tr> <td colspan="5" height="180"></td> </tr> </tr> <tr align="center" height="40"> <td>博客地址</td> <td colspan="4"><a href="http://www.cnblogs.com/">http://www.cnblogs.com</a></td> </table>
个人简历
| 姓名 | 性别 | 照 片 | ||
| 民族 | 出生年月 | |||
| 毕业院校 | 专业 | |||
| 学历 | 政治面貌 | |||
| 籍贯 | 家庭住址 | |||
| 联系电话 | 电子邮箱 | |||
| 工作经历 | ||||
| 学习经历 | ||||
| 自我评价 | ||||
| 博客地址 | http://www.cnblogs.com |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 