28个你必需知道的HTML5新特征、能力和技能
|
副问题[/!--empirenews.page--]
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表单特征 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属性 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
