亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

慕少3449830 · 更新于 2020-07-09

文本段落列表

本章介紹文本段落等控制文字章節顯示的標簽。這些標簽通常只起到展示排版作用（當然還有 SEO 的作用），其他的用途不多。

1. 標題

用于標題的 HTML 標簽包括<h1> - <h6> 來定義。標題類似于 Word 中的標題，其作用是為了對文章進行排版，而不是只為了放大字號。良好的標題排版對搜索引擎比較友好。

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

展示效果如下：
圖片描述
標題標簽元素在 HTML5 使用較少，一般使用 css 樣式控制文字大小。

2. 文檔標題

title 用于定義文檔的標題，通常嵌入到 header 頭里邊，其作用是：

  • 定義在瀏覽器中顯示的文檔標題
  • 當網頁被添加到收藏夾時，顯示在收藏夾的標題
  • 顯示在搜索引擎中的標題
實例演示
預覽 復制
復制成功！
<title>HTML 頁面的標題</title>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

title 標題顯示在瀏覽器左上角

3. 段落

p 標簽用于定義段落，它是一個塊級元素，瀏覽器會自動在其前后換行

實例演示
預覽 復制
復制成功！
<p>麻葉層層苘葉光，誰家煮繭一村香。</p>
<p>隔籬嬌語絡絲娘。</p>
<p>垂白杖藜抬醉眼，捋青搗麨軟饑腸。</p>
<p>問言豆葉幾時黃。</p>
運行案例 點擊 "運行案例" 可查看在線運行效果

上述代碼段使用 p 段落標簽分隔了一首宋詞浣溪沙，使用 div+css 可以實現相同效果
圖片描述

4. 列表

4.1 有序列表

有序列表類似于 Word 中的有序列表，使用 ol 標簽定義， li 標簽定義列表項

實例演示
預覽 復制
復制成功！
<h2>HTML手冊</h2>
<ol> <!-- 定義一個有序列表 -->
<li>第一章.語法介紹</li> <!-- 列表項1 -->
<li>第二章.標簽</li> <!-- 列表項2 -->
<li>第三章.屬性</li>
</ol>
運行案例 點擊 "運行案例" 可查看在線運行效果

在瀏覽器中展示如下

圖片描述

其中有序列表中可以定義 start 屬性，用于設置列表序號的起始值

4.2 無序列表

ul 無序列表不同于有序列表的是-列表中的編號使用粗體原點表示，而不是數字其可以通過定義 compact 和 type 來設置編號的樣式，type 的可選值有 disc、square、circle。但是一般建議通過 css 統一控制樣式。

實例演示
預覽 復制
復制成功！
<h2>世界有幾大洲：</h2>
<ul>
    <li>亞洲</li>
    <li>歐洲</li>
    <li>北美洲</li>
    <li>南美洲</li>
    <li>非洲</li>
    <li>大洋洲</li>
    <li>南極洲</li>
</ul>
運行案例 點擊 "運行案例" 可查看在線運行效果

上述代碼展現的列表：

圖片描述

4.3 自定義列表

自定義列表通過 dl 標簽定義，使用 dt 定義標題， dd 定義內容。自定義列表可以實現類似 table 的效果。

實例演示
預覽 復制
復制成功！
<h3>自定義列表</h3>
        <dl>
            <dt>一級</dt>
                <dd>二級</dd>
                <dd>二級</dd>
            <dt>一級</dt>
                <dd>二級</dd>
                <dd>二級</dd>
        </dl>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

5. 總結

本章主要介紹了幾種文本段落列表的控制標簽以及屬性，這些標簽大部分用于文本排版。其實在在 HTML5 中，通過 css3+div 可以實現絕大多數效果，只不過需要對css非常熟悉才行，所以在不是非常熟悉 css 的情況下可以使用一些快捷的標簽來實現相同的效果