必须知道的28个HTML5特性、技巧

来源：互联网发布：亚马逊云计算编辑：程序博客网时间：2024/04/30 19:18

信息技术瞬息万变。如果你不关心这种变化，所掌握的技术很快就会被淘汰。所以，如果你对HTML5技术的变化感到很突然，就将这篇文章当做敲门砖吧。

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.考虑一下下面为一张图片所使用的标签：

1.<img src="path/to/image" alt="About image" />
2.<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>
<!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="doug@givethesepeopleair.com" />

复制代码
现在不是所有浏览器版本都支持这个元素，但是它们一直在通过发行新版来提供支持，像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!
Internet Explorer and HTML5
12、IE浏览器与HTML5
不幸的是，为了解析新的HTML5元素，那个可恶的IE浏览器还有点麻烦。
为了确保新的HTMl5元素能够正确的以块级元素显示，现阶段必须使用下面的代码：

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建立了一个脚本文件，你可以使用下面的代码：

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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版本的视频，这都无所谓，看你怎么做了。
3.播放控制和预加载将在接下来的两条探讨。

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

<video preload>
<video preload>
<video preload controls>

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

20、正则表达式
曾几何时，你自己草草写了许多正则表达式来验证一个特殊的文本框。感谢新的pattern属性，我们能够在我们的标记中直接插入一个正则表达式。

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

如果你熟悉正则表达式，肯定知道这个表达式[A-Za-z]{4,10}仅接受最上层和最下层的字母。这个字符串也必须包含最小四个字符，最多十个。
需要注意的是我们正在开始结合这些新的令人叹为观止的属性。
21、为属性检测支持
如果我们无法去检测浏览器是否能解析这些属性，那么这些属性还好吗？恩，问得好，但是这儿有几种方法来解决这个问题。我们来讨论两个。第一种选择是利用优秀的Modernizr库。另一个选择，我们能够建立和解析这些元素去确定什么浏览器能够解析。例如，在我们前一个例子中，如果我们想试验浏览器能否实现pattern属性，我们可以在页面中加入一点JavaScript。

alert( 'pattern' in document.createElement('input') ) // boolean;

实际上，这是一种检测浏览器能力的流行方法。jQuery库就是用了这个把戏。上面的代码，我们正在建立一个新的input元素，并且检测pattern属性是否被识别了。

<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>

时刻记住，上面的代码依赖于JavaScript。

22、Mark元素
将<mark>考虑为一个醒目的元素。包含在这个标记中的字符串应该与用户当前的行为有关。举个例子，如果我在某个博客中搜索“Open your Mind”,就可以运用JavaScript将找到的每一处字符包裹起来。

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23、什么时候使用<div>
有些人起初会对什么时候用divs产生疑问。现在我们可以用headers，articles，sections和footers，那什么时候用divs呢？当项目中没有更好的元素可用的时候，就可以用divs了。
例如，如果为了给内容定位而想用wrapper元素包裹一个代码块，用<div>标记更好些。然而，要是想包裹博客文章、或者页脚的链接列表，建议你分别使用 <article>和<nav>元素。

24、关于HTML5的这些讨论直到2022年也未必能结束。很多人忽视这一点成为一个很大的错误。实际上，现在有一大把HTML5特性可以立即用到我们的项目中。简单、清爽的代码永远是一件好事情。在今天的视频中，我将给你展示很多选择。
Subscribe to our YouTube page to watch all of the video tutorials!

25. What is Not HTML5
我们能够原谅某些人认为JavaScript稍微改变一下就成了HTML5，甚至Apple也不谨慎地宣传这个观点。对于非开发者，他们不会在乎。因为这只是对新的web标准的简单称呼。然而对于我们来讲，就需要明白哪些技术不是HTML5，尽管它们有相同的语义。
SVG：不是HTML5，它是五年前的技术了。
CSS3：不是HTML5. HTML5基于CSS。
Geolocation：不是HTML5.
Client Storage：不是HTML5.
Web Sockets：不是HTML5.

26. The Data Attribute
我们现在正式对所有的HTML元素提供自定义属性的支持。然而，以前我们使用的方法是：

<h1 id=someId customAttribute=value> Thank you, Tony. </h1>
<h1 id=someId customAttribute=value> Thank you, Tony. </h1>

这样用的话，验证器会出现问题。现在，我们在自定义属性前面加上“data”后就可以正式使用这个方法。
HTML片段

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

检索自定义属性的值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Val

它还可以用在CSS中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sort of Lame CSS Text Changing</title>
<style>
h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>
</body>
</html>

你可以到JSBIN上去看一下效果。

27、输出元素
根据名字就能够猜到，output元素是用来显示某种计算结果的。例如，如果你想显示鼠标位置的坐标，或者一些数字的和。
举一个简单的例子，用JavaScript求两个数字的和，填充到一个空的output中。（译者：下面的代码很简单，我想连我都能看懂，就不必跟大家解释了。）

<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit"> Calculate </button>
</form>
<script>
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}
else { alert('Your browser is not ready yet.'); }
})();
</script>
<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit"> Calculate </button>
</form>
<script>
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}
else { alert('Your browser is not ready yet.'); }
})();
</script>

要注意的是浏览器对output元素的支持仍然很弱。写本文的时候，我也只是用Opera进行了测试。如果浏览器不能解析这个元素，上面的代码就会提示你。否则，提交之后会给名称为“sum”的显示框赋值15。

这个元素也能够接受a作为一个属性，显示与这个显示框相关的元素名称，跟label的原理（方式）差不多。
28、建立带范围的滑动器输入框
<input type="range">
很显然，它能够接受min、max、step和value这些属性。尽管好像只有Opera支持这种输入方式，但是真正用起来的时候一定是蛮奇妙的。
为了马上证明一下，我们建立一个标尺来允许用户决定“Total Recall”是多么“可怕”。我们不需要建立一个真实的滑动方法就可以非常简单的实现这种效果。
Step 1: Mark-up
首先建立 Mark-up

<form method="post">
<h1> Total Recall Awesomness Gauge </h1>
<input type="range" name="range" min="0" max="10" step="1" value="">
<output name="result"> </output>
</form>
<form method="post">
<h1> Total Recall Awesomness Gauge </h1>
<input type="range" name="range" min="0" max="10" step="1" value="">
<output name="result"> </output>
</form>

上面的代码很简单，接着往下看吧。
Step 2: CSS
相比第一步，就是在滑动器的前后建立了为用户指示最大、最小值。

body {
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
text-align: center;
}
input { font-size: 14px; font-weight: bold; }
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
output {
display: block;
font-size: 5.5em;
font-weight: bold;
}
body {
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
text-align: center;
}
input { font-size: 14px; font-weight: bold; }
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
output {
display: block;
font-size: 5.5em;
font-weight: bold;
}

Step 3: The JavaScript
最后一步：
先确定当前使用的浏览器是否能够解析range input，如果不能的话，将告知用户这个示例不能展示。
当用户滑动的时候，能动态的指示数值。
侦听用户鼠标离开滑动器（事件），将获取的值保存到本地。
当用户下次刷新页面，滑动器和输出框将自动显示上次选择的值。

(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
// Determine if browser is one of the cool kids that
// recognizes the range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
// Set initial values of the input and ouput elements to
// either what's stored locally, or the number 5.
range.value = cachedRangeValue;
result.value = cachedRangeValue;
// When the user makes a selection, update local storage.
range.addEventListener("mouseup", function() {
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
}, false);
// Display chosen value when sliding.
range.addEventListener("change", function() {
result.value = range.value;
}, false);
})();
(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
// Determine if browser is one of the cool kids that
// recognizes the range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
// Set initial values of the input and ouput elements to
// either what's stored locally, or the number 5.
range.value = cachedRangeValue;
result.value = cachedRangeValue;
// When the user makes a selection, update local storage.
range.addEventListener("mouseup", function() {
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
}, false);
// Display chosen value when sliding.
range.addEventListener("change", function() {
result.value = range.value;
}, false);
})();

HTML5准备好了吗？也许还有点困难。但是如果有人准备玩HTML5的话，可以去下载源代码，用Opera浏览器去试验吧！
很感谢各位花费时间来看这篇文章，虽然文章介绍了28条，但可能仅仅只是HTML5的表面，希望对初学者有所帮助吧。

0 0