html主要语义化标签（一）

一、a标签：

1、基本格式：<a href=" ">xxx</a>；属性：title（提示信息），target(打开方式)（同<base target="_blank" />）；download（链接代表的是下载地址）；media（链接是为某个媒体设备设置优化的）；

2、邮箱和电话：<a href="mailto:sunliu001@16.com ">yyy</a>;  <a href="tel:40012345656 ">ttt</a>

3、到页面中的某个位置；<a href="#name">顶部/尾部</a>；

4、四大伪类：a:link(初始，未被点击时)；a:visited(链接被点击后);a:hover（鼠标移动到链接时候；此伪类也使用于其他标签，比如img的伪类，变亮；tiansition--transform scale等等）a:active(正在点击时候)；

二、列表：

1、ul无序列表；ol有序列表；dl（dt/dd）描述（定义）列表(一组项目及其相关描述；如术语和定义、问题和答案)；

三、引用：

1、<q>xxx</q>；行内引用；比如一个段落(<p>)中的一句话；

2、<blockquote><p>llll</p></blockquote>；块状引用，引用的内容是一个（或几个）段落，一个列表等;块状元素，自成一段；当只引用一段内容的时候，中间可以不带<p>标签；

3、cite：有两个用法；（1）作为引用标签中(q/blockquote)的属性，指明指明来源的url（此时浏览器窗口不会显示）；（2）自己作为一个独立的标签，说明引用来源的名称（书名、人名）；

四、计算机代码展示

1、code:标记计算机代码；一行的时候可直接使用；如果是多行代码，由于存在大量空白和缩进，需要和pre配合；

2、pre：由于浏览器不能识别大量的空白换行等，此时则粗腰pre原样显示; <pre><code>大量代码</code></pre>；

3、kbd：标记（用户通过）键盘（或其他设备）输入元素；将产生一个行内元素；

<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

4、samp：标记计算机程序的输出；

5、var：标记表示变量的名称；

五、地址和时间：

1、address：标记文档或者文章作者的联系信息。浏览器默认呈现的字体倾斜，如果不想使用此默认字体，可在css中需改。一般此标签里可以直接写本文，不用再用<p>标签包围，可以用<br/>换行；

         注意两点（1）当一个地址和此（作者）无关的时候，应该用<p>，而不是<address>; （2）此元素中，不能包含和联系信息无关的任何信息；比如出版时间。应该用<time>标记；

2、time：标记时间；该元素标签不会在浏览器呈现任何效果； 属性：datetime表示此元素的日期和时间；

<p>我在 <time datetime="2008-02-14">情人节</time>有个约会。</p>

六、图像

1、img：此标签不仅是一个空标签（不需要包含文本内容，不需要闭合标签）；还是和<video>一样是个替换标签（因为元素的内容和尺寸均有外部资源提供 ，而不是元素本身）；

在img标签属性中，最好设置width和height属性（有利于加载流畅）；但是这里应根据img设置的宽和高，再选择并剪切成一样大小的图片（这样不会使图片过于拉伸或者加载过大的图片，浪费流量）；

2、figure：此元素的内