共计 4365 个字符，预计需要花费 11 分钟才能阅读完成。
1、H5 的浏览器兼容
不同的浏览器显示的成果可能不一样。因为 HTML5 没有一个对立的规范，不同的浏览器解析时不一样的，当初还处于一个推广的阶段，然而大部分的时一样的
2、H5 新的文档申明
1）Html 4 的文档申明
2）Html 5 的文档申明
在 HTML 4.01 中，DOCTYPE 申明援用 文档类型定义 DTD（Document Type Definition)，因为 HTML 4.01 基于 SGML（规范通用标记语言，是一种定义电子文档构造和形容其内容的国际标准语言；）。DTD 规定了标记语言的规定，这样浏览器能力正确地出现内容。
HTML5 不基于 SGML，所以不须要援用 DTD。
提醒：请始终向 HTML 文档增加 DOCTYPE 申明，这样浏览器能力获知文档类型。
扩大：CSS 盒子模型：CSS- 规范盒模型 & 怪异盒模型？
CSS 中 Box model 是分为两种:: W3C 规范 和 IE 规范盒子模型。
大多数浏览器采纳 W3C 规范模型，而 IE 中则采纳 Microsoft 本人的规范。
怪异模式是“局部浏览器在反对 W3C 规范的同时还保留了原来的解析模式”，怪异模式次要体现在 IE 内核的浏览器。
DOCTYPE 缺失则在 ie6，ie7，ie8 下将会触发怪异模式（quirks 模式）。
当不对 doctype 进行定义时，会触发怪异模式。
在规范模式下，一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度 = width + margin(左右)（即 width 曾经蕴含了 padding 和 border 值）
3、H5 的特点
1）更简洁、然而在理论开发中要留神书写标准，利于前期保护
2）标签的语义化
扩大：语义化的重要性：
① 当页面加载失败的时候，还可能呈现出清晰的构造
② 有利于 SEO 优化，利于被搜索引擎收录（即使于网络爬虫的辨认）
③ 在我的项目开发及保护时，语义化的也很大水平上升高开发难度，节省成本
和新构造标签的区别和意义
3）语法更宽松
4）多设施跨平台
5）自适应网页设计
4、H5 新减少的语义化标签
header 头标签 header.html header_noLogin.html
nav
导航标签
article 文章标签
aside 侧边栏导航
footer 页脚 footer.html
section 章节、页眉、栏目
1）section
示意内容区块, 个别入章节、页眉、页脚或者页面中的其余局部。能够与 h1-h6 等元素联合起来应用，标示文档的构造
2）article
示意页面中的一块与上下文不相干的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章
3）aside
Aside 示意 acticle 元素的内容之外的，与 article 元素的内容相干的辅助信息。
4）header
示意页面中一个内容区块或者整个页面的题目
5）footer
示意整个页面或者页面中的一个内容区块的脚注。一般来说，他会蕴含创作者的姓名、创作日期以及创作者分割信息。
6）nav
示意页面中导航链接的局部、① 传统的导航条 ② 腾讯新闻 ③侧边栏导航 ④内业导航：百度百科 ⑤翻页操作
7）figure
示意一段独立的流内容，个别示意文档主体流内容中的一个独立单元。规定独立的流内容（图像、图表、照片、代码等等）。应用 figcaption 元素为 figure 元素增加题目。
◆ figure 是一种元素的组合，带有可选 题目。用来示意网页上一块独立的内容。figure 元素的内容应该与主内容相干，但如果被删除，则不应答文档流产生影响。
◆ figcaption 示意 figure 的题目。从属于 figure，并且，figure 中只能搁置一个 figcaption
8）video
定义视频，比方电影片段或其余视频流
<video src=” 门路地址 ” controls> 您的浏览器不反对 video</video>
video 容许有多个 source 元素，source 元素能够连贯不同的视频文件，浏览器将应用第一个可辨认的格局进行播放
<source src=”video.ogg” type=”video/ogg”/><source src=”video.webm” type=”video/webm”/>
提醒：能够在开始标签和完结标签之间搁置文本内容，这样老的浏览器就能够显示出不反对该标签的信息。
param 元素容许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为蕴含它的 <object> 标签提供参数。
<param name=”BorderStyle” value=”1″ /> name 定义参数的名称（用在脚本中）。
HTML5 里 video 标签反对哪些格局的视频文件？
Ogg: 带有 Threora 视频编码和 Vorbis 音频编码的 Ogg 文件；
MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG4 文件；
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
9）embed
embed 标签用于定义嵌套的内容，包含各种媒体，格局能够是 midi、wav、AIFF、AU、MP3、Flash 等
10）audio
定义音频，比方音乐或其余音频流
<audio src=”someaudio.wav”> 您的浏览器不反对 audio 标签。</audio>
提醒：能够在开始标签和完结标签之间搁置文本内容，这样老的浏览器就能够显示出不反对该标签的信息。
11）mark
高亮显示文字，一个比拟典型的利用就是在搜寻后果中向用户高亮显示搜寻关键词。
12）canvas
示意图形，比方图标和其余图像。这个元素自身没有行为，仅提供一块画布，但它把一个绘图 API 展示给客户端 js，以使脚本可能把想绘制的货色绘制到这块画布上
<canvas id=“myCanvas”width=“200”height=“200”></canvas>
13）Datalist
datalist 提供一个当时定义好的列表，通过 id 与 input 关联，当在 input 内输出时就会有主动实现（autocomplete）的性能，用户将会看见一个下拉列表供其抉择。
14）output
示意不同类型的输入，比方脚本的输入
for：定义输入域相干的一个或多个元素。
form：定义输出字段所属的一个或多个表单。
name：定义对象的惟一名称。（表单提交时应用）
5、H5 新减少的表单元素
Search/tel/url/email/number/range/color/file/Datetime/date/month/week/time/datetime-local
1）email
专门用来输出 email 地址的文本框, 如果该文本框中内容不是 email 地址格局的，则不容许提交。但它不查看 email 地址是否存在。提交时能够为空，除非加上了 required 属性。具备 multiple 属性，它容许在该文本框中输出一串以逗号分隔的 email 地址。
2）url
url：专门用来输出 URL 地址的文本框。如果该文本框中内容不是 URL 地址格局的，则不容许提交。
3）number
Number：专门用来输出数字的文本框。在提交时会查看其中的内容是否为数字，具备 min、max、step 的属性。
<input name=“number1”type=“number”value=“25”min=“10”max=“100”step=“5”/>
4）range
是用来只允话输出一段范畴内数值的文本框，它具备 min 属性与 max 属性，及 step 属性，能够指定每次拖动的步幅。
<input name=“range1”type=“range”value=“25”min=“0”max=“100”step=“5”/>
min 最小值
max 最大值
step 数字距离
5）date pickers (date, month, week, time, datetime, datetime-local)
领有多个可供选取日期和工夫的新输出类型。date – 选取日、月、年 Internet Explorer 或 Firefox 不反对 “month” 元素。
month – 选取月、年 Internet Explorer 或 Firefox 不反对 “month” 元素。
week – 选取周和年 Internet Explorer 或 Firefox 不反对 “month” 元素。
time – 选取工夫（小时和分钟）Internet Explorer 或 Firefox 不反对 “month” 元素。
datetime – 选取工夫、日、月、年（UTC 工夫）Internet Explorer、Firefox 或者 Chrome 不反对 “datetime 元素，Safari 中局部反对。Opera 12 以及更早的版本中齐全反对。
datetime-local – 选取工夫、日、月、年（本地工夫）Internet Explorer 或 Firefox 不反对 “month” 元素。
留神，跟 input 标签设置款式一样，然而要设置标签中部分的款式不能实现。如扭转日历的背景色，色彩框的按钮成果等，这些都不能够实现。
6、H5 新减少的表单验证
1）placeholder
placeholder 属性：文本框处于未输出状态时文本框中显示的输出提醒。
2）autofocus
autofocus 属性：给文本框、抉择框、或者按钮控件加上该属性，当关上页面时，该控件主动取得国标焦点，一个页面只能有一个。
3）required
required 属性：验证输出不能为空
4）list
list 属性：联合 datalist 元素应用
5）autocomplete
autocomplete 属性：注：表单元素要必须有 name 属性。输出富足和所用的主动实现性能，是一个节俭输出工夫，同时也非常不便的性能。只有三种：on/off/””。on 可是显示指定候补输出的数据列表，应用 datalist 元素与 list 属性提供候补输出的数据列表，主动实现时，能够讲该 datalist 元素中的数据作为候补输出的数据在文本框中显示：
<input type=”text” name=”greeting” autoconplete=”on” list =”greeting”>
HTML5 减少了大量在提交时对表单及表单元素内容有效性验证的性能。
6）主动验证
min、max、step：为蕴含数字或日期的 input 类型规定限定（束缚）
max: 最大值
min: 最小值
step: 数字距离
7）勾销验证
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注：novalidate 属性实用于 form 以及以下类型的 input 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.