|
1. 新的Doctype
尽量行使<!DOCTYPE html>，纵然赏识器不懂这句话也会凭证尺度模式去渲染
2. Figure元素
用<figure>和<figcaption>来语义化地暗示带问题的图片
XML/HTML Code
<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表单特征
12. IE和HTML5
默认的，HTML5新元素被以inline的方法渲染，不外可以通过下面这种方法让
其以block方法渲染
XML/HTML Code复制内容到剪贴板
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
JavaScript Code复制内容到剪贴板
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
一样平常在header内里用来将一组问题组合在一路，如
XML/HTML Code复制内容到剪贴板
<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是否是必需的，你可以像下面这样声明
XML/HTML Code复制内容到剪贴板
<input type=”text” name=”someInput” required>
<!--可能-->
<input type=”text” name=”someInput” required=”required”>
15. Autofocus属性
正如它的词义，就是聚焦到输入框内里
XML/HTML Code复制内容到剪贴板
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
16. Audio支持
HTML5提供了<audio>标签，你不必要再凭证第三方插件来渲染音频，大大都当代赏识器提供了对付HTML5 Audio的支持，不外今朝仍然必要提供一些兼容处理赏罚，如
XML/HTML Code复制内容到剪贴板
<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的时辰，你必需都提供：
XML/HTML Code复制内容到剪贴板
<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属性就像它的字面意思那么简朴，你必要抉择是否必要在页面加载的时辰去预加载视频
XML/HTML Code复制内容到剪贴板
<video preload>
19. 表现视频节制
XML/HTML Code复制内容到剪贴板
<video preload controls>
20. 正则表达式
因为pattern属性，我们可以在你的markup内里直接行使正则表达式了
XML/HTML Code复制内容到剪贴板
<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简朴地检测一些属性是否支持，如：
JavaScript Code复制内容到剪贴板
<script>
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
</script>
22. Mark元素
把<mark>元素看做是高亮的浸染，当我选择一段笔墨的时辰，javascript对付HTML的markup结果应该是这样的：
XML/HTML Code复制内容到剪贴板
<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属性
XML/HTML Code复制内容到剪贴板
<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>
CSS中行使：
XML/HTML Code复制内容到剪贴板
<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的值
XML/HTML Code复制内容到剪贴板
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">
<style>
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
</style> （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
