二十八个 HTML5 特性与技巧

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

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>

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

4、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>

5、用不用引号
用不用引号成了一个问题，请记住，HTML5不是XHTML。如果你不愿意，可以不必用引号把属性值包装起来。你不必去闭合你的元素。如果你觉得舒服，这种做法没有任何错误。我觉得我自己赞同这样做。
<p class="myClass" id=someId> Start the reactor.
在这一问题上，仁者见仁智者见智。无论如何，如果你喜欢一种更结构化的文档，那么就坚持用引号。

6、使你的内容可以编辑
新的浏览器拥有一个可以应用于元素中的漂亮的新属性，这就是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>

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

8、占位符
以前，我们必须使用JavaScript来为文字框建立占位符。当然，你可以初始化时给value属性赋值。但是，一旦用户删除占位的文字，这个输入框就重新为空了。placeholder属性弥补了这个问题。
<input name="email" type="email" placeholder="[email protected]" />
现在不是所有浏览器版本都支持这个元素，但是它们一直在通过发行新版来提供支持，像Firefox和Opera现在不支持placeholder属性，但是这样用也没有危害。

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

10、带语义的Header和Footer
以前我们用<div id=”header”></div> ,即使被确定了id，divs也没有语义。现在，HTML5中我们有了<header>和<footer>这两个元素。上面的标签可以被替换成：<header></header>
在项目中有多个header和footer是非常普遍的。要注意不要将这两个元素与网站的“header”和“footer”混淆了。它们仅代表它们的容器。

11、更多的HTML5格式化特性
通过这个视频，我们能够了解更多有用的HTML5格式化特性：Subscribe to our YouTube page to watch all of the video tutorials!

12、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>

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

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

16、声音支持
我们不再一定要依赖第三方插件才能使用声音。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格式的文件。

17、视频支持
就像<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版本的视频，这都无所谓，看你怎么做了。

18、视频预加载
Preload属性就像你猜的那样。你首先应该决定什么时候需要浏览器预加载视频。预加载是很有必要的，如果访问者读取一个专门为播放视频而做的页面，你肯定会预加载视频而为访问者节省等待时间。通过设定preload=”preload”或者一个简单的preload就可以使视频被预加载。我比较喜欢后面的解决方案，因为它更精简。
<video preload>
<video preload>
<video preload controls>

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