html主要语义化标签（一）

一、a标签：

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

2、邮箱和电话：yyy;  ttt

3、到页面中的某个位置；顶部/尾部；

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

二、列表：

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

三、引用：

1、xxx；行内引用；比如一个段落(

)中的一句话；

2、

llll

；块状引用，引用的内容是一个（或几个）段落，一个列表等;块状元素，自成一段；当只引用一段内容的时候，中间可以不带

标签；

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

四、计算机代码展示

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

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

大量代码

；

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

按 Ctrl/Cmd + A 选择全部内容。

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

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

五、地址和时间：

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

标签包围，可以用
换行；

         注意两点（1）当一个地址和此（作者）无关的时候，应该用

，而不是

; （2）此元素中，不能包含和联系信息无关的任何信息；比如出版时间。应该用标记；

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

我在 情人节有个约会。

六、图像

1、img：此标签不仅是一个空标签（不需要包含文本内容，不需要闭合标签）；还是和

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

2、figure：此元素的内容可以是一张图片、视频、代码等；主要作用是用来进一步丰富、修饰主题内容的（比如文章中插入一张图片）；其内容和主题相关，但如果删除，则不会影响主体内容。（将图片独立于P之外，为图片提供语义）

此元素一般与figcaption元素一起配合使用；

3、figcaption：用于描述figute元素中的数据（图片、视频、代码等）的说明/标题;所以说，figcaption一般都是放在figure元素中的第一个或者最后一个元素中；（与img中的alt属性不同的是，alt属性是在图片未能加载显示的时候出现展示，而figcaption则不管数据内容是否加载展示，都会显示）

七、视频和音频

1、vidoe视频：

2、audio音频：

3、track显示音频轨迹文本；作用是使播放的视频带上字幕，方便听不懂视频中的语言或者想静音（周边环境比较糟乱）的人士体验；

字幕文件一般有两种格式；

•  WebVTT : Web Video Text Track  (Web视频文本轨道----后缀名是vvt)
•  TTML : Timed Text Markup Language (时序文本标记语言----用xml格式编写的文件)

上述标签含义：在播放“video.MP4”文件的时候，加入上字幕；

• 一个是中文字幕，一个是英文字幕（srclang属性指的是编写字幕文件所选择的语言------主要是给浏览器看，播放器不使用这个属性）；
• 用户可以选择两种字幕（label属性：用户可以用来切换选择中文还是英文字幕，也可以有程序脚本切换------label在播放器中会使用这个属性的，主要供用户进行选择、切换）；每个字幕元素（track）必需设置一个唯一不重复的label标签；
• 此字幕默认的是英文字幕（default属性决定）；一个视频文件（几个track）中，只能有一个default；如果都没有指定，则不会自动显示字幕；

其中kind属性是定义字幕内容的类型的；用户可以根据不同的需求，来显示不同的字幕内容；主要有以下几种：

• subtitles：主要作用翻译来用，比如视频里面是说的是英文，听不懂英文，可以选择subtitles作为字幕翻译成熟悉的语言；
• captions：主要作用是理解展示说明视频中的内容；比如不想开启音频、在吵闹环境中，或者听觉有障碍的人士；
• descriptions：通过音频描述视频的内容；比如在视频不可见的场景，或者视觉有障碍的人士；
• chapters：定义章节（标题）;用于用户浏览媒体资源的时候；（导航媒介资源）
• metadate：定义脚本使用的内容（track），对用户不可见；

此外：需要注意以下几点：

1. 当kind的属性是subtitles（翻译）的时候，则必须指定srclang；
2. 默认的时候，kind的属性是subtitles；
3. 一个media 元素的任意两个 track 子元素不能有相同的 （kind, srclang） 和 label属性；

八、外部资源、文件嵌入到网站中：

      比如我们没有实力构造一个地图，可以把现成的诸如百度地图嵌入到页面中；我们也可以自己的视频资源，可以把优酷视频嵌入到自己的网站页面中；

1、iframe：

主要有以下几个属性：

• width和height：指定iframe的宽和高；
• frameborder：默认是1，显示此iframe框架和其他框架间绘制边框；如果设置0，则删除框架周围边框（推荐用css设置；border：none）
• allowfullscreen：如果设置，

  十、响应式图片

  主要解决的问题：

  1. 分辨率切换：当用小屏设备浏览网页时候，没有必要在加载pc端的大图了，节省带宽；同样，在pc上加载移动端小屏幕的图像的时候，会出现拉伸，模糊、有颗粒感；（）
  2. 艺术方向切换：更改图像以及适应不同的图像显示的尺寸；比如，在pc端我们看到一个大图，横向的、中间有个人；然后在移动端浏览这个网页时候，照片非常小，人物更小；这种情况，在移动端可以设置一个新的图片，使人物大小看起来合适；

  分辨率切换（相同的图片内容---这里是内容不是尺寸、不同的分辨率）

  1、不同的尺寸，不同的分辨率；

  根据这些信息，浏览器执行过程如下：

  1. 查看设备宽度；
  2. 根据设备的宽度，检测sizes列表中媒体条件第一个为真的项；
  3. 查看给予该媒体查询的槽大小（媒体条件第一个为真的项中后面的像素大小）
  4. 加载srcset列表中引用的最接近所选的槽大小的图像；

  2、相同的尺寸，不同的分辨率；

  
  	 
  	 
  	 
  	 
  	 
  	 img {
        width: 320px;
      }

  艺术方向切换：

  主要注意以下几点：

  • 这个也是检测的第一个媒体条件为真的时候，加载对应的图片；
  • source当中的也可以使用sizes属性,但是有了media时候，sizes属性中也就不要在提供媒体条件了；
  • 必须提供一个img元素，以备浏览器不支持的时候使用

  为什么我们不能使用 CSS 或 JavaScript 来做到这一效果?

  因为你不能先加载好 元素后, 再用 JavaScript 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。

  使用现代图像格式（如：WebP和JPEG-2000）

  需要注意以下几点：

  • 使用type属性的类型，以便浏览器方便的检测到是否支持，如果支持，则直接跳过下面的检测，并加载；
  • media是用来解决艺术方向问题的（不同的设备，取不同图的内容）；这个例子是浏览器根据支持的type（类型）加载图片；
  • 如果必要，也可以在srcset和sizes中使用逗号分割的列表