您的位置:首页 - 教程 - HTML5 - 正文
HTML 5结构排版布局

进行总体布局时候,具体可以用的方法。

1.大纲:文档中各内容区块的结构编排。

     内容区块可以使用标题元素来展示各级内容区块的标题。

     关于内容区块的编排可以分为“显示编排”和“隐式编排”。

     显示编排:明确使用section等元素创建文档结构,在每个内容区块内使用标题(h1-h6、hgroup)。更加清晰、易读。

     隐式编排:不明确使用section等元素,而是根据页面中所书写的各级标题(h1-h6、hgroup)等把内容区块自动创建出来。(容易让自动生成的结构与想要的不一样,易引起结构混乱,尽量使用显示编排。)

      标题分级:h1的级别最高,h6的级别最低。隐式编排时按以下规则自动生成内容区块:如果新出现的标题比上一个标题级别低,生成下级内容区块;如果新出现的标题比上一个标题级别高或级别相等,生成新的内容区块。

      不同的内容区块可以使用相同级别的标题:如父内容区块与子内容区块可以使用相同级别的标题,好处是每个级别的标题都可以单独设计,对于既需要“整个网页的标题”,又需要“文章的标题”(如书写文档时)会带来很大的便利。

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

       在css中追加如下声明,通知浏览器页面中使用的HTML 5新增元素都是以块方式显示的:

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

       在IE 8及之前的浏览器中,需要使用JS脚本来使浏览器可以正常使用这些结构:

       <script>

       document.createElement("header");
       document.createElement("nav");
       document.createElement("article");
       document.createElement("footer");
       </script>

 


评论: