1.
新的Doctype
尽管使用<!DOCTYPE
html>，即使浏览器不懂这句话也会按照标准模式去渲染
2.
Figure元素
用<figure>和<figcaption>来语义化地表示带标题的图片
<figure>
<img src="path/to/image"
alt="About image" />
<figcaption>
<p>This is
an image of something interesting. </p>
</figcaption>
</figure>
3.
重新定义的<small>
<small>已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
4.
去掉link和script标签里面的type属性
5. 加/不加
括号
HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签
6.
让你的内容可编辑，只需要加一个contenteditable属性
7. Email
Inputs
如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
8.
Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local
Storage
使用Local
Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
10.
语义化的header和footer
11.
更多的HTML5表单特性
1 HTML5 主要在以下几个方面对目前的Web表单做了改进： 2 3 一、表单结构更* 4 5 XHTML中需要放在form之中的诸如input/button/select/textarea等标签元素，在HTML 5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。 6 7 8 9 二、新的控件类型 10 11 1.email输入类型： 12 13 <input type="email" name="email"></input> 14 此类型要求输入格式正确的email地址，否则浏览器是不允许提交的，并会有一个错误信息提示.此类型在Opera中必须指定name值，否则无效果. 15 16 2.url输入类型： 17 18 <input type="url" ></input> 19 上面代码展示的文本域要求输入格式正确的URL地址，Opera中会自动在开始处添加http:// 20 21 3.日期时间相关输入类型： 22 23 <input type="date"></input> 24 <input type="time"></input> 25 <input type="month"></input> 26 <input type="week"></input> 27 这一系列是很酷的一个类型，完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持，且展示效果也不一样。 28 29 4.number输入类型： 30 31 <input type="number"></input> 32 此类型将显示一个可拖动的滑块条，并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值。 33 34 5.search输入类型： 35 36 <input type="search"></input> 37 此类型表示输入的将是一个搜索关键字，通过results=s可显示一个搜索小图标。 38 39 6.tel输入类型： 40 41 <input type="tel"></input> 42 此类型要求输入一个电话号码，但实际上它并没有特殊的验证，与text类型没什么区别。 43 44 7.color输入类型： 45 46 <input type="color"></input> 47 此类型可让用户通过颜色选择器选择一个颜色值，并反馈到value中。 48 49 50 51 三、新的表单属性 52 53 1.placeholder属性 54 55 <input type="text" placeholder="点击我会以清除"></input> 56 这是一个很实用的属性，免去了用JS去实现点击清除表单初始值.浏览器支持也还不错，MS除了Firefox，其他标准浏览器都能很好的支持. 57 58 59 2.require/pattern属性 60 61 <input type="text" name="require" required=""></input> 62 <input type="text" name="require1" required="required"></input> 63 <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input> 64 表单验证属性，require类型时，若输入值为空，则拒绝提交，并会有一个提示.上面两种写法都对，这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证，可以完成各种复杂的验证.这两种类型在Opera中必须指定name值，否则无效果。 65 66 67 3.autofocus属性 68 69 <input type="text" autofocus="true"></input> 70 默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于JS的focus()。 71 72 73 4.list属性 74 75 <input type="text" list="ilist"> 76 <datalist id="ilist"> 77 <option label="a" value="a"></option> 78 <option label="b" value="b"></option> 79 <option label="c" value="c"></option> 80 </datalist> 81 </input> 82 该属性需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。 83 84 85 5.max/min/step属性： 86 87 <input type="range" max="100" min="1" step="20"> 88 限制值的输入范围，以及值的输入渐进程度，比如可在number设定输入最大值最小值，或者在range中设定拖动阶梯。 89 90 91 6.autocomplete属性： 92 93 <input type="text" autocomplete="on"> 94 此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说，此属性必须启动浏览器的自动完成功能. 95 96 97 7.data属性： 98 99 <select data="http://domain/getmyoptions"></select> 100 要为一个select下拉别表动态的添加非常多的选项，这些选项大多数都是来自数据库，比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性，为select控件外联数据源！
12.
IE和HTML5
默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header,
footer, article, section, nav, menu, hgroup {
display:
block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
13.
hgroup
一般在header里面用来将一组标题组合在一起，如
<header>
<hgroup>
<h1> Recall Fan Page
</h1>
<h2> Only for people who
want the memory of a lifetime. </h2>
</hgroup>
</header>
14.
Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
<input type=”text”
name=”someInput” required>
或者
<input type=”text”
name=”someInput” required=”required”>
15.
Autofocus属性
正如它的词义，就是聚焦到输入框里面
<input type=”text”
name=”someInput” placeholder=”Douglas Quaid” required
autofocus>
16.
Audio支持
HTML5提供了<audio>标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5
Audio的支持，不过目前仍旧需要提供一些兼容处理，如
<audio
autoplay="autoplay" controls="controls">
<source
src="file.ogg" /><!--FF-->
<source
src="file.mp3" /><!--Webkit-->
<a
href="file.mp3">Download this file.</a>
</audio>
17.
Video支持
和Audio很像，<video>标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis编码的格式，当使用HTML5
video的时候，你必须都提供：
<video
controls preload>
<source
src="cohagenPhoneCall.ogv" type="video/ogg; codecs=′vorbis, theora′" />
<source
src="cohagenPhoneCall.mp4" type="video/mp4; ′codecs=′avc1.42E01E, mp4a.40.2′"
/>
<p>
Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video
instead.</a> </p>
</video>
18.
预加载视频
preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
<video preload>
19.
显示视频控制
<video
preload controls>
20.
正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
<form action=""
method="post">
<label for="username">Create
a Username: </label>
<input
type="text" name="username" id="username" placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}" autofocus required>
<button
type="submit">Go </button>
</form>
21.
检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
<script>
if (!′pattern′ in
document.createElement(′input′) ) {
//
do client/server side validation
}
</script>
22.
Mark元素
把<mark>元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
<h3> Search Results
</h3>
<p> They were interrupted,
just after Quato said, <mark>”Open your Mind”</mark>.
</p>
23.
什么时候用<div>
HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。
24.
想立即使用HTML5?
不要等2022了，现在就可以使用了，just do
it.
25.
哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26.
Data属性
<div
id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>
CSS中使用：
<style>
h1:hover:after
{
content:
attr(data-hover-response);
color:
black;
position:
absolute;
left: 0;
}
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>
27.
Output元素
<output>元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range
Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max,
step和value属性
可以使用css的:before和:after来显示min和max的值
<input type="range"
name="range" min="0" max="10" step="1" value="">
input[type=range]:before
{ content: attr(min); padding-right: 5px;}
input[type=range]:after
{ content: attr(max); padding-left: 5px;}