HTML定義文本,列表

 HTML標籤是由尖括號括起來的詞,如<html>,<head>,<body>等。標籤通常成對出現。一對中的第一個標籤是開始標籤,第二個標籤是結束標籤。也可以將開始標籤稱爲起始標籤,結束標籤稱爲閉合標籤。

 關於HTML文檔的結構以及標籤的意義可以參考:

HTML是什麼

 我們着重介紹HTML中一些標籤的用法。

1. 文本標籤

1.1 段落標籤<p>

<html>
<!-- html文檔中可以不用頭標籤 -->
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落元素由 p 標籤定義</p>
</body>
</html>

 瀏覽器會自動地在段落的前後添加空行,段落標籤可以不加結束標籤,大多數瀏覽器可以正常顯示出來,但是不建議這麼做,因爲不能提現段落標籤的語義化。

 當顯示頁面時,瀏覽器會移除內容中多餘的空格和空行(不僅是<p>標籤的內容)。所有連續的空格或空行都會被算作一個空格。

1.2 標題標籤<hx>

 標題(Heading)是通過<h1> ~ <h6> 等標籤進行定義的,x代表標題的等級(大小)。<h1> 定義最大的標題,<h6> 定義最小的標題。

<html>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
</body>
</html>

 瀏覽器會自動地在標題的前後添加空行。

 <hx>標籤只用於標題,不要僅僅是爲了產生粗體或大號的文本而使用標題,這會破壞標籤的語義化,我們用CSS可以很容易的做到這一點。

1.3 強調標籤<em>,<strong>

 <em> 表示強調,<strong> 表示更強烈的強調。並且在瀏覽器中<em> 默認用斜體表示,<strong> 用粗體表示。

<html>
<body>
    <em>em標籤</em>
    <br/><!-- 換行標籤 -->
    <strong>strong標籤</strong>
</body>
</html>

1.4 引用標籤

 引用標籤作用是給標籤內的內容兩側加上引號,感覺這個操作很廢是吧,其實不然,還是爲了語義化,HTML所有標籤共同維護的語義化。

  • <q> 用於短的引用

  • <blockquote>用於長引用

1.5 換行標籤<br/>

 像在<p>,<hx>,<q>等標籤內,文本的換行會被瀏覽器忽略,但是可以使用<br>進行換行,這是它唯一的作用。

1.6 分割線標籤<hr/>

 <hr>可以產生一條分割線,它的樣式可以通過CSS進行改變。

1.7 特殊字符:

 HTML提供了一些可以加在頁面中的特殊字符,如下:

字符 顯示結果
&nbsp; 空格
&reg; ® 已註冊
&copy; © 版權
&trade; ™ 商標

2. address標籤

 <address>標籤,爲網頁加入地址信息,是標籤包圍的內容另起一行,並且首行縮進。在瀏覽器上顯示的樣式爲斜體,可以使用css樣式來修改<address>標籤的默認樣式。

 地址標籤的唯一作用就是語義化。

3. code標籤

  • <code>標籤描述一行代碼

  • <pre>預格式化文本,可以描述多行代碼

 在<pre>標籤中的文本會保留空格和換行符。

4. 列表標籤

4.1 無序列表

<ul>標籤定義無序列表,每行用<li>表示。

<ul>
<li>第一行</li>
<li>第二行</li>
</ul>

 效果:

  • 第一行
  • 第二行

4.2 有序列表

 <ol>標籤定義有序列表,每行用<li>表示。

<ol>
<li>第一行</li>
<li>第二行</li>
</ol>

 效果:

  1. 第一行
  2. 第二行

4.3 自定義列表

 <dl>標籤表示自定義列表, 每個自定義列表以 <dt> 開始。每個自定義列表的行以 <dd> 開始。

<dl>
<dt>
    <ol>
        <li>第一行</li>
        <li>第二行</li>
    </ol>
</dt>
<dt>

</dt>
    <ul>
        <li>第一行</li>
        <li>
            <ol>
                <li>第一行</li>
                <li>第二行</li>
            </ol>
        </li>
    </ul>
</di>

 顯示效果:




  1. 第一行
  2. 第二行




  • 第一行


    1. 第一行
    2. 第二行


 自定義列表可以互相嵌套。

 可以通過CSS樣式表對列表的顯示進行修改。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章