[转载] 二十八个 HTML5 特性与技巧(二)

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>
上面的代码很简单，接着往下看吧。
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;
}
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);
})();