霍者博客

欢迎访问HTML5最新发布

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,CSS3属性选择器集合:速度收藏先

引用样式表 //内联,行内,外部引用(<link rel="stylesheet" href=""/>)

!important //强制优先级。 添加在CSS属性后面。

}

属性选择器:{ E选择的元素。

E[att]:{ } //选择为具有att属性的添加样式。

e[att=”val”]{ } //选择具有att=””相同格式,添加新的样式。

E[att~=”15px”]{ } //选择具有att属性且属性值有多个,为其中的相同值(15px)添加新的样式。

...

HTML5的<meta>标签详解

定义针对搜索引擎的关键词:

<meta name="keywords" content="meta,red" />

定义对页面的描述:

<meta name="description" content="这是meta教程" />

定义页面的最新版本:

<meta name="revised" content="bu, 2016/5/10/" />

每 5 秒刷新一次页面:

...

使用HTML5的十大原因

第十大原因:易用性

俩个原因使得使用HTML5创建网站更加简单:语义上及其ARIA。新的HTML标签像<header>, <footer>,<nav>,<section>,<aside>等等,使得阅读者更加容易去访问内容。在以前,即使你定义了class或者ID你的阅读者也没有办法去了解给出的一个div究竟是什么。使用新的语义学的定义标签,你可以更好的了解HTML文档,并且创建一个更好的使用体验。

...

HTML5移动开发之路——HTML5与HTML4

HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 

5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。(HTML5也有了自己的logo).学习HTML5需要掌握下面几方面知识。

  • 1、HTML基础知识

...

HTML5新增的结构元素——能用并不代表就对

做移动端有一段时间,今天有同事问了我article和section标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬。忽然间觉得自己有必要再翻翻书籍,重温下html5的新元素。html5新增的结构元素,有的经常使用到,有的用不上,当页面禁用样式后,它们的展现跟div是没什么差别的,有同学可能会说,既然一样,又不影响页面的最终展现,不管是article还是section能用就好了。如果考虑实际项目针对用户,我也是这么认为的,但作为一个重构仔,我们需要让标签语义化,清晰的结构,更好的seo,利于特殊终端的阅读(无障碍),此时html5标签的作用就很明显了,并不是说能用就好。于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查找。

...

HTML5的4种表单自动验证属性

1、required属性:

<form>
        <input id="huozheweb_required" name="www.huozheweb.com" required type="text"/>
        <input type="submit" value="提交"/>
</form>

required属性可以用在大多数的输入元素上(除了隐藏元素、图片元素按钮上等)。

...

HTML5的progress标签的应用

progress标签:

从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条。在HTML5中我们终于可以不用模拟了。

<progress id="huozheweb_progress" max="100"></progress>

progress属性:

value:表示当前进度

...