如何用HTML5编写页面?

在介绍HTML5布局以前，咱们先了解一下几个名词的概念。

　　大纲：

　　所谓大纲简单说就是文档中各内容区块的结构编排。内容区块可使用标题元素(h1~h6)来表示各级内容区块的标题，综合运用各级内容区块的标题建立好文档的目录后，该目录就是一个大纲了。

　　显示编排：

　　是指明确使用section等元素建立文档结构，在每一个内容区块内使用标题(h1~h6)。

　　隐式编排：

　　是指不明确使用section等元素，而是根据页面中所书写的各级标题(h1~h六、hgroup)等把内容区块自动建立出来。

　　下面介绍在HTML5中几种在页面布局时注意的细节：

　　1)显示编排内容区块

　　对于显示编排的概念，上面已经解释过了。下面咱们举例说明：

　　2)隐式编排内容区块

　　举例说明：

　　从上面两种方式对比，显示编排更加清晰、易读。

　　3)标题分级

　　不一样的标题有不一样的级别，h1级别最高，h6级别最低。隐式编排时按下面规则自动生成内容区块：

　　▪ 若是新出现的标题比上一个标题级别低，生成下级内容区块。上面的例子已经说明。

　　▪ 若是新出现的标题比上一个标题级别高或级别相等，生成新的内容区块。下面举例：

　　若是将结构都改为显示编排，那么分析器就会自动按照编写的结构实现了。

　　由于隐式编排容易让自动生成的整个文档结构与想要的文档结构不一致，并且很容易引发文档结构的混乱，因此尽可能使用显示编排的方法进行页面布局。

　　4)不一样的内容区块可使用相同级别的标题

　　父内容区块与子内容区块可使用相同级别的标题h1。这样的好处是：每一个级别的标题均可以单独设计，若是既须要“网页级的标题”，又须要“文章的标题”，这样作将会带来很大的便利性。举例：

　　5)新的结构元素样式调用

　　因为目前不少浏览器不支持HTML5中的多数新增元素，并且咱们也不清楚客户端使用的浏览器类别，因此在编写CSS时追加以下声明：

　　目的是通知浏览器页面中使用的HTML5新增元素都是以块方式显示的。

　　其次，因为IE8及以前版本的浏览器是不支持CSS的方法来使用这些还没有支持的结构元素，为了在IE中能正常使用这些结构元素，须要使用JS来完成，以下代码：

　　若是浏览器支持HTML5中的结构元素，那么上面的这段JS脚本是没有必要的，可是它并不会对这些浏览器形成不良影响。

　　6)HTML5中，推荐使用article嵌套article的方式

　　一个页面中能够有多个独立的article元素，每个article元素都容许有本身的标题和脚注等从属元素，并容许对本身的从属元素单独设置样式。如：

　　经过上面的讲解，你是否是对HTML5页面布局有了全新的认识?继续关注咱们的教程，学习更多关于HTML5的内容。但愿咱们的教程为你在制做页面的道路走的更远!