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

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

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

七、视频和音频

1、vidoe视频：

	 <video controls width="320" height="223" muted loop  preload="auto" poster="./images/0000.jpg"  >
		<source src="./video/0000.mp4" type="video/mp4">
		   <!--这个是因为浏览器只支持识别部分视频的格式，所以为了各个浏览器都能兼容、播放显示，放置多个不同格式的视频-->
		<source src="./video/0000.webm" type="video/webm">
		   <!--这个添加type类型的属性，是为了方便浏览器进行检查，一旦检查到它支持的格式，则直接跳过后面的格式文件，否则还要逐个加载视频文件(检查)，浪费时间-->
		<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
		  <!--这个p标签称为后背内容，当浏览器不支持video的时候，他会显示出来-->
	 </video>
	 <!--- <video>标签中的6大属性：
	      1、width和height：定义了页面中视频展示播放窗口的大小（当然css也可以控制视频尺寸）；
		2、controls：控制器；浏览器提供的控制接口；包括不限于：开始、暂停、调节音量、拉快等等；
		3、autopaly：页面在加载的过程中自动播放（甚至页面中其他版块内容还未加载完都已开始播放）；体验不好，，建议不用此属性；
		4、muted：添加这个属性的时候，当视频在播放的时候，默认的是静音（声音未开启）；
		5、loop：添加这个属性后，会进行循环播放视频；
		6、preload：预加载；此属性可有3个值选择； （如果使用了autoplay属性后，则忽略该属性）
		         .none:告诉浏览器，该视频在页面加载后，不需要预先加载视频；
			   .matadate:告诉浏览器，该视频在页面加载后，后台只需要预先加载（缓存）视频的元数据；
			   .auto:告诉浏览器，在页面加载中，预先缓存加载视频文件，准备播放；
		7、poster：这个属性指向一个（url）图片，是在点击播放按钮前、视频下载时显示的图片（同preload一样，如果使用了autoplay，就看不到poater呈现的图片效果了）
	 ---->

2、audio音频：

	 <audio controls muted loop preload="auto">
	    <source src="./audio/viper.mp3" type="audio/mp3">
		<source src="./audio/viper.ogg" type="audio/ogg">
		<p>目前你的浏览器不支持audio标签</p>
	 </audio>
	 <!---audio标签的一些说明（大致和video一样）
	    1、由于audio标签只需要显示控制音频的控件就可以了，没有视觉部件，所以也需要再设置width和height属性了；
		   （谷歌浏览器默认的 音频控件大小为300*54px；并且作为内联元素进行展示）；
		2、和video相比；由于没有视觉部件，不需要width和height属性了，也就不再需要poster属性设置了；
	 -->

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

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

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

	 <video id="mainvideo" src="video.mp4" type="video/mp4" controls autoplay loop>;  
           <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>  
           <track src="cn_track.vtt" srclang="zh-cn" label="简体中文" kind="caption">  
      </video> 

上述标签含义：在播放“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：

	 <iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=235d82cec8b9605c9b428ae67943648c&tvId=2128764600&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%" >
	      <!----将爱奇艺视频嵌入到页面中---->
	   <p> <a href="#">Fallback link for browsers that don't support iframes</a></p>
	        <!---此处也是"备选内容"；当浏览器不支持iframe的时候，他会显示出来---->
	  </iframe>

主要有以下几个属性：

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

同时：iframe嵌入也存在不少安全问题：

• 如果，自己的网站内容，被iframe嵌入到了其他网页，则会占用消耗自己网站大量的带宽；
• 如果，黑客将隐藏的iframe嵌入到您的文档中，并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

提高安全性，可以从以下几方面入手：

• 始终在iframe中使用sandbox属性，即：启用一系列对 <iframe> 中内容的额外限制；
• 使用https；
• 配置CSP指令

2、embed和object元素； 目前用的很少已经；

     定义嵌入的内容，如flash插件、pdf、外部应用等等；

下面是一个用object嵌入dpf文档的例子；

<object data="mypdf.pdf" type="application/pdf"width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file. </a></p>
</object>

九、嵌入矢量适量图：svg；

       svg------用XML语言来描述二维图形或者绘图程序的语言；（svg，利于用xml绘制矢量图）

	<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
	  <rect width="100%" height="100%" fill="black" />
	  <circle cx="150" cy="100" r="90" fill="blue" />
   </svg>
   <!----此代码为一个黑色的方块和一个绿色的圆--->

以下几种方式可以将svg矢量图，嵌入到网页中；

1、用img标签添加svg图片

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

        可能有的浏览器会不支持svg，这个时候，可以添加两个图片，一个是旧版浏览器支持的png/jpg格式的图片（用src属性）；一个是svg图片（用srcset属性）；如果浏览器支持svg格式的图片，则会直接加载svg格式的图片；

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

2、直接将<svg>标签放到html中（svg图片本身就是有xml格式的绘制成的，可以保持成.svg格式图片。也可以用xml代码表示）

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

3、用iframe将svg嵌入到页面中；

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

十、响应式图片

主要解决的问题：

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

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

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

 <img srcset="elva-fairy-320w.jpg 320w,
                 elva-fairy-480w.jpg 480w,
                 elva-fairy-800w.jpg 800w"
         sizes="(max-width: 320px) 280px,    //这里顺序很重要，因为浏览器查看到设备宽度后，检测到sizes列表的媒体第一个为真后，往下则不在执行 
                (max-width: 480px) 440px,
                800px"      //默认，也就是说设备宽度大于480的时候，选它
		 src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">   
		 <!--当浏览器不支持上面的时候，加载src-->

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

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

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

<img srcset="elva-fairy-320w.jpg,         //默认1x，可忽略；
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
	 
	 <!---此时不再需要sizes；因为浏览器直接检测了设备显示器的分辨率；-->
	 <!--因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，elva-fairy-320w.jpg会被加载-->
	 <!-- 如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，elva-fairy-640w.jpg 会被加载。-->
	 
	 img {
      width: 320px;
    }

艺术方向切换：

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

主要注意以下几点：

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

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

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

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

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

需要注意以下几点：

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