1.常用标签：超链接<a href="">的属性href，可以连接图片，文件，网址。当是图片或者浏览器可以打开的文件时比如.文档。网页文件时，就不会出现下载。如出现pdf格式等文件时就会出现下载。
2.做锚点：<a name="">做锚点，用<div>涵盖，<a href="#连接name的值">。
3.图片：<img />是一个单标签，插入图片用其src属性，其中属性还有width宽度，height图片高度，alt当图片加载不出来时就会显示其文字，title图片的标题，当鼠标放在上面时就会显示。
4.图片超链接：<a href="http://www.baidu.com">
<img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/57-1511061J428-50.jpg" height="120" width="192" alt="网速慢，加载失败" title="百度www.baidu.com" />
</a>
自我练习常用标签
<!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> <body text="#0000FF"> <a href="http://www.hao123.com">www.hao123.com</a><br /> <a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-14101G41128.jpg" >图片链接</a><br /> <a href="../1028.txt">文件链接，其中一般浏览器可以打开.txt，图片，网页文件不下载，其余的会显示下载</a><br /><br /> <div> <a href="#A">#代表当前页面，当前页面寻找A，所以跳转模块1</a><br /><br /> <a href="#B">#代表当前页面，当前页面寻找B，所以跳转模块2</a><br /><br /> <a href="#C">#代表当前页面，当前页面寻找C，所以跳转模块3</a><br /><br /> <a href="#D">#代表当前页面，当前页面寻找A，所以跳转模块4</a><br /><br /> <a href="#E">#代表当前页面，当前页面寻找B，所以跳转模块5</a><br /><br /> <a href="#F">#代表当前页面，当前页面寻找C，所以跳转模块6</a><br /><br /> </div> <center><img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-150115151924.jpg" width="192" height="108" alt="在图片加载不出来或者网速很慢加载不出来时，就会显示其文字" title="图片的标题" /></center><br /> <center><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/Z3Vlc3Q=_679525.JPG"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/446.jpg" width="136" alt="在页面加载不出来或者网速很慢加载不出来时就会显示其文字" title="亚索VS瑞文,图片" /> </a></center><br /> <center><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/山海经(原文+注解).pdf"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/3279936_181843038207_2.jpg" width="474" height="1024" alt="加载不出来时会显示其文字" title="山海经pdf" /> </a></center><br /> <center><a href="http://www.baidu.com"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/57-1511061J428-50.jpg" height="120" width="192" alt="网速慢，加载失败" title="百度www.baidu.com" /> </a></center><br /> 做锚点 <ul type="circle"> <a name="A"><h2><center>模块1</center></h2></a> <li><p><b>我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你</b></p></li> <a name="B"><center><h2>模块2</h2></center></a> <li><p>我在鼓楼的夜色中为你唱花香自来，在别处沉默相遇和期待，飞机飞过车水马龙的城市，千里之外不离开</p></li> <a name="C"><h3><center>模块3</center></h3></a> <li><p>把所有的春天都融进了一个清晨，把所有停不下的言语变成秘密关上了门，莫名的情愫啊请问谁来将他带走呢，只好把岁月化成歌留在山河。</p></li> </ul> <ol type="1"> <a name="D"><center><h2>模块4</h2></center></a> <li><p>我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你</p><p>我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你</p><p>我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你</p><p>我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你</p></li> <a name="E"><center><h2>模块5</h2></center></a> <li>我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你</li> <a name="F"><center><h2>模块6</h2></center></a> <li>我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你我在二环路的里面想着你，你在远方的山上春风十里，今天的风有吹向你，下了雨，我说所有的酒都不如你</li> </ol> <center><a href="#">当前页面，相当于刷新页面</a></center> </body> </html>
1.<table>表格，其中属性有width（表格宽度，固定像素，百分比），border边框粗细，cellspacing单元格的边距，cellpadding单元格的间距，bodercolor边框颜色。
2.<tr></tr>代表行
3.<td></td>代表列，其中属性有weidth单元格的宽度，height单元格的高度，align水平对齐方式中属性有（left左边对齐，right右边对齐，center居中对齐），valign垂直对齐方式中属性有（top向上对齐，bottom靠下对齐，middle中间对齐），bgcolor背景颜色，rowspan合并单元格（行），colspan合并单元格（列）。
5.<th>做表头的（第一行）。
表格标签，以下是我自己用表格标签做的两个网页
1.
<!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> <body bgcolor="#CCCCCC"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="100"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10%" height="100"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%" nowrap="nowrap">首页</td> <td width="10%" nowrap="nowrap">公司简介</td> <td width="10%" nowrap="nowrap">产品介绍</td> <td width="10%" nowrap="nowrap">公司新闻</td> <td width="10%" nowrap="nowrap">产品图片</td> <td width="10%" nowrap="nowrap">联系我们</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table></td> </tr> <tr> <td height="300"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/vhkhv.jpg" width="100%" height="300" alt="加载不出来哟" title="llalal" /> </td> </tr> <tr> <td height="400"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="33%" height="66">媒体报道</td> <td width="33%" height="66">学校新闻</td> <td width="33%" height="66">通知公告</td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> </table> </td> </tr> <tr> <td height="100" bgcolor="#00FFFF"> </td> </tr> </table> </body> </html>
2.
<!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> <body text="#0000FF" bgcolor="#333333"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="40" align="center">AllenIverson中文网</td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="http://www.nba.com">NBA</a></td> <td><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/。，ll.jpg">CBA</a></td> <td><a href="http://www.baidu.com">MMA</a></td> <td><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4a925477gw1ezyxupdmejj217k1j0gwk.jpg">UFC</a></td> <td><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/955.jpg">WWE</a></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/885.jpg" width="100%" height="360" /> 最新视频</td> </tr> <tr> <td height="160"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="40" bgcolor="#FFFFFF"><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4a925477gw1ezm6s4c6k7j20sa0iudhy.jpg">1999-2000</a></td> <td height="40" bgcolor="#FFFFFF">2000-2001</td> <td height="40" bgcolor="#FFFFFF">2001-2002</td> </tr> <tr> <td height="40" bgcolor="#FFFFFF">76人vs公牛</td> <td height="40" bgcolor="#FFFFFF">76人vs马刺</td> <td height="40" bgcolor="#FFFFFF">76人vs开拓者</td> </tr> <tr> <td height="40" bgcolor="#FFFFFF">76人vs火箭</td> <td height="40" bgcolor="#FFFFFF">76人vs湖人</td> <td height="40" bgcolor="#FFFFFF">76人vs小牛</td> </tr> <tr> <td height="40" bgcolor="#FFFFFF">76人vs湖人</td> <td height="40" bgcolor="#FFFFFF">76人vs黄蜂</td> <td height="40" bgcolor="#FFFFFF">76人vs快船</td> </tr> </table></td> </tr> </table> </body> </html>
原文：http://www.cnblogs.com/AnswerTheQuestion/p/6011495.html