HTML+CSS网页设计实践教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2 新增的块级语义元素

HTML 5新增了多种块级语义元素，这些块级语义元素的使用与结构元素的使用一样，下面将介绍新增的语义元素。

2.2.1 aside元素

aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息，这些辅助信息可以包含当前页面相关的其他引用、备注、注释，甚至侧边栏和广告等其他类似的有别于主要内容的部分。

【练习7】

通常情况下，aside元素用来替代原来页面中的“<div id="sider"></div>”或“<div id="sidebar">”标记，下面主要演示该元素的使用。

（1）创建一个新的页面，设计页面时在页面的合适位置添加aside元素。页面中可以添加多个aside元素，以其中一个为例，其代码如下。

    <sider>
        <h2><span></span><a href="http://www.itzcn.com/#" style="font-size:12px">窗内官方群</a></h2>
        <ul>
            <li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;">&nbsp;&nbsp;窗内网一群：33925615</li>
            <li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;">&nbsp;&nbsp;窗内网二群：45368980</li>
            <li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;">&nbsp;&nbsp;窗内网三群：107423140</li>
            <li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;">&nbsp;&nbsp;窗内网四群：184726020</li>
        </ul>
        <span class="sider_b"></span>
    </sider>

（2）为上个步骤中的元素添加样式，部分样式代码如下。

    sider {
        float: right; width: 230px
    }
    sider h2 {
        background: url(sider_t.jpg) no-repeat left 50%; float: left; width:
        230px; line-height: 30px; height: 30px
    }
    sider h2 a {
        padding-left: 12px; background: url(h2_arrow.gif) no-repeat left 50%; margin-left: 9px; color: #315a9f
    }
    sider ul {
        border-right: #b9c3d0 1px solid; padding-right: 0px; border-top: #b9c3d0 0px solid; padding-left: 0px; float: left; padding-bottom: 12px; border-left: #b9c3d0 1px solid; width: 228px; padding-top: 12px; border-bottom: #b9c3d0 0px solid
    }
    sider LI {
        padding-right: 0px; padding-left 12px; float: left; padding-bottom: 1px; overflow: hidden; padding-top: 1px; width-space: nowrap;background: url(li_arrow.gif) no-repeat left 50%;margin-left:3px;width:202px;
    }
    sider .sider_b {
        background: url(sider_b.jpg) no-repeat; float: left; width: 230px; height: 15px
    }

（3）运行页面查看效果，如图2-7所示。

图2-7 aside元素的使用

2.2.2 figure元素

figure用于对元素进行组合，它表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，将其从网页上移除后不会对网页上的其他内容产生任何影响。

figure元素代表一个块级图像，还可以包含说明。使用该元素不仅可以显示图片，还可以使用它给audio、video、iframe、object和embed元素添加说明。如下代码演示了一个不带标题的figure元素的示例。

    <figure>
        <img src="images/mylogo.jpg" alt="Logo导航" />
    </figure>

可以为figure元素添加标题，添加标题时都是结合figcaption元素被使用的。figcaption元素从属于figure元素，因此，它必须书写在figure元素内部。将figcaption元素放在figure元素内的其他从属元素的前面或后面，一个figure元素内最多只允许放一个figcaption元素，但是可以放置多个其他元素。

【练习8】

例如，本次练习通过使用figcaption元素为figure元素添加标题。首先设计页面，与之有关的代码如下。

    <figure>
        <div id="right">
            <figcaption>常州蓝博纺织机械有限公司</figcaption>
            <ul>
                <li id="space"></li>
                <li><img  id="img_1" src="work8/images/ico.gif"/>&nbsp;传真：86-519-88254120</li>
                <li><img  id="img_line1" src="work8/images/line.gif"/></li>
                <li><img  id="img_2" src="work8/images/ico.gif"/>&nbsp;手机：13186695633</li>
                <li><img  id="img_line2" src="work8/images/line.gif"/></li>
                <!--省略其他内容-->
            </ul>
        </div>
    </figure>

运行网页查看上述代码的运行效果，如图2-8所示。

图2-8 figure元素的使用

2.2.3 dialog元素

dialog元素用来表示几个人之间的对话，它通常与dt和dd元素结合使用，其中dt元素表示讲话者，而dd元素可以表示讲话内容。

例如，下面通过一段代码演示dialog元素的基本使用。代码如下。

    <dialog>
        <dt>老师</dt>
        <dd>乐乐，你知道5+3等于多少吗？</dd>
        <dt>乐乐</dt>
        <dd>我知道，等于8.</dd>
        <dt>老师</dt>
        <dd>答对了！乐乐好棒！！</dd>
    </dialog>
上一章目录下一章