1、HTML语义化⑴、什么是语义化?首先标签语义化是指HTML，不是CSS, HTML是标签，CSS是属性标签语义化是让大家直观的通过标签(markup)和属性(attribute)来知道其用途和作用实例：看到img知道是图片，虽然通过div也能...

1、HTML语义化

⑴、什么是语义化?

首先标签语义化是指HTML，不是CSS, HTML是标签，CSS是属性
标签语义化是让大家直观的通过标签(markup)和属性(attribute)来知道其用途和作用
实例：看到img知道是图片，虽然通过div也能实现其功能, 但是缺乏可读性

⑵、语义化的好处

即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构
语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意译的方式来渲染网页
提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
便于团队开发和维护，语义化更具可读性
通常语义化HTML会使代码变的更少，使页面加载更快

⑶、主要语义化标签

①、a标签

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

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

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

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

②、列表

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

③、引用

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

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

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

④、计算机代码展示

code: 标记计算机代码；一行的时候可直接使用；如果是多行代码，由于存在大量空白和缩进，需要和pre配合
pre：由于浏览器不能识别大量的空白换行等，此时则粗腰pre原样显示

<pre><code>大量代码</code></pre>

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

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

amp：标记计算机程序的输出
var：标记表示变量的名称

⑤、地址和时间

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

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

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

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

⑥、图像

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

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

figure：此元素的内容可以是一张图片、视频、代码等；主要作用是用来进一步丰富、修饰主题内容的（比如文章中插入一张图片）；其内容和主题相关，但如果删除，则不会影响主体内容。（将图片独立于P之外，为图片提供语义) 此元素一般与figcaption元素一起配合使用
figcaption：用于描述figute元素中的数据（图片、视频、代码等）的说明/标题；所以说，figcaption一般都是放在figure元素中的第一个或者最后一个元素中；（与img中的alt属性不同的是，alt属性是在图片未能加载显示的时候出现展示，而figcaption则不管数据内容是否加载展示，都会显示）

⑦、视频和音频

视频video

	 <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呈现的图片效果了）
	 ---->

音频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属性设置了；
	 -->

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

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

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

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

⑨、嵌入矢量适量图

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>
    <!----此代码为一个黑色的方块和一个绿色的圆--->

用img标签添加svg图片

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

直接将< svg >标签放到html中（svg图片本身就是有xml格式的绘制成的，可以保持成.svg格式图片。也可以用xml代码表示）
```
<svg width="300" height="200">
	<rect width="100%" height="100%" fill="green" />
</svg>
```

用iframe将svg嵌入到页面中

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

⑩、布局

⑷、所以需要我们注意些什么?

尽可能少的使用无语义的标签div和span
在语义不明时，避免使用div，尽可能用p, p在默认情况下有上下间距，对兼容特殊终端有利
不要使用纯样式标签，如：b、font、u等，改用css设置
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）

HTML面试题

1、HTML语义化

⑴、什么是语义化?

⑵、语义化的好处

⑶、主要语义化标签

①、a标签

②、列表

③、引用

④、计算机代码展示

⑤、地址和时间

⑥、图像

⑦、视频和音频

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

⑨、嵌入矢量适量图

⑩、布局

⑷、所以需要我们注意些什么?

2、HTML语义化

基础教程推荐