html5技术百科收集总结

html5技术百科收集总结内容摘要：

我们无需再依赖第三方插件区渲染音频。 HTML5 提供了 audio元素，嗯，至少，最终，我们将不必担心这些插件。 就目前，只有最近期的的浏览器提供 HTML5 音频支持。 在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。 audio autoplay=autoplay controls=controls source src= / source src= / a href=Download this file./a /audio Mozilla 和 WebKit 的还没有完全相处，当涉及到音频格式， Firefox 会希望看到一个 .ogg文件，而 WebKit 的浏览器支持 .mp3 扩展。 这意味着，至少在现在，你应该创建两个版本的音频。 当 Safari 加载页面时，它不会承认 .ogg 格式，会跳过它并移动到的 MP3 版本，因此。 请注意 IE，每往常一样，不支持这些格式， Opera 10 和以及以下版本只能使用 .wav 文件。 十七、 Video 支持 与 audio元素很类似，在新的浏览器中也存在 Video。 事实上，就在最近， YouTube 宣告了新的 HTML5 视频嵌入，当然，是为支持此功能浏览器。 因为 HTML5 的规范没有指定特定的视频编解码器，它留给了浏览器来决定。 虽然 Safari 和 Inter Explorer9 可以预期支持 格式的视频（其中 Flash 播放器可以播放）， Firefox 和 Opera 是坚持开源 Theora 和 Vorbis 格式。 因此，当显示 HTML5 的视频，您必须提供这两种格式。 video controls preload source src= type=video/ogg。 codecs=39。 vorbis, theora39。 / source src= type=video/mp4。 39。 codecs=39。 , 39。 / p Your browser is old. a href=Download this video instead./a /p /video 无论是” ogg”格式还是” mp4″格式的视频 Chrome 浏览器都能正确编码 还有一个值得注意的一些事情： 我们技术上不需要来设置 type 属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。 节省一些带宽，还是你自己声明下吧。 不是所有的浏览器理解 HTML5 视频。 在资源元素的下面，我们可以提供一个下载链接 ，或嵌入视频的 Flash 版本代替。 这取决于你。 controls 和 preload 属性就会在下面提及。 有方法可以让所有的浏览器支持 video 标签，具体参见我前面的“让所有浏览器支持HTML5 video 视频标签”一文。 十八、视频预载 (Preload Videos) 预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。 是否有必要。 或许吧。 如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。 影片可以通过设置 preload=” preload”或 是简单地添加 preload 进行预载。 我更喜欢后者的解决方案，它少了一点多余的东西。 video preload 十九、显示控制条 如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。 为了渲染出播放控制条，我们必须在 video 元素内指定 controls 属性。 video preload controls 请注意，不同浏览器渲染出来的进度条的模样都是不一样的。 二十、正则表达式 你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。 多亏了新的 pattern 属性，我们可以在标签处直接插入一个正则表达式。 form action= method=get label for=username姓名 :/label input id=username name=username type=text placeholder=410 个英文字母 pattern=[AZaz]{4,10} required=required autofocus / button type=submit提 交/button /form 如果你熟悉正则表达式，那么应该清楚 [AZaz]{4,10}表示接受 410 位不区分大小写的英文字母。 如果浏览器支持 pattern 属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。 如下图所示。 您可以狠狠地点击这里： HTML5 正则表达式 Demo //zxx:我自己小测了下，貌似目前只在 Chrome 下有效 (win 系统 ) 注意到，我们已经开始组合使用这些很棒的属性。 如果您对正则表达式概念模糊了，可以参见这里。 二十一、属性支持检测 如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。 恩，不错的观点，事实上我们是有几种方法的，这里我们讨论 2 个。 第一个是利用优秀的Modernizr 库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。 例如，在我们前面的例子，如果我们要确定浏览器是否能使用 pattern 的属性，我们可以添加一小段 JavaScript 到我们的页面上： alert( 39。 pattern39。 in (39。 input39。 ) )。 // boolean 事实上，这是一种确定浏览器兼容的常用方法。 jQuery 库了利用这种伎俩。 在上面，我们创建了一个新的 input 元素，并确定了里面的 pattern 属性浏览器是否认得。 如果是，浏览器则支持此功能。 否则，当然就不支持了。 script if (!39。 pattern39。 in (39。 input39。 ) ) { // 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 datacustomattr=My Value 巴拉巴拉， lady 嘎嘎 /div 检索自定义属性的价值 var theDiv = (39。 myDiv39。 )。 var attr = (39。 datacustomattr39。 )。 alert(attr)。 // My Value 此属性还可以用在 CSS 中，例如下面这个有些傻里傻气的 CSS 文字改变的例子： CSS 代码： .data_custom { display:inlineblock。 position: relative。 } .data_custom:hover { color: transparent。 } .data_custom:hover:after { content: attr(datahoverresponse)。 color: black。 position: absolute。 left: 0。 } HTML 代码： a datahoverresponse=我说过不要碰我。 href=不要碰我，雅蠛蝶~~/a 如果你的浏览器支持 after 伪类，以及 content 的 attr 属性，则可以看到类似下面的效果(IE8 不一样 )： 要查看上图所示的效果，您可以狠狠地点击这里： CSS 与 HTML5 自定义属性 demo。