• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 22个HTML5 技巧三

22个HTML5 技巧三

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5教程,HTML5中国,22个HTML5 技巧三,admin,html5资料,html5文章,html5内容,h等相关知识,匿名希望在学习及工作中可以帮助到您
22个HTML5 技巧三:我们继续讲解HTML5的技巧。

16. 视频支持

音频元素<audio>非常像,在新的浏览器上也支持HTML5视频。事实上,就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是,由于HTML5说明文件并没有为视频指出某个特定的编码器,所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频,Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此,显示HTML5视频的时候,你必须提供两种格式。

17. 视频预先加载

你首先需要决定是否需要浏览器来预先加载视频。是否有需要?假设,一个访客进入某个专门用来显示视频的页面,那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload=”preload”来预先加载视频,或者之间添加preload也可以。

<video preload>
…
</video>
18. 显示控件

你可能已经注意到,用上面的代码的话,视频将只会显示成一个图片,而没有任何可控制的元件。为了获取这些播放控件,我们必需在视频元素里指定这些控件属性。

<video preload controls>
…
</video>
19. 正则表达式

对亏了新模式的属性,我们可以直接在代码中插入一个正则表达式。

<form method=post action=”">
<label for=”username”>create a username:
<input id=”username” type=”text” name=”username” placeholder=”4>< 10″ required=”required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”>
<button type=”submit”>Go

如果你比较熟悉正则表达式的话就会注意到这个新模式: [A-Za-z]{4,10}只接受大小写字母。这个字符串最少必需有四个字符,最多是十个字符。

20. 检测浏览器对属性的支持

前面提到过并非所有的浏览器都支持这些属性,那是否有什么方法能够判断浏览器是否能够识别它们呢?这个问题问得非常好,这里给大家介绍两种方式,第一个选择是使用Modernizr来检测,或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如,在前面的例子里,如果我们要确定浏览器是否能够执行pattern属性,就可以在页面上添加JavaScript:

alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
实际上,这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上面的代码里,我们创建了一个新的输入元素,并确认pattern属性是否能够被识别。如果能够识别的话,浏览器就支持这个功能,否则就不支持。

<script>
if (!’pattern’ in document.createElement(‘input’) ) {
// do client/server side validation
}
</script>
记住,这将需要依靠 JavaScript来实现!

21. Mark元素

<mark>元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如,如果我在一些博客中搜索"Open your Mind" ,我可以使用在&mark&标签里使用JavaScript 来包裹每一次动作。

<h3> search results </h3>
<h6> They were interrupted, just after Quato said, ”Open your Mind”.
22. 何时使用

是否还需要使用

您可能想查找下面的文章:

  • 一款利用html5和css3动画排列人物头像的实例演示
  • html5教程调用绘图api画简单的圆形代码分享
  • html5教程画矩形代码分享
  • html5教程制作简单画板代码分享
  • html5基础教程常用技巧整理
  • html5教程-Canvas入门
  • html5教程画矩形代码分享
  • HTML5晃动DeviceMotionEvent事件
  • HTML5教程之html 5 本地数据库(Web Sql Database)
  • HTML5中对contenteditable属性的解释与规定

相关文章

  • 2018-12-03html5仿AMD9官网酷炫的下载引导页动画特效的示例代码
  • 2017-08-06HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
  • 2017-08-06浅析border-radius如何兼容IE
  • 2018-12-03html5网站开发专用基础模板
  • 2018-12-03H5 是什么?
  • 2018-12-03html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法_html5教程技巧
  • 2018-12-03微信5.0打飞机游戏是web app吗?
  • 2018-12-03小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架
  • 2018-12-03Html5 Canvas初探学习笔记(13) -图片变换
  • 2018-12-03快速开发基于HTML5网络拓扑图应用的详解(图文)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 什么是canvas离屏技术?canvas放大镜效果如何实现?
    • 整理HTML5移动端开发的常用触摸事件
    • SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio
    • H5文件异步上传
    • 有关hgroup的文章推荐7篇
    • 详细介绍精选HTML5/CSS3动画应用源码分享
    • 在iOS里实现高性能的评分控件
    • 如何在 HTML 页面上显示出有交互的统计图?
    • 分享全球十款超强HTML5开发工具
    • Html5的Reset和Base样式结合的示例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有