二十八个 HTML5 特性与技巧

时间 2019-11-16

原文原文链接

1. New Doctype  你还在使用使人讨厌的难记的XHTML文档类型声明吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
若是还在用，为何呢？如同Douglas Quaid所说，转到新的HTML5这种文档类型吧，它会使你看起来更年轻。实际上，你当真知道XHTML的文档类型声明在HTML5中再也不是必须的吗？然而如今在用而且旧的浏览器也须要这样一种特殊的声明。在标准模式下，不能识别这种文档类型声明的浏览器将简单地翻译里面包含的标签。因此，不用担忧，去感觉将忧虑抛入空气中的轻松吧，去热情拥抱HTML5的新文档类型声明吧。

2.考虑一下下面为一张图片所使用的标签：
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
很是不幸的是在包含图片元素自身的一段标记中没有任何简单或者有含义的方法去结合图片与它的说明文字。 HTML5采用了<figure>标签修正了这个问题。如今标签中包含了<figcaption>元素，咱们就可以将图片和相关说明文字结合在一块儿。
  <figure>
<img src="path/to/image" alt="About image" />
<figcaption>
      <p>This is an image of something interesting. </p>
</figcaption>
</figure>

三、<small>的重定义
不久之前，我使用<small>元素去创建与logo紧密相关的小标题。它是一个有用的直观表现元素。然而，如今这种用法显得不恰当。<small>元素已经被重定义了，更加适合去表现小字体。想象一下你的网页页脚的版权声明，根据新的HTML5对这个元素的定义，<small>标签更适合作这样的事情。Small元素如今指的是”small print”。

四、Scripts 和 Links 再也不用Types属性
你可能仍然向你的link和script标签中添加type属性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
如今没必要了。这就意味着这两个标签分别指的就是样式表和脚本。如此，咱们可以一块儿去掉他们中的type属性。
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

五、用不用引号
用不用引号成了一个问题，请记住，HTML5不是XHTML。若是你不肯意，能够没必要用引号把属性值包装起来。你没必要去闭合你的元素。若是你以为舒服，这种作法没有任何错误。我以为我本身赞同这样作。
<p class="myClass" id=someId> Start the reactor.
在这一问题上，仁者见仁智者见智。不管如何，若是你喜欢一种更结构化的文档，那么就坚持用引号。

六、使你的内容能够编辑
新的浏览器拥有一个能够应用于元素中的漂亮的新属性，这就是contenteditable。就像名字所表示的，它容许用户去改变元素中包含的任何文字，包括它的子对象。这个属性的用途不少，包括简单的to-do list应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
   <ul contenteditable="true">
      <li> Break mechanical cab driver. </li>
      <li> Drive to abandoned factory
      <li> Watch video of self </li>
   </ul>
</body>
</html>
下面是把引号去掉的代码写法<ul contenteditable=true>

七、邮件地址的输入
有这样一件事情：咱们使用一个“email”类型去格式化输入，就可以告诉浏览器只容许有效邮件地址结构的字符输入。HTML5能作到吗？是的，内置的格式验证器立刻实现了。固然，咱们不能百分百的依赖于此，缘由很明显，在还不能解析email类型的旧浏览器中，他们将被简单地当成普通文本框。如今，咱们不能依靠浏览器进行校验，仍然要用服务器/客户端模式解决这个问题。应该指出的是，如今全部的浏览器在对于他们是否支持某种元素和属性的时候都不是十分肯定。举个例子，Opera彷佛支持邮件地址验证，仅仅须要指定name属性。然而，它不支持咱们将在下一条提到的placeholder属性。

八、占位符
之前，咱们必须使用JavaScript来为文字框创建占位符。固然，你能够初始化时给value属性赋值。可是，一旦用户删除占位的文字，这个输入框就从新为空了。placeholder属性弥补了这个问题。
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
如今不是全部浏览器版本都支持这个元素，可是它们一直在经过发行新版来提供支持，像Firefox和Opera如今不支持placeholder属性，可是这样用也没有危害。

九、本地存储
感谢本地存储功能（不是HTML5官方发布的，为了方便而加入的），咱们可以使浏览器“记住”咱们的类型，即便浏览器被关闭或刷新。

十、带语义的Header和Footer
之前咱们用<div id=”header”></div> ,即便被肯定了id，divs也没有语义。如今，HTML5中咱们有了<header>和<footer>这两个元素。上面的标签能够被替换成：<header></header>
在项目中有多个header和footer是很是广泛的。要注意不要将这两个元素与网站的“header”和“footer”混淆了。它们仅表明它们的容器。

十一、更多的HTML5格式化特性
经过这个视频，咱们可以了解更多有用的HTML5格式化特性：Subscribe to our YouTube page to watch all of the video tutorials!

十二、IE浏览器与HTML5
不幸的是，为了解析新的HTML5元素，那个可恶的IE浏览器还有点麻烦。
为了确保新的HTMl5元素可以正确的以块级元素显示，现阶段必须使用下面的代码：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
header, footer, article, section, nav, menu, hgroup {
display: block;
}
因为IE不知道这些元素，所以仍然会忽略这些格式，因此须要使用下面的代码解决这个问题：
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
为了在开发的时候减小工做量，Remy Sharp创建了一个脚本文件，你可使用下面的代码：



13. hgroup
想象一下网站的标题，网站名称后面紧跟着一个副标题，咱们分别用一个<h1>和<h2>标签来标记。在HTML4中尚未一种简单的方法去描述二者之间的语义关系。另外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，咱们能够将这些标题汇集在一块儿，而不影响文档的整个纲要。
<header>
<hgroup>
      <h1> Recall Fan Page </h1>
      <h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

1四、必填属性
表单新加入一个属性，就是require必填属性。根据你的编码风格，你能够用下面两种方法中的任何一个来声明这个属性：
<input type=”text” name=”someInput” required>
或者用一个更结构化的：
<input type="text" name="someInput" required="required">
使用上面的代码，而且浏览器支持这个属性的话，若是这个输入框为空则不能提交。这儿有个简单的例子，咱们也添加了placeholder这个属性，由于这两个属性配合起来用时常常的事情。若是输入框为空白，而且表单被提交了，这个文字框就高亮显示。

1五、自动获取焦点属性
前面已经提到，HTML5新增了不少元素，之前用javas实现的功能如今用元素就能够简单实现。在这里，咱们可使用autofocus属性使输入字段自动得到焦点。
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
能够在代码中仅仅使用autofocus来标明本属性，也可使用autofocus=autofocus的形式。

1六、声音支持
咱们再也不必定要依赖第三方插件才能使用声音。HTML5如今提供<audio>元素。不再用担忧那些插件了。现现在，只有最新的浏览器才提供对HTML5声音的支持。因此，在使用的时候采起恰当的兼容措施颇有必要。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<A href="http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/file.mp3">Download this file.</A>
</audio>
对于音频格式，Mozilla 和 Webkit尚未什么进展。Firefox将关注.ogg类型的音频，而Webkit将仅对普通mp3格式进行扩展。这就意味着，最起码如今你应该使用两个版本的音频格式才能兼顾各类浏览器。Safari在加载页面时没法识别.ogg类型的音频，会自动跳转到mp3类型。可是要注意IE不支持这种操做，Opera10或更低版本仅支持.WAV格式的文件。

1七、视频支持
就像<audio>元素，新浏览器也已经支持HTML5视频了。事实上，YouTube刚刚宣布他们为支持HTML5的浏览器作了新的 HTML5技术的视频。不幸的是，HTML标准没有规定特定的视频编码，这就须要浏览器去决定是哪一种格式了。Safari和Internet Explorer 9会支持H.264格式的视频（Flash播放器也可以播放），Firefox 和Opera坚持用开源的Theora 和 Vorbis格式。因此，在播放HTML5视频时，你必须提供这两种格式的codecs。
<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>
Chrome可以正确播放“ogg”和“mp4”格式编码的视频。这儿有几项须要注意的事情。从技术上即讲，没有要求咱们指定type属性，可是，若是不指定的话，浏览器会本身去肯定。就节省点带宽，本身去声明吧。不是全部的浏览器支持HTML5视频。为此咱们能够提供一个下载连接，或者额外嵌入一个flash版本的视频，这都无所谓，看你怎么作了。

1八、视频预加载
Preload属性就像你猜的那样。你首先应该决定何时须要浏览器预加载视频。预加载是颇有必要的，若是访问者读取一个专门为播放视频而作的页面，你确定会预加载视频而为访问者节省等待时间。经过设定preload=”preload”或者一个简单的preload就可使视频被预加载。我比较喜欢后面的解决方案，由于它更精简。
<video preload>
<video preload>
<video preload controls>

1九、播放控制
若是你的工做与这些技术密切相关，你可能已经知道了。若是你用上面的代码，视频显示的仅是像一幅图片同样，没有任何控制而言。为了可以解析播放控制功能，咱们必须在video元素中指定controls属性。
<video preload controls>
请注意的是每一个浏览器对本身的播放器解析法都不一样。（译者：提醒咱们多测试几个浏览器啊）javascript