HTML5的结构学习(3) --- 综合运用

前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素。

1.大纲

HMTL5元素的关键就是将显示内容和便签类型紧密相关，提高了代码的语义化和可读性。

我们这里的大纲就是指整个网站内容的大体排版。具体可以分为显示排版和隐式排版两种。

1）排版内容区块

是指明确使用section等元素创建文档结构，并且每个section都有自己的标题（h1~h6,hgroup）

2）隐式排版内容区块

是指不明确使用section等元素，而是直接在每个标题下创建自己的内容

3）标题分级

同一区块中，可以标题要分级别显示。

不同的标题等级之间内容，要分隔显示。

显示使用section，隐式自动排在下面。

4）不同的内容区块可以使用相同级别的标题

比如网站本身标题和里面文章的标题属于不同的区块，我们就可以都是用h1

2.对新结构元素使用样式

因为浏览器兼容性问题我们还是需要告诉浏览器这些元素的一些基本属性。

追加为块级元素：

article, aside, section, dialog,figure,footer,header,legend,nav{
    display:block;
}

html5元素添加样式和之前的元素是一样的。

包括在js中创建元素也是相同的方式：

document.createElement("header");
document.createElement("article");
document.createElement("footer");