一、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（谷歌（谷歌（Google））浏览器），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>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东创始人刘强东一元年薪背后的O2O棋局</title>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
#container {
width: 900px;
margin: 0 auto;
font-family: "microsoft yahei";
}
#container header {
background: dodgerblue;
height: 100px;
color: #fff;
}
#container header h1 {
height: 100px;
line-height: 100px;
padding: 0 0 0 30px;
}
#main article {
width: 63%;
float: left;
}
#main aside {
width: 33%;
float: right;
}
#main aside li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
footer {
clear: both;
height: 70px;
background: orange;
}
footer nav{
}
footer li {
display: inline-block;
color: white;
width: 100px;
height: 30px;
line-height: 30px;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
footer li:hover{
background: orangered;
}
footer nav{
text-align: center;
}
p,li{
line-height: 26px;
}
hgroup{
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>中国电子商务研究中心</h1>
</header>
<div id="main">
<article>
<hgroup>
<h1>京东创始人刘强东一元年薪背后的O2O棋局</h1>
<h4>2015年10月06日14:50 中国电子商务研究中心</h4>
</hgroup>
<section>
<p>8月，京东公布了一项薪酬计划，该计划透露，未来十年，刘强东的年薪降至一元并推出股权激励计划，希望借此将其与京东的关系捆绑得更加紧密，进而提升投资者信心。与“一元年薪”并行的是京东43亿元入股永辉超市的消息，高价布局供应链的背后彰显着京东对O2O的野心。</p>
<p>京东董事会今年5月份批准了针对公司董事长兼CEO刘强东的一项为期10年的薪酬计划。计划规定，10年内，刘强东每年只能领到1元现金形式底薪和零元现金形式奖金。难道刘强东就因此连杯奶茶也买不起了吗?这么想就太天真了。根据京东的股权激励计划，刘强东被授予涉及2600万股京东A级普通股的购买权，涉及股票规模约占京东总股本的0.9%，只有当每股ADS达到或超过33.4美元(相当于京东股价不低于16.7美元)时，刘强东才能将这部分股权进行套现。</p>
<p>按每股16.7美元计算，刘强东获得的这部分股权将价值4.34亿美元，相当于27.8亿人民币。在这10年内，公司不得再向刘强东授予额外股权。其实“一元年薪”不仅并非刘强东首创，甚至已经成为企业面临危机时的一种常见路数。诸多企业都采取过“一元年薪”，比如三一重工。2008年经济危机时，三一重工[微博]全体董事降薪90%，并接受高管自愿降薪申请，三一重工[微博]董事长梁稳根甚至主动申请将自己的年薪降至一元。对于目前并没有表现得很困难的京东来说，中国电子商务协会研究中心专家委员唐兴通认为，“一元年薪”只是对于团队管理上的一种姿态而，并没有什么特别实际的用处。而上述股权激励计划更多的是为了稳定投资者的信心稳定投资者信心或许是为了缓解其在最新一期财务报告中持续亏损所带来的负面影响8月7日，京东发布了2015年第二季度财报。据财报显示，虽然京东第二季度交易总额为1145亿元，同比增长82%，净收入则达到459亿元，同比增长61%。</p>
<p>尽管京东业绩增长强劲，但其似乎还没有找到有效的盈利模式。在去年第二季度净亏损5.825亿元的京东，今年该季度依然净亏损5.104亿元，净利润率为-1.1%。该公司在2015年第二季度非美国通用会计准则下净亏损为1570万元人民币(约250万美元)，净利润率为-0.03%。但事情却未向着京东期望的方向发展。据资料显示，以8月5日京东收盘价34.32美元计，至8月12日，短短5个交易日，其最低价格下探至25.64美元，最大跌幅高达25.29%;按其总股本27.35亿股计，5个交易日，京东蒸发市值237亿美元，蒸发比例高达39%。</p>
</section>
<section>
<p>其实除了降薪，京东为了提振市场信心也在做着诸多尝试。据京东2015年中报显示，其总负债为72.84亿美元(约合465.45亿人民币)，较去年底的47.39亿美元，大幅攀升约53.7%。在这种情况下，京东宣布，以每股9元，共计43.1亿元人民币入股永辉超市。若交易完成，京东将持有永辉超市10%的股份。并拥有提名永辉两名董事(包括一名独立董事)的权利。双方将主要通过联合采购的方式，加强供应链管理能力，并会继续探索O2O等领域战略合作的发展机遇。</p>
<p>唐兴通认为，入股永辉超市是京东从物流战略的角度进行资源整合的重要一步。“以资金入股的方式配合上下游转型，目的是为了能够形成一个完整的消费链条。”他对新金融记者表示。除此之外，京东还看中其在生鲜市场的份额。刘强东曾表示，在生鲜的部分，永辉超市的量和连锁超市的量不相上下(生鲜上半年占永辉43%的销售额)，并且成本结构在行业中是最优质的，京东认为生鲜类商品是可以盈利的，毛利润非常健康。</p>
</section>
</article>
<aside>
<ul>
<li>
<a href="zt/2015zhifu/">让红包再多飞一会——新春土豪玩转红包 霸主地位花落谁家</a>
</li>
<li>
<a href="zt/2015taobao/">淘宝PK国家监管部门“假货“争议引发“史上最大危机”？</a>
</li>
<li>
<a href="zt/2015expectation/">2015电子商务展望</a>
</li>
<li>
<a href="zt/2014pandian/">2014年度中国电子商务产业链系列盘点专题 </a>
</li>
<li>
<a href="zt/20141111/">六年历程、上市首秀：电商鏖战“双11”全程直播大型专题报道 </a>
</li>
<li>
<a href="zt/2014shcb/">2014上半年电商上市公司财报解读</a>
</li>
<li>
<a href="zt/wganq/">全国百家电商牵手质检机构 保障网购产品质量与安全行动计划</a>
</li>
<li>
<a href="zt/sn818/">苏宁打响“百日会战” 电商再掀促销“风暴”</a>
</li>
<li>
<a href="zt/dssj/">从电商平台第三方卖家奢侈品售假 揭电商假货之觞 引行业地震</a>
</li>
<li>
<a href="zt/2014World_Cup/">足球盛宴 电商角逐“世界杯经济”</a>
</li>
<li>
<a href="zt/jdipo/">京东启动赴美IPO 优势与挑战并存</a>
</li>
<li>
<a href="zt/anl_al2014/">阿里巴巴集团提交IPO招股书 招股书背后的机遇与挑战</a>
</li>
<li>
<a href="zt/jmipo/">聚美优品向美提交上市申请 招股书背后机遇与挑战并存</a>
</li>
<li>
<a href="zt/7twlytui/">电商VS消费者 电商7天无理由退货大阅兵</a>
</li>
<li>
<a href="zt/jdtx/">腾讯战略投资京东 国内B2C电商市场格局将迎 "寡头时代"</a>
</li>
<li>
<a href="zt/jdo2o/">京东零售业O2O战略万家便利店ERP供应商签约仪式</a>
</li>
<li>
<a href="zt/yhty/">聚焦"7天无理由退货" 专家解读《网络交易管理办法》、《新消法》</a>
</li>
<li>
<a href="zt/2014lh/">聚焦2014两会——鼓励电子商务创新发展 互联网金融掀新一轮颠覆潮</a>
</li>
<li>
<a href="zt/2014315/">倡导阳光 诚信 安全网购 迎接电商立法元年</a>
</li>
<li>
<a href="zt/anl_wxqb/">微信红包引发移动端支付争夺战 占据高地为时尚早</a>
</li>
<li>
<a href="zt/jdipo/">京东启动赴美IPO：优势与挑战并存！</a>
</li>
<li>
<a href="zt/cyhcp/">春运刮起火车票网购潮 电商研究中心支招买票攻略</a>
</li>
<li>
<a href="zt/hwdg/">前空姐逃税案敲警钟 海外代购难掩"内忧外患"</a>
</li>
<li>
<a href="zt/snznq/">2014企业公益论坛暨"阳光1+1" 苏宁社工志愿者行动</a>
</li>
<li>
<a href="zt/2013sh11/">电商宫心计—"双11"</a>
</li>
<li>
<a href="zt/anl_zmq/">上海自贸区推"跨境通"电商平台 国内跨境电商将迎新机遇</a>
</li>
<li>
<a href="zt/snkfpt/">苏宁开放平台战略通报暨联盟大会</a>
</li>
<li>
<a href="zt/anl_hzp/">八月化妆品电商价格大战 聚美、乐蜂上演"宫心计"</a>
</li>
<li>
<a href="zt/wx/">淘宝新浪微博账号互通 微信反击阿Q大战擦火花</a>
</li>
<li>
<a href="zt/jdkfpt/">京东举办史上最大规模供应商大会 电商大佬纷纷争夺供应商资源</a>
</li>
<li>
<a href="zt/sx/">电商巨头争夺生鲜"蓝海""陷阱"还是"钱"景？</a>
</li>
<li>
<a href="zt/jgz/">休战数月 火红6月电商"排位赛"再次上演</a>
</li>
<li>
<a href="zt/wdzr/">淘宝开放网店离婚与继承者转让 《实施细则》出台</a>
</li>
<li>
<a href="zt/sg/">闪购模式频遭电商复制 究竟是蓝海or红海？</a>
</li>
<li>
<a href="zt/anl_ltjs/">兰亭集势纽约证券交易所上市 外贸电子商务将迎来春天？ </a>
</li>
<li>
<a href="zt/anl_zhsh/">网店收税传闻来袭 淘宝或成征税重点区</a>
</li>
<li>
<a href="zt/anl_2013al/">阿里巴巴入股新浪微博 社交电子商务时代开启</a>
</li>
<li>
<a href="zt/anl_2013ya/">4.20雅安大地震 电商在行动</a>
</li>
<li>
<a href="zt/anl_qne/">去哪儿涨价遭供应商联合抵制 折射OTA市场利益博弈？ </a>
</li>
<li>
<a href="zt/anl_dshgm/">苏宁、京东、银泰等纷纷更名解读电商企业集体更名现象</a>
</li>
<li>
<a href="zt/anl_2013zfb/">用户交易信息泄露透视电商支付账号安全？</a>
</li>
<li>
<a href="zt/anl_fk/">从初刻被迫卖身老东家 透视国内垂直B2C电商生存状态？ </a>
</li>
<li>
<a href="zt/2013315/">质量、诚信、承诺 启动"315电商维权月</a>
</li>
<li>
<a href="zt/2013lh/">聚焦2013年"两会" 代表电商立法、网店征税提案</a>
</li>
</ul>
</aside>
</div>
<footer>
<nav>
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>投稿撤稿</li>
<li>友情链接</li>
<li>免责声明</li>
<li>人才招聘</li>
<li>独家专题</li>
<li>中心微信</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
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元素
ACCESS，重中之重用以在视觉上向用户突显怎么样要求良好浮现或高亮呈现的文字。典型应用搜索结果中高亮显示搜素关键字。
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等第三方插件的事态下，间接在你的网页上嵌入多媒体组件。浏览器提供原生帮助视频的新力量使得网页开发人士更便于在不信赖于外置插件有效性的情景下，在她们的网站上添加摄像组件。由于苹果公司近期在Samsung和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伊芙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 (以及中兴 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标签
五、示例下载
参照：http://www.cnblogs.com/best
