了解HTML5新增的那些变化,轻松做出手

说到HTML5(H5)我就必须知道什么是HTML5,HTML5是用来干什么的?它有哪些新特性和新变化呢?

HTML5---万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本,所以叫HTML5。

HTML5的设计目的是为了在移动设备上支持多媒体。增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3特性。

HTML5优势

(1)提高可用性和改进用户的友好体验

(2)更好的语义化标签

(3)可以给站点带来更多的多媒体元素(视频和音频),很好的替代FLASH和Silverlight

(4)当涉及到网站的抓取和索引的时候,对于SEO很友好;

尤其是现在这10年来移动设备运用越来越广泛,PC电脑网页的使用逐渐被移动端所取代,越来越多的人开始用手机,平板等移动设备上网浏览各种网站,HTML5就是HTML版本的第五次重大修改,目的就是为了适用移动端的发展.

1.H5新增语义化标签

使用语义化标签的好处是增强了代码的可阅读性,也方便了网站的seo(搜索引擎优化)

以前布局,我们基本用div来做。div对于搜索引擎来说,是没有语义的。所以H5新增许多语义化的标签,这种语义化标准主要针对搜索引擎的

header头部标签

nav导航标签

article内容标签

section块级标签(类似div)

aside侧边栏标签

footer尾部标签

H5标签布局图

这些新标签页面中可以使用多次的,移动端更喜欢使用这些标签,语义化的标签让我们的网站更容易被搜索引擎找到,吸引更多的用户.

2.H5新增多媒体标签

以前我们在浏览网页的时候,如果想看网页中的视频,就会提示必须安装flash和其他浏览器插件,H5新增多媒体标签可以很方便的在页面中嵌入音频和视频,而不再去使用落后的flash和其他浏览器插件,那么h5提供了哪些多媒体标签呢?

(1)audio音频标签

网页中直接嵌套音频标签

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,当然支持格式是有限的。

当前,audio元素支持三种音频格式:

MIME_type类型使用方式

source标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。就是方便不同浏览器选择使用不同类型的格式,因为谷歌火狐UC这些浏览器支持的格式不一样.

音频标签常见属性:

autoplay:如果出现该属性,则音频在就绪后马上播放。(打开浏览器自动播放)

controls:如果出现该属性,则向用户显示控件,比如播放按钮(比如图中的播放三角和小喇叭)

loop:如果出现该属性,则每当音频结束时重新开始播放。(循环播放)

(2)video视频标签

视频biaoq

视频标签支持的格式:

视频标签支持的格式视频biaoq

source标签可以通过在多媒体标签内加入source标签,用来指定多个播放路径,当第一个source标签的路径出错时,自动会切换到第二个source标签

\

video标签的常见属性

和音频属性一样

loop循环播放,autoplay自动播放controls播放控件显示,poster播放前展示的图片

video常用属性、方法、事件

调用这些事件控制视频样式

因为多媒体标签在不同的浏览器下是不一样的外观,我们有时候需要统一所有的样式,所以就需要我们自己使用div+多媒体的一些api实现控制条工具。

不同浏览器打开默认的样式不一样

我们要统一样式,让所有浏览器打开看到的都一样就必须调用上面的事件方法,

音频标签和视频标签使用基本一致,但是浏览器支持情况不同,使用的时候做出相应的改变.

3.H5新增input表单、表单属性

(1)新增表单的输入类型

之前的输入类型text(文本)password(密码)radio(单选)checkbox(复选)button(按钮)file(文件)submit(提交)reset(重置)image(图片)等常见的类型

新type类型用户只能输入该类型的内容新表单只能输入相应类型内容

新的类型包括了email(邮箱)url(网址)color(颜色)number数字输入框日期,数量等等一些用法,举例在当你运用number类型的时候,我们的手机就会自动弹出数字键盘大大方便了用户体验.

(2)新增的表单属性

placeholder:占位符-提示信息

autofocus:自动获得焦点-一般页面中放1个

multiple:可以多选文件提交

form属性,可以将输入标签放在表单的外面,还受到表单的管理

required:必填验证

属性的用法

H5新增的的一些结构上的比较常用的就这些了,还有一些CSS3的新增,API的新增等等之后我会每天分享,希望多多


转载请注明:http://www.aierlanlan.com/rzdk/1448.html