<!-- a：
a{ /*清除a标签的下划线*/ text-decoration: none; }
（1）超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地址 _blank 在空白的页面打开连接地址 （2）标签内部跳转 锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。 如果有href = # 表示返回置当前页页首，相当于刷新，编写时应避免，应该使用 javascript:void(0) img src:连接的图片资源 alt:图片资源加载失败。显示的文本 a 标签与img标签连用 实现图片点击跳转页面 标签可以装 img 但会出问题 即 a标签会出现在图片下边一行空行 所以只有将a标签设置于图片一样大小才不会出问题。先把a标签变成行内块 才能设置大小 ul: unordered list 无序列表 ul下的子元素只能是li 可设计多级列表 默认变成不同心(用处很广泛 将来去除列表的标志可以做很多事情) li type='circle' 圆心 type='square' 方块 ol: ordered list 只能是li dl：定义列表 dt:定义标题 dd:定义描述 在标题后有缩进 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签的使用</title> <style type="text/css"> a{ display:inline-block; width = 300px; height = 300px; } </style> </head> <body> <!--a 标签可以装 img 但会出问题 即 a标签会出现在图片下边一行空行 所以只有将a标签设置于图片一样大小才不会出问题--> <!--先把a标签变成行内块 才能设置大小--> <a href="https://www.baidu.com/"> <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" alt="图片加载失败显示文字" width="300" height="300"> </a> <!--锚点 这种写法尽量避免--> <a href="#">点击刷新 返回顶部</a> <!-- hash值 锚点 默认有点击行为 javascript:void(0);阻止a标签的默认点击行为--> <a href="javascript:void(0);">阻止a标签的默认点击行为</a> <!--ul + li 列表标签ul只能装li type="circle" 圆心 type="square"方心 --> <ul> <li type="circle">一级列表</li> <li type="square">一级列表</li> <li>一级列表 <ul> <li>二级列表</li> <li>二级列表 <ul> <li>三级列表</li> </ul> </li> </ul> </li> </ul> <!--ol + li 默认显示 1 1 1 1编号--> <ol> <li>ol一级 <ol> <li>二级</li> </ol> </li> </ol> <!--ol + li 显示编号形式type 选择编号格式 start设置开始编号默认从1开始--> <ol type="i" start="3"> <li>ol一级 <ol type="1" start="1"> <li>二级</li> </ol> </li> </ol> <!--dl + dt + dd 这表示dt的作为标题 --> <dl> <dt>dl+dt表格标签一</dt> <dd>dl+dt表格标签二</dd> <dd>dl+dt表格标签三</dd> <dd>dl+dt表格标签四</dd> </dl> </body> </html>