学习笔记 第十二章 CSS3+HTML5网页排版

第12章   CSS3+HTML5网页排版

【学习重点】

• 正确使用HTML5结构标签
• 正确使用HTML5语义元素
• 能够设计符合标准的网页结构

12.1  使用结构标签

在制作网页时，不仅需要使用<div>标签来构建网页，还要使用下面几类标签完善网页结构：

• <h1>、<h2>、<h3>、<h4>、<h5>、<h6>：定义文档标题；
• <p>：定义段落文本；
• <ul>、<ol>、<li>：定义信息列表、导航列表、榜单结构等；
• <table>、<tr>、<td>等：定义表格结构；
• <span>：定义行内包含框。

12.1.1 使用div和span

文档结构基本构成元素是div，div表示区块（division）的意思，它提供了将文档分割为有意义的区域的方法。

为了减少使用不必要的标签，应该避免不必要的嵌套。

与div不同，span元素可以用来对行内元素进行分组。

12.1.2 使用id和class

HTML5是简单的文档标识语言，文档结构大部分使用<div>标签来完成。

为了能够识别不同的结构，一般通过定义id或class给它们赋予额外的语义，给CSS样式提供有效的“钩子”。

使用id标识元素时，id名必须是唯一的。在整个网站上，id名应该应用于语义相似的元素以避免混淆。

与id不同，同一个class可以应用于页面上任意数量的元素，因此class非常适合标识样式相同的对象。

12.1.3 认识显示类型

在常规网页设计中，CSS把标签分为两种基本显示形态：Block（块状）和Inline（行内）。块状元素的宽度一般为100%，占据一行；即使宽度不为100%，块状元素也始终占据一行。常用块状元素有：address、blockquote、div、dl、fieldset、form、h1-h6、hr、noframes、noscript、ol、p、pre、table、ul、li、legend。

行内元素没有固定的大小，定义它的width和height属性无效。行内元素可以在行内自由流动，但可以定义边界、补白、边框和背景，它显示的高度和宽度只能够根据所包含内容的高度和宽度来确定。常用行内元素有：a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、i、img、input、kbd、label、map、object、q、samp、script、select、small、span、strike、strong、sub、textarea、tt、var。

CSS3新增了box显示类型，详见第13章。

12.1.4 正确嵌套标签

【规则1】

body元素能够直接包含的元素有ins、del、script和block类型元素。

• block表示块状类型的元素，也就是说，body元素能够直接包含任何块状元素；
• script是头部隐藏显示的脚本元素，也就是说除了头部网页信息区域外，网页中（body元素内）能够包含脚本，但是不能够包含任何样式（style元素）；
• ins和del是两个行内元素，其中ins元素表示插入到文档中的文本，而del元素表示文本已经从文档中删除。

【规则2】

ins和del元素能够直接包含块状元素和行内元素等不同类型的元素，但是行内元素禁止包含块状元素。

【规则3】

p、h1、h2、h3、h4、h5和h6元素可以直接包含行内元素和纯文本内容，但不能直接包含块状元素——但可以间接包含块状元素。

例如，object、map和button行内元素中可以包含块状元素。

【规则4】

ul和ol元素只能够直接包含li元素，但是可以在li元素中包含其他元素。

【规则5】

dl元素只能够包含dt和dd元素，不能够包含其它元素。同时dt元素内只能包含行内元素，不能包含块状元素，而dd元素能够包含任何元素。

【规则6】

form元素不能直接包含input元素。因为input元素是行内元素，而form元素仅能够包含块状元素。

【规则7】

table元素能够直接包含caption、colgroup、col、thead、tbody和tfoot，但是不能够包含tr以及其它元素。如果在table元素中直接包含tr，则浏览器会自动在table和tr之间嵌入tbody元素。建议养成使用thead、tbody和tfoot元素的习惯。

caption元素只能够包含行内元素。tr元素只能够包含th和td元素。而th和td元素能够包含任何元素。

12.2  设计HTML5结构

为了使文档的结构更加清晰明确，HTML5新增与页眉、页脚、内容块等文档结构相关联的结构元素。

内容块是指将HTML页面按逻辑进行分割后的区域单位。例如，对于正文内容来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容块。

12.2.1 定义文章块

article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论独立的插件等。

另外，一个article元素通常有它自己的标题，一般放在一个header元素里面，有时还有自己的脚注。

当article嵌套使用时，内部的article元素内容必须和外部article元素内容相关。article元素支持HTML5全局属性。

12.2.2 定义内容块

section元素用于对网站或应用程序中页面上的内容进行分区。

一个section元素通常由内容及其标题组成。

div元素也可以用来对页面进行分区，但section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素，而非section元素。

在使用section元素时应该注意几个问题：

• 不要将section元素当做设置样式的页面容器，对于此类操作应该使用div元素；
• 如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素；
• 不要为没有标题的内容区块使用section元素。

12.2.3 定义导航块

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其它页面或当前页面的其它部分。

并不是所有的链接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。

具体来说，nav元素可以用于以下场合：

• 传统导航条，作用是当前画面跳转到网站的其它主要页面上去；
• 侧边栏导航，将页面从当前文章或当前商品跳转其它文章或其它商品页面上去；
• 页内导航，作用是在本页面几个主要的组成部分之间进行跳转；
• 翻页导航，翻页操作是指在多个页面的前后页或博客网站的前后篇文章之间滚动。

12.2.4 定义侧边栏

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其它类似的有别与主要内容的部分。aside元素有以下两种使用方法：

1. 作为主要内容的附属信息部分，包含在article元素中，其中的内容可以是与当前文章有关的参考资料、名词解释等。

    <header>
        <h1>HTML5</h1>
    </header>
    <article>
        <h1>HTML5历史</h1>
        <p>HTML5草案的前身名为web Application1.0，于2004年初被WHATWG提出，于2007年被W3C接纳，并成立了新的HTM                                                                                                                                                                                                                                                                                                                                                                                                                                                                    L工作团队。HTML5的第一份正式草案已于2008年1月22日公布。2014年10月28日，W3C的HTML工作组正式发布了HTML5的官方推荐标准</p>
        <aside>
            <h1>名词解释</h1>
            <dl>
                <dt>WATWG</dt>
                <dd>Web Hypertext Application Technology Working Group，HTML工作开发组的简称，目前与W3C组织同时研发HTML5.</dd>
            </dl>
            <dl>
                <dt>W3C</dt>
                <dd>World Web Consortium，万维网联盟，万维网联盟是国际著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了接触的贡献。</dd>
            </dl>
        </aside>

   article之内侧边栏

2. 作为页面或站点全局的附属信息部分，在article元素之外使用。

    <aside>
            <nav>
                <h2>友情链接</h2>
                <ul>
                    <li><a href="#">网站1</a></li>
                    <li><a href="#">网站2</a></li>
                    <li><a href="#">网站3</a></li>
                </ul>
            </nav>
        </aside>

   在article之外使用

12.2.5 定义主要区域

main元素表示网页中的主要内容。主要内容区域是指与网页标题或应用程序中本页主要功能直接相关或进行扩展的内容。

每个网页内部只能够放置一个main元素。不能将main元素放置在任何article、aside、footer、header或nav元素内部。

main元素不会对页面内容进行分区或分块。

12.2.6 定义标题栏

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题。

在一个网页中可以多次使用header元素。

在HTML5中，header元素通常包含h1~h6元素，也可以包含hgroup、table、form、nav等元素，只要是应该显示在头部区域的语义标签，都可以包含在header元素中。

12.2.7 定义标题组

hgroup元素可以为标题或子标题进行分组，通常它与h1~h6元素组合使用，一个内容块中的标题与其子标题可以通过hgroup元素组成一组。

如果文章只有一个主标题，则不需要hgroup元素。

<header>
    <hgroup>
        <h1>主标题</h1>
        <h2>副标题</h2>
        <h3>标题说明</h3>
    </hgroup>
    <p>
        <time datetime="2017-12-05">发布时间：2017年12月5日</time>
    </p>
</header>

标题组

12.2.8 定义脚注栏

footer元素可以作为内容块的注脚，如在父级内容块中添加注释，或者在网页中添加版权信息等。

与header元素一样，页面中也可以重复使用footer元素。

可以为article元素或section元素添加footer元素。

12.3  浮动显示

浮动布局不同于流动模式，它能够让对象脱离左右相邻元素，在包含框内向左或向右侧浮动显示，但是浮动元素不能脱离文档流，依然受文档流影响。

12.3.1 定义浮动显示

默认情况下，任何元素都不具有浮动特性，可以使用CSS的float属性定义元素向左或向右浮动，语法如下：

float: none | left | right

其中left表示元素向左浮动，right表示向右浮动，none表示消除浮动。

浮动布局模型有以下几个特征：

1. 浮动元素以块状显示，可以定义width和height属性。
2. 浮动元素与流动元素可以混合使用，不会重叠，都遵循先上后下显示规则，都收到文档流影响。但浮动元素能够改变相邻元素的显示位置，可以向左或向右并列显示。
3. 浮动元素仅能改变水平显示方式，不能改变垂直显示方式，依然受文档流影响。流动元素总会以流动的形式环绕浮动元素左右显示。
4. 浮动元素可并列显示，如果包含框宽度不够，则会错行显示。

12.3.2 清除浮动

使用CSS的clear属性可以清除浮动，定义与浮动相邻的元素在必要的情况下换行显示，这样可以控制浮动元素记载一行内显示。取值包括：

• left：清除左边的浮动元素，如果左侧存在浮动元素，则当前元素会换行显示；
• right：清除右边的浮动元素，如果右侧存在浮动元素，则当前元素会换行显示；
• both：清除左右两边浮动元素，不管哪边存在浮动元素，则当前元素都会换行显示；
• none：默认值，允许两边存在浮动元素。

12.3.3 浮动嵌套

浮动元素可以互相嵌套，嵌套规律与流动元素嵌套相同。浮动的包围元素总会自动调整自身高度和宽度以实现对浮动子元素的包含。

如果把浮动元素嵌入流动元素之内，则父元素不能够自适应子浮动元素的高度。

12.3.4 混合浮动布局

略

12.4  定位显示

精确定义网页元素的显示位置，可以是绝对位置，也可以是相对位置。

12.4.1 定义定位显示

在CSS3中可以通过position属性定义元素定位显示，语法如下：

position:static | relative | absolute | fixed

• static：表示不定位，遵循HTML5默认的流动模型；
• relative：表示相对定位，通过left、right、top、bottom属性确定元素在正常文档流中偏移位置；
• absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最近的一个具有定位属性的父定位包含框进行绝对定位。如果不存在这样的定位包含框，则相对于浏览器窗口，而层叠顺序则通过z-index属性来定义。
• fixed：表示固定定位，于absolute定位类型类似，但他的定位包含框是视图本身，由于视图本身是固定的，固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流影响。

12.4.2 定位框

CSS定位包含框（定位框）是绝对定位的基础。

定位框是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。

如果定义了包含元素为定位包含框以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。

12.4.3 相对定位

相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的。相对定位元素的偏移量与绝对定位一样。

相对定位元素遵循的是流动布局模型，存在于正常的文档流中，但他的位置可以根据原位置进行偏移。由于相对定位元素占有自己的空间，即原始位置保持不变，因此它不会挤占其它元素的空间，但可以覆盖在其它元素之上进行显示。

与相对定位不同，绝对定位元素完全被拖离正常文档流中原来的空间，且原来空间不再被保留，被相邻元素挤占。

把绝对定位元素设置在可视区域之外会导致浏览器窗口的滚动条；而设置相对定位元素设置在可视区域之外不会导致滚动条出现。

12.4.4 定位层叠

定位元素之间可以重叠显示，与图像合成类似。

在流动布局和浮动布局中是无法实现这种重叠效果的，而利用定位重叠技术可以创建动态网页。

在CSS中可以通过z-index属性来确定定位元素的层叠等级。

z-index属性只有在元素的position属性取值为relative、fixed或absolute时才可以使用。

z-index属性值越大，层叠级别越高；如果属性值相同，则根据结构顺序层叠。

如果z-index属性值为负值，则将隐藏在文档流的下面。

12.4.5 混合定位布局

混合定位是利用相对定位的流动模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确性优势互补。

例如：如果给父元素定义为position:relative，给子元素定义为position:absolute，那么子元素的位置将随着父元素进行变化。