第 5 章分組元素 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 5 章分組元素學習要點： 1.分組元素總匯 2.分組元素解析主講教師：李炎恢本章主要探討 HTML5?中分組元素的用法。所謂分組，就是用來組織相關內容的 HTML5?元素，清晰有效的進行歸類。 **一．分組元素總匯為了頁面的排版需要，HTML5?提供了幾種語義的分組元素。** | 元素名稱 | 說明 | | --- | --- | | p | 表示段落 | | div | 一個沒有任何語義的通用元素，和 span?是對應元素 | | blockquote | 表示引自他出的大段內容 | | pre | 表示其格式應被保留的內容 | | hr | 表示段落級別的主題轉換，即水平線 | | ul,ol | 表示無序列表，有序列表 | | li | 用于 ul,ol?元素中的列表項 | | dl,dt,dd | 表示包含一系列術語和定義說明的列表。dt?在 dl?內部表示術語，一般充當標題；dd?在 dl?內部表示定義，一般是內容。 | | figure | 表示圖片 | | figcaption | 表示 figure?元素的標題 | **二．分組元素解析** 1.<p>建立段落 ``` <p> 這是一個段落 </p> <p> 這也是一個段落 </p> ``` 解釋：<p>元素實際作用就是將內部包含的文本形成一個段落；而段落和段落之間保持一定量的空隙。 2.<div>通用分組 ``` <div> 這是一個通用分組 </div> <div> 這是又一個通用分組 </div> ``` 解釋：<div>元素在早期的版本中非常常用，通過<div>這種一般性分組元素進行布局。而在 HTML5?中，由于語義的緣故，被其他各種文檔元素所代替。和<p>段落的區別就是，兩段文本的上下空隙是沒有的，空隙間隔和<br>換行一樣。 3.<blockquote>引用大段他出內容 ``` <blockquote> 這是一個大段引自他出內容 </blockquote> <blockquote> 這是另一個大段引自他出內容 </blockquote> ``` 解釋：<blockquote>元素實際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮進的功能。語義上表示，大段的引用他出的內容。 4.<pre>展現格式化內容 ``` <pre> ##### ##### ##### ##### ##### </pre> ``` 解釋：<pre>元素實際作用就是編輯器怎么排版的，原封不動的展現出來。當然，這種只適合簡單的排版，復雜的排版就無法滿足要求了。 5.<hr>添加分隔 ``` <hr> ``` 解釋：<hr>元素實際作用就是添加一條分割線，意圖呈現上下文主題的分割。 6.<ul><li>添加無序列表 ``` <ul> <li> 張三 </li> <li> 李四 </li> <li> 王五 </li> <li> 馬六 </li> </ul> ``` 解釋：<ul>元素表示無序列表，而<li>元素則是內部的列表項。 7.<ol><li>添加有序列表 ``` <ol> <li> 張三 </li> <li> 李四 </li> <li> 王五 </li> <li> 馬六 </li> </ol> ``` 解釋：<ol>元素表示有序列表，而<li>元素則是內部的列表項。<ol>元素目前支持三種屬性 **ol 元素屬性** | 屬性名稱 | 說明 | | --- | --- | | start | 從第幾個序列開始統計：<ol start="2"> | | reversed | 是否倒序排列：<ol reversed>，一半主流瀏覽器不支持 | | type | 表示列表的編號類型，值分別為：1、a、A、i、I | **li 元素屬性** | 屬性名稱 | 說明 | | --- | --- | | value | 強行設置某個項目的編號。 | ``` <li value="7">王五</li> ``` 8.<dl><dt><dd>生成說明列表 ``` <dl> <dt> 這是一份文件 </dt> <dd> 這里是這份文件的詳細內容 1 </dd> <dd> 這里是這份文件的詳細內容 2 </dd> </dl> ``` 解釋：這三個元素是一個整體，但<dt>或<dd>并非都必須出現。 9.<figure><figcaption>使用插圖? ``` <figure> <figcaption> 這是一張圖 </figcaption> <img src="img.png"> </figure> ``` 解釋：這兩個元素一般用于圖片的布局。