2.3　HTML常用標簽

以前的HTML由一堆沒有語義的冷冰冰的標簽構成。最泛濫的就是DIV+CSS，當時的頁面源代碼一打開就是一堆DIV+CSS，為了改變這種狀況，開發者和官方提出了讓HTML結構語義化。

語義化就是用合理、正確的標簽來展示內容，例如用h1～h6定義標題、用li定義列表等。使用語義化標簽的好處有兩點：一是有利于SEO和搜索引擎建立良好溝通，有助于爬蟲抓取更多的信息；二是便于團隊開發維護，可讀性較高。根據常用標簽的功能特點歸納為基礎標簽、文本格式化標簽、列表標簽、圖像標簽、超鏈接標簽、框架標簽、容器標簽和標簽嵌套。

2.3.1　基礎標簽

常用的基礎標簽如表2-2所示。

1．標題標簽<h1>～<h6>

為了使網頁更具語義化，經常會在頁面中用到標題標簽，HTML提供了6個等級的標題。<h1>標簽所標記的字體最大，標簽使用的數字越大則字體越小，直至<h6>標簽所標記的字體最小，如例2-3所示。標題標簽的默認狀態為左對齊顯示的黑體字。

【例2-3】　標題標簽應用

在瀏覽器中的顯示效果如圖2-5所示。

標題標簽的align屬性用來定義標題字的對齊方式，其常用屬性值有3個：left（居左）、center（居中）、right（居右），如例2-4所示。

【例2-4】　標題標簽屬性應用

在瀏覽器中的顯示效果如圖2-6所示。

2．段落標簽<p>

在網頁中要把文字有條理地顯示出來，離不開段落標簽，就如同平常寫文章一樣，整個網頁也可以分為若干段落，而段落的標簽就是<p></p>，如例2-5所示。

<p>標簽的align屬性的常用屬性值為left（居左）、center（居中）、right（居右）。

【例2-5】　段落標簽應用

在瀏覽器中的顯示效果如圖2-7所示。

3．換行標簽<br>

<br>可插入一個簡單的換行符，就和普通文本文檔插入的換行符作用一樣，都表示強制換行。<br>標簽是空標簽（單標簽），<br>標簽每次只能換一行，如需換多行，則可以寫多個<br>標簽，如例2-6所示。

【例2-6】　換行標簽應用

在瀏覽器中的顯示效果如圖2-8所示。

注意：<br>標簽只用于簡單地開始新的一行，而當瀏覽器遇到<p>標簽時，通常會在相鄰的段落之間插入垂直的間距。

4．水平線標簽<hr>

在網頁中常常會看到一些水平線將段落與段落之間隔開，使文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過水平線標簽<hr>來完成，<hr/>就是創建橫跨網頁水平線的標簽，可以在視覺上將文檔分隔成多個部分，如例2-7所示。

水平線標簽<hr>的屬性、屬性值及描述如表2-3所示。

【例2-7】　水平線標簽應用

在瀏覽器中的顯示效果如圖2-9所示。

溫馨提示：獲取顏色的屬性值時可以下載“屏幕顏色拾取工具”，獲取十六進制數和rgb函數值。

5．字體標簽<font>

<font>標簽是一個設置文本文字樣式的標簽，可以設置文本的字體樣式、字體的尺寸、字體的顏色，如表2-4所示。下面通過簡單的代碼示例，為大家介紹HTML中<font>標簽的用法，如例2-8所示。

【例2-8】　字體樣式的應用

在瀏覽器中的顯示效果如圖2-10所示。

注意：在HTML5中不推薦使用<font>標簽，建議用CSS代替。

6．預格式化<pre>

利用<pre>標簽對網頁中的文字段落進行預格式化，瀏覽器會完整地保留設計者在源文件中所定義的格式，包括空格、縮進及其他特殊格式，如例2-9所示。

【例2-9】　預格式化標簽應用

在瀏覽器中的顯示效果如圖2-11所示。

2.3.2　文本格式化標簽

在網頁中，有時需要為文字設置粗體、斜體或下畫線等效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示，常用的文本修飾標簽如表2-5所示。

下面通過簡單的代碼示例，介紹文本格式化標簽的用法，如例2-10所示。

【例2-10】　文本格式化標簽應用

在瀏覽器中的顯示效果如圖2-12所示。

注意：使用<em></em>表示著重的文本，替代<i></i>斜體標簽；使用<strong></strong>表示重要文本，替代<b></b>粗體標簽，但<i></i>和<b></b>仍可以使用。

2.3.3　特殊符號

瀏覽器總會截短HTML頁面中的空格。如果在文本中寫10個空格，則在顯示該頁面之前，瀏覽器會刪除其中的9個。如果需要在頁面中增加空格的數量，則需要使用&nbsp；字符實體，其他特殊字符的插入與空格符號的插入方式相同，如例2-11所示，特殊符號如表2-6所示。

【例2-11】　特殊字符應用

在瀏覽器中的顯示效果如圖2-13所示。

2.3.4　圖像標簽

圖片是在網頁中必不可少的元素，靈活地應用會給網頁增添不少色彩。使用img標簽將圖片插入網頁中。<img>是單標簽，圖片樣式由img標簽的屬性決定。img標簽有兩個必選屬性：src、alt，其他屬性為可選屬性，具體屬性、取值及描述如表2-7所示。

基本語法如下：

src是source的簡寫，用于指明圖片的存儲路徑，通常是URL形式。可以采用相對路徑和絕對路徑來表示文件的位置，如src="D:\web\logo.jpg"是采用絕對路徑，而src="images/logo.jpg"是采用相對路徑。

在網頁中插入圖像的應用如例2-12所示。

【例2-12】　圖像標簽應用

代碼解釋：在代碼中加入了title屬性，當鼠標懸停在圖片上時顯示屬性值內容；在代碼中設置了圖像的寬、高及邊框；在代碼中加入了alt屬性，當圖片未能正常顯示時，用于給用戶的提示信息。

在瀏覽器中的顯示效果如圖2-14所示。

圖像img標簽的hspace和vspace屬性用來控制圖像的水平距離和垂直距離，而且兩者均以像素為單位。hspace屬性用于調整圖像左右兩邊的空白距離，vspace屬性用于調整圖像的上下空白距離。

基本語法如下：

注意：在實際應用中很少直接使用圖像的對齊屬性，一般采用CSS替代。

2.3.5　絕對路徑和相對路徑

如去一個地方，首先要明確到達此地的路徑。編程也是如此，要加載圖片或者引入其他代碼文件，也需要設置正確的路徑。

路徑分為絕對路徑與相對路徑：

（1）山西省太原市南內環街967號xxx小區17號樓2單元502，這是一個絕對路徑。

（2）15號樓左手邊那棟樓2單元502，這是一個相對路徑。

由此得出，絕對路徑是對一個位置的路徑進行完整描述，相對路徑則是以某一個事物為參考描述位置。

程序中的相對路徑與絕對路徑也是同樣的道理，下面進行詳細介紹。

1．絕對路徑

完整地描述文件位置的路徑為絕對路徑，舉兩個最為常見的絕對路徑的例子。

（1）完整的URL地址，例如，https://z3.ax1x.com/2021/07/28/WIzidA.jpg。DNS服務器能夠將網址解析到服務器硬盤下WIzidA.jpg圖片文件。

（2）完整盤符，例如，D:\web\images\logo.jpg。圖片的存儲位置得到了完整描述，非常明確。

特別說明：WebStorm開發工具有的版本不支持對絕對路徑的訪問，工具自身有缺陷，可選用其他開發工具演示。

2．相對路徑

相對于當前文件的路徑，前端開發中比較常用的是路徑表示方法。首先介紹路徑的語法格式：

（1）“/”表示根目錄。

（2）“./”表示當前所在的路徑，可以省略不寫。

（3）“../”表示上一層路徑。

（4）“../../”表示當前文件所在目錄的上上級目錄，依此類推。

3．相對路徑實例

demo1目錄下有demo1.1文件夾、images文件夾及index3.html文件，demo1.1文件夾下有index2.html和2.jpg文件，images文件夾下有1.jpg和demo1.2/index1.html文件，文件夾目錄如圖2-15所示。

如index2.html引用2.jpg，則文件路徑如下：

如index1.html引用images文件夾下的1.jpg，則文件路徑如下：

如index2.html引用images文件夾下的1.jpg，則文件路徑如下：

index3.html訪問demo1.1文件夾中的2.jpg，則文件路徑如下：

4．兩者比較

相對路徑更方便更改，相對比較靈活，但是如果使用不慎，則易造成鏈接失效，并且容易被人抄襲；絕對路徑能避免這個問題，但是靈活性上相對較弱。網頁中不推薦使用絕對路徑，因為網頁制作完成后需要將所有的文件上傳到服務器，使用絕對路徑會造成圖片路徑錯誤，網頁無法正常顯示設置的圖片。

2.3.6　超鏈接標簽

超鏈接是網站中使用比較頻繁的HTML元素，因為網站的各種頁面都由超級鏈接串接而成，超鏈接完成了頁面之間的跳轉。超鏈接是瀏覽者和服務器進行交互的主要手段，在后面的技術中會逐步深化學習。

1．基本語法

超鏈接標簽屬性介紹如下。

（1）href：鏈接指向的目標地址（URL），必需屬性。

（2）name：用于設定錨的名稱。

（3）title屬性：用于定義鼠標經過時的提示文字。

（4）target屬性：指向打開的目標窗口，如表2-8所示。

2．超鏈接應用

添加了鏈接后的文字有其特殊的樣式，以和其他文字區分，默認鏈接樣式為藍色文字，有下畫線。超級鏈接用于跳轉到另一個頁面，<a></a>標簽有一個href屬性負責指定新頁面的網址。href指定的地址一般使用相對地址。

網站開發中，href屬性的鏈接URL的方式有以下兩種：

（1）外部鏈接，如http://www.baidu.com。

（2）內部鏈接，直接鏈接內部頁面名稱即可，如<a href="index.html">首頁</a>。

如果當時沒有確定鏈接目標，則通常將鏈接標簽的href屬性值定義為“#”（href="#"），表示該鏈接暫時為一個空鏈接。

不僅可以創建文本超鏈接，在網頁中各種網頁元素（如圖像、表格、聲頻、視頻等）都可以添加超鏈接，如例2-13所示。

【例2-13】　超鏈接應用

在瀏覽器中的顯示效果如圖2-16所示。

3．什么是錨

很多網頁文章的內容比較多，導致頁面很長，瀏覽者需要不斷地拖動瀏覽器的滾動條才能找到需要的內容。超級鏈接的錨功能可以解決這個問題，錨（anchor）的概念引自于船只上的錨，錨被拋下后，船只就不容易漂走、迷路。實際上錨用于在單個頁面內的不同位置進行跳轉，有的地方叫作書簽，如例2-14所示。

通過創建錨點鏈接，用戶能夠快速定位目標內容。創建錨點鏈接分為以下兩步：

（1）使用<a href="#錨點名">鏈接文本</a>創建鏈接文本。

（2）使用相應<a name="錨點名"></a>標注跳轉目標的位置。

【例2-14】　超鏈接的錨

在瀏覽器中的顯示效果如圖2-17所示。

4．HTML5新增download屬性

download屬性規定被下載的超鏈接目標。該屬性也可以設置一個值來規定下載文件的名稱。所允許的文件類型有.img、.pdf、.txt、.html等，瀏覽器將自動檢測正確的文件擴展名，文件大小沒有限制。

基本語法格式如下：

注意：只有Firefox和Chrome瀏覽器支持download屬性。

2.3.7　框架標簽

框架標簽用于在網頁的框架定義子窗口。由于框架標簽對于網頁的可用性有負面影響，所以在HTML5不再支持HTML4中原有的框架標簽<frame>和<frameset>，只保留了內聯框架標簽<iframe>，也叫浮動框架標簽。

iframe標簽也是一個比較特殊的框架，是一個可以放在瀏覽器中的小窗口，可以出現在頁面的任何一個位置上，但是整個頁面并一定在框架頁面上，iframe框架完全由開發者定義高度和寬度，以便在網頁中嵌套另外一個網頁，如例2-15所示。

基本語法如下：

iframe標簽的屬性及描述如表2-9所示。

【例2-15】　浮動框架標簽應用

代碼解釋：在第1個iframe標簽中插入一個名稱為left的浮動框架，并為其設置了內部顯示的網頁、寬、高、邊框；在第2個iframe標簽中插入一個名稱為right的浮動框架，并為其設置了內部顯示的網頁、寬、高、邊框、左右邊距等屬性；在a href錨點將浮動框架left、right設置為超鏈接的鏈接目標。在瀏覽器中的顯示效果如圖2-18所示。單擊超鏈接時會在左、右浮動框架中分別顯示不同的頁面，如圖2-19所示。

2.3.8　容器標簽

在網頁制作過程中，可以把一些獨立的邏輯部分劃分出來，放在一個標簽中，這個標簽的作用就相當于一個容器，常用的容器標簽有<div>和<span>。

<div>簡單而言是一個區塊容器標簽，也就是說<div></div>之間是一個容器，可以容納段落、標題、表格、圖片、章節、摘要和備注等各種HTML元素，因此，可以把<div>與</div>中的內容視為一個獨立的對象，用于CSS的控制。聲明時只要對<div>進行相應的控制，其中的各標簽元素都會因此而改變。

<span>標簽和<div>標簽一樣，作為容器標簽而被廣泛用于HTML語言中，如例2-16所示。

<div>標簽與<span>標簽的區別如下。

（1）div和span元素沒有特定的語義，都是用來幫助頁面排版的元素。

（2）<div>是一個塊級（block-level）元素，它包圍的元素會自動換行。

（3）<span>僅僅是一個行內元素（Inline Element），在它的前后不會換行。<span>沒有結構上的意義，純粹是應用樣式，當其他行內元素都不合適時，就可以使用<span>元素。

（4）容器級的標簽（<div>）可以嵌套其他所有的標簽，文本的標簽（<span>）只能嵌套文字、超鏈接、圖片。

【例2-16】　容器標簽應用

在瀏覽器中的顯示效果如圖2-20所示。

注意：<span>標簽可以包含于<div>標簽之中，成為它的子元素，而反過來則不成立，即<span>標簽不能包含<div>標簽。