HTML標籤是由尖括號括起來的詞,如<html>,<head>,<body>等。標籤通常成對出現。一對中的第一個標籤是開始標籤,第二個標籤是結束標籤。也可以將開始標籤稱爲起始標籤,結束標籤稱爲閉合標籤。
關於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提供了一些可以加在頁面中的特殊字符,如下:
字符 | 顯示結果 |
---|---|
| 空格 |
® | ® 已註冊 |
© | © 版權 |
™ | ™ 商標 |
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>
效果:
- 第一行
- 第二行
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>
顯示效果:
-
- 第一行
- 第二行
- 第一行
-
- 第一行
- 第二行
自定義列表可以互相嵌套。
可以通過CSS樣式表對列表的顯示進行修改。