- HTML+CSS網頁設計實踐教程
- 田中雨
- 917字
- 2021-03-19 20:43:02
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 style="font-size:12px">窗內官方群</a></h2>
<ul>
<li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;"> 窗內網一群：33925615</li>
<li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;"> 窗內網二群：45368980</li>
<li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;"> 窗內網三群：107423140</li>
<li style="BACKGROUND: url(images/groupico.gif) no-repeat left 50%;"> 窗內網四群：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"/> 傳真：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"/> 手機：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>