一、HTML4和HTML5的对比
1.什么是HTML5
HTML5是对HTML标准的第五次修订。其主要目标是将互联网语义化，以便更好地被人类和机器阅读，同时更好地支持各种媒体的嵌入。
HTML5有两大特点：首先，强化了Web网页的表现性能；其次，追加了本地数据库等Web应用的功能。HTML5其实是一种统称，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
2.HTML5与HTML4的区别
（1）头部信息更简洁
HTML4 DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5 DOCTYPE声明：
<!DOCTYPE html>HTML4编码方式：
<meta http-equiv="content-type" content="text/html; charset=utf-8" />HTML5编码方式：
<meta charset="utf-8">（2）属性简化
HTML4属性写法：
<input type="checkbox" checked="checked"/>HTML5属性写法：
<input type="checkbox" checked/>注意：如上面两行显示，如果属性和值相同的情况下，直接可以简化为属性即可。
（3）可省略引号
HTML4写法：
<img src="images/img.jpg"/>HTML5写法：
<img src=images/img.jpg/>注意：通常情况下，在标签中属性的值都放置引号中，在HTML5中可以简写为去掉引号。
二、HTML5新特性
HTML5有哪些新特性？
HTML5提供了一些新的具有语义化的标签和属性。这些标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还提供了新的功能性标签，如音频标签和视频标签。下面详细的介绍一下这些特性：
1.取消一些过时的HTML4标记
其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。
HTML5吸取了XHTML2一些建议，包括一些用来改善文档结构的功能，比如，新的HTML标签 header, footer, dialog, aside, figure等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。
2.将内容和展示分离
b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。
3.新增表单控件和功能
HTML5表单中，部分控件提供了验证功能，新增了一些新的空间，如：url、email、tel等。
4.本地数据库
这个功能将内嵌一个本地的SQL数据库，以加速交互式搜索、缓存及索引功能。同时，那些离线Web程序也将因此获益匪浅。
5.新增音频和视频标签
在之前的HTML4，插入视频或音频多数依赖于Flash或其他插件完成，HTML5新增了音频标签和视频标签，能够非常简单的在页面中插入音频或视频。
6.canvas对象
将给浏览器带来直接在页面上绘制矢量图的能力，这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。
三、HTML5新增的标签
1.新增的结构标签
（1）section标签
<section>标签，定义文档中的节，比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。
（2）article标签
<article>是一个特殊的section标签，它比section具有更明确的语义，它代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。例如，一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。article可以嵌套，内层的article标签对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以用article的形式嵌入其中。
（3）aside标签
通常用来描述跟主内容相关，但是又可以独立的内容。比如，以TOPYS网为例，红色的主要内容区是一篇独立的文章，可以使用article标签，右侧的蓝色框可以使用aside标签，该模块展示了与文章相关性的内容，可以是评论也可以是推荐文章等。
（4）header、footer、nav常用语义化标签
在HTML5之前，如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部、底部及其导航部分。在新的HTML5标准中，定义的这些标签（header、footer、nav）帮助你更语义化的定义页面层次和逻辑，我们做网页布局就不仅限于div标签布局了。
这三种标签，顾名思义，就是对文章或区块，定义相关的头部信息、底部信息及导航内容的。
（5）hgroup、figure辅助主体布局标签
hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
2.多媒体标签
（1）audio音频标签
audio音频标签用在网页中嵌入音频文件。语法结构及各属性如下：
<audio src="demo.mp3">您的浏览器不支持audio标签</audio>- src属性
指定音频URL地址，可以是相对的URL也可以是绝对的URL。
<audio src="demo.mp3"></audio>注意：音频可以支持三种格式，分别是wav、MP3、ogg，都是音频格式，而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性：
- controls属性
添加该属性之后，音频播放控件将会显示，控件包括：播放、暂停、定位、音量等。
<audio src="demo.mp3" controls></audio>- autoplay属性
添加autoplay属性并准确赋值时，音频将会自动播放。
<audio src="demo.mp3" controls autoplay></audio>- loop属性
添加loop属性并准确赋值时，音频将会循环播放。
<audio src="demo.mp3" controls loop></audio>- preload属性
可选值有auto（当页面加载后载入整个音频）、meta（当页面加载后只载入元数据）和none（当页面加载后不载入音频），如果设置了前面的autoplay属性，那么preload将会被忽略。
<audio src="demo.mp3" controls preload="auto"></audio>（2）video视频标签
video视频标签就是向页面中嵌入视频元素。
<video src="shipin.mp4">您的浏览器不支持video标签</video>视频标签和音频标签很多属性用法都是一样的，如src、controls、autoplay、loop、preload相同的属性，这里就不做过多的介绍了，下面主要介绍视频独有的一些属性。
- src属性
注意：视频也支持3种格式，分别是WebM、MPEG4、ogg，而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性：
- width、height属性
宽度和高度一般只要指定一个属性即可。如果不知道源视频的大小，两个属性一起修改会把视频比例调整变形，只指定宽度或高度一个属性即可等比例缩放。
<video src="shipin.mp4" controls width="500"></video>- muted属性
规定视频的输出音量被静音。
<video src="shipin.mp4" controls muted></video>- poster属性
规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
<video src="shipin.mp4" controls poster="tu.jpg"> （3）source标签
该标签是对audio和video标签的补充，source标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源，以video视频标签为例，火狐浏览器不支持MP4格式，但是支持ogg格式，因此为了在各种浏览器下都能显示视频，做以下兼容方式：
3.其他功能性标签
（1）details标签和summary标签
- details用于描述文档或文档某个部分的细节。
- summary做为details的标题，标题是可见的，用户点击标题时，会显示出details的详细内容。
语法：
<details>
<summary>这里填写标题文字</summary>
<p>这里填写详细内容</p>
</details>（2）progress标签和meter标签
- progress标签，顾名思义，是一个进度条，有两个常用参数value（表示当前进度）、 max（表示总进度）。
- meter标签的结构类似progress控件，都是设置一个max参数，使用value来指定显示的结果。但它比progress多了几个参数，还可以设置min表示最低量，以及low、high、optimum这些参数来描述数据的状态。
（3）mark标签、cite标签、time标签
- mark标签突出显示部分文本。
- cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
- time标签定义日期或时间，或者两者，格式如下：
<time datetime="2016-10-01">国庆节</time>注意：datetime属性，定义元素的日期和时间，标签内的文字只是展示效果，搜索引擎抓取的事实上是datetime属性内的时间。
（4）canvas标签
canvas标签可以实现在网页中直接绘制复杂的图形，但canvas只是一个图像的容器，使用脚本才能绘制想要的图形，该标签会在HTML5高级中进行讲解。
四、新增的表单控件和属性
1.新增表单特点
表单是HTML中非常重要的一部分，是连接前端与后台的桥梁，它担负大量的用户和网页后台数据更新交互的任务。
因此在HTML5中表单也发生了一些变化，它在保持简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程。
2.新增表单控件
（1）email输入类型
<input type="email" name="youxiang"/>此类型要求输入格式正确的email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。此类型在Opera中必须指定name值，否则无效果。
（2）url输入类型
<input type="url" name="dizhi" />上面代码展示的文本域要求输入格式正确的URL地址，开始处需要添加http://。
（3）日期时间相关输入类型
<input type="date"> <!--格式： 年/月/日 -->
<input type="time"> <!--格式： 时/分 -->
<input type="month"> <!--格式： 年/月 -->
<input type="week"> <!--格式： 年/周 --> 这一系列是很酷的一个类型，完全解决了烦琐的JS日历控件问题。但目前各种浏览器兼容性不是很好，且展示效果也不一样。
（4）number输入类型
<input type="number"/>输入框中只能用来输入数字，不支持其他字符，在输入框上有可以点击的上下按钮。但浏览器支持情况不是很好，IE和Firefox不支持。
（5）search输入类型
<input type="search" results=s />此类型表示输入的将是一个搜索关键字，通过results=s可显示一个搜索小图标。
（6）tel输入类型
<input type="tel" />此类型要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。
（7）color输入类型
<input type="color" /> 此类型可以让用户通过颜色选择器选择一个颜色值，并反馈到value中。
（8）range滑块
<input type="range" max="100" min="0" step="20" value="10">具有返回数值结果的滑块控件，可以调节滑块的最大值、最小值以及渐进程度。
3.新增表单属性
（1）placeholder属性
<input type="text" placeholder="文本框提示文字，点击将会清除">这是一个很实用的属性，免去了用JS实现点击清除表单初始值，标准浏览器都能很好的支持。
（2）required/pattern属性
<input type="text" required pattern="^[1-9]\d{5,12}$">- 表单验证属性，require类型若输入值为空，则拒绝提交
- pattern类型为正则验证，可以完成各种复杂的验证
- 这两种类型在Opera中必须指定name值，否则无效果
（3）autofocus属性
<input type="text" autofocus="true">默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于JS的focus()。
（4）list属性
<input type="text" list="ilist">
<datalist id="ilist">
<option value="值1"></option>
<option value="值2"></option>
<option value="值3"></option>
</datalist>该属性需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。
（5）max/min/step属性
<input type="range" max="100" min="0" step="20" value="10">- max定义最大值
- min定义最小值
- step定义渐进程度
（6）autocomplete属性
<input type="text" autocomplete="on">autocomplete属性规定表单是否应该启用自动完成功能。默认值是"on"，为自动补全，如果为"off"则是关闭自动补全功能。
五、HTML5标签的兼容
1.HTML5兼容说明
现如今越来越多的站点开始使用HTML5标签，但是难免有一些客户的电脑系统老旧，浏览器版本比较低，仍然使用IE6-IE8版本的浏览器，HTML5标签对这些老版本的浏览器不支持。如果想让你的网站使用HTML5标签，但是又想兼容低版本的浏览器，下面推荐几种方法，供大家选择。
2.使用html5.js插件兼容（推荐）
<!--[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]-->可以直接将以上代码放置在<head>标签内部，即可完成HTML5标签的兼容。该插件放置在Google code project上提供给大家，是可以直接调用的。当然，如果觉得这样会影响你的网页打开速度，也可以把html5.js文件直接下载下来，然后上传到自己的服务器单独调用。
以下是html5.js文件中的代码：
/*
HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);这种方法是推荐大家使用的方法，操作比较简单，只需要引入html5.js即可完成兼容。
3.为低版本浏览器创建专属页面
很显然这种方法稍微逊色一些，原理就是通过JS判断浏览器版本，专门为低版本浏览器创建一个不使用HTML5标签的页面，而高版本就直接运行HTML5标签即可。这种方法只是一种解决方式，需要用到JS脚本，在这里就不为大家讲解，大家只需要知道有该种兼容的思路即可。