<!--
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>
