什麼是HTML

HTML，全稱 Hyper Text Markup Language，又稱作超文本標記語言。很多人誤以爲學習編程，就需要使用編程語言。No，在學習 HTML 之前，我們一定要清晰地知道 HTML 並不是一門編程語言，而是一門描述性的“標記語言”。

HTML 也是一種計算機語言，不僅可以將普通文本轉換在 web 層面使用，還可以爲普通的無結構文本提供結構，讀者需要這種結構來幫助他們閱讀。如果沒有結構，單純的文本將會匯合在一起，容易造成混淆。

HTML 是由一系列標籤（tag）組成的，基本語法如下：
<標籤符>文本內容</標籤符>

標籤符一般都是成對出現，包含一個開始符號和一個結束符號

1. 什麼是網頁？

網頁其實就是放在服務器上的一個文件，當我們瀏覽網頁時，這個文件會被下載到我們本地的電腦，然後再由瀏覽器解析，渲染出各種漂亮的界面，比如表格、圖片、標題、列表等。

網頁文件的後綴有很多種，比如.html、.php、.jsp、.asp等，相信讀者在瀏覽器的地址欄裏也都見到過，如下圖所示：

但不管網頁的後綴是什麼，它的本質都是一樣的，就是由 HTML 代碼構成的純文本文件。

我們可以使用記事本、Notepad++、Sublime Text、Vim 等文本編輯器打開網頁文件，看到它的所有內容，就像下面這樣：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>這是網頁標題</title>
</head>
<body>
    <p>這是一段文本</p>
    <a href="http://c.biancheng.net/">這個一個超鏈接</a>
    <ul>
        <li>條目1</li>
        <li>條目2</li>
        <li>條目3</li>
    </ul>
</body>
</html>

這就是 HTML 代碼！我們可以看到很多由<>包圍的特殊標記，這叫做 HTML 標籤（Tag），瀏覽器通過識別這些 HTML 標籤來渲染出各種界面和效果。

每種 HTML 標籤都有不同的含義，適用於不同的場景，能展示出不同的效果，例如：

< html> 標籤用來包圍當前網頁的所有 HTML 代碼，可以把它看做一個外殼。
< head> 標籤表示網頁的頭部，用來設置一些網頁的參數，在瀏覽器中是看不到的：
< meta charset=“UTF-8”> 用來指明當前網頁的編碼格式是 UTF-8；
< title> 用來設置當前網頁的標題，相當於文件的名字，它會顯示在瀏覽器的標題欄。
< body> 標籤表示網頁的正文內容，也就是需要在瀏覽器主界面中顯示的內容：
< p> 標籤用來表示一個段落，能容納一段文本；
< a> 標籤用來表示一個超鏈接，用鼠標點擊後可以跳轉到其它網頁；
< ul> 標籤用來表示一個列表，其中的每個
都是子標籤，用來表示一個列表項。

將上面的代碼保存到 index.html，拖到瀏覽器中運行，可以看到如下的效果：

這是一個非常簡陋的網頁，僅作爲例子來演示，真實網頁的 HTML 代碼遠比這複雜，你可以在網頁上單擊鼠標右鍵，然後在彈出菜單中選擇“查看網頁源代碼”，就可以查看當前網頁的 HTML 代碼。
2. 什麼是網站？
一個網站由很多網頁組成，可以將多個網頁放在一個文件夾中，這個文件夾還可以嵌套其它子文件夾，最終形成一個樹狀結構，如下圖所示：

如果我們給頂級目錄 program 綁定一個域名 www.domain.com，那麼用戶就可以通過 www.domain.com 來訪問 program 文件夾中的所有文件（包括子文件夾），例如：
www.domain.com/demo.html
www.domain.com/python/
www.domain.com/java/spring.html
www.domain.com/java/maven/profile.html

可以認爲，網站就是一個綁定了域名的文件夾，該文件夾中可以包含子文件夾以及各種各樣的文件，這些文件都可以通過域名來訪問。當我們在地址欄中輸入一個 URL 時，它其實已經展示了服務器上的目錄結構，例如 http://deom/linux/ln.html，就表示訪問 linux 目錄下的 ln.html 文件。

當然，你也可以不綁定域名，只要在服務器上設置某個文件夾提供 Web 服務，用戶也可以通過 IP 地址來訪問。

互聯網上的所有服務器都是通過 IP 地址來定位的，域名只是 IP 地址的一種助記符，幫助用戶記住網站的鏈接以及品牌。使用域名訪問網站時，瀏覽器會先找到域名對應的 IP 地址，然後再通過 IP 地址請求服務器上的文件；這個過程叫做域名解析，是通過 DNS 服務器來完成的。

網站的作用是把計算機上的數據（文章、博客、圖片、視頻等）分享出去，讓別人也能獲取到有用的信息；同時，別人也能發佈自己的數據（發佈文章、留言、上傳視頻等），讓網站的內容更加豐富。網站和用戶之間是一個相互促進的關係，網站用戶越多，積累的數據也就越多，然後就會吸引更多用戶繼續分享數據，這是一個良性循環，是一個健康的生態。

網站是互聯網的基石，它讓用戶獲取信息，也讓用戶分享信息，所以現在的互聯網才能豐富多彩。

網站可以認爲是放在服務器上的一個文件夾，它包含了很多網頁文件以及很多子文件夾。用戶訪問網站就是讀取文件的內容，用戶分享數據就是修改文件的內容，或者刪除現有的文件，或者創建一個新的文件。

好了，話不多說，咱們直接進入正題吧

如果是 HTML 初學者，建議在使用圖片前新建一個存放圖片的文件夾，方便後期圖片的整理。這是一個良好的習慣。

開發過程中，經常使用圖像來美化頁面，圖像已經成爲大多數網站的一個重要組成部分。都說一圖勝千言，好的圖像有助於製作出精美的網站，從而與那些外觀平平的網站區別開來。在 HTML 中，使用 < img> 標籤來插入圖像，其語法格式如下：
< img src=“url” />

< img> 是圖片 image 的簡稱，它只包含屬性，沒有閉和標籤。src 是它的必選屬性，用來表示圖片的路徑來源。下面，我們來詳細分析一下標籤的 src 屬性。

HTML 標籤（插入圖片）

開發過程中，經常使用圖像來美化頁面，圖像已經成爲大多數網站的一個重要組成部分。都說一圖勝千言，好的圖像有助於製作出精美的網站，從而與那些外觀平平的網站區別開來。在 HTML 中，使用 < img> 標籤來插入圖像，其語法格式如下：

< img src=“url” />

< img> 是圖片 image 的簡稱，它只包含屬性，沒有閉和標籤。src 是它的必選屬性，用來表示圖片的路徑來源。下面，我們來詳細分析一下 < img> 標籤的 src 屬性。

1. src屬性

src 是 source 的簡稱，用來聲明圖像文件的來源，也就是定義圖片的引用地址。圖片可以是.jpg、.png、.gif等多種格式，引用地址可以是相對 url，也可以是絕對 url。下面我們來看兩個示例。

引用網絡圖片

可以這樣引用網絡圖片：

< img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"/>

運行結果如下圖所示：

引用本地圖片

如果在項目的當前文件中，想要引入上一層 image 目錄下的一張圖片 logo.jpg，可以這樣引用：

< img src="../image/logo.jpg"/>

運行結果如下圖所示：

此處../可以進入上一層目錄，然後進入 image 文件夾，最後找到 img.jpg。

提示：圖片的名稱儘量不要使用中文，否則即使路徑正確，瀏覽器也可能無法識別，從而顯示不出圖片。

1.2 其他屬性

前面講述了 < img> 標籤的必選屬性 src，接下來再看一下它的可選屬性。< img> 標籤常用的可選屬性有alt、title、width以及height等，我們來分別看一下：

alt 屬性用來對圖像進行文本說明。一般情況下，當瀏覽器因某種原因無法載入圖像時，就會顯示這段文本。雖然 alt 屬性值可以爲空，但還是建議讀者給 alt 屬性設置符合圖像信息的文本；
title 用來設置鼠標移動到圖片上的提示文字。它的值一般與 alt 的值相同，最大的區別是顯示的前提條件不同，alt 屬性是圖片加載失敗後顯示，而 title 屬性則是圖片加載成功後鼠標放到它上面才顯示；
width 用來設置圖片的寬度，使用時不需要加單位，默認是像素（px）；
height 用來設置圖片的高度，和 width 一樣在使用時不需要加單位，默認是像素（px）。

具體使用方法如下：

< img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"       width="200"        height="200"       title="這是C語言中文網的logo"       alt="這是C語言中文網的logo" />

在瀏覽器中運行結果如下圖所示：

在這段代碼中，首先引入了文件的路徑，緊接着對圖片的寬高進行了設置，均是 200px；其次又設置了 title 屬性，當鼠標移動到圖片上時，會顯示 title 的內容；最後設置了 alt，當圖片加載不出來會顯示 alt 的內容。

建議讀者爲頁面上的圖像都加上 alt 屬性，這樣不僅有助於更好的顯示信息，而且對於那些使用屏幕閱讀軟件（存在視覺障礙的人使用的一類軟件）的人來說幫助很大。

1.3. 總結

從上面的講述中我們可以收穫以下幾點內容：

src 表示圖片的引用地址，這個地址可以是相對 url，也可以是絕對 url；
alt 表示圖片加載失敗時顯示的內容；
title 表示鼠標移動到圖片上時顯示的文字；
width 表示圖片的寬，默認單位是像素（px）；
height 表示圖片的高，默認單位也是像素（px）。

HTML < a>標籤（超鏈接）

在 HTML 中，我們使用 < a> 標籤來表示超鏈接。

超鏈接（Hyperlink）是網頁中最常見的元素之一，整個互聯網都是基於超鏈接而構建的。每個網站都由衆多的網頁組成，超鏈接使得網頁之間不再獨立，它就像一根線，把網頁連接在一起，形成一個網狀結構。互聯網之所以能夠稱之爲“網”，就是因爲有超鏈接的存在。

< a> 標籤的語法格式如下：

< a href=“url” target=“opentype”>鏈接文本

其中，href 屬性用來指明要跳轉到的 url，target 屬性用來指明新頁面的打開方式，鏈接文本需要寫在 < a> 和 < /a> 之間。

例如，鏈接到C語言中文網首頁可以這樣寫：

<a href="http://c.biancheng.net" target="_blank">C語言中文網</a>:

鏈接到C語言中文網裏面的一個 HTML 頁面可以這樣寫：

<a href="http://c.biancheng.net/view/7410.html" target="_blank">網站到底是什麼</a>

下面，我們來詳細分析一下 < a> 標籤的各個屬性。

1. href 屬性

href 屬性指定鏈接的目標，也就是要跳轉到什麼位置。href 可以有多種形式，例如：

href 可以指向一個網頁（.html、.php、.jsp、.asp等格式），這也是最常見的形式，例如 href=“http://c.biancheng.net/view/1719.html”；
href 可以指向圖片（.jpg、.gif、.png 等格式）、音頻（.mp3、.wav等格式）、視頻（.mp4、.mkv格式）等媒體文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
href 可以指向壓縮文件（.zip、.rar等格式）、可執行程序（.exe）等，一些下載網站的鏈接就可以寫成這種形式，例如 href="./…/uploads/data_package/ComputerFoundation.zip"；
href 甚至還可以指向本機的文件，只是很少這樣使用，例如 href=“D:/Program Files/360/360safe/360Safe.exe”。

你看，href 本質上就是指向一個文件，這個文件幾乎可以是任意格式的。如果瀏覽器支持這種格式，那麼它就可以在瀏覽器上顯示，比如常見的圖片、音頻、視頻等，如果瀏覽器不支持這種格式，那麼就提示用戶下載。

另外，href 使用的路徑可以是絕對路徑，也可以是相對路徑。絕對路徑往往以域名爲起點，例如 http://www.baidu.com/view/1719.html；相對路徑往往以當前文件或者當前域名爲起點，例如 ./…/uploads/data_package/ComputerFoundation.zip。

2. target屬性

在創建網頁時，默認情況下，超鏈接在當前的瀏覽器窗口打開，但是我們可以使用 target 屬性來改變目標窗口的打開方式。常見的打開方式如下表所示：

屬性值	說明
_self	默認，在現有的窗口中打開新頁面，原窗口將被覆蓋。
_blank	在新的窗口中打開新頁面。
_parent	在當前框架的上一層打開新頁面。
_top	在頂層框架中打開新頁面。

絕大部分情況下，target 屬性要麼不寫，保持默認的 _self，要麼把它的值設置爲 _blank，在新的窗口中打開鏈接。例如：

<!DOCTYPE html>
<html lang="en"><head>  
  <meta charset="UTF-8">  
  <title>a標籤</title></head>
  <body>  
      <a href="http://c.biancheng.net/" target="_blank">C語言中文網（新窗口打開）</a>  
      <a href="http://c.biancheng.net/">C語言中文網（現有窗口打開）</a>
 </body>
</html>

運行結果如下圖所示：

這兩種效果在瀏覽器預覽中看不出來區別，但是當我們點擊一下超鏈接，會發現它們的窗口打開方式是有區別的，請讀者自己試一試。

3. < a>標籤的默認樣式

1) 鼠標樣式

當鼠標移入網頁上的某個超鏈接時，其樣式會變爲一隻小手；當鼠標移出超鏈接區域時，樣式會再次回到箭頭形狀。

2) 顏色及下劃線

任何 HTML 元素都有默認的樣式，< a> 標籤也不例外。在瀏覽器下，超鏈接被點擊後顏色會發生改變：超鏈接被點擊之前是藍色的，點擊之後會變成紫色。

超鏈接默認是帶下劃線的，下劃線顏色和文本顏色保持一致。瀏覽器根據歷史記錄來判斷超鏈接是否被點擊過，如果 < a> 標籤的 href 屬性和歷史記錄中的某條 URL 重合，那就說明該鏈接被點擊了，否則是沒有被點擊的。所以，清空瀏覽器的歷史記錄會讓超鏈接的顏色再次變回藍色。

URL結構解析

1. URL的構成

URL 遵守一種標準的語法，它由協議、主機名、域名、端口、路徑、以及文件名這六個部分構成，其中端口可以省略。具體語法規則如下：

scheme://host.domain:port/path/filename

在上述語法規則中，scheme 表示協議，host 表示主機名，domain 表示域名，port 表示端口（可以省略），path 表示文件的路徑，filename 表示文件名稱。接下來我們詳細看一下這幾部分到底是如何使用的。

1) 協議

協議用來指明客戶端和服務器之間通信的類型。我們經常用到的協議有四種：http、https、ftp 以及 file。這四種協議的使用場景如下表所示：

協議使用場景

協議	使用場景
http（HyperText Transfer Protocol）	超文本傳輸協議。http 協議可以將編碼爲超文本的數據從一臺計算機傳送到另一臺計算機，不進行加密。
https（HyperText Transfer Protocol over SecureSocket Layer）	安全超文本傳輸協議。以安全爲目標的 http 通道，安全網頁，加密所有信息交換。
ftp（File Transfer Protocol）	文件傳輸協議。
file	本機上的文件。

2 主機名

主機名可以向瀏覽器提供文件站點的名稱。www 是我們常見的主機名，例如百度的網址 https://www.baidu.com/、淘寶的網址 https://www.taobao.com/ 使用的都是 www 的主機名。除此之外，還有很多網站使用的是其它主機名。例如C語言中文網的網址 http://c.biancheng.net/ 的主機名是c，網易雲音樂的網址 https://music.163.com/ 的主機名是 music。

3 域名

域名和主機名一起使用，被用來定義服務器的地址。Web 服務器遵守數字網際協議（Internet Protocol，IP），每一臺連接到因特網的計算機都有一個固定的 IP 地址。域名即 IP 地址的別名，因爲一般的 IP 地址都是長串的數字，爲了方便記憶所以使用域名進行替代。簡單來說，沒有域名（IP）我們就不能上網。

4 端口

端口用來定義主機上的端口號。如果不寫，http 的默認端口號是 80，https 的默認端口號是 443，ftp 的默認端口號是 21。還是拿 C語言中文網舉例說明，不論用戶輸入 http://c.biancheng.net/ 還是 http://c.biancheng.net/:80，瀏覽器都會解析爲 C語言中文網的鏈接。

5 路徑

路徑指定服務器上文件的所在位置。就像我們自己在計算機上保存文件時所指定的文件夾一樣，Web 服務器上的文件也有可能是存放在子目錄（就是文件夾中的子文件夾）中的。如果是這樣，路徑中的相鄰文件夾需要使用斜線（/）隔開。例如 http://www.baidu.com/view/views/7410.html 這個網址，它的路徑就是 /view/views。

6 文件名

文件名用來定義文檔或資源的名稱。和路徑類似，路徑指的是文件夾，而它指的是文件夾中的文件。網頁文件的後綴有很多種，比如.html 、.php、 .jsp、.asp等。

協議需要與 URL 的其它部分用://隔開。百度的網址後面的.com以及 C語言中文網的.net又稱作域後綴（擴展名），用於表明該主機所在的域的類型。

HTML塊級元素及行內元素

在 HTML 中，標籤（tag）通常又被稱作元素（element）。例如 < a> 標籤又叫做 < a> 元素，< p> 標籤也叫作 < p> 元素。

HTML 元素根據其表現形式可以分爲 2 種：

塊級元素
行內元素

任何 HTML 元素都屬於這兩者中的任意一種。

提示：塊級元素和行內元素的概念極其重要，同時也是學習 CSS 的基礎知識之一，請讀者不要忽略。

1. 塊級元素

塊級元素（block element）在瀏覽器中佔據整行，並排斥其它元素與其位於同一行。也就是說，塊級元素的寬度是 100%。常見的塊級元素如下表：

塊級元素	說明
div	最典型的塊元素
p	表示段落
h1-h6	表示1-6級標題（默認加粗）
br	表示換行
ol	有序列表
ul	無序列表

2. 行內元素

行內元素又稱內聯元素（inline block）。在瀏覽器中可以與其它行內元素共佔一行，只有當多個元素的總寬度大於瀏覽器的寬度時，纔會換行顯示。常見的行內元素如下表：

行內元素

行內元素	說明
a	超鏈接
span	常用行級
strong	加粗，強調
b	加粗，不強調
em	斜體，強調
i	斜體，不強調
img	圖片
input	輸入框
select	下拉列表

1 實例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塊元素與行內元素</title>
</head>
<body>
    <div>div標籤（塊級標籤）</div>
    <p>p標籤（塊級標籤）</p>
    <span>span標籤（行內標籤）</span>
    <a href="#">a標籤（行內標籤）</a>
</body>
</html>

在瀏覽器中運行效果如下圖：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Yr6SFHBV-1610100667565)(http://c.biancheng.net/uploads/allimg/200410/10-2004101J049362.png)]

通過運行結果可以發現，< div> 標籤和 < p> 標籤分別獨佔一行，因爲它們是塊級元素；而 < span> 標籤和 < a> 標籤在同一行中顯示，因爲它們是行內元素。

注意，這裏我們說的獨佔一行是指元素在瀏覽器中的運行效果，並不是在編輯器中獨佔一行。在編輯器中，不論怎麼書寫代碼，都不會影響它在瀏覽器中的運行效果。

3. 元素的嵌套

HTML 中的各個元素之間是可以互相嵌套的，例如：

塊元素可以嵌套塊元素
塊元素可以嵌套行內元素
行內元素可以嵌套行內元素
行內元素可以嵌套塊元素

值得注意的是我們不建議在行內元素中嵌套塊元素，這樣不僅不符合開發規範，還會導致行內元素也獨佔一行。

下面來看一段元素之間互相嵌套的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素間的嵌套</title>
</head>
<body>
    <!-- 塊級元素嵌套塊級元素 -->
    <div>
        <p>p標籤（塊級元素）</p>
        <div>div標籤（塊級元素）</div>
    </div>
    <!-- 塊級元素嵌套行內元素 -->
    <div>
        <span>span標籤（行內元素）</span>
    </div>
    <!-- 行內元素嵌套 -->
    <span>
        <span>span標籤（行內元素）</span>
        <a href="#">a標籤（行內元素）</a>
    </span>
</body>
</html>

瀏覽器運行效果如下圖：

4. 總結

塊級元素的寬度是 100%，在瀏覽器中默認獨佔一行。
行內元素在瀏覽器中默認與其它行內元素共佔一行。只有當多個行內元素的總寬度大於瀏覽器的寬度時，纔會換行顯示。
塊級元素內部可以嵌套塊級元素或行內元素。
建議行內元素裏面只嵌套行內元素。

HTML有序列表+無序列表+定義列表

在網站開發過程中，我們經常會使用到列表（list）。列表可以將若干條相關的內容進行整理，讓內容看起來更加有條理。例如，C語言中文網首頁的「推薦閱讀」、「精品教程」以及「最近更新」中的內容都使用了列表進行排列。接下來咱們看一下列表的具體使用方法。

HTML 爲我們提供了 3 種不同的列表：

有序列表
無序列表
定義列表

1. 有序列表

在 HTML 中， < ol> 標籤用來表示有序列表。有序列表之間的內容有先後順序之分，例如菜譜中的一系列步驟，這些步驟需要按順序完成，這時就可以使用有序列表。

我們來看一個簡單的實例：

<!DOCTYPE html><html lang="en"><head>  
<meta charset="UTF-8">   
<title>HTML有序列表</title></head>
<body>  
    <!-- 有序列表 --> 
    <ol>    
    <li>先將水煮沸</li>    
    <li>加入一勺米</li>     
    <li>攪拌均勻</li>   
    </ol>
</body>
</html>

在瀏覽器中運行效果如圖所示：

上述代碼中使用了 < ol>、< li> 標籤，接下來我們來分別看一下這兩個標籤：

< ol> 是 order list 的簡稱，表示有序列表。它可以爲列表的每一項進行編號，默認從數字 1 開始；
< li> 是 list item 的簡稱，表示列表的每一項。列表中還可以包含文本或其它元素，甚至是新的列表。< ol> 中有多少個 < li> 就表示有多少條內容。

提示：在使用 < ol> 時，它一般和 < li> 配合使用，不會單獨出現。而且不建議在 < ol> 中直接使用除 < li> 之外的其他標籤。

2. 無序列表

在 HTML 中，我們使用

標籤來表示無序列表。無序列表和有序列表類似，都是使用
標籤來表示列表的每一項，但是無序列表之間的內容是沒有順序的。例如，早飯的種類不需要表明順序，這時就可以使用無序列表。

實例：

<!DOCTYPE html><html lang="en"><head>  
<meta charset="UTF-8">  
<title>HTML無序列表</title></head>
<body> 
    <!-- 無序列表 -->  
    <ul>    
    <li>雞蛋</li>  
    <li>牛奶</li>    
    <li>麪包</li>  
    </ul>
</body>
</html>

瀏覽器運行結果如圖所示：

上述代碼中使用了 < ul>、< li> 標籤，那麼我們來分別看一下這兩個標籤又是什麼含義呢？

< ul> 是 unordered list 的簡稱，表示無序列表。默認情況下，無序列表的每一項都使用●符號表示；
< li> 同 < ol> 中的 < li> 一樣，它也表示列表中的每一項。

提示：< ul> 一般和 < li> 配合使用，不會單獨出現。而且不建議在 < ul> 中直接使用除 < li> 之外的其他標籤。

3. 定義列表

在 HTML 中，

標籤用於創建定義列表。它是由定義標題和定義描述兩部分組成的，而且至少要包含一條定義標題或定義描述。一般情況下，當要展示的列表形式包括標題和描述兩部分時，使用定義列表再合適不過了。

具體語法格式如下：

< dl>
< dt>定義標題< dt>
< dd>定義描述< dd>
< dd>定義描述< dd>
< dd>定義描述< dd>
< /dl>

上述代碼中使用了 < dl>、< dt> 及 < dd> 標籤，我們來分別看一下這三個標籤：

< dl> 是 definition list 的簡稱，表示定義列表；
< dt> 是 definition term 的簡稱，表示定義術語，也就是我們常說的定義標題。一般情況下，每個定義標題都會對應若干條定義描述；
< dd> 是 definition description 的簡稱，表示定義描述。定義描述一般是對定義標題的解釋說明。

請讀者注意此處的 < dt>、< dd> 是同級標籤，都是 < dl> 的子標籤。

具體使用場景如下示例：

<!DOCTYPE html>
<html lang="en"><head>    
<meta charset="UTF-8">    
<title>HTML定義列表</title>
</head>
<body>    
    <!-- 定義列表 -->    
    <dl>        
        <dt>Web前端簡介</dt>        
        <dd>HTML（超文本標記語言）</dd>        
        <dd>CSS（層疊樣式表）</dd>        
        <dd>JavaScript（腳本語言）</dd>    
    </dl>       
    <dl>        
        <dt>C語言中文網</dt>        
        <dd>HTML教程</dd>       
        <dd>CSS教程</dd>      
        <dd>JavaScript教程</dd>  
    </dl>
</body>
</html>

瀏覽器運行效果如下圖：

通過運行結果可以發現，< dt>、< dd> 標籤的聯繫與區別：

都在瀏覽器中獨佔一行，屬於塊級元素；
< dt> 充當了列表的標題，多個 < dt> 之間可以沒有關係；
一般情況下，< dd> 標籤中間的內容是對 < dt> 的描述。

提示：< dl> 一般與 < dt> 或 < dd> 配合使用，不會單獨出現。不建議在 < dl> 中直接使用除 < dt>、< dd> 之外的其他標籤。

4. 總結

列表分類	說明
有序列表	< ol> 表示有序列表，< li> 表示列表中的每一項，默認使用阿拉伯數字編號。
無序列表	< ul> 表示無序列表，配合 < li> 實現，默認使用`●`符號顯示。
定義列表	< dl> 與< dt>、< dd> 配合實現，< dt> 充當列表的標題，< dd> 是對 < dt> 的解釋說明。

絕對路徑和相對路徑

我們在使用 HTML 中的 < a> 標籤、< img> 標籤、< link> 標籤以及 < script> 標籤時往往會涉及到路徑。例如 < a> 標籤，如果我們在寫路徑時，使用了錯誤的路徑，就會導致跳轉失敗，爲了避免這種情況，我們需要學習一下 HTML 的路徑。在 HTML 中，路徑具體分爲絕對路徑和相對路徑。

提示：< img> 、< link>、< script>標籤我們會面陸續講到。其中，< img> 標籤用來引入圖片，< link> 標籤用來引入 CSS 樣式，< script> 標籤用來引入 js 文件。此處只需瞭解即可。

1. 絕對路徑

絕對路徑分爲本地絕對路徑和網絡絕對路徑兩種。本地絕對路徑一般指從盤符開始，到文件名稱結束；網絡絕對路徑指從網站的域名開始，到文件名結束，在使用時需要加上協議。絕對路徑之所以稱爲絕對，是指當所有頁面引用同一個文件時，使用的路徑都是一樣的。

示例如下：

①D:/Hbulider/HBuilder/tools/nview/index.js
②C:/Users/admin/Desktop/C語言中文網/url/url.html
③http://www.baidu.com/view/7410.html
④http://www.baidu.com:80/view/7410.html
⑤http://www.baidu.com

我們來具體分析一下：

① 和 ② 表示本地絕對路徑，因爲它們是從盤符開始的；
③ ④ ⑤表示網絡絕對路徑，其中，③ 和 ④ 表示的地址是相同的（因爲 http 默認端口號是 80，而且可以省略），類似於 ⑤ 這種省略路徑和文件名的 url 屬於特例，瀏覽器在解析時會自動解析項目裏的 index.html 文件。

2. 相對路徑

相對路徑與絕對路徑類似，不同的是在描述目錄或文件路徑時，所採用的參考點不同。絕對路徑以域名或盤符爲參考點，到文件名稱結束；相對路徑以當前文件位置爲參考點，到文件名稱結束。

接下來，我們看一個示例。假設讀者現有的項目目錄如下圖所示：

目前有一個需求，在 index.html 頁面中有一個 < a> 標籤，點擊它要跳轉到 login.html，那麼我們可以怎麼實現呢？

毫無疑問，可以使用上面講過的絕對路徑 < a href=“http://demo/html/login.html”>< /a> 來跳轉到 login.html；此處我們還可以使用相對路徑實現。具體有以下幾種方式：

< a href="./html/login.html">跳轉到login.html
< a href=“html/login.html”>跳轉到login.html
< a href="…/html/login.html">跳轉到login.html

在上述3種方式中，我們使用了 ./ 以及 …/，接下來看一下他們分別代表什麼呢？

./ 表示同級目錄；
…/ 表示上一級目錄， …/…/ 表示上兩級目錄，以此類推。

其中，./可以省略不寫，也就是說./html/login.html與html/login.html被瀏覽器解析爲同一個路徑。

相對路徑的寫法可以有多種，我們只需要把./以及../代表的含義搞清楚，就可以應對所有的相對路徑。

HTML < table>標籤（表格）

在 HTML 中，我們使用 < table> 標籤來定義表格。HTML 中的表格和 Excel 中的表格是類似的，都包括行、列、單元格、表頭等元素。但是 HTML 表格在功能方面遠沒有 Excel 表格強大，HTML 表格不支持排序、求和、方差等數學計算，它一般用來展示數據。

在學習表格之前，我們不妨先來看一段簡單的 HTML 代碼：

<table border="1">
   <tr>
     <th>名稱</th>
     <th>官網</th>
     <th>性質</th>
   </tr>
   <tr>
     <td>C語言中文網</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
   </tr>
    <tr>
     <td>百度</td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
     </tr>
   <tr>
      <td>噹噹</td>
     <td>http://www.dangdang.com/</td>
      <td>圖書</td>
    </tr>
</table>

運行效果如下圖：

這是一個 4 行 3 列的表格。第一行爲表頭，其餘三行爲內容。

在上述代碼中，我們使用了< table>、< tr>、< td> 及 < th> 四個標籤：

< table> 表示表格，表格的所有內容需要寫在 < table> 和 < /table> 之間。
< tr> 是 table row 的簡稱，表示表格的行。表格中有多少個 < tr> 標籤就表示有多少行數據。
< td> 是 table datacell 的簡稱，表示表格的單元格，這纔是真正存放表格數據的標籤。單元格的數據可以是文本、圖片、列表、段落、表單、水平線、表格等多種形式。
< th> 是 table heading 的簡稱，表示表格的表頭。< th> 其實是 < td> 單元格的一種變體，本質上還是一種單元格。< th> 一般位於第一行，充當每一列的標題。大多數的瀏覽器會把表頭顯示爲粗體居中的文本。

默認情況下，表格是沒有邊框的。但是我們可以使用 < table> 標籤中的 border 屬性來設置表格的邊框寬度，單位是像素（px）。本例中我們將表格的邊框寬度設置爲 1px。注意，px 是默認的單位，不用顯式指明。

1. 表格的邊框合併：

細心的讀者可能已經發現了，網頁中常見的表格樣式大多爲單層邊框，上例中展示的表格爲雙層邊框。爲了避免這種情況，我們可以利用 CSS 中的 border-collapse 屬性來設置表格的邊框。border-collapse 是“邊框塌陷”的意思，當屬性值爲 collapse 時，可以使表格的雙邊框變爲單邊框。

示例代碼如下：

<table border="1" style="border-collapse: collapse;">
   <tr>
      <th>名稱</th>
      <th>官網</th>
      <th>性質</th>
    </tr>
    <tr>
       <td>C語言中文網</td>
      <td>http://c.biancheng.net/</td>
      <td>教育</td>
     </tr>
    <tr>
        <td>百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
   </tr>
   <tr>
       <td>噹噹</td>
      <td>http://www.dangdang.com/</td>
      <td>圖書</td>
   </tr>
</table>

運行效果如下圖所示：

2. 表格的標題

HTML 允許使用 < caption> 標籤來爲表格設置標題，標題用來描述表格的內容。

我們常見的表格一般都有標題，表格的標題使用 < caption> 標籤來表示。默認情況下，表格的標題位於整個表格的第一行並且居中顯示。一個表格只能有一個標題，也就是說 < table> 標籤中只能有一個 < caption> 標籤。

請看下面的例子：

<table border="1" style="border-collapse: collapse;">
  <caption>這是表格的標題</caption>
  <tr>
     <th>名稱</th>
     <th>官網</th>
     <th>性質</th>
  </tr>
   <tr>
     <td>C語言中文網</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
  </tr>
  <tr>
     <td></td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
  </tr>
  <tr>
      <td>噹噹</td>
     <td>http://www.dangdang.com/</td>
      <td>圖書</td>
  </tr>
</table>

瀏覽器運行結果如圖：

3. 單元格的合併

和 Excel 類似，HTML 也支持單元格的合併，包括跨行合併和跨列合併兩種。

rowspan：表示跨行合併。在 HTML 代碼中，允許我們使用 rowspan 特性來表明單元格所要跨越的行數。
colspan：表示跨列合併。同樣的，在 HTML 中，允許我們使用 colspan 特性來表明單元格所要跨越的列數。

具體格式如下：

< td rowspan=“n”>單元格內容< /td>
< td colspan=“n”>單元格內容< /td>

n 是一個整數，表示要合併的行數或者列數。

此處需注意，不論是 rowspan 還是 colspan 都是 < td> 標籤的屬性。

下面的例子中，我們將表格第 1 列的第 3、4 行單元格合併（跨行合併），將第 4 行的第 2、3 列合併（跨列合併）。具體代碼如下：

<table border="1" style="border-collapse: collapse;">
    <tr>
       <th>名稱</th>
     <th>官網</th>
     <th>性質</th>
    </tr>
    <tr>
      <td>C語言中文網</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
    </tr>
    <tr>
      <td rowspan="2">百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
    </tr>
    <tr>
      <td colspan="2">http://www.dangdang.com/</td>
    </tr>
</table>

運行效果如圖：

通過運行結果可以發現：

rowspan 屬性表示向下合併單元格，colspan 屬性表示向右合併單元格。
每次合併 n 個單元格都要少寫 n-1 個< td>標籤。

提示：即使一個單元格中沒有任何內容，我們仍需使用 < td> 或 < th> 元素來表示一個空單元格的存在，建議在 < td> 或 < th> 中加入（空格），否則低版本的 IE 可能無法顯示出這個單元格的邊框。

HTML錨點鏈接

錨點鏈接是超鏈接中的一種。錨點的妙處之一在於，你可以使用它鏈接到文檔中的某個特定位置。例如，有些網頁內容較多，頁面過長，用戶需要不停的使用瀏覽器上的滾動條來查看文檔中的內容。這時爲了增強用戶體驗，可以在網頁中插入錨點鏈接。

錨點鏈接的具體使用場景有 2 種：

跳轉到當前頁面的指定位置
跳轉到其他頁面的指定位置

1. 跳轉到當前頁面的指定位置

在瀏覽網頁時，用戶通過點擊錨點鏈接就可以跳轉到當前頁面的指定位置。這個位置可以是任意的，例如我們經常會看到網頁中有一個回到頂部的功能，點擊它，可以迅速回到網頁的頂部，使用的就是錨點鏈接。下面我們來看一下用代碼如何實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>錨點鏈接</title>
</head>
<body>
    <p id="content"></p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <a href="#content">回到頂部</a>
</body>
</html>

在上述代碼中，使用了兩步來完成錨點的具體操作：

在要跳轉到的位置所在的標籤中添加了id屬性，併爲其賦值；
使用 < a> 標籤設置錨點，href 屬性值爲#+id屬性值。

運行結果如下圖所示：

通過比較地址欄的變化可以發現，當點擊錨點鏈接後，頁面回到了#content的位置。這樣寫雖然也可以實現迅速回到頂部功能，但在實際開發過程中有更加簡便的方法。具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>錨點鏈接</title>
</head>
<body>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <p>這是頁面內容</p>
    <a href="#top">回到頂部</a>
</body>
</html>

點擊錨點鏈接後，運行結果如下圖所示：

通過滾動條可以發現，頁面回到了頂部。我們來觀察此時的地址欄，地址欄中爲#top，其中#表示位置信息，網頁的頂端默認是#top，所以如果是跳轉到瀏覽器的頂端，不需要寫錨點的第一步操作,，也就是說不需要爲標籤設置 id 屬性。

注意：href 屬性中的 top 也可以省略，不影響正常使用。

2. 跳轉到其他頁面的指定位置

使用錨點鏈接，也可以跳轉到其他頁面的指定位置。與跳轉到當前頁面的指定位置相比，它需要在#前加上要跳轉到的頁面的路徑。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index頁面</title>
</head>
<body>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <p>index頁面</p>
    <h2 id="index">這是h2標題</h2>
</body>
</html>
純文本複製
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>錨點鏈接</title>
</head>
<body>
    <a href="./index.html#index">跳轉到index頁面</a>
</body>
</html>

運行結果如下圖所示：

在 < a> 標籤中，href 屬性指向了 index.html 頁面中 id 爲 index 的標籤。點擊後，發生相應的跳轉。

HTML的基本結構

在學習 HTML 的基本結構之前，我們先來看一段簡單的代碼：

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
</body>
</html>

這些由<（左尖角號）、內容以及>（右尖角號）組成的叫做標籤（tag），三者缺一不可。在 HTML 中，使用<>包圍標籤的目的是方便將它們與普通文本進行區分。

上述代碼描述的是 HTML 的基本結構，主要使用了 <!DOCTYPE>、< html>、< head>、< title> 以及 < body> 等標籤。我們來分別看一下：

是 Document Type Declaration 的簡稱，用來聲明文檔，也就是告知 web 瀏覽器當前頁面使用了哪種 HTML 版本編寫代碼，此處使用的是 HTML 5 的版本。聲明文檔必不可少，而且必須位於 HTML 文檔的第一行；
< html> 表示頁面編寫的代碼都是 HTML 代碼。它是成對出現的標籤，直到 </ html> 結束。除了聲明文檔外的所有代碼都必須寫在 < html>< /html> 中間；
< head> 表示頁面的"頭部"，頁面的 title（標題）一般寫在 < head></ head> 中間；
< title> 表示頁面的標題；
< body> 表示頁面的"身體"，頁面中的絕大部分內容都可以寫在 < body></ body> 之間。

HTML 中的標籤根據閉合狀態可以分爲 2 種，單閉合標籤和自閉和標籤。接下來看一下它們之間的區別。

1. 單閉合標籤

HTML 基本結構中的 <html></html>、<head></head>、<title></title> 以及 <body></body> 標籤都屬於單閉合標籤。其中 <html>、<head>、<title> 以及<body>標籤叫做起始標籤，</html>、</head>、</title> 以及 </body> 標籤叫做結束標籤。由此我們可以看出，單閉合標籤是指起始標籤和結束標籤同時存在的標籤。

2. 自閉和標籤

自閉和標籤與單閉合標籤的區別在於，它的結束標籤可以使用/（結尾斜線）替代，直接寫在起始標籤的尾部。例如圖像標籤可以寫成，換行標籤 < br> 可以寫成 < br />。在後面的講述中我們會講解 < img /> 標籤以及 < br />，這裏只需要瞭解。

HTML < head>標籤

上一節我們介紹了 HTML 的基本結構，在 HTML 的基本結構中，使用 < head> 標籤來定義頭部的內容。接下來我們一起看一下 < head> 標籤內部又可以放哪些內容（或標籤）呢？

請讀者先看一段代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="expires" content="31 Dec 2090">
    <title>文檔的標題</title>
    <link rel="stylesheet" href="url">
    <style></style>
    <script src="url"></script>
</head>
<body>
</body>
</html>

從這段代碼中我們可以看出，< meta>、< title>、< link>、< style> 以及 < script> 標籤是可以放在 < head> 標籤內部的，我們來分別解釋一下各個標籤的含義。

標籤會在下一節進行詳細講解。

1. < title>標籤

< title> 標籤用來表示文檔的標題，我們通過一段簡單的代碼來加以說明：

<!DOCTYPE html><html lang="en">
<head> 
   <title>文檔的標題</title>
   </head>
   <body>  </body>
   </html>

運行效果如下圖所示：

2. < link>標籤

在 HTML 中，允許使用 < link> 標籤配合 href 屬性來引用外部 CSS（Casecading Style Sheets）文件，其中 href 屬性值爲外部 CSS 文件的路徑。在 CSS 章節中會詳細進行講解，這裏不做過多解釋。

3. < style>標籤

<style> 標籤同 <link> 標籤類似，不同的是，<link> 標籤是引用外部 CSS 樣式文件，而 <style> 標籤則是用來在內部編寫 CSS 樣式。

我們建議在 < head> 標籤中使用 < link> 或 < style> 標籤，而不是在其他標籤中使用。
當瀏覽器加載頁面時，會自上而下執行代碼。如果這兩個標籤寫的靠近下方，在加載頁面樣式時，
可能會有短暫的延遲，影響用戶使用效果。

4. < script>標籤

<script> 標籤用來引入外部文件。與 <link> 標籤不同的是，
<script> 標籤配合 src 屬性引入外部 JavaScript 文件，
而 <link> 標籤則是配合 href 屬性引用外部 CSS 文件。
一個是使用 href，另一個是使用 src，那麼它們到底有什麼區別呢？

5. href與src的區別

src 是 source 的簡寫，表示來源地址，用來引入地址中的內容。引入的內容會嵌入到當前標籤所在的位置，所以瀏覽器在解析引入文件時，會停止對後續文檔的處理，直到 src 的內容加載完畢。
href 是 Hypertext Reference 的簡寫，表示超文本引用。在使用 href 時，瀏覽器不會停止解析當前文件。因爲 href 屬性中的內容只是與當前頁面有關聯，然後當前頁面對它進行一次引用。

提示：以上講到的標籤不是必須寫在 < head>< /head> 裏面，只是 < head> 裏面可以寫入這些標籤。例如， < script> 標籤我們就不建議寫在 < head>< /head> 內部，因爲瀏覽器在解析 src 的路徑時會停下對後續文檔的處理，造成頁面的短暫阻塞。

HTML < form>標籤（表單）

從傳統意義上講，"表單"這個詞指代的是一個文檔，這個文檔中有一些空白區域可供用戶填寫信息。區別於傳統意義上的表單，HTML 中的表單不僅可以供用戶填寫信息還可以爲用戶提供信息。

例如，C語言中文網的登錄或註冊頁面使用的就是表單。當用戶填寫了相應信息後，這些信息就會經過表單服務器被提交到網站的後臺，後臺管理人員可以經過一系列操作拿到用戶輸入的信息來判斷是否允許用戶登錄或註冊。接下來我們看一下在網頁中是如何使用表單的。

1. 簡述< form>標籤

HTML 中規定，使用 < form> 標籤來表示表單。我們都知道表格的行、列及單元格需要放在 < table>< /table> 標籤中，表單裏的元素也不例外，同樣需要放在 < form>< /form> 標籤中。< form> 標籤有幾個常用的屬性，見下表：

常用屬性	屬性值	說明
action	url	用戶點擊提交按鈕時，表單被提交到的位置。
method	get / post	表單提交時所使用的 http 請求方法，只能是 get 或 post 中的任意一種。
name	自定義	表單的名稱，不能包含特殊字符和空格。

具體語法如下：

< form action=“url” method=“post” name=“formName”>

此處使用提交方法爲post，還可以設置爲get。我們來看一下兩者之間有什麼區別：

get ：用戶點擊提交按鈕後，提交的信息會被顯示在頁面的地址欄中。一般情況下，get提交方式中不建議包含密碼，因爲密碼被提交到地址欄，不安全。
post：如果表單包含密碼這種敏感信息，建議使用post方式進行提交，這樣數據會傳送到後臺，不顯示在地址欄中，相對安全。

2. < form>標籤所有屬性

以上我們列舉的是 < form> 標籤的常用屬性，接下來看一下它的所有屬性：

所有屬性	描述
action	規定用戶點擊提交按鈕時，表單被提交到的位置。
method	規定表單提交時所使用的 http 請求方法，只能是 get 或 post 中的任意一種。
name	定義表單的名稱，不能包含特殊字符和空格。
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

如果某個文檔要加入多個表單，< form> 標籤不可以互相嵌套。

HTML < meta>標籤

標籤內的信息不會顯示在頁面中，定義標籤的主要目的是因爲它對機器是可讀的。標籤有很多功能，它可以定義文檔中的關鍵字，也可以對文檔進行描述，還可以配合自身的屬性設置網頁的過期時間等等。當我們定義了頁面的關鍵字或者描述信息後，搜索引擎蜘蛛（也就是常說的網絡爬蟲）就可以利用它們來搜索這個頁面的信息。下面來看一下標籤的常用屬性：

<meta> 標籤內的信息不會顯示在頁面中，定義
<meta> 標籤的主要目的是因爲它對機器是可讀的。
<meta> 標籤有很多功能，它可以定義文檔中的關鍵字，也可以對文檔進行描述，還可以配合自身的屬性設置網頁的過期時間等等。當我們定義了頁面的關鍵字或者描述信息後，搜索引擎蜘蛛（也就是常說的網絡爬蟲）就可以利用它們來搜索這個頁面的信息。
下面來看一下 <meta> 標籤的常用屬性：

name屬性

name 屬性可以用來定義網頁的關鍵字、描述、作者以及版權信息等等。我們來看一下它的常用屬性值：

常用屬性值	說明
keywords	用來定義網頁的關鍵字。關鍵字可以是多個，之間需要用英文逗號`,`隔開。
description	用來定義網頁的描述。
author	用來定義網頁的作者。
copyright	用來定義網頁的版權信息。

當 name 屬性規定好這些信息後，後面還需緊跟 content 屬性設置具體的內容，這樣纔可以生效。具體使用語法如下：

<meta name="keywords"   content="<head>標籤描述">
<meta name="description"   content="這篇文章主要對<head>標籤進行詳細講解">
<meta name="author"   content="author">
<meta name="copyright" content="本站所有教程均爲原創，版權所有，禁止轉載。否則將追究法律責任。">

charset屬性

charset 是 HTML 5 中的新屬性，用來定義頁面的編碼格式。它的常用屬性值見下表：

常用屬性值	說明
ISO-8859-1	表示網頁的默認編碼格式。
UTF-8	表示萬國碼，是目前最常用的編碼格式。
gb2312	表示國際漢字碼，不包含繁體。
gbk	表示國家標準擴展版。增加了繁體，包含所有亞洲字符集。

具體代碼如下所示：

<head>  
<meta charset="UTF-8">  
<meta charset="gb2312">  
<meta charset="ISO-8859-1"> 
<meta charset="gbk">
</head>

以上爲語法演示，在使用時根據需求，只使用其中一個即可。

http-equiv屬性

所有主流瀏覽器都支持 http-equiv 屬性。它可以設置網頁的過期時間，自動刷新等，有以下幾個常用屬性值：

常用屬性值	說明
expires	設置網頁的過期時間。
refresh	設置網頁自動刷新的時間間隔，單位是秒。
content-type	定義文件的類型，用來告訴瀏覽器該以什麼格式和編碼來解析此文件。

我們通過一段簡單的代碼來看一下如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html">
    <meta http-equiv="expires" content="Dec 20 2090">
    <meta http-equiv="refresh" content="1000">
    <title>Document</title>
</head>
<body>
</body>
</html>

Document

上面使用了 < meta> 的幾個常用屬性，我們來看一下：

< meta charset=“UTF-8”> 設置了網頁的編碼格式爲 utf-8
< meta http-equiv=“content-type” content=“text/html”> 用來告訴瀏覽器本網頁編寫的是 HTML 代碼，需要用 HTML 的格式來進行解析。在下面會附上 content-type 常用文件類型值講解；
< meta http-equiv=“expires” content=“Dec 20 2090”> 定義網頁於 2090 年 12 月 20 日過期；
< meta http-equiv=“refresh” content=“1000”> 設置了頁面每隔 1000 秒就會進行一次刷新。

設置了網頁的編碼格式爲 utf-8；用來告訴瀏覽器本網頁編寫的是 HTML 代碼，需要用 HTML 的格式來進行解析。在下面會附上 content-type 常用文件類型值講解；定義網頁於 2090 年 12 月 20 日過期；設置了頁面每隔 1000 秒就會進行一次刷新。

我們可以看出，http-equiv 屬性和 name 屬性一般與 content 屬性配合使用，有點類似固定搭配。以上只是 < meta> 標籤常用的屬性，實際上它的屬性遠遠不止這些，但是到目前爲止，我們只需會用上面講過的這幾個屬性即可。

content-type常用屬性值

常用屬性值	說明
text/html	表示該文檔是 HTML 格式的文檔。
text/plain	表示該文檔是純文本格式的文檔。
text/xml	表示該文檔是 XML 格式的文檔。
image/gif	表示該文檔是 gif 圖片格式的文檔。
image/jpeg	表示該文檔是 jpg 圖片格式的文檔。
image/png	表示該文檔是 png 圖片格式的文檔。

HTML < input>標籤

在HTML 中，< form> 標籤內部有 4 種元素，分別是 input、option、select 以及 textarea 元素。本節我們先來對 input 元素進行整體介紹。

1. input元素

很多表單元素都是由一個個的 input 元素組成的。它是自閉合標籤，根據其 type 屬性值的不同分爲很多種，例如單行文本框、密碼框、單選按鈕、複選框、隱藏域、文件上傳域、普通按鈕、提交按鈕以及重置按鈕等。我們先來看一下它的語法格式：

< input type=“表單類型” />

接下來再看一下 type 常用屬性值：

常用屬性值	說明
text	表示單行文本框
password	表示密碼框
hidden	表示隱藏域
radio	表示單選按鈕
checkbox	表示複選框
file	表示文件上傳域
button	表示普通按鈕
submit	表示帶提交功能的按鈕
reset	表示帶重置功能的按鈕

具體使用方法請看如下代碼：

<body>
    <form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
        用戶名:<input type="text" name="name"><br/>
        密碼:<input type="password" name="password"><br/>
        性別:<input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女<br/>
        愛好:讀書<input type="checkbox" name="read" value="read">
        跑步<input type="checkbox" name="run" value="run">
        逛街<input type="checkbox" name="shopping" value="shopping">
        看電影<input type="checkbox" name="movie" value="movie"><br/>
        隱藏域<input type="hidden"  name="hidden"><br/>
        文件上傳域<input type="file" name="file" src="url"><br/>
        <input type="submit" value="提交">
        <input type="button" value="確定">
        <input type="reset" value="重置">
    </form>
</body>

因爲提交信息中含有密碼字段，所以本次提交選用的是"post"請求。運行結果如下圖：

上述代碼中使用了 type 屬性中的 text、password、radio、checkbox、hidden、file、submit 以及 reset。我們來分別看一下：

text 表示常規文本框，一般用來輸入一些對用戶可見的文字。
password 表示密碼框，輸入的內容對用戶不可見。
radio 表示單選按鈕。當 type 屬性值爲 radio 時，必須爲其指定相同的 name 屬性值，否則實現不了單選的效果。
checkbox 表示複選框，可以選擇多條內容。
hidden 表示隱藏域，在頁面中對於用戶是不可見的。在表單中插入隱藏域可以方便收集或發送信息。當表單提交時，隱藏域的信息也被一起提交。
file 表示上傳文件域，src 屬性表示文件的路徑。
submit 表示提交按鈕，默認值爲提交，也可以根據需求使用 value 屬性進行設置。點擊按鈕後，表單中的值會提交到預先設定好的 url 中。
button 表示普通按鈕，沒有提交功能。默認沒有 value 值，需要手動設置，如果需要提交，建議使用 submit 按鈕。
reset 表示重置按鈕，同 submit 一樣也有默認 value 值，默認爲重置。點擊按鈕後，表單中填寫的所有數據將被清空。

細心的讀者已經發現，我們爲每一個字段都設置了 name 屬性，那麼爲什麼這麼做呢，不這樣做行不行？

2. name屬性

當用戶向表單輸入信息時，服務器需要知道這個數據到底輸入到了表單的哪個字段（控件）。例如登錄頁面，服務器需要知道哪條數據是作爲用戶名輸入的，哪條數據是作爲密碼輸入的。因此，HTML 規定如果表單要想正確地被提交給表單處理器，必須爲每個字段都設置 name 屬性。如果未設置，默認不提交其數據信息。

3. disabled屬性

如果爲標籤的某個控件設置了disabled="disabled"，表示將禁用該控件，使其不能再獲得焦點或被修改。被禁用後，它的值不會提交到後臺。如果是按鈕被禁用，它的點擊效果就會失效。

示例如下：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
      用戶名:<input type="text" name="name" disabled="disabled" value="username"><br/>
      密碼:<input type="password" name="password" disabled="disabled"><br/>
</form>

運行結果如圖所示：

通過運行結果可以發現，預先設置好的 value 值可以正常顯示，但是不能更改其內容。

4. readonly屬性

readonly 屬性表示只讀。它有以下特點：

一般用在單行文本框和密碼框中；
控件的值可以顯示，但不能修改；
控件可以獲取焦點；
如果有預先設置好的值，會一起提交到服務器。

HTML單行文本框

在 HTML 中，把 < input> 標籤的 type 屬性設置爲 text 可以表示單行文本框，又叫做常規文本框。具體語法格式如下：

< input type=“text” />

接下來我們看一個具體的例子：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
    用戶名:<input type="text" name="username" value="C語言中文網"/>
</form>

運行效果如圖所示：

通過運行結果可以發現，文本框中的值爲定義的 value 屬性的值。當需要告知用戶某一欄數據時，我們通常這樣寫。如果只是想獲取用戶輸入的數據，通常不設置 value 屬性值，由用戶自行輸入。

注意：文本框的默認數據用戶可以進行刪除、修改，也可以讓它繼續保持現有值，提交時會按照文本框現有內容進行提交。

當 < input> 標籤作爲單行文本框使用時，除了 value 屬性還可能用到以下兩個屬性：

1 maxlength屬性

在 < form> 表單中，允許使用 maxlength 屬性設置文本框中最多可以輸入的字符數量（包括空格）。如果我們要對年齡輸入框設置，可以這樣寫：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
     年齡:<input type="text" name="age" maxlength="3" />
</form>

我們都知道，年齡沒有超過三位數的，所以我們爲年齡文本框設置最多可以輸入 3 字符，當用戶輸入第 4 個字符時，不再允許輸入。

2) size屬性

size 屬性用來定義文本框可見的字符數。可以這樣使用：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
     年齡:<input type="text" name="age" size="3" />
</form>

與 maxlength 不同的是，size 定義的是文本框可見的字符數，當用戶輸入的字符數超出這個值時，還可以輸入只是不再顯示。

不建議爲文本框設置 size 屬性，目前很少有人這麼做。如果需要，應該使用 CSS 設置文本框的寬度。

HTML密碼框

在 HTML 中，把 < input> 標籤的 type 屬性設置爲 password 可以表示密碼框。具體語法格式如下：

< input type=“password” />

接下來我們看一個具體的例子：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
       密碼:<input type="password" name="psd">
</form>

運行效果如圖所示：

從運行結果來看，密碼框在外觀上和單行文本框相同，但是兩者之間是有區別的：

單行文本框輸入的字符可見；
密碼框輸入的字符不可見，會被▪代替。請讀者自己試一試。

注意：密碼框設置輸入字符被▪代替的原因，只是防止用戶周圍的人看到密碼，後臺是可以拿到輸入的內容的。

密碼框同單行文本框一樣，也有 maxlength、 value 以及 size 等屬性。接下來我們看一下：

1 maxlength屬性

maxlength 屬性表示密碼框最多可以輸入的字符數量。如果我們需要設置用戶輸入的密碼不得超過 6 位，可以這樣寫：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
       密碼:<input type="password" name="psd" maxlength="6">
</form>

進行設置後，當用戶輸入的密碼大於 6 位，不再允許輸入。

2 value屬性

value 屬性用來表示密碼框的默認值，一般密碼都是由用戶自行輸入的，但是有的情況我們需要給用戶一個默認密碼，就可以這樣寫：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
       密碼:<input type="password" name="psd" value="123456">
</form>

運行效果如圖所示：

圖2：鍵入了默認密碼的密碼框

通過運行結果可以發現，默認的密碼"123456"被▪代替。

3 size屬性

同單行文本框中的 size 屬性相同，也表示文本框可見的字符數。

注意：一般我們只需設置 maxlength 來限制用戶輸入的密碼不大於多少位，不使用 size 屬性。

HTML單選按鈕

在 HTML 中，把 < input> 標籤的 type 屬性設置爲 radio 可以表示單選按鈕。具體語法格式如下：

< input type=“radio” />

同單行文本框和密碼框一樣，單選按鈕要想被正確提交，也必須設置 name 屬性。除了 name 屬性之外，單選按鈕還有幾個其它屬性，我們來看一下。

1. 單選按鈕其它屬性

其它屬性	說明
checked	用來規定在頁面加載時應該被預先選定的 input 元素。
value	用來定義被選中時發送到服務器的值。同一組中每個按鈕的值應該不同，這樣服務器才能辨別提交的是哪一項。
id	規定 HTML 元素的唯一 id。id 值在整個頁面是唯一的，不會重複。

1) checked屬性

checked 屬性用來設置頁面加載時單選按鈕的選中狀態。當屬性值爲“checked”時，單選按鈕會被選中。下面我們通過一個簡單的示例來進行演示：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性別：<input type="radio" name="girl" checked="checked">女
       <input type="radio" name="boy" checked="checked">男
</form>

運行結果如圖所示：

從運行結果可以看出，兩個單選按鈕都被選中。讀者可能會考慮是因爲我們同時給兩個單選按鈕設置了checked="checked"屬性，其實還有一個原因，兩個單選按鈕的 name 屬性值不同也會產生這樣的結果。

注意：當 type 屬性值爲 radio 時，name 屬性值必須保持一致。本例只是爲了演示問題纔會爲所有按鈕加checked="checked"屬性，在實際開發中不會這樣寫。checked="checked"可以簡寫爲 checked。

2 name屬性

上述代碼因爲 name 屬性值不同，兩個單選按鈕被同時選中。接下來我們就來看一下當 name 屬性值相同時，給兩個按鈕都設置選中，會產生什麼效果：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性別：<input type="radio" name="sex" checked>女
       <input type="radio" name="sex" checked>男
</form>

運行結果如圖所示：

通過運行結果可以發現，後面的按鈕被選中，而前面的按鈕沒有。這是因爲當 name 屬性值相同而且 type 屬性爲 radio 時，瀏覽器會認爲是相同字段，默認只能選擇一個。然而又因爲我們爲兩個按鈕同時設置了選中效果，根據代碼的執行順序後者會覆蓋前者。

3 value屬性

上面我們提到了單選按鈕也有 value 屬性，接下來就來看一下該如何使用它呢？我們來看一段代碼:

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
       性別：<input type="radio" name="sex" value="girl">女
       <input type="radio" name="sex" value="boy" checked="checked">男
</form>

運行效果如圖所示：

通過運行結果發現，value 值並不會顯示在頁面中。之所以建議爲每個按鈕添加 value 值，是因爲最終提交表單時，服務器可以根據 value 屬性值辨別提交的是哪一項。

4 id屬性

在爲單選按鈕設置 id 屬性時，一般有 3 種用途：

配合 < label> 標籤使用；
通過 JavaScript 獲取元素，對元素進行一系列操作；
通過 CSS 選擇元素，爲其添加樣式。

本節中，我們將講述第一種。那麼我們就來看一下 id 屬性是如何與標籤配合使用的：

<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
        性別：<input type="radio" name="girl" value="girl" id="girl"><label for="girl">女</label>
        <input type="radio" name="girl" value="boy" id="boy" checked="checked"><label for="boy">男</label>
</form>

通過以上代碼可以發現，< label> 標籤中的 for 屬性與 < input> 元素的 id 屬性值相同，我們可以說它們之間進行了一個綁定。那麼 < label> 標籤到底是用來做什麼的呢？

< label> 標籤主要用來爲 < input> 元素定義標記，又因爲 < label> 標籤中的 for 屬性可以與 < input> 元素的 id 屬性進行綁定，所以當點擊 < label> 標籤中的內容（< label for=“girl”>女< /label>）時，也相當於對 < input> 中的元素（< input type=“radio” name=“girl” value=“girl” id=“girl”>）進行了點擊。

運行結果如下圖所示：

從運行結果來看沒有任何變化，但是當讀者點擊 < label> 標籤中的“男”或“女”時，會發現對應的按鈕也會有相應變化。這是在開始時沒有加 < label> 標籤時所做不到的。

我們建議每個單選按鈕都和 < label> 標籤配合使用，一是爲了用戶體驗，二是爲了在後期使用 JavaScript 語言操作數據時更方便。

要想單選按鈕被正確提交到後臺，必須爲每個字段設置 name 屬性；
當 < input> 標籤用作單選按鈕時，其 name 屬性值必須相同，這樣瀏覽器纔會認爲是同一個字段，從而實現單選效果；
value 屬性值不會顯示在頁面上，但是在提交數據時，後臺接收的是我們設置的 value 屬性值；
< label> 標籤用來爲 < input> 元素定義標記，當 < label> 標籤中的 for 屬性與 < input> 元素的 id 屬性綁定時，點擊 < label> 標籤中的內容，也相當於點擊了 < input> 中的元素。

HTML複選框

在 HTML 中，把 < input> 標籤中的 type 屬性設置爲 checkbox 可以實現多選框的效果。具體語法格式如下：

< input type=“checkbox” />

1. 複選框的常用屬性

常用屬性	說明
checked	用來規定在頁面加載時應該被預先選定的 input 元素，當屬性值爲 checked 時，可以省略。
value	用來定義被選中時發送到服務器的值。同一組中每個按鈕的值應該不同，這樣服務器才能辨別提交的是哪一項。
id	規定 HTML 元素的唯一 id。id 值在整個頁面是唯一的，不會重複。

1 checked屬性

checked 屬性用來設置頁面加載時複選框的選中狀態。當屬性值爲“checked”時，對應的複選框會被選中。下面我們通過一個簡單的示例來進行演示：

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     愛好：<input type="checkbox" name="running" checked>跑步
     <input type="checkbox" name="reading" checked>閱讀
     <input type="checkbox" name="shopping" checked>購物
</form>

運行結果如圖所示：

通過運行結果可以發現，當 name 屬性值不同且爲複選框都設置checked時，它們都被選中。那麼如果我們爲 name 屬性設置相同的值，會是什麼效果呢？

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     愛好：<input type="checkbox" name="running" id="run" checked>跑步
     <input type="checkbox" name="running" id="read" checked>閱讀
     <input type="checkbox" name="running" id="shop" checked>購物
</form>

運行結果如圖所示：

與我們預期的結果可能不太一樣：在爲單選按鈕設置相同的 name 屬性值時，只有一個可以被選中，而複選框都被選中了，那麼我們是不是可以隨便設置複選框的 name 屬性呢？當然是不建議的，因爲後臺在獲取用戶輸入數據時，如果 name 屬性相同，很容易混淆。

2 value屬性

複選框也有 value 屬性，我們來看一下使用方法：

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     愛好：<input type="checkbox" name="running" checked value="run">
     <input type="checkbox" name="reading" checked value="read">
     <input type="checkbox" name="shopping" checked value="shop">
</form>

運行結果如圖所示：

通過運行結果可以發現，與單行文本框和密碼框不同，複選框的 value 值並不顯示在頁面上。建議爲複選框設置不同的 value 屬性值，這樣在數據提交時，後臺可以非常清楚的知道提交的是哪個字段。

3 id屬性

爲複選框設置 id 屬性的目的與單選框相同，共分爲 3 種：

配合 < label> 標籤使用；
通過 JavaScript 獲取元素，對元素進行一系列操作；
通過 CSS 選擇元素，爲其添加樣式。

第一種使用方法：

<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     愛好：<input type="checkbox" name="running" id="run" checked value="run"><label for="run">跑步</label>
     <input type="checkbox" name="reading" id="read" checked value="read"><label for="read">閱讀</label>
     <input type="checkbox" name="shopping" id="shop" checked value="shop"><label for="shop">購物</label>
</form>

運行結果如圖所示：

複選框中的 < label> 標籤和單選按鈕中的 < label> 標籤使用方法相同，分爲 2 點：

< label> 標籤主要用來爲 < input> 元素定義標記；
當 < label> 標籤和 for 屬性配合使用時， for 屬性指向< input>元素的 id 屬性。當點擊 < label> 標籤的內容時，< input> 元素也有相應變化。

我們建議所有的複選框都與 < label> 標籤配合使用，一是爲了用戶體驗，二是爲了在使用 JavaScript 語言操作數據時更加方便。

複選框可以多選，不限制選中的數量；
複選框要想被正確提交，必須設置 name 屬性，而且每個複選框的 name 屬性值和 value 屬性值都建議不同；
複選框建議與 < label> 標籤配合使用；
< label> 標籤中的 for 屬性指向複選框的 id 屬性，類似綁定。

HTML文件上傳域

文件上傳是網站中一種常見的功能。例如百度網盤、QQ 郵箱以及有道雲筆記都可以實現文件的上傳。在 HTML 中，把 < input> 標籤的 type 屬性設置爲 file 就可以實現上傳文件的功能，又叫做文件上傳域。具體語法格式如下：

< input type=“file” />

接下來我們看一下怎樣才能實現文件的正確上傳呢？具體代碼如下：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
     <input type="file" name="file" accept="image/png"/><br/>
     <input type="submit"/>
</form>

上傳文件時，需要把 method 屬性設置爲 post（get 方式不能提交文件）。

上述代碼中，使用了 < form> 標籤的 enctype 屬性以及 < input> 標籤的 accept 屬性，我們來分別看一下：

1. enctype屬性

enctype 屬性規定被提交數據的編碼。如果提交數據中包含文件時，需要把標籤的 enctype 屬性設置爲 multipart/form-data。如果不這樣設置，文件將無法正常提交。具體代碼如下：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
     <input type="file" name="file"/><br/>
     <input type="submit"/>
</form>

運行結果如圖所示：

當然僅僅設置< form> 標籤的 enctype 屬性是不夠的，如果要保證文件可以正確提交給表單服務器，還需要設置文件的類型，這時就需要使用 accept 屬性。

2. accept屬性

當 < input> 標籤的 type 屬性爲 file 時，使用 accept 屬性可以規定上傳文件的類型。具體代碼如下：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept="image/png"/>
</form>

此處規定上傳的文件只能是.png格式的圖片。如果想上傳.pdf格式的圖片，需要修改 accept 的屬性值。

上傳文件的類型有很多種，我們在文章的末尾會附上常用的文件類型。

如果 accept 的屬性值爲多個，它們之間需要用逗號隔開。

根據以上內容，我們總結出上傳文件需要注意的 2 點：

把 < form> 標籤的 enctype 屬性設置爲 multipart/form-data；
使用 < input> 標籤的 accept 屬性來設置上傳文件的類型。

然而這樣編寫代碼只能實現每次上傳一個文件，如果想實現一次上傳多個文件，還要用到 < input> 標籤的 multiple 屬性。

3. multiple屬性

當給上傳文件字段設置了 multiple 屬性時，就表示可以同時選擇多個文件一起上傳。我們來看具體的代碼：

<form action="http://vip.biancheng.net/register.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept="image/png" multiple />
</form>

這時我們就可以一次性選擇多個.png格式的圖片文件，如圖所示：

通過運行結果可以發現，當選擇多個文件時，瀏覽器顯示的是文件個數而不再是文件名稱。

4. 常用的文件類型

常用文件類型	對應的 accept 屬性值
.jpg	image/jpg
.png	image/png
.gif	image/gif
.jpeg	image/jpeg
.html	text/html
.css	text/css
.js	text/javascript、application/javascript
.txt	text/plain
.zip	application/zip
.mp4	audio/mp4、video/mp4

HTML 標籤（文本域）

在 HTML 中，使用 < textarea> 標籤來表示多行文本框，又叫做文本域。與其它 < input> 標籤不同，< textarea> 標籤是單閉合標籤，它包含起始標籤和結束標籤，文本內容需要寫在兩個標籤中間。具體語法格式如下：

< textarea>文本內容< /textarea>

接下來我們通過一段簡單的代碼來看一下：

<form action="http://vip.biancheng.net/register.php" method="post">
    描述信息：<textarea name="description">此處是描述信息</textarea>
</form>

運行效果如圖所示：

通過運行結果可以發現，文本域的右下角有一個收縮按鈕，拖拽按鈕可以手動改變文本域的寬高。這個按鈕默認顯示，也可以隱藏，我們來看一下怎麼隱藏它呢？

<form action="http://vip.biancheng.net/register.php" method="post">
    描述信息：<textarea name="description" style="resize:none;">此處是描述信息</textarea>
</form>

注意：此處用到的是 CSS 樣式中的內容，讀者只需瞭解即可。當收縮按鈕隱藏後，不能手動調節文本域的寬高。

同所有表單元素相同，文本域要想正確提交，也必須設置 name 屬性。除了 name 屬性以外，文本域還有其它屬性，接下來我們看一下：

其他屬性	說明
cols	用來指定每行顯示的字符數。
rows	用來指定正常情況下（沒有滾動條）顯示的文本行數。
id	用來定義文本域的唯一 id 屬性。

1. cols屬性

cols 屬性用來指定每行可以顯示的字符數，也就是文本域的可見寬度。一般情況下，如果內容超出文本域寬度，會自動換行顯示，但是如果文本內容較長，而且在大於文本域寬度時，還沒有空格可以進行換行，就會出現橫向滾動條。

我們來看一個示例：

<form action="http://vip.biancheng.net/register.php" method="post">
  HTML教程描述：<textarea name="description" cols="40">這套「HTML教程」可以幫助讀者快速入門，其中包含了作者大量的實踐經驗，將知識系統化，濃縮爲精華，用通俗易懂的語言直指網頁設計初學者的痛點。</textarea>
</form>

運行結果如圖所示：

通過運行結果可以發現，當文本內容超出了文本域的寬度時，會自動換行顯示。這時，出現了縱向的滾動條是因爲高度不夠。下面我們就來學習一下如何設置文本域的高度。

2. rows屬性

在文本域中，rows 屬性用來設置文本域的可見行數，也就是文本域的高度。當文本內容超出設置高度時，會出現縱向滾動條。用戶拖動滾動條可以查看全部內容。

示例如下：

<form action="http://vip.biancheng.net/register.php" method="post">
  HTML教程描述：<textarea name="description" cols="40" rows="6">這套「HTML教程」可以幫助讀者快速入門，其中包含了作者大量的實踐經驗，將知識系統化，濃縮爲精華，用通俗易懂的語言直指網頁設計初學者的痛點。</textarea>
</form>

運行結果如圖所示：

通過運行結果可以看出，當文本高度小於文本域高度時，不會出現縱向滾動條。

注意：除了使用 rows、cols 屬性設置文本域的寬高，css 也可以實現

3. id屬性

id 屬性用來定義文本域的唯一 id 值。爲文本域添加 id 屬性，主要有以下 2 個方面：

在 css 中，可以使用 id 獲取元素爲其添加 css 樣式；
在 JavaScript 中，可以根據設置好的 id 屬性獲取文本域，然後對它進行一系列操作，例如操作文本域的內容。

HTML 標籤（下拉列表）

下拉列表是網頁中一種最節省頁面空間的選擇方式，默認狀態下只顯示一個選項，只有單擊下拉按鈕後才能看到全部的選項。例如，淘寶網首頁的選擇地區一欄，用到的就是下拉列表，我們來看一下：

圖1：淘寶網的下拉列表

我們都知道無序列表由 < ul>< li> 配合使用，有序列表由 < ol>< li> 配合使用。HTML 下拉列表與它們類似，是由 < select>< option> 配合使用的。具體語法格式如下：

< select>
< option>< /option>
< /select>

其中，< select> 標籤用來創建一個下拉列表，< option> 標籤表示下拉列表中的每一項（條目）。接下來我們看一個示例：

<form action="http://vip.biancheng.net/login.php" method="post">
     年齡區間：
     <select>
         <option>18歲以下</option>
         <option>18-28歲</option>
         <option>28-38歲</option>
         <option>38歲以上</option>
      </select>
</form>

運行結果如圖所示：

我們先來看一下 < select> 標籤的屬性。

1. < select>標籤屬性

1name屬性

同所有其它表單元素相同，下拉列表要想被正確提交，也需要設置 name 屬性。代碼如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     年齡區間：
     <select name="selectList">
         <option>18歲以下</option>
         <option>18-28歲</option>
         <option>28-38歲</option>
         <option>38歲以上</option>
      </select>
</form>

運行結果如圖所示：

通過運行結果可以發現，name 屬性並不會顯示在頁面上。下拉列表的 name 屬性同標籤的 name 屬性作用相同，主要用來提交數據。

2 size屬性

在文章的開始我們提到過，下拉列表默認狀態下只顯示一個選項。如果需要讓頁面顯示多個選項，就要使用 size 屬性。我們來看一下具體的使用方法：

<form action="http://vip.biancheng.net/login.php" method="post">
     年齡區間：
     <select name="selectList" size="4">
         <option>18歲以下</option>
         <option>18-28歲</option>
         <option>28-38歲</option>
         <option>38歲以上</option>
      </select>
</form>

谷歌瀏覽器的運行結果：

再來看一下 IE 瀏覽器的運行結果：

通過比較運行結果我們可以發現，不同瀏覽器對於一些標籤會有不同的樣式設置。

3 multiple屬性

下拉列表默認只允許選擇一個選項，如果允許用戶選擇多個，就要用到 multiple 屬性。當 multiple 屬性值等於 multiple 時，表示允許用戶選擇多個選項。我們來看一下具體使用方法：

<form action="http://vip.biancheng.net/login.php" method="post">
     年齡區間：
     <select name="selectList" multiple="multiple" size="4">
         <option>18歲以下</option>
         <option>18-28歲</option>
         <option>28-38歲</option>
         <option>38歲以上</option>
      </select>
</form>

運行結果如圖所示（谷歌瀏覽器）：

注意：此時只需按住ctrl+鼠標左鍵就可以選擇多個選項。multiple=“multiple” 可以簡寫爲 multiple。

4) disabled屬性

disabled 屬性可以禁用下拉列表，使其不能再獲得焦點或被修改。被禁用後，它的值不會提交。具體使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     年齡區間：
     <select name="selectList" multiple="multiple" size="4" disabled>
         <option>18歲以下</option>
         <option>18-28歲</option>
         <option>28-38歲</option>
         <option>38歲以上</option>
      </select>
</form>

運行結果如圖所示：

通過運行結果可以發現，下拉列表的每一項都被“灰化”（gray-out）了，而且不可以被選擇。

上述爲 < select> 標籤的屬性，接下來我們看一下 < option> 標籤的屬性。

2. < option>標籤屬性

1) selected屬性

在爲 < select> 標籤設置了 multiple 屬性後，就可以通過 < option> 標籤的selected="selected"實現某一項的預先選中。具體使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     年齡區間：
     <select name="selectList" multiple>
         <option selected="selected">18歲以下</option>
         <option>18-28歲</option>
         <option selected="selected">28-38歲</option>
         <option>38歲以上</option>
      </select>
</form>

運行結果如圖所示：

通過運行結果可以發現，設置了selected="selected"屬性的項被預先選中，呈深灰色。

2 value屬性

< option> 標籤的 value 屬性用來定義當下拉列表在提交時，發送給服務器的值。value 值並不會顯示在頁面上。使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
    年齡區間： 
    <select name="selectList" multiple>
        <option selected="selected" value="underage">18歲以下</option>
        <option value="teens">18-28歲</option>
        <option selected="selected" value="youth">28-38歲</option>
        <option value="more">38歲以上</option>
    </select>
</form>

運行結果如圖所示：

3) disabled屬性

< option> 標籤也有 disabled 屬性，不同於 < selected> 標籤的 disabled 屬性，它只能禁用列表中的某一項。

實際上，multiple 和 size 這兩個屬性只要設置了其中一個，下拉列表就可以顯示多項。如果只設置 size，而不設置 multiple，得到的是一個不允許多選但是可以顯示多項的下拉列表；
< select> 標籤的 name 屬性不顯示在頁面上，主要用來提交數據；
< option> 標籤的 value 屬性也不顯示在頁面上，主要用來定義提交給服務器的值；
< option> 標籤的 disabled 屬性禁用的是列表中的某一項；
< select> 標籤的 disabled 屬性禁用的是整個列表。

- HTML按鈕

在 HTML 中，按鈕分爲 3 種：

普通按鈕
提交按鈕
重置按鈕

1. 普通按鈕

普通按鈕默認沒有提交功能，它只是一個可點擊的小裝置，一般情況下，需要配合 JavaScript 腳本才能實現具體的功能。在 HTML 中，把 < input> 標籤的 type 屬性設置爲 button 用來表示普通按鈕。具體語法格式如下：

< input type=“button” />

普通按鈕沒有默認內容，我們需要使用 value 屬性爲其設置具體內容。代碼如下：

<form action="http://vip.biancheng.net/login.php" method="post">
    <input type="button" value="普通按鈕"/>
</form>

運行結果如圖所示：

2. 提交按鈕

提交按鈕可以看成是一種具有特殊功能的普通按鈕。當單擊提交按鈕時，會對錶單的內容進行提交。在 HTML 中，當< input> 標籤的 type 屬性值爲 submit 時，用來表示提交按鈕。具體語法格式如下：

< input type=“submit” />

我們通過一段簡單的代碼來看一下：

<form action="http://vip.biancheng.net/login.php" method="post">
    <input type="submit"/>
</form>

運行結果如圖所示：

在上述代碼中，我們並沒有爲提交按鈕設置 value 值。但是通過運行結果可以發現，提交按鈕是有默認值的，默認爲提交。如果需要改變其默認值，只需要設置 value 屬性即可。

注意：表單中的字段需要設置 name 屬性纔可以進行提交，但是提交按鈕的 name 屬性可以根據需求進行設置，一般情況下不使用。當點擊提交按鈕後，表單中含有 name 屬性的數據會發送到表單服務器，後臺經過操作便可以拿到用戶輸入的內容。

3. 重置按鈕

重置按鈕也可以看成是一種具有特殊功能的普通按鈕，單擊重置按鈕可以清除用戶在表單中輸入的信息。把 < input> 標籤的 type 屬性設置爲 reset 用來表示重置按鈕。重置按鈕也有默認值，默認值爲重置。具體語法格式如下：

< input type=“reset” />

示例如下：

<form action="http://vip.biancheng.net/login.php" method="post">
  用戶名 <input type="text" name="username" value="C語言中文網"/>
  密碼：<input type="password" name="psd" value="123456"/>
  <input type="reset"/>
</form>

運行結果如圖所示：

接下來我們看一下點擊重置按鈕後的效果：

通過運行結果發現，數據沒有清空。這是爲什麼呢？

這裏需要注意的是，reset 按鈕只能清空用戶在表單中輸入的內容，對於提前設置好的內容不會清空。

不同瀏覽器對於一些標籤會有不同的樣式設置，以上均使用谷歌瀏覽器。

HTML圖像按鈕

在 HTML 中，把 < input> 標籤的 type 屬性設置爲 image 可以表示圖像按鈕。具體語法格式如下：

< input type=“image” src=“url” />

我們還可以把圖像按鈕分爲圖像、按鈕兩部分來看，因爲它既有圖像的特點（需要使用src屬性爲圖片添加路徑），又有按鈕的特點（圖像按鈕的行爲基本上與提交按鈕一致，點擊它也可以實現表單數據的提交）。

圖片的路徑可以是相對路徑，也可以是絕對路徑。具體使用方法請參考

示例如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg"/>
</form>

運行結果如圖所示：

當我們點擊圖片按鈕後，表單中的相應內容會提交。

1. 圖像按鈕屬性

同 < img> 標籤一樣，圖像按鈕也有 alt 屬性：

1 alt屬性

alt 屬性用來對圖像進行文本說明。一般情況下，當瀏覽器因某種原因無法載入圖像時，就會顯示這段文本。雖然 alt 屬性值可以爲空，但還是建議讀者給 alt 屬性設置符合圖像信息的文本。

代碼如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此處爲提交按鈕"
     />
</form>

當網絡出現問題時，運行結果如圖所示：

接下來我們看一下怎樣設置圖片按鈕的大小。

2 width屬性

width 屬性表示圖片的寬度，默認單位是 px，不需要顯示指明。使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此處爲提交按鈕" 
      width="100"
     />
</form>

運行結果如圖所示：

與圖 1 進行對比發現，圖片的寬度和高度都發生了變化，那是因爲圖片隨設置好的寬度進行了自適應。

3 height屬性

height 屬性表示圖片的高度，同 width 屬性一樣，默認單位也是 px，不需要顯示指明。具體代碼如下：

<form action="http://vip.biancheng.net/login.php" method="post">
     <input type="image" 
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" 
      alt="此處爲提交按鈕" 
      height="100"
     />
</form>

運行結果如圖所示：

通過運行結果發現，圖片的寬度也隨其高度發生了變化。一般情況下，我們只需設置圖片的寬度（width）或者是高度（height）即可，否則有的圖片可能會失幀。

結語

其實HTML語言還是編程中比較簡單、容易入門的編程語言，對於無任何經驗的小白還是比較容易理解的，相比於js、jQuery甚至於C、C++……都是比較容易融會貫通的

手把手教學HTML

什麼是HTML

1. 什麼是網頁？

HTML 標籤（插入圖片）

1. src屬性

1.2 其他屬性

1.3. 總結

HTML < a>標籤（超鏈接）

1. href 屬性

2. target屬性

3. < a>標籤的默認樣式

1) 鼠標樣式

2) 顏色及下劃線

URL結構解析

1. URL的構成

1) 協議

2 主機名

3 域名

4 端口

5 路徑

6 文件名

HTML塊級元素及行內元素

1. 塊級元素

2. 行內元素

1 實例演示

3. 元素的嵌套

4. 總結

HTML有序列表+無序列表+定義列表

1. 有序列表

2. 無序列表

3. 定義列表

4. 總結

絕對路徑和相對路徑

1. 絕對路徑

2. 相對路徑

HTML < table>標籤（表格）

1. 表格的邊框合併：

2. 表格的標題

3. 單元格的合併

HTML錨點鏈接

1. 跳轉到當前頁面的指定位置

2. 跳轉到其他頁面的指定位置

HTML的基本結構

1. 單閉合標籤

2. 自閉和標籤

HTML < head>標籤

1. < title>標籤

2. < link>標籤

3. < style>標籤

4. < script>標籤

5. href與src的區別

HTML < form>標籤（表單）

1. 簡述< form>標籤

2. < form>標籤所有屬性

HTML < meta>標籤

name屬性

charset屬性

http-equiv屬性

content-type常用屬性值

HTML < input>標籤

1. input元素

2. name屬性

3. disabled屬性

4. readonly屬性

HTML單行文本框

1 maxlength屬性

2) size屬性

HTML密碼框

1 maxlength屬性

2 value屬性

3 size屬性

HTML單選按鈕

1. 單選按鈕其它屬性

1) checked屬性

2 name屬性

3 value屬性

4 id屬性

HTML複選框

1. 複選框的常用屬性

1 checked屬性