目录
目录
一、HTML5概要
1.1、为何须求HTML5
HTML4陈旧不能知足日益发展的互联网须求，越发是运动互联网。为了升高浏览器作用Flash被大面积选拔，但安全与平稳堪忧，不符合在移动端应用（耗电、触摸、不开放）。
HTML5增强了浏览器的原生成效，符合HTML5业内的浏览器功用将尤其强劲，减弱了Web应用对插件的借助，让用户体验更好，让开发尤其方便，别的W3C从生产HTML4.0到5.0之内共经历了17年，HTML的变动很小，那并不符合一个好产品的反复不定规则。
1.2、什么是HTML5
HTML5指的是包涵HTML、CSS和JavaScript在内的一套技术结合。它仰望可以裁减网页浏览器对于要求插件的丰盛性网络应用服务（Plug-in-Based
Rich Internet Application，RIA），例如：AdobeFlash、Microsoft
Silverlight与Oracle
JavaFX的要求，并且提供更加多能有效加强网络利用的标准集。HTML5是HTML最新版本，二〇一四年五月由万维网联盟（W3C）完结专业制定。目的是替换1999年所制定的HTML
4.01和XHTML
1.0业内，以期能在互联网选拔急忙发展的时候，使网络正式达到非凡当代的网络须要。
1.3、HTML5现状及浏览器协理
半数以上主流浏览器已经支撑HTML5，不过各种浏览器帮忙的措施以及语法有所差别性。扶助Html5的浏览器包罗Firefox（火狐浏览器），IE9
连同更高版本，Chrome（谷歌浏览器），Safari，Opera等现代浏览器。
支撑得分：
设若想精通更加多请看本文的包容性那一节的内容。
PC端（总分555分）：
平板（总分555分）：
移动（总分555分）：
1.4、HTML5特性
HTML5 三个特征体系对应的8个Logo
语义网、离线&存储、设备访问、通讯
多媒体、图形和特效、性能和集成、展现（CSS3）
1.4.1. 语义特性（Class：Semantic）
HTML5给予网页更好的意义和社团。越发丰硕的价签将趁着对RDFa的。
1.4.2. 本土存储特性（Class: OFFLINE & STORAGE）
HTML5 APP Cache、本地存储作用、IndexedDB、FileAPI
1.4.3. 装置访问特性 (Class: DEVICE ACCESS)
为活动支付而生。动力感应、全世界地理定位、麦克(Mike)风、视频头
1.4.4. 老是特性（Class: CONNECTIVITY）
WebSocket、Server-Sent 伊夫nts完结双向连接，音信推送
1.4.5. 网页多媒体特性( Class: MULTIMEDIA）
支撑网页端的奥迪o、Video等多媒体作用。
1.4.6. 三维、图形及特效特性（Class: 3D, Graphics & Effects）
这一招将Flash战胜，图形增强，SVG，Canvas，WebGL，2D/3D游戏和页面视觉特效。
1.4.7. 性质与集成特性（Class: Performance & Integration）
尚无用户会永远等待你的Loading，HTML5日增WebWorker、XMLHttpRequest2
1.4.8.呈现（CSS3/styling)
而外DOM接口，HTML5充实了越多样化的应用程序接口（API）：
HTML5Canvas API：有关动态出现与渲染图形、图表、图像和卡通的API
HTML5音频与视频：HTML5里新增的因素，它们为开发者提供了一套通用的、集成的、脚本式的拍卖音频与录像的API，而无需安装任何插件
离线存储数据库（离线网络应用程序）
编辑
拖放
跨文档通讯
通信／网络
Communication APIs：构建实时和跨源（cross-origin）通讯的两大基础：
跨文档通讯（Cross Document Messaging）与XMLHttpRequest Level 2。
浏览历史管理
MIME和商谈进度时表头登记
微数据
网页存储
上述技术即使是WHATWG HTML表明文档的始末，但并没有任何概括在W3C
HTML5的认证文档里。一些相关的技术，像上面所列的，并从未包蕴在那2份文档中的任何一份中。W3C给这个技术单独出版了认证文档。
Geolocation
API：用户可共享地理地方，并在Web应用的声援下享用地点感知服务（location-aware
services）
目录数据库API（Indexed Database API，之前为WebSimpleDB）
文本API：处理公事上传和操纵文件
目录和文件系统：那个API是为着满意客户端在并未好的数据库援救情形下存储要求
文本写入：从网络应用程序向文件里写内容
一个广泛的误会是HTML5能够在网页中提供动画效果，那是颠三倒四的，动画效果是亟需合作JavaScript和CSS。但是静态HTML5协作CSS可以代表出覆杂的排版结构而且原生帮衬与录像的交集与操纵（控制一般由JavaScript运行），因而不难可以把HTML5单位时间的事态了然为动画片的关键帧。
1.5、HTML5亮点与缺点
1.5.1、优点
1、网络正式统一、HTML5本身是由W3C推荐出来的。
2、多设备、跨平台
3、即时更新。
4、升高可用性和革新用户的友爱体验；
5、有多少个新的标签，那将助长开发人士定义主要的情节；
6、能够给站点带来愈多的多媒体元素(录像和音频)；
7、可以很好的替代Flash和Silverlight；
8、涉及到网站的抓取和目录的时候，对于SEO很和气；
9、被大批量使用于移动应用程序和游乐。
1.5.2、缺点
a)、安全：像以前Firefox4的web
socket和透亮代理的贯彻存在严重的六盘水题材，同时web storage、web socket
那样的功效很不难被黑客利用，来盗窃用户的音讯和素材。
b)、完善性：许多特点各浏览器的援救程度也不一样。
c)、技术门槛：HTML5简化开发者工作的还要代表了有广大新的特性和API须要开发者学习，像web
worker、web socket、web storage
等新特色，后台甚至浏览器原理的文化，机遇的同时也是伟大的挑衅
d)、性能：某些平台上的发动机问题导致HTML5性质低下。
e)、浏览器包容性：最大毛病，IE9以下浏览器大致全军覆没。
1.6、HTML5意义体现
HTML5对于以前版本的话，并非不难的本子升级，而是五遍周密的框架和性能的擢升与优化；那展现在：语法更简便易行、新增了大量的语义性标签、强大的canvas元素代替flash、丰裕的API接口使用极大便利了开发者与浏览器的相互。其中，关键升高在于：基于HTML5强硬的新扩大框架，如手机端设备与页面进行交互，如引力感应、地理定位、离线操作等，
在主流移动端平台，可以很轻松地自定义性能强劲的webapp，包罗游戏、动画和商家级的运用开发。
1.7、HTML5读书与开发工具
1.7.1、基础要求
HTML+CSS+JavaScript与任何一种Web服务器后台技术如（Java,dotNET,PHP)
1.7.2、开发工具
主流浏览器，如Chrome浏览器、Firefox浏览器、Safari浏览器、IE9+浏览器、IETester等
HTML5对开发工具并没有界定，任意的文件编辑器都得以如：webstorm/notepad++
- zendcode /textMate + zendcode / sublime 2，Visual Studio2013+，Visual
Studio Code，HBuilder等
借使习惯了eclipse的情侣可以运用HBuilder，eclipse实在不适合用于写前端脚本（4千万美刀的东西…），
HBuilder是DCloud（数字天堂）推出的一款辅助HTML5的Web开发IDE。它基于Eclipse，所以任天由命地协作了Eclipse的插件。
快，是HBuilder的最大优势，通过全部的语法提醒和代码输入法、代码块等，大幅升高HTML、js、css的付出功用。官网：http://www.dcloud.io/
1.8、HTML5语法规则与文档讲明
1.8.1、语法规则
a)、标签要小写
属性值不加” “或 ‘ ‘
b)、可以简简单单某些标签
HTML body head tbody
c)、可以省略某些为止标签
tr td li
d)、单标签不用加为止标签
img input
e)、撤销的标签，看第二点
font center big
1.8.2、文档评释
<!DOCTYPE> 注明必须放在 HTML5 文档中的第一行，也就是置身
<HTML> 标签以前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 评释不属于 HTML
标签，它是一条指令，告诉浏览器编写页面所用的记号的本子。
在拥有 HTML 文档中确定 doctype
是可怜关键的，那样浏览器就能驾驭预期的文档类型。
HTML 4.01 中的 doctype 需求对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而
HTML 5 不根据 SGML，因而不必要对 DTD 举办引用。
1.8.2、文档评释
二、屏弃的竹签
以下的 HTML 4.01
元素在HTML5中一度被去除，尽管浏览器为了包容性考虑都还支持这几个标签，但提出使用新的代表标签，顶牛的是老浏览器对新标签的支撑度又不够，视项目的受众对象而定了。
2.1、能用CSS代替的元素
那几个要素包蕴basefont、big、center、font、s、strike、tt、u。那一个因素纯粹是为页面显示用的，表现的情节应该由CSS完结。
2.2、frame框架
那些元素包蕴frameset、frame、noframes。HTML5中不扶助frame框架，只协助iframe框架，或者用劳动器方创设的由八个页面组成的适合页面的款式，删除上述那个标签。
2.3、唯有部分浏览器帮衬的因素
这个元素包含applet、bgsound、blink、marquee等标签。
2.4、其他被废弃的元素
废除rb，使用ruby替代
废除acronym使用abbr替代
废除dir使用ul替代
丢掉isindex使用form与input相结合的办法取代
废除listing使用pre替代
废除xmp使用code替代
废除nextid使用guids
抛开plaintex使用“text/plian”（无格式正文）MIME类型替代
三、新增的标签
3.1、新增的布局标签
在HTML4.01中div被普遍用于各类布局环境在，没有明显的概念，HTML5为了SEO将div语义化了，新增加结构标签如下：
a)、section元素
意味着页面中的一个情节区块,比如章节、页眉、页脚或页面的别的部分。可以和h1、
h2……等元素构成起来使用，表示文档结构。例：HTML5中<section>……</section>;HTML4中<div>
……</div>。
b)、article元素
意味着页面中一块与上下文不相干的独门内容。比如一篇小说。
c)、aside元素
意味着article元素内容之外的、与article元素内容相关的援救音信。
d)、header元素
意味着页面中一个情节区块或真个页面的标题。
e)、hgroup元素
代表对真正页面或页面中的一个情节区块的题目举办结合。
f)、footer元素
意味着整个页面或页面中一个情节区块的脚注。一般的话，他会含有创小编的人名、创作日期以及创作者的关系新闻。
g)、nav元素
表示页面中导航链接的局地。
h)、figure元素
意味着一段独立的流内容，一般代表文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People’s Republic of China was born in 1949</p>
</figure>
HTML4平凡写作
<dl>
<h1>prc</h1>
<p>The People’s Republic of China was born in 1949</p>
</dl>
示例：
View Code
运转结果：
3.2、新伸张其他元素
3.2.1、meter
代表一定范围内的数值，可用以薪金、数量、百分比等
max表示最大值，min表示很小值，value代表当前值。
<meter max="100" min="0" value="60" style="width: 300px;"></meter>
能够尝试用js控制让它从0变化到100。
3.2.2、time
time。表示时间值，属性datetime强调时间
大会时间：<time>2015-10-6</time>
<time>2015-10-6</time>
我们在每天早上 <time>8:30</time> 开始上课。 我在<time datetime="2017-02-14">情人节</time>有个约会。
运行效果：
因为该标签是一个语义标签，在浏览器上查看时不曾专门的效果，基本与从不设置标签的效率一样。
3.2.3、progress
用来表示进程条
<h3>progress</h3>
<progress value="75" max="100"></progress>
max：最大值，完毕时的值
value：当前值
firefox运行结果:
chrome运行结果：
3.2.4、datalist
该标签定义可选数据的列表。与 input
元素协作使用，就可以打造出输入值的下拉列表。
当与input组合时既可以做到选拔有可以输入。
<input type="text" list="countries" />
<datalist id="countries">
<option value="中国"></option>
<option value="美国"></option>
<option value="日本"></option>
</datalist>
3.2.5、mark元素
要害用以在视觉上向用户突显什么样须求卓越显示或高亮突显的文字。典型应用搜索结果中高亮展现搜素关键字。
HTML5<mark></mark>;HTML4 <span></span>。
3.2.6、ruby元素
概念 ruby 注释（汉语注音或字符）。
与 <ruby> 以及 <rt> 标签一同使用。ruby
元素由一个或两个字符（必要一个解说/发音）和一个提供该音信的 rt
元素组成，还包含可选的 rp 元素，定义当浏览器不援救 “ruby”
元素时突显的内容。
<ruby>
汉
<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
3.2.7、rt元素
概念字符（中文注音或字符）的分解或发音。
3.2.8、rp元素
在 ruby 注释中选择，以定义不襄助 ruby 元素的浏览器所突显的内容。
3.2.9、wbr元素
表示软换行。与br元素的区分：br元素表示此处必须换行；wbr表示浏览器窗口或父级元素足弓宽时（没需求换行时），不换行，而宽度不够时积极在此间换行。
3.2.10、canvas元素
概念图形，比如图片和其余图像。<canvas>
元素只是图形容器（画布），必须采纳脚本来绘制图形。
<canvas id=”myCanvas”></canvas><script
type=”text/javascript”>
var canvas=document.getElementById(‘myCanvas’);
var ctx=canvas.getContext(‘2d’);
ctx.fillStyle=’#FF0000′;
ctx.fillRect(0,0,80,100);
</script>
3.2.11、command元素
表示命令按钮，比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu
元素内时，该因素才是可知的。否则不会体现这么些元素，但是可以用它规定键盘疾速键。。
<menu>
<command onclick=”alert(‘Hello World’)”>
Click Me!</command>
</menu>
3.2.12、details标签
用来描述文档或文档某个部分的细节 。
可与 summary 标签同盟使用，summary可以为 details
定义标题。标题是可知的，用户点击标题时，会突显出
details。summary应该是details的首个子元素。
3.2.14、datalist标签
概念选项列表。请与 input 元素合作使用该因素，来定义 input
可能的值。datalist
及其选项不会被出示出来，它独自是官方的输入值列表。使用 input 元素的 list
属性来绑定 datalist。
3.2.15、output标签
概念差别品类的出口，比如脚本的输出。
<form action=”form_action.asp” method=”get” name=”sumform”>
<output name=”sum”></output>
</form>
3.2.16、menu标签
概念菜单列表。当希望列出表单控件时使用该标签。注意与nav的区分，menu专门用来表单控件。
3.3、多媒体标签
一经必要在页面中播放音频与视频大家平日会用使用的点子有：
a)、embed
<embed
src=’http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf‘
allowFullScreen=’true’ quality=’high’ width=’480′ height=’400′
align=’middle’ allowScriptAccess=’always’
type=’application/x-shockwave-flash’></embed>
<embed src=”img/iceage4.mp4″></embed>
b)、使用flash播放器
如一些三方插件，flowplayer602
html5多媒体组件指的是video(录像)组件和audio(音频)组件。HTML5多媒体组件可以在不依靠诸如Flash
Player等第三方插件的情形下，直接在您的网页上放置多媒体组件。浏览器提供原生帮助视频的新力量使得网页开发人士更便于在不借助于于外置插件有效性的状态下，在他们的网站上添加录像组件。由于苹果公司脚下在One plus和GALAXY Tab上应用的Flash技术的局限性，HTML5多媒体组件的力量就显得愈加重大了。
3.3.1、video视频标签
用于在广播录像，电影
标签基本格式如下：
<video width="800" height="600" controls="controls" poster="content/1.jpg">
<source src="content/iceage4.mp4" type="video/mp4"></source>
<source src="content/iceage4.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="content/iceage4.webm">下载视频</a>
</video>
运转效果：
source是录像源，可以有多种，当一种战败时将精选下一种，首要有如下3种：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
格式帮衬情形：
标签属性：
source子标签属性：
video API方法
video API属性
video API事件
注意：
<video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg">
您的浏览器太老了，请升级，视频下载<a href="#">地址</a>
</video>
多数的HTML5标签的innerHTML内容是浏览器不帮忙该标签时显示的始末。
事件绑定与监听的不一致：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定与监听的区别</title>
</head>
<body>
<button id="btnA">按钮A</button>
<button id="btnB">按钮B</button>
<script type="text/javascript">
var btnA = document.getElementById("btnA");
var btnB = document.getElementById("btnB");
btnA.onclick = function() {
alert("你点了一下");
}
btnA.onclick = function() {
alert("你又点了一下");
}
btnB.addEventListener("click",function(event){
alert("你点了一下");
},false);
btnB.addEventListener("click",function(event){
alert("你又点了一下");
},false);
</script>
</body>
</html>
运作结果：
行使on事件名的款式绑定事件后绑定会覆盖后边绑定的事件，也就是最终一个绑定的风波会收效；
应用add伊芙(Eve)ntListener绑定事件则不会覆盖，可同时在一个要素上绑定两个一律的轩然大波。
video API的习性与事件示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video 标签</title>
</head>
<body>
<video id="videoIce" width="800" height="600" controls="controls" poster="content/1.jpg">
<source src="content/iceage4.mp4" type="video/mp4"></source>
<source src="content/iceage4.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object> 当前浏览器不支持 video直接播放，点击这里下载视频：
<a href="content/iceage4.webm">下载视频</a>
</video>
<h2>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
</h2>
<script type="text/javascript">
var videoIce=document.getElementById("videoIce");
function play() {
videoIce.play();
}
function pause() {
videoIce.pause();
}
videoIce.ontimeupdate = function() {
document.getElementById("msg").innerHTML=videoIce.currentTime;
}
</script>
</body>
</html>
运转结果：
练习：
3.3.2、audio音频标签
audio可以达成广播声音，音乐效果。
<audio src=http://baidu/demo/test.mp3 controls >
你的浏览器不帮助audio元素
</autio>
<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"></audio>
audio标签的性质，很多性能都是与video相同的：
autoplay：true|false，倘若是 true，则音频在就绪后即时播放。
controls：true|false 如若是true，则向用户显示控件，比如播放按钮。
end：numeric value
定义播放器在音频流中的何处截至播放。默许地，声音会播放到最后。
loopend：numeric value 定义在音频流中循环播放甘休的地点，默许是 end
属性的值。
loopstart： numeric value 定义在音频流中循环播放的初叶位置。默许是 start
属性的值。
playcount： numeric value 定义音频片断播放多少次。默许是 1。
src： url 所播放音频的 url。
start : numeric value
定义播放器在音频流中开端播放的地方。默许地，声音在起来进行播报。
source子标签
选用source元素作为多媒体元素的子标签
例:
<audio>
<source src=’test.mp3’ type=’audio/mpeg’/>
<source src=’test.ogg’ type=’audio/ogg’/>
<source src=’test.spx’ type=’audio/ogg’/>
</audio>
动用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该公文并忽略随后的别样元素。
audio的API与video基本相同，下边是一个自定义调整音量的以身作则：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio标签</title>
</head>
<body>
<h2>audio标签</h2>
<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3">
<marquee><h2>换个浏览器吧，太老了</h2></marquee>
</audio>
<input type="range" min="0" max="100" onchange="setVolume(this)" />
<script type="text/javascript">
function setVolume(obj){
document.getElementById("mp3").volume=obj.value*0.01;
}
</script>
</body>
</html>
运作结果：
高低只在0-1时期。
3.3.3、embed元素
用来松开内容(包括各个媒体)。格式可以是Midi、Wav、AIFF、AU、mp5,flash等。例：<embed
src=”flash.swf” />
HTML4中代码示例<object data=”flash.swf”
type=”application/x-shockwave-flash”><object>
四、HTML5兼容性
至此多数现代浏览器对HTML5的支撑已经很高了，尤其是移动端，但HTML5如故存在一些标签的包容性问题的，只要世界上还有1个以上的浏览器就会存在包容问题，
4.1、包容性测试
1、当前浏览器HTML5帮衬情形在线测试：http://www.html5test.com/
IE8浏览器，得分33分，共555分
Chrome浏览器，54版，共555分，得分499分
2、当前浏览器对HTML5、CSS3的支撑情况：http://www.findmebyip.com/
3、各样浏览器对HTML5、CSS3支撑景况大全：http://www.caniuse.com/
可以用于测试指定的HTML，CSS3，JavaScript新技巧，以Web SQL
Database的支撑景况为例：
4.2、HTML5向下包容
4.2.1、包容测试
为的测试包容性，做一个大致的演示，脚本如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5兼容</title>
<style type="text/css">
#section1{
height: 200px;
background: blue;
}
</style>
</head>
<body>
<section id="section1"></section>
</body>
</html>
IE8浏览效果：
干什么不显得，因为IE8不认识section那几个HTML5标签，浏览器测试结果如下：
从IE9先导才有的支撑HTML5中的标签。
4.2.2、html5shiv
html5shiv能够经过很粗略的JavaScript让IE6-IE9浏览器都协理HTML5中的元素
HTML5 Shiv那可以让具有考古价值的Internet
Explorer接济HTML5相关元素，同时为IE6-9, Safari 4.x (以及One plus 3.x),
以及Firefox 3.x提供基本的HTML5样式。
花色地址：https://github.com/aFarkas/html5shiv
下载后在页面中引入插件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5兼容</title>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
<style type="text/css">
#section1 {
height: 200px;
background: blue;
}
</style>
</head>
<body>
<section id="section1"></section>
</body>
</html>
运转效果：
能够看出在IE8下就能正常使用section了，不过指出在不匡助HTML5的浏览器中幸免选拔HTML5标签，可以用div替代；
除此以外不要认为使用了那几个简单的插件后拥有的HTML5效果在不接济HTML5的浏览器中都有了，它只是做了简便易行的至极功用，如
video标签在IE8中不可能使用，使用了该插件后依然不可能播放视频。
4.2.3、Modernizr
Modernizr 是一个用来检测浏览器功效协助景况的 JavaScript 库。
近日，通过检验浏览器对一文山会海测试的拍卖情形，Modernizr 可以检测18项 CSS3
效能以及40多项有关HTML5 的职能。
它比传统检测浏览器名称（浏览器嗅探）的方法进一步可信。
一整套测试的实践时间仅需几飞秒。 其余，Modernizr
网站通过定制脚本只对您感兴趣的要素举行检测，从而落成功用优化。
https://modernizr.com/
此处以CSS3中的线性渐变成例子，在支撑CSS3的浏览器拔取渐变，倘使不接济则使用图片，先生成检测的js：
引入插件后的台本如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5兼容</title>
<style type="text/css">
#div1 {
height: 100px;
background:linear-gradient(#36f,#9cf);
}
.no-cssgradients #div1{
background:url(content/bg.png) repeat-x;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="js/modernizr-custom.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
运用插件后，当页面运行时会自动检测浏览器是还是不是援救某个特定的作用，若是辅助则会在html标签上添加一个类样式如：cssgradients,如若不匡助则会添加一个类样式:no-*，如no-cssgradients。
Modernizr.video //在js中判断是不是支持video标签
