欢迎访问HTML5最新发布
今天遇到一个客户需要把首页本来是一张图片的位置换成一个视频,通常默认用flash就可以了,但是为了顺应潮流,我就试着用用HTML5了,但是再用的过程中还是发现了一些问题,下面就简单的讲解一下,完整的代码如下,下面就讲解一下其中几个控制点代码的意思。
<video width="480" height="400" controls="controls" autoplay="autoplay" controlslist="nodownload" oncontextmenu="return false;">
<source src="http://cloud.video.taobao.com//play/u/188631823/p/2/e/6/t/1/38087958.mp4" type="video/mp4"/>
</video>
controls="controls":向用户显示控件,比如播放按钮、播放进度条、音量控制等。
autoplay="autoplay":视频自动播放
controlslist="nodownload":控件上不显示下载按钮
oncontextmenu="return false;":视频画面上鼠标右键不显示视频下载等。
... HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
我全面介绍这些新的输入类型:
... 引用样式表 //内联,行内,外部引用(<link rel="stylesheet" href=""/>)
!important //强制优先级。 添加在CSS属性后面。
}
属性选择器:{ E选择的元素。
E[att]:{ } //选择为具有att属性的添加样式。
e[att=”val”]{ } //选择具有att=””相同格式,添加新的样式。
E[att~=”15px”]{ } //选择具有att属性且属性值有多个,为其中的相同值(15px)添加新的样式。
... 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。
... 定义针对搜索引擎的关键词:
<meta name="keywords" content="meta,red" />
定义对页面的描述:
<meta name="description" content="这是meta教程" />
定义页面的最新版本:
<meta name="revised" content="bu, 2016/5/10/" />
每 5 秒刷新一次页面:
... 第十大原因:易用性
俩个原因使得使用HTML5创建网站更加简单:语义上及其ARIA。新的HTML标签像<header>, <footer>,<nav>,<section>,<aside>等等,使得阅读者更加容易去访问内容。在以前,即使你定义了class或者ID你的阅读者也没有办法去了解给出的一个div究竟是什么。使用新的语义学的定义标签,你可以更好的了解HTML文档,并且创建一个更好的使用体验。
... HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML
5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。(HTML5也有了自己的logo).学习HTML5需要掌握下面几方面知识。
... 做移动端有一段时间,今天有同事问了我article和section标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬。忽然间觉得自己有必要再翻翻书籍,重温下html5的新元素。html5新增的结构元素,有的经常使用到,有的用不上,当页面禁用样式后,它们的展现跟div是没什么差别的,有同学可能会说,既然一样,又不影响页面的最终展现,不管是article还是section能用就好了。如果考虑实际项目针对用户,我也是这么认为的,但作为一个重构仔,我们需要让标签语义化,清晰的结构,更好的seo,利于特殊终端的阅读(无障碍),此时html5标签的作用就很明显了,并不是说能用就好。于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查找。
... 1、required属性:
<form>
<input id="huozheweb_required" name="www.huozheweb.com" required type="text"/>
<input type="submit" value="提交"/>
</form>
required属性可以用在大多数的输入元素上(除了隐藏元素、图片元素按钮上等)。
... progress标签:
从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条。在HTML5中我们终于可以不用模拟了。
<progress id="huozheweb_progress" max="100"></progress>
progress属性:
value:表示当前进度
...