如何用HTML5编写页面?

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

　　大纲：

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

　　显示编排：

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

　　隐式编排：

　　是指不明确使用section等元素，而是根据页面中所书写的各级标题(h1~h6、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的内容。希望我们的教程为你在制作页面的道路走的更远!

转载于:https://www.cnblogs.com/zjqqqq/p/5061037.html