本章學習目標
- 瞭解HTML語法的發展歷史
- 瞭解HTML語義化
- 掌握HTML常用標籤的基本使用
第一章已經介紹過HTML是一門超文本標記語言，通過HTML標記對網頁中的文本、圖片、聲音等信息進行描述。但是具體如何使用HTML標記對網頁中的信息進行控制，沒有介紹，本章就將從HTML的歷史、語義化、常用標籤三個方面詳細講解HTML。
2.1 HTML歷史
俗話說“瞭解歷史，才能明白當下，進而展望未來”。所以瞭解HTML的歷史，有利於更好的掌握HTML這門語言。
2.1.1 HTML歷史版本
像大多數軟件、硬件一樣，HTML發展至今，經歷了幾個版本，新增了許多HTML標記，同時也淘汰了一些標記，接下來介紹HTML在不同時期所對應的一些重要版本，具體如下：
- 超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（並非標準）
- HTML 2.0——1995年11月，IETF推薦標準。
- HTML 3.2——1997年1月14日，W3C推薦標準。
- HTML 4.0——1997年12月18日，W3C推薦標準。
- HTML 4.01——1999年12月24日，W3C推薦標準。
- HTML 5——2014年10月28日，W3C推薦標準。
HTML沒有1.0版本，最早的HTML官方規範，是由IETF（Internet Engineering Task Force，因特網工程任務組）發佈的HTML 2.0。之後W3C成為HTML語言標準的制定者，發佈了3.2、4.0、4.01和5等多個後續重要版本。通常所說的HTML5指的就是5這個最新的版本。
本教材涉及的所有規範及語法，都是嚴格按照HTML5標準進行講解的，在後面的章節中還會詳細的介紹HTML5及相關內容。
2.1.2 HTML與XHTML關係
在HTML語法上很寬鬆，如標籤和屬性可以是大寫、小寫，或者任意大小寫字母的組合，標籤可以不閉合等。有些設備很難兼容這些鬆散的語法，如手機、打印機等，這並不符合標準的發展趨勢，因此1999年12月W3C推出了HTML4.01版本後解散了HTML工作組。轉而開發XHTML，2000年1月26日發佈XHTML1.0。
XHTML是更嚴謹純淨的HTML版本，XHTML比HTML語法更加規範和嚴謹，目的是為了實現HMTL向XML過渡，讓作者按照統一的風格來編寫標籤，HTML中標籤和屬性不區分大小寫，而有效的XHTML 文檔則要求所有標籤和屬性必須一律小寫，當然還有一些其他的規範和要求，這裡不再贅述。XML雖然數據轉換能力強，完全可以替代HTML，但是面對互聯網上大量基於HTML編寫的網站，直接採用XML還為時過早，因此在HTML4.0的基礎上，用XML的語法規則對其進行擴展，得到了XHTML。
注：XML指可擴展標記語言（EXtensible Markup Language），用來傳輸和存儲數據。XML語言也可以做為很多語言的基礎語言，例如：XHTML、SVG等。
HTML的不同版本對<!DOCTYPE>寫法也有不同，具體如下：
HTML4.01中<!DOCTYPE>寫法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML1.01中<!DOCTYPE>寫法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5中<!DOCTYPE>寫法
<!DOCTYPE HTML>
因為 HTML 4.01和XHTML1.0 基於 SGML，所以 DOCTYPE 需要對 DTD 進行引用。而 HTML 5 不基於 SGML，因此不需要對 DTD 進行引用，因此HTML5的DOCTYPE寫法相當簡單。這裡建議讀者都採用最新的HTML5版本<!DOCTYPE>寫法，第一章已經介紹過在DW工具中默認設置不同類型的文檔聲明。
2.2 什麼是HTML語義化
所謂HTML語義化指的是，根據網頁中內容的結構，選擇適合的HTML標籤進行編寫。HTML語義化的意義主要有以下幾點：
- 在沒有CSS的情況下，頁面也能呈現出很好的內容結構、代碼結構。
- 有利於SEO，讓搜索引擎爬蟲更好的理解網頁，從而獲取更多的有效信息，提升網頁的權重。
- 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
- 便於團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。
HTML標籤都具備語義化，根據網頁展示的內容結構，選擇正確的HTML標籤進行解析與編碼。
注： SEO是指在瞭解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目的。
2.3 HTML常用標籤
HTML標籤非常多，有些由於歷史問題已經廢棄，有些屬於HTML5中新添加的，這部分H5新標籤會在H5章節中給讀者講解，本章主要講解一些HTML中常用標籤的使用。
2.3.1 標題標籤
瀏覽新聞類網頁時，經常能看見文章的標題，如圖2.1所示。
圖2.1 千鋒教育新聞標題
圖2.1的標題就是用HTML中的標題標籤來實現的，HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等標籤來定義標題部分，其語法格式如下：
<hn 屬性=“屬性值”>標題文本</hn>
接下來通過案例來演示標題標籤，如例2-1所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>定義標題</title>
6 </head>
7 <body>
8 <h1>這是一級標題</h1>
9 <h2>這是二級標題</h2>
10 <h3>這是三級標題</h3>
11 <h4>這是四級標題</h4>
12 <h5>這是五級標題</h5>
13 <h6>這是六級標題</h6>
14 </body>
15 </html>
運行結果如圖2.2所示。
圖2.2 標題標籤顯示效果
從上例運行結果可以看出，默認情況下標題文字的顯示方式是加粗左對齊，並且從<h1>到<h6>字號遞減，如果想改變標題的對齊方式，需要用到align屬性，其取值如表2.1。
接下來通過案例來演示標題標籤對齊方式的設置及效果，如例2-2所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>定義標題對齊方式</title>
6 </head>
7 <body>
8 <h1>這是一級標題</h1>
9 <h2 align="left">這是二級標題</h2>
10 <h3 align="center">這是三級標題</h3>
11 <h4 align="right">這是四級標題</h4>
12 </body>
13 </html>
運行結果如圖2.3所示。
圖2.3標題對齊方式顯示效果
標題很重要，它有利於網頁搜索引擎的優化，其中<h1>標題的重要性最高，<h6>標題的重要性最低，一般一個頁面只能有一個<h1>，而<h2>~<h6>可以有多個。
2.3.2 段落標籤
瀏覽新聞類網頁時，經常能看見文章的段落，如圖2.4所示。
圖2.4 千鋒教育新聞段落
圖2.4中的段落在HTML中使用<p>標籤實現，用於在網頁中把文字有條理地顯示出來，其語法格式如下：
<p 屬性=“屬性值”>段落文本</p>
接下來通過案例來演示段落標籤，如例2-3所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>段落標籤</title>
6 </head>
7 <body>
8 <h1 align="center" >扣丁學堂</h1></h1>
9 <p align="left">扣丁學堂是中國IT培訓教育品牌領導者,擁有最新最全的IT培訓視頻課
10 程,專注於發佈和更新iOS培訓、Android培訓、HTML5培訓、UI培訓、PHP培訓視頻教程,
11 著力於培養移動互聯網人才。</p>
12 <p align="ri">遇到IT技術難題，就上扣丁學堂學堂。</p>
13 </body>
14 </html>
運行結果如圖2.5所示。
圖2.5 段落標籤顯示效果
2.3.3 文本格式化標籤
文本格式化標籤就是針對文本進行各種格式化的標籤，例如加粗、斜體、上標、下標等。如表2.2所示。
表2.2中列出了對文本格式化的幾種標籤，下面將詳細介紹這幾種標籤的使用和效果。
1. <strong>標籤
<strong>標籤將文本定義為語氣更強的強調內容，展示效果為加粗。接下來通過案例演示<strong>標籤，如例2-4所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本格式化</title>
6 </head>
7 <body>
8 <strong>用良心做教育！</strong>
9 </body>
10 </html>
運行結果如圖2.6所示。
圖2.6 strong標籤顯示效果
注意：<b>標籤的展示效果跟<strong>完全相同，但是<b>標籤不具備語義化強調的作用，只是顯示加粗效果。
2. <em>標籤
<em>標籤也是將文本定義為強調的內容，只不過比<strong>標籤強調的稍弱些，展示效果為斜體，接下來通過案例來演示<em>標籤，如例2-5所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本格式化</title>
6 </head>
7 <body>
8 <em>用良心做教育！</em>
9 </body>
10 </html>
運行結果如圖2.7所示。
圖2.7 em標籤顯示效果
注意：<i>標籤的展示效果跟<em>完全相同，但是<i>標籤不具備語義化強調的作用，只是顯示斜體效果。
3. <sup>和<sub>標籤
<sup>標籤用於將文本定義為上標文本，<sub>標籤用於將文本定義為下標文本，接下來通過案例來演示<sup>和<sub>標籤，如例2-6所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本格式化</title>
6 </head>
7 <body>
8 <p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
9 <p>H<sub>2</sub>O</p>
10 </body>
11 </html>
運行結果如圖2.8所示。
圖2.8 sup、sub標籤顯示效果
4. <del>和<ins>標籤
<del>標籤可用於定義已被刪除的文本， <ins>標籤可用於定義已經被插入的文本，<del>標籤與<ins>標籤配合使用，來描述文檔中的更新和修正。接下來通過案例來演示<del>和<ins>標籤，如例2-7所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本格式化</title>
6 </head>
7 <body>
8 <p><del>刪除文本加刪除線</del></p>
9 <p><ins>插入文本加下畫線</ins></p>
10 </body>
11 </html>
運行結果如圖2.9所示。
圖2.9 del、ins標籤顯示效果
文本格式化標籤，一定要根據它們的語義來記憶，至於它們的默認樣式，後續可以通過CSS方式進行修改。
2.3.4 引用標籤
引用標籤就是針對文本進行各種引用的標籤，例如縮略詞、短語解釋、著作、地址等。主要劃分成幾大類，如表2.3所示。
表2.3中列出了引用標籤的幾種分類，下面進行詳細介紹。
1. <blockquote>和<q>標籤
<blockquote>和<q>標籤都是對文本的解釋引用，<blockquote>標籤引用是用大段的段落進行解釋，而<q>標籤引用是小段的短語進行解釋，接下來通過案例來演示<blockquote>和<q>標籤，如例2-8所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本格式化</title>
6 </head>
7 <body>
8 <p>"死而後已"一語出自諸葛亮《出師表》：<blockquote>“凡事如是，難可逆見，
9 臣鞠躬盡瘁，死而後已，至於成敗利鈍，非臣之明所能逆睹也。"</blockquote></p>
10 <p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>
11 </body>
12 </html>
運行結果如圖2.10所示。
圖2.10 <blockquote>、<q>標籤顯示效果
由例2-8中可以看出，<blockquote>標籤左右會空出一些距離，<q>標籤會自動加上引號。
2. <abbr>標籤
<abbr>標籤用來引用縮寫或首字母縮略語，接下來通過案例來演示<abbr>標籤，如例2-9所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>引用標籤</title>
6 </head>
7 <body>
8 <p><abbr title="World Health Organization">WHO</abbr>
9 成立於 1948 年。</p>
10 </body>
11 </html>
運行結果如圖2.11所示。
圖2.11 <abbr>標籤顯示效果
例2-9中可以看到一個title屬性，當鼠標移入到設置title的區域時，就會顯示提示信息。
3. <address>和<cite>標籤
<address>標籤用來引用地址信息，<cite>標籤用來引用著作的標題，展示效果為斜體，接下來通過一個案例來演示<address>和<cite>標籤，如例2-10所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>引用標籤</title>
6 </head>
7 <body>
8 <address>
9 <p>網易北京公司</p>
10 <p>地址:北京市海淀區西北旺東路10號院</p>
11 <p>郵編:100084</p>
12 </address>
13 <p><cite>資治通鑑</cite>由北宋司馬光主編的一部多卷本編年體史書</p>
14 </body>
15 </html>
運行結果如圖2.12所示。
圖2.12 <address>、<cite>標籤顯示效果
2.3.5 水平線標籤
有時為了使文檔結構清晰、層次分明，常常需要在網頁中添加一些水平線將段落與段落之間分隔開，HTML中使用<hr>標籤來創建橫跨網頁的水平線。另外<hr>屬於單標籤，在網頁中輸入一個<hr/>標籤，就添加了一條默認樣式的水平線，<hr>標籤的常用屬性如表2.4所示。
接下來通過案例來演示水平線標籤，如例2-11所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>水平線標籤</title>
6 </head>
7 <body>
8 <p align="center">扣丁學堂</p>
9 <hr color="#003399" width="100" size="5">a
10 <p align="left">遇到IT難題，就上扣丁學堂。</p>
11 <hr>
12 <p>遇到問題，在線解答。</p>
13 </body>
14 </html>
運行結果如圖2.13所示。
圖2.13 <hr>標籤顯示效果
例2-11中，第9行定義水平線標籤，並設置了color、width、size屬性，並沒有設置align屬性，可以發現align屬性默認居中對齊，第11行定義水平線標籤，其屬性都是默認值，可發現width屬性默認的是瀏覽器窗口的100%。
2.3.6 特殊符號
在編寫一些文本時，經常會遇到輸入法無法輸入的字符，如®（註冊商標）、©（版權符）等，還有往一段文字中加入多個空格時，頁面並不會解析出多個空格。這些無法輸入和空格字符都是特殊字符，在HTML中，為這些特殊字符準備了專門的代碼，如表2.5。
接下來通過案例來演示這些特殊字符表示代碼，如例2-12所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>特殊符號</title>
6 </head>
7 <body>
8 <p>®註冊商標 ©版權 空格 < 小於號 >大於號</p>
9 <p>&和號 ¥人民幣 °攝氏度 ±正負號 ×乘號</p>
10 <p> ÷除號 ¹上標1 ²上標2 ³上標3</p>
11 </body>
12 </html>
運行結果如圖2.14所示。
圖2.14 難輸入符號顯示效果
在DW中，只要輸入一個&符號，就可以看到相關特殊符號的提示信息。如圖2.15所示。
圖2.15 DW中特殊符號提示功能
2.3.7 圖像標籤
每一張網頁都離不開圖片元素，在網頁中添加圖片是非常重要的操作，如圖2.16所示。
圖2.16 圖片效果展示
HTML中使用<img>標籤來添加圖片，<img>屬於單標籤，其語法格式如下
<img src=”圖像URL”/>
其中src是用於指定圖像文件的路徑和文件名的屬性，是img標籤的必需屬性。接下來用案例來簡單演示img標籤的使用。如例2-13所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>圖像標籤</title>
6 </head>
7 <body>
8 <img src="qianfeng.jpg"/>
9 </body>
10 </html
運行結果如圖2.17所示。
圖2.17 圖像標籤顯示效果
src屬性引用的是當前圖片的地址，圖片的名為qianfeng，圖片的格式為.png，接下來針對圖片的地址和圖片的格式進行詳細講解。
1. 圖片的地址
src屬性引用的是當前圖片的地址，所謂地址就是一個文件的路徑。讀者在網頁中通過地址來找到相應位置的元素。那麼地址分為相對地址與絕對地址，相對地址即被引入的文件相對與當前頁面的地址。絕對地址即文件在網絡或本地的絕對位置。
相對地址有以下三種寫法，具體如下。
<img src=”qianfeng.jpg”/>
<img src=”img/qianfeng.jpg”/>
<img src=”../img/qianfeng.jpg”/>
第一個相對地址說明當前頁面和圖片在同一個目錄下。第二個相對地址說明圖片在頁面同級的img文件夾中。第三個相對地址說明圖片在頁面上一級的img文件夾中。
絕對地址有以下兩種寫法，具體如下。
<img src="file:///D|/qf/2017/book/2/qianfeng.jpg"/>
<img src=”http://www.mobiletrain.org//images/index/qianfeng.jpg”/>
第一個絕對地址在本地D盤的相應文件夾下。第二個絕對地址在網絡中的相應文件夾下。
當前網頁和圖片文件如果同時移動到其他位置時，相對地址是不會出問題的，因為兩個文件的相對位置並沒有發生變化。而絕對地址則會有問題，因為地址是唯一的路徑。所以在開發網頁的時候建議讀者儘量採用相對地址。
2. 圖片格式
網頁中加載圖像如果太大會造成網頁加載速度慢，太小圖片會顯示不清晰，在網頁中選擇合適的圖片格式加載顯得尤為重要，常用的圖片格式主要有jpg、png和gif三種格式，接下將分別進行詳細講解。
（1）jpg格式
jpg格式的圖片是一種有損壓縮的圖像格式，即每次修改圖片都會造成一些圖像數據的丟失。jpg是特別為照片圖像設計的文件格式，可以很好地處理大面積色調的圖像，一般在網頁中用來展示色彩豐富的圖像。如圖2.18所示。
圖2.18 jpg格式圖片顯示效果
（2）png格式
png格式的圖片相對於jpg、gif格式最大的優點是體積小，支持alpha透明（全透明、半透明、全不透明），可以很好地理透明方式的圖片，比如網頁中的logo圖片可以在不同的背景底色下完美展現。如圖2.19所示，但png不支持動畫。另外需要注意，IE6,可以支持png-8，但是在處理png-24的透明時會顯示為灰色。通常，圖片保存為png-8會在同等質量下獲得比gif更小的體積，而半透明的圖片只能使用png-24。
圖2.19 png格式圖片顯示效果
（3）gif格式
gif格式圖片最重要的特點是支持動畫，可以很好地處理動畫效果的圖片，如網頁中的廣告圖片。如圖2.20所示。同時gif是一種無損的圖像格式，修改圖片幾乎不會造成圖像數據的丟失。而且gif也支持透明（全透明和全不透明），因此很適合在網頁中使用。但gif只能處理256種顏色，在網頁製作中，常用於logo、小圖標及其他色彩相對單一的圖像。
圖2.20 gif格式圖片顯示效果
<img>標籤除了src屬性外，還包括一些其他屬性，如表2.6所示。
表2.6中簡單描述了img標籤中常用的屬性，為了使初學者更好地理解和應用這些屬性，接下來進行詳細講解。
1. alt屬性
alt屬性是圖片顯示不出來時的提示文字。當設置了alt屬性後，如果圖片正常顯示的話，是看不到任何效果的，只有當圖片地址出問題導致圖片不顯示時，才可以看到alt的提示信息。接下來通過案例來演示alt屬性，如例2-14所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>圖像標籤</title>
6 </head>
7 <body>
8 <img src="qianfeng.jpg">
9 <img src="qianfengError.jpg" alt="千鋒教育">
10 </body>
11 </html>
運行結果如圖2.21所示。
圖2.21 alt屬性顯示效果
2. title屬性
title屬性是鼠標移到圖片上的提示文字。當設置了title屬性後，如果鼠標移入到圖片上時，就會顯示title的提示信息。接下來通過案例來演示title屬性，如例2-15所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>圖像標籤</title>
6 </head>
7 <body>
8 <img src="qianfeng.jpg" title="千鋒教育">
9 </body>
10 </html>
運行結果如圖2.22所示。
圖2.22 title屬性顯示效果
alt屬性和title屬性都是有利於SEO搜索引擎的優化和用戶體驗的提升，只是它們展示的方式不一樣。
2.3.8 鏈接標籤
單個網頁不能容納網站需要的所有信息，需要多個網頁構成，這時就點擊鏈接可以從一張網頁跳轉到另一張網頁，如圖2.23所示。
圖2.23鏈接效果展示
HTML中使用<a></a>標籤來定義鏈接部分實現網頁的跳轉，其語法格式如下。
<a href=“鏈接頁面地址” target=“鏈接打開的方式”>鏈接對象</a>
接下來通過案例來演示鏈接標籤，如例2-16所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鏈接標籤</title>
6 </head>
7 <body>
8 <a href="2-15.html">打開一個新的網頁</a>
9 <a href="http://www.mobiletrain.org">千鋒官網</a>
10 <a href="../照片.rar">下載壓縮包文件</a>
11 </body>
12 </html>
運行結果如圖2.24所示。
圖2.24 鏈接標籤顯示效果
鏈接和圖像一樣，地址可以是相對地址或絕對地址。鏈接除了可以鏈接地址外，還可以鏈接其他的元素（壓縮包，word文檔，PPT文檔等）。例2-16中第一個鏈接打開的是一個本地中的相對地址，第二個鏈接打開的是一個網絡上的絕對地址，第三個鏈接點擊後會下載一個壓縮包文件。
鏈接可以針對文字，也可以針對圖片，當點擊圖片時會打開一個新的網頁，接下來通過案例來演示，如例2-17所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鏈接標籤</title>
6 </head>
7 <body>
8 <a href="2-15.html">
9 <img src="qianfeng.jpg">
10 </a>
11 </body>
12 </html>
運行結果如圖2.25所示。
圖2.25 鏈接圖片的顯示效果
例2-16、2-17中<a>標籤只定義了href屬性，<a>標籤除了href屬性外還包含target和name兩個重要屬性，下面就來分別介紹<a>標籤的這三個屬性。
1. href屬性
herf屬性就是來指定鏈接目標的url地址，為<a>標籤定義herf屬性後，它就有了鏈接的功能。
2.name屬性
有些網頁的內容較多，頁面過長，如百度百科千鋒教育，只能不斷的拖動滾動條來瀏覽網頁，查看所需要的內容，效率較低，而且很不方便，這時可以通過<a>標籤的name屬性實現站內跳轉，這種站內的跳轉的方式也稱錨點操作，接下來通過案來演示name屬性的作用，如例2-18所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鏈接標籤</title>
6 </head>
7 <body>
8 <a href="#h5Pos">HTML5</a>
9 <a href="#phpPos">PHP</a>
10 <p>點擊上面的鏈接可跳轉到指定的位置</p>
11 <a name="h5Pos">HTML5的內容</a>
12 <p>HTML5</p>
13 <p>HTML5</p>
14 <p>HTML5</p>
15 <p>HTML5</p>
16 <p>HTML5</p>
17 <a name="phpPos">PHP的內容</a>
18 <p>PHP</p>
19 <p>PHP</p>
20 <p>PHP</p>
21 <p>PHP</p>
22 <p>PHP</p>
23 </body>
24 </html>
運行結果如圖2.26所示。
3.target屬性
target屬性用於指定鏈接頁面的打開方式，其取值如表2.7所示
目前常用的取值有_self和_blank兩種，接下來通過案例來演示這兩種取值的功能，如例2-19所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鏈接標籤</title>
6 </head>
7 <body>
8 <a href="2-3.html" target="_self">當前窗口打開鏈接</a>
9 <a href="2-3.html" target="_blank">新窗口打開鏈接</a>
10 </body>
11 </html>
運行結果如圖2.27所示。
圖2.27 target屬性的顯示效果
一般情況下，target只用到“_self”和“_blank”這兩個屬性值，其他兩個不需要深究，因為幾乎用不到。
2.3.9 列表標籤
列表是網頁中一種常用的數據排列方式，在網頁中到處都可以看到列表的身影，如圖2.28、圖2.29，都是網頁中常見的列表。
HTML中列表分為有序列表、無序列表和定義列表三種，下面將分別介紹這三種列表。
1. 有序列表
在HTML中用<ol>標籤表示有序列表，列表項目用<li>標籤表示，列表項目有先後順序之分，因此稱為有序列表。接下來通過案例來了解有序列表，如例2-20所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鏈接標籤</title>
6 </head>
7 <body>
8 <ol>
9 <li>HTML</li>
10 <li>CSS</li>
11 <li>JavaScript</li>
12 <li>PHP</li>
13 <li>JAVA</li>
14 </ol>
15 </body></html>
運行結果如題2.30所示。
圖2.30 有序列表展示效果
圖2.31中可以看到前面的阿拉伯數字是默認效果，可以通過有序列表的type屬性來設置不同的顯示效果，其取值如表2.8所示。
接下來通過案例來演示type屬性的用法，如例2-21所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>列表標籤</title>
6 </head>
7 <body>
8 <ol type="a">
9 <li>HTML</li>
10 <li>CSS</li>
11 <li>JavaScript</li>
12 <li>PHP</li>
13 <li>Java</li>
14 </ol>
15 </body>
16 </html>
運行結果如圖2.31所示。
圖2.31 有序列表展示效果
在有序列表中，除了type屬性之外，還可以為<ol>定義start屬性用於規定項目符號的起始值，為<li>定義value屬性用來規定項目符號的數字。
以上的效果都是HTML自帶效果，如果效果上有更多的需求，可以配合CSS來完成，例如圖2.32的效果，讀者可以在學習完CSS時再來實現。
圖2.32 CSS美化有序列表
2. 無序列表
在HTML中用<ul>標籤表示無序列表，列表項目用<li>標籤表示，列表項目沒有先後順序之分，因此稱為無序列表。接下來通過案例來演示無序列表，如例2-22所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset=”utf-8”>
5 <title>列表標籤</title>
6 </head>
7 <body>
8 <ul>
9 <li>HTML</li>
10 <li>CSS</li>
11 <li>JavaScript</li>
12 <li>PHP</li>
13 <li>JAVA</li>
14 </ul>
15 </body>
16 </html>
運行結果如圖2.33所示。
圖2.33 無序列表展示效果
跟有序列表類似，讀者可以看到默認情況下無序列表前面會有一個黑色的小圓點，同樣可以通過type屬性修改其顯示效果，type屬性取值如表2.9。
接下來通過案例來演示無序列表type屬性取值，如例2-23所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset=”utf-8”>
5 <title>列表標籤</title>
6 </head>
7 <body>
8 <ul type=”circle”>
9 <li>HTML</li>
10 <li>CSS</li>
11 <li>JavaScript</li>
12 <li>PHP</li>
13 <li>JAVA</li>
14 </ul>
15 </body>
16 </html>
運行結果如圖2.34所示。
圖2.34 無序列表展示效果
<li></li>之間相當於一個容器，可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允許直接在<ul></ul>標記中輸入文字。
3. 定義列表
定義列表通常用於對專業術語或名詞進行解釋和描述，與有序列表和無序列表不同，定義列表項目前沒有任何項目符號。其語法如下。
<dl>
<dt>定義名詞</dt>
<dd>名詞解釋和描述</dd>
……
</dl>
上面的語法中，<dl></dl>標籤用於定義列表，<dt></dt>和<dd></dd>並列嵌套於<dl></dl>中，其中<dt></dt>標籤用於定義專業術語或名詞，<dd></dd>標籤用於對名詞進行解釋和描述。一對<dt></dt>可以對應多對<dd></dd>，即一個名詞可以有多個解釋和描述。接下來通過案例來演示定義列表，如例2-24所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>列表標籤</title>
6 </head>
7 <body>
8 <dl>
9 <dt>HTML</dt>
10 <dd>超文本標記語言</dd>
11 <dt>CSS</dt>
12 <dd>層疊樣式表</dd>
13 <dt>JavaScript</dt>
14 <dd>網頁腳本語言</dd>
15 </dl>
16 </body>
17 </html>
運行結果如圖2.35所示。
圖2.35 定義列表展示效果
定義列表在實際開發中不常用，大多數情況還是使用有序列表和無序列表，後面章節中還會詳細講解HTML標籤使用規範。
2.3.10 <div>與<span>
div全稱為division，“分割、分區”的意思，<div>標籤用來劃分一個區域，相當於一塊區域容器，可以容納段落、標題、表格、圖像等各種網頁元素。即HTML中大多數的標籤都可以嵌套在<div>標籤中，<div>中還可以嵌套多層<div>，用來將網頁分割成獨立的、不同的部分，來實現網頁的規劃和佈局。如圖2.36為阿里汽車和潮電影網站的佈局。都是使用<div>標籤來實現的。
圖2.36 淘寶網區塊展示效果
接下來通過案例來簡單演示<div>標籤的使用，如例2-25所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>div/span</title>
6 </head>
7 <body>
8 <div>區域1
9 <p>這是一個段落</p>
10 </div>
11 <div>區域2
12 <h6>這是一個段落</h6>
13 </div>
14 <div>區域3
15 <hr align="left" width="50" color="#00FF66">
16 </div>
17 </body>
18 </html>
運行結果如圖2.37所示。
圖2.37 div標籤展示效果
<span>標籤是用來修飾文字的，也叫做內聯標籤 ，如圖2.38。
圖2.38 千鋒教育文字修飾效果
接下來通過案例來演示<span>標籤，如例2-26所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>div/span</title>
6 </head>
7 <body>
8 <span>文字修飾1</span>
9 <span>文字修飾2</span>
10 <span>文字修飾3</span>
11 </body>
12 </html>
運行結果如圖2.39所示。
圖2.39 span標籤展示效果
<div>標籤和<span>標籤，多數情況下需要配合CSS樣式，在後續的章節中，再詳細的講解<div>標籤和<span>標籤的用法。
2.4 本章小結
通過本章的學習，首先介紹HTML語法的發展歷史和HTML語義化的含義。然後對HTML常用標籤進行了講解，如標題、段落、列表等。通過本章的學習，能掌握HTML常用標籤，能初步編寫基本的HTML網頁。
2.5 習題
1. 填空題
(1) 網頁加載時常用圖片的格式為 、 、 。
(2) 圖像標籤的屬性src用於指定圖像 和 的屬性。
(3) 文件的路徑可以分為 和 兩種。
(4) <strong>標籤強調文本 。
(5) 是為了實現HMTL向XML過渡，讓作者按照統一的風格來編寫標籤。
2.選擇題
(1) 在一個網頁中，只能出現一次的標題標籤是（ ）。
A．<h1> B．<h2>
C．<h3> D．<h4>
(2) a標籤的target屬性中哪一個值是在一個全新的空白窗口中打開鏈接（ ）。
A．_self B．_blank
C．_top D．_parent
(3) 定義列表不包括下面哪個標籤（ ）。
A．<dl> B．<dt>
C．<dd> D．<ol>
(4) 強調字體是斜體的標籤是（ ）。
A．<sup> B．<del>
C．<em> D．<strong>
(5) 設置水平線對齊方式的屬性是（ ）。
A．size B．align
C．width D．color
3.思考題
(1) 請簡述什麼是HTML語義化？
(2) 請簡述有序列表與無序列表之間的區別？
內容來源書籍：《HTML5從入門到精通》，一本Web前端實用性綜合技術圖書。
簡介：《HTML5從入門到精通》倡導“快樂學習，實戰就業”的理念，作為初學者高品質的入門教材之一，免費提供一站式教學服務包，附贈配套PPT、教學視頻、教學大綱、考試系統、測試題等資源。且書本內容覆蓋全面、講解詳細，其中包括標籤語義化、標籤使用規範、選擇器類型、盒模型、標籤分類、樣式重置、CSS優化、Photoshop切圖處理、整頁製作、CSS3新樣式、HTML5新功能等。與此同時，本教材通過總結、歸納HTML、CSS、CSS3動畫與3D及移動端佈局與響應式開發等核心知識點，並從項目開發的實際需求入手，將理論知識與實際應用相結合，以此幫助初學者全面、系統、深入、透徹地理解HTML5的基礎知識和技術，使他們快速地成長為初級程序員，並擁有一定的項目開發經驗，從而在職場中擁有一個較高的起點。