在介绍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的内容。希望我们的教程为你在制作页⾯的道路⾛的更远!
因篇幅问题不能全部显示,请点此查看更多更全内容