你必须知道的28个HTML5特征、窍门和技术(3)
二十一、属性支持检测
如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的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。
二十二、mark元素(Mark Element )
试想<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。
<h3> 搜索结果 </h3>
<p>
我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做 <mark>北川景子</mark>。
</p>
二十三、什么时候使用div
我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section, 和footer，还有机会使用div…吗？当然可以。
div应该用在没有更好的元素的时候。
例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用<article>和<nav>元素，因为其更具语义。
二十四、什么可以开始立即使用
一直谈论到现在的HTML5要到2022年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上，有少量的HTML5的功能，我们可以在我们所有的项目中使用！更简单，更干净的代码总是一件好事。在今天的视频快速展示的技巧中，我将告诉你一些可用的选项。
//zxx:YouTuBe视频，需要翻墙。
二十五、哪些不是HTML5(What is Not HTML5)
那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML5的人是可以理解的，嘿，甚至苹果无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是HTML5。
- SVG:不是HTML5，至少5岁了。
- CSS3:不是HTML5，它是…CSS。
- Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：通过HTML 5，您应该能够使Web应用程序可确定您的位置，并为您提供更多的相关信息。
- Client Storage(客户端存储):非HTML5，虽说有一点切合，但被排除在规范之外，原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。
- Web Sockets:不是HTML5，同样的，有着自己的一套准则。
不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还是同一人。
二十六、data属性(The Data Attribute)
我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：
<h1 id=someId customAttribute=value> 小样，胆儿挺肥的呢 </h1>
…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。
HTML片段
<div id="myDiv" height="134" src="http://image.zhangxinxu.com/image/blog/201008/2010-08-27_205242.png" title="HTML5结果输出框 张鑫旭-鑫空间-鑫生活" width="244" />
此元素也可以接受一个属性，它反映了输出相关元素的名称，类似label工作原理。
二十八、使用区域input创建滑块(Create Sliders with the Range Input)
HTML5引进了range类型的input。
<input type="range">
最值得注意的是，它可以接收 min, max, step, 和value 属性，等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的！
参见下面的快速演示：
第一步：标签
<form method="post">
<h4>音量控制</h4>
<input type="range" name="range" min="0" max="10" step="1" value="" />
<output name="result"> </output>
</form>
nput { 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;
}
- 检测我们的浏览器是否认识range input，如果不，显示提示。
- 当用户移动滑块的时候，动态改变output的值。
- 监听，当用户离开滑块，插入值，同时本地存储。
- 然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。
-
(function() { var f = document.forms[0], range = f['range'], result = f['result'], cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; // 检测浏览器是否是足够酷 // 识别range input. var o = document.createElement('input'); o.type = 'range'; if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。'); // 设置初始值 // 无论是否本地存储了，都设置值为5 range.value = cachedRangeValue; result.value = cachedRangeValue; // 当用户选择了个值，更新本地存储 range.addEventListener("mouseup", function() { alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。"); localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。"); }, false); // 滑动时显示选择的值 range.addEventListener("change", function() { result.value = range.value; }, false); })();
我的电脑是xp系统，默认主题，在滑块松开后Opera下的效果如下图所示，酷吧：
感谢您的阅读！我们已经讨论了很多，但可能只是触及到HTML5的皮毛，全当抛砖引玉，希望能对您的学习有所帮助！
//zxx:以上是翻译/编辑的全部内容，内容已经够多了，我就不多说什么了。
你必须知道的28个HTML5特征、窍门和技术(1)
你必须知道的28个HTML5特征、窍门和技术(2)
你必须知道的28个HTML5特征、窍门和技术(3)