28个你必须知道的HTML5的新特性，技巧以及技术

浏览数：27 / 时间：2015年06月09日

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控件外联数据源！

View Code

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" />
<source src="file.mp3" />
<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简单地检测一些属性是否支持，如：

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;}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

28个你必须知道的HTML5的新特性，技巧以及技术