基础回顾（四）| 重构HTML5&CSS3

重构HTML5&CSS3

H5

简介

• H5万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言，用于替代H4与XHTML的新一代标准版本，所以叫做H5

• XHTML可扩展性超文本标记语言，增强了的HTML，适应应用的更多需求

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

• 废弃了font、center…元素或者属性

优势

• 提高了可用性和改进用户的友好体验，更好的语义化标签

• 给站点带来更多的多媒体元素，很好替代FLASH和Silverlight

• 当涉及到网站的抓取和索引时候，对SEO很友好，被大量应用于移动程序和游戏，可移植性好

劣势

• IE9以下版本不兼容

新增语义化标签

header：头部标签 nav：导航标签 main：主体标签 footer：尾部标签

article：独立的内容标签 section：区段标签 aside：侧边栏标签

注意事项：

• 语义化标准主要针对搜索引擎的，新标签页面中可以使用多次
• IE9中兼容问题，转换为块级元素，移动端开发更喜欢

header,nav,article,aside,section,main,footer{display:block}

新增多媒体标签

可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件

音频

• 在不适用插件的情况下也可以原生支持音频格式的文件

<audio src="地址" controls="controls"></audio>

H5规定如果属性名和属性值相同，可以只写属性值

• 音频常见标签
  

  google禁用了autoplay

• 多种音频格式兼容的写法，直接一次性加载两种资源，如果还是没有就直接提示用户版本过低

视频

• 在不使用插件的情况下，实现视频的播放

<video src="地址" controls="controls"></video>

• 视频标签常见属性

google的视频自动播放只有在静音情况下才允许自动播放

• 多种视频兼容的写法，依旧是多添加视频文件格