1.什么是语义化标签?(就是用合理、正确的使用标签来展示内容)
那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，
网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等。
2.为啥使用语义化标签?
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
兼容性更好，支持更多的网络设备
3.html语义化标签
1):<a>标签:实现超链接
强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
2):<p>标签:文章段落放到<p>标签中
3):<hx>标签:文章标题,栏目标题用<hx>表示
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
4):<strong>和<em>标签:特别强调某几个文字
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
5):<q>标签:短文本引用
注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号
6):<blockquote>标签:长文本引用
注意浏览器对<blockquote>标签的解析是缩进样式
7):<address>标签:为网页加入地址信息
8):<ul>标签:无序列表
9):<ol>标签:有序列表
10):<caption>标签:为表格添加标题和摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题用以描述表格内容，标题的显示位置：表格上方。
语法：<caption>标题文本</caption>
4.Html5语义化标签
html5相较于之前的版本提供了一些新的语义化标签，下面进行总结下。
1. <header>
定义了文档的头部区域，在一个文档中可以定义多个<header>元素。它是块元素
<header>
<p>这是文档的头部</p>
</header>
2.<footer>
定义文档页脚，它不只是页面的最底部，在文档中也可以定义多个。
<header>
<address>南京鼓楼</address>
</header>
3.<article>
定义页面独立的内容区域，标签定义的内容本身必须是有意义且必须独立于文档的其他部分，可用在的地方：博客文章，新闻，评论等。
<article>
<h2>五一劳动节</h2>
<div>
今天是五一劳动节
</div>
</article>
4.<aside>
定义页面的侧边栏内容
<aside>
<ul>
<li>腾讯</li>
<li>阿里</li>
<li>百度</li>
</ul>
</aside>
5.<time>
定义时间或日期，time标签中的datetime属性定义的时间不会被显示，但可能被其他应用使用
<time datetime="2018-01-17">今天是我生日</time>
6.<ruby>
加注释，ruby标签有两个子元素，rt注释的内容，rp是该标签不显示时显示的文字
<ruby>
人<rt>ren</rt>
<rp>该标签无法显示</rp>
</ruby>
7.<details>
用于描述文档或者文档某一部分细节，summary是details元素的标题
<details>
<summary>点击查看更多</summary>
<p>这是点击后的内容</p>
</details>
8.<mark>
定义带有几号的文本，它会给你想要突出显示的文本加个 背景色
<p>我最喜欢<mark>数学</mark></p>
9.<nav>
定义导航栏
<nav>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>
<nav>
10.<progress>
progress显示数据的进度，属性value指定当前值，max最大值，最小值0不用设置
<progress value="30" max="100"></progress>
11.<section>
section一般有两个作用，1.定义文档中的节，和div类似。2.定义文章，这时一般带有标题
<section>
<h1></h1>
<p></p>
</section>
12.<video>
定义视频，属性src引入资源，controls视频的控制控件
<video src="" controls="controls">你的浏览器不支持video标签</video>
以防用户浏览的视频不支持某些格式的视频，可以为用户多准备些格式的视频,目前支持的视频格式video/ogg，video/mp4，video/webm其他格式需要转换
<video controls="controls">
<source src="" type="video/ogg">
<source src="" type="video/mp4">
<source src="" type="video/webm">
你的浏览器不支持video标签
</video>
13.<audio>
该标签可定义声音，及其他的音频文件，不加controls不显示音频的控制界面
<audio src="" controls="controls">你的浏览器不支持audio标签</audio>
<video controls="controls">
<source src="xx.ogg" type="audio/ogg">
<source src="xx.mp3" type="audio/mpeg">
你的浏览器不支持audio标签
</video>
目前音频可用类型audio/ogg，audio/mpeg
14.<datalist>
提示可能的值，datalist及其选项不会被显示出来，它仅仅是合法输入值的列表使用input元素的list属性来邦定datalist，下面选项使用option定义
<input type="text" list="cars">
<datalist id="cars">
<option value="宝马"></option>
<option value="奔驰"></option>
<option value="奥迪"></option>
</datalist>
15.<embed>
定义插入的内容，如插件，flash，标签中间不要加内容会显现出来
<embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash">
</embed>
16.<canvas>
canvas画布只是个容器，你可以通过控制坐标在canvas上绘制图形，一般配合js可以实现非常复杂的动画效果
Forms
email : 电子邮箱文本框，跟普通的没什么区别,当输入不是邮箱的时候，验证通不过.移动端的键盘会有变化
tel : 电话号码,移动端的键盘
url : 网页的URL
search : 搜索引擎
range : 特定范围内的数值选择器
min、max、step( 步数 )、value
用JS来显示当前数值
新的表单特性和函数
placeholder : 输入框提示信息
例子 : 密码框提示
autocomplete : 是否保存用户输入值默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填，不能为空带有必填字段的表单
Pattern : 正则验证 pattern="\d{1,5}“
formaction 在submit里定义提交地址
五、HTML5相比HTML新增了哪些功能？
- 简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写<!doctype html>就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。
- 更加语义化标签(开发者可以更加优雅，网页结构更清晰)
header、footer、nav、article、figure...但这些表情不兼容ie6-8，（兼容处理：html5.min.js；）
- 新增<audio> 和<video> 标签
这两个标签可能是HTML5里面最有用的两个标签了。从意思上不难理解，这两个标签是用来播放音频和视频的。
- 表单元素的升级
传统的表单元素：form、laber、textarea、select、button...
input（text、password、radio、checkbox、file、submit、reset、button）
Html5给input新增加一些类型（search、email、number、tell、range、color、date）
升级：给表单元素新增加属性placeholder（给表单元素设置提示信息）
升级：提供了新的下拉框方式
- 新增canvas标签
我们可以基于js，把它作为一个画布，绘制出想要的图形或者动画，Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能。
Echarts图表插件（http://echarts.baidu.com），它是基于canvas实现
删除<b> 和<font> 标签
删除<frame>, <center>, <big> 标签
新增一些API（主要是供js使用的）
webstorage：localStorage、seessionStorage 本地存储解决方案
web socket：新的客户端和服务器端通信方案
获取地理位置或者重力感应等API
