HTML5语义化标签

HTML5语义化标签

在学习HTML5语义化标签之前，首先来了解一下HTML5的一些相关知识。
一、兼容性
支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。

二 、语义化标签
含义：什么样的结构，采用什么样的标签。

好处：

1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。
2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4. 便于团队开发与维护。

标签：
• section ： 表示页面中的一个区块，类似于div,偏向画结构
• article ： 表示一块与上下文无关的独立的内容
• aside ： 在article之外的，偏向于在旁边的内容,在一侧的
• header ： 表示页面中一个内容区块或整个页面的标题

• footer ： 表示页面中一个内容区块或整个页面的脚注
• nav ： 表示页面中导航链接部分

• figure ： 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

• main ： 表示页面中的主要的内容(ie不兼容)
• hgroup ： 标题的一个分组（可用于有连续多个h1—h6标题）

• mark ：定义高亮显示的文本，默认背景颜色为黄色,可以更改颜色,是一个内联元素


• time ：一般用来放时间,内联元素
• dialog ：标记定义一个对话框(会话框)类似微信，默认是display:none; 有默认定位,有默认的边框
• embed ： 标记定义外部的可交互的内容或插件 比如flash