电子产品世界

十八、视频预载(Preload Videos)

预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要?或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。

<videopreload> 

十九、显示控制条

如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。

<video preload controls> 

请注意，不同浏览器渲染出来的进度条的模样都是不一样的。

二十、正则表达式

你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。

<formactionformaction=""method="get"> 
<labelforlabelfor="username">姓名:</label> 
<inputidinputid="username"name="username"type="text"placeholder="4-10个英文字母"pattern="[A-Za-z]{4,10}"required="required"autofocus/> 
<buttontypebuttontype="submit">提交</button> 
</form> 

如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。如下图所示。

注意到，我们已经开始组合使用这些很棒的属性。

二十一、属性支持检测

如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。第一个是利用优秀的Modernizr库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：

alert('pattern'indocument.createElement('input'));//boolean 

事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。

<script>if(!'pattern'indocument.createElement('input')){//doclient/serversidevalidation}  
</script> 

谨记此方法依赖于JavaScript。

二十二、mark元素(MarkElement)

试想元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。

<h3>搜索结果</h3> 
<p>我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做<mark>北川景子</mark>。  
</p> 

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。现在我们可以使用header,article,section,和footer，还有机会使用div吗?当然可以。

例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用和元素，因为其更具语义。

二十四、什么可以开始立即使用

一直谈论到现在的HTML5要到2022年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上，有少量的HTML5的功能，我们可以在我们所有的项目中使用!更简单，更干净的代码总是一件好事。在今天的视频快速展示的技巧中，我将告诉你一些可用的选项。

二十五、哪些不是HTML 5？

那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML 5的人是可以理解的，甚至苹果无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是HTML 5。

不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还是同一人。

关键词： HTML5

加入微信
获取电子行业最新资讯
搜索微信公众号：EEPW
或用微信扫描左侧二维码