说到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视频标签支持的格式:
视频标签支持的格式视频biaoqsource标签可以通过在多媒体标签内加入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的新增等等之后我会每天分享,希望多多