[toc] # 簡(jiǎn)述 HTML (HyperText Markup Language) 不是一門(mén)編程語(yǔ)言，而是一種用來(lái)告知瀏覽器如何組織頁(yè)面的標(biāo)記語(yǔ)言。HTML 可復(fù)雜、可簡(jiǎn)單，一切取決于開(kāi)發(fā)者。它由一系列的元素（elements）組成，這些元素可以用來(lái)包圍不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。 一對(duì)標(biāo)簽（ tags）可以為一段文字或者一張圖片添加超鏈接，將文字設(shè)置為斜體，改變字號(hào)，等等。 例如下面一行內(nèi)容： ``` 我的貓咪脾氣爆:) ``` 可以將這行文字封裝成一個(gè)段落（Paragraph）<p>元素來(lái)使其在單獨(dú)一行呈現(xiàn)： ``` <p>我的貓咪脾氣爆:)</p> ``` **注：** ``` HTML 標(biāo)簽不區(qū)分大小寫(xiě)。也就是說(shuō)，輸入標(biāo)簽時(shí)既可以使用大寫(xiě)字母也可以使用小寫(xiě)字母。例如，標(biāo)簽 <title> 寫(xiě)作<title>、<TITLE>、<Title>、<TiTlE>，等等都可以正常工作。不過(guò)，從一致性、可讀性等各方面來(lái)說(shuō)，最好僅使用小寫(xiě)字母。 ``` # 剖析一個(gè) HTML 元素 讓我們進(jìn)一步探討我們的段落元素：  這個(gè)元素的主要部分有： * 開(kāi)始標(biāo)簽（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號(hào)所包圍。表示元素從這里開(kāi)始或者開(kāi)始起作用 —— 在本例中即段落由此開(kāi)始。 * 結(jié)束標(biāo)簽（Closing tag）：與開(kāi)始標(biāo)簽相似，只是其在元素名之前包含了一個(gè)斜杠。這表示著元素的結(jié)尾 —— 在本例中即段落在此結(jié)束。初學(xué)者常常會(huì)犯忘記包含結(jié)束標(biāo)簽的錯(cuò)誤，這可能會(huì)產(chǎn)生一些奇怪的結(jié)果。 * 內(nèi)容（Content）：元素的內(nèi)容，本例中就是所輸入的文本本身。 * 元素（Element）：開(kāi)始標(biāo)簽、結(jié)束標(biāo)簽與內(nèi)容相結(jié)合，便是一個(gè)完整的元素。 ## 嵌套元素 你也可以把元素放到其它元素之中——這被稱作嵌套。如果我們想要表明我們的小貓脾氣很暴躁，可以將“爆”嵌套在<strong> 中，意味著這個(gè)單詞被著重強(qiáng)調(diào): ``` <p>我的貓咪脾氣<strong>爆</strong>:)</p> ``` 你需要確保元素被正確的嵌套：在上面的例子中我們先打開(kāi)<p>元素，然后才打開(kāi)<strong>元素，因此必須先將<strong>元素關(guān)閉，然后再去關(guān)閉<p>元素。下面的例子是錯(cuò)誤的： ``` <p>我的貓咪脾氣<strong>爆:)</p></strong> ``` 所有的元素都需要正確的打開(kāi)和關(guān)閉，這樣才能按你所想的方式展現(xiàn)。如果像上述的例子一樣進(jìn)行了錯(cuò)誤的嵌套，那么瀏覽器會(huì)去猜測(cè)你想要表達(dá)的意思，但很有可能會(huì)得出錯(cuò)誤的結(jié)果。所以永遠(yuǎn)不要這么做！ ## 塊級(jí)元素和內(nèi)聯(lián)元素 在HTML中有兩種你需要知道的重要元素類別，塊級(jí)元素和內(nèi)聯(lián)元素。 * 塊級(jí)元素在頁(yè)面中以塊的形式展現(xiàn) —— 相對(duì)于其前面的內(nèi)容它會(huì)出現(xiàn)在新的一行，其后的內(nèi)容也會(huì)被擠到下一行展現(xiàn)。塊級(jí)元素通常用于展示頁(yè)面上結(jié)構(gòu)化的內(nèi)容，例如段落、列表、導(dǎo)航菜單、頁(yè)腳等等。一個(gè)以block形式展現(xiàn)的塊級(jí)元素不會(huì)被嵌套進(jìn)內(nèi)聯(lián)元素中，但可以嵌套在其它塊級(jí)元素中。 * 內(nèi)聯(lián)元素通常出現(xiàn)在塊級(jí)元素中并環(huán)繞文檔內(nèi)容的一小部分，而不是一整個(gè)段落或者一組內(nèi)容。內(nèi)聯(lián)元素不會(huì)導(dǎo)致文本換行：它通常出現(xiàn)在一堆文字之間例如超鏈接元素<a>或者強(qiáng)調(diào)元素<em>和 <strong>。 看一看下面的例子： ``` <em>第一</em><em>第二</em><em>第三</em> <p>第四</p><p>第五</p><p>第六</p> ``` <em> 是一個(gè)內(nèi)聯(lián)元素，所以就像你在下方可以看到的，第一行代碼中的三個(gè)元素都沒(méi)有間隙的展示在了同一行。而<p>是一個(gè)塊級(jí)元素，所以第二行代碼中的每個(gè)元素分別都另起了新的一行展現(xiàn)，并且每個(gè)段落間都有一些間隔（這是因?yàn)槟J(rèn)的瀏覽器有著默認(rèn)的展示<p>元素的CSS styling）。  **注: ** ``` HTML5重新定義了元素的類別：見(jiàn) 元素內(nèi)容分類(譯文)。盡管這些新的定義更精確，但卻比上述的 “塊級(jí)元素” 和 “內(nèi)聯(lián)元素” 更難理解，因此在之后的討論中仍使用舊的定義。 ``` ``` 在這篇文章中提到的“塊”和“內(nèi)聯(lián)”，不應(yīng)該與 the types of CSS boxes 中的同名術(shù)語(yǔ)相混淆. 盡管他們默認(rèn)是相關(guān)的，但改變CSS顯示類型并不會(huì)改變?cè)氐姆诸?，也不?huì)影響它可以包含和被包含于哪些元素。防止這種混淆也是HTML5摒棄這些術(shù)語(yǔ)的原因之一。 ``` ## 空元素 不是所有元素都擁有開(kāi)始標(biāo)簽，內(nèi)容，結(jié)束標(biāo)簽。一些元素只有一個(gè)標(biāo)簽，通常用來(lái)在此元素所在位置插入/嵌入一些東西。例如：元素<img>是用來(lái)在元素<img>所在位置插入一張指定的圖片。 **例子如下：** ``` <img src="http://friendsandneighborsrealestate.com/upload/attach/202011/202011251741_R4P4D2UEEH9UYQV.jpg"> ``` 顯示如下：  **注: ** ``` 空元素（Empty elements） 有時(shí)也被叫作 void elements. ``` # 屬性 元素也可以擁有屬性，如下：  屬性包含元素的額外信息，這些信息不會(huì)出現(xiàn)在實(shí)際的內(nèi)容中。在上述例子中，這個(gè)class屬性給元素賦了一個(gè)識(shí)別的名字（id），這個(gè)名字此后可以被用來(lái)識(shí)別此元素的樣式信息和其他信息。 **一個(gè)屬性必須包含如下內(nèi)容：** * 一個(gè)空格，在屬性和元素名稱之間。(如果已經(jīng)有一個(gè)或多個(gè)屬性，就與前一個(gè)屬性之間有一個(gè)空格。) * 屬性名稱，后面跟著一個(gè)等于號(hào)。 * 一個(gè)屬性值，由一對(duì)引號(hào)“ ”引起來(lái)。 ## 布爾屬性 有時(shí)你會(huì)看到?jīng)]有值的屬性，它是合法的。這些屬性被稱為布爾屬性，他們只能有跟它的屬性名一樣的屬性值。例如disabled 屬性，他們可以標(biāo)記表單輸入使之變?yōu)椴豢捎?變灰色)，此時(shí)用戶不能向他們輸入任何數(shù)據(jù)。 ``` <input type="text" disabled="disabled"> ``` 方便起見(jiàn)，我們完全可以將其寫(xiě)成以下形式(我們還提供了一個(gè)非禁止輸入的表單元素供您參考，以作為對(duì)比)： ``` <!-- 使用disabled屬性來(lái)防止終端用戶輸入文本到輸入框中 --> <input type="text" disabled> <!-- 下面這個(gè)輸入框沒(méi)有disabled屬性，所以用戶可以向其中輸入 --> <input type="text"> ``` 上面兩段HTML代碼產(chǎn)生的效果如下：  ## 省略包圍屬性值的引號(hào) 當(dāng)你瀏覽那些粗糙的web網(wǎng)站，你將會(huì)看見(jiàn)各種各樣奇怪的標(biāo)記風(fēng)格，其中就有不給屬性值添加引號(hào)。在某些情況下它是被允許的，但是其他情況下會(huì)破壞你的標(biāo)記。例如，我們可以寫(xiě)一個(gè)只擁有一個(gè)href屬性的鏈接，如下： ``` <a href=https://www.mozilla.org/>收藏頁(yè)面</a> ``` 然而，當(dāng)我們?cè)偬砑右粋€(gè)title屬性時(shí)就會(huì)出錯(cuò)，如下： ``` <a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏頁(yè)面</a> ``` 此時(shí)瀏覽器會(huì)誤解你的標(biāo)記，它會(huì)把title屬性理解為三個(gè)屬性——title的屬性值為"The“，另外還有兩個(gè)布爾屬性“Mozilla”和“homepage”?？聪旅娴睦樱黠@不是我們所期望的，并且在這個(gè)編碼里面它會(huì)報(bào)錯(cuò)或者出現(xiàn)異常行為。試一試把鼠標(biāo)移動(dòng)到鏈接上，看會(huì)顯示什么title屬性值!  建議始終添加引號(hào)——這樣可以避免很多問(wèn)題，并且使代碼更易讀。 ## 單引號(hào)或者雙引號(hào)？ 在目前為止，本章內(nèi)容所有的屬性都是由雙引號(hào)來(lái)包裹。也許在一些HTML中，你以前也見(jiàn)過(guò)單引號(hào)。這只是風(fēng)格的問(wèn)題，你可以從中選擇一個(gè)你喜歡的。以下兩種情況都可以： ``` <a href="http://www.example.com">示例站點(diǎn)鏈接</a> <a >示例站點(diǎn)鏈接</a> ``` 但你應(yīng)該注意單引號(hào)和雙引號(hào)不能在一個(gè)屬性值里面混用。下面的語(yǔ)法是錯(cuò)誤的： ``` <a href="http://www.example.com'>示例站點(diǎn)鏈接</a> ``` 在一個(gè)HTML中已使用一種引號(hào)，你可以在此引號(hào)中嵌套另外一種引號(hào)： ``` <a href="http://www.example.com" title="你覺(jué)得'好玩嗎'？"> 示例站點(diǎn)鏈接</a> ``` 如果你想將引號(hào)當(dāng)作文本顯示在html中，你就必須使用實(shí)體引用。 # 剖析HTML文檔 學(xué)習(xí)了一些HTML元素的基礎(chǔ)知識(shí)，這些元素單獨(dú)一個(gè)是沒(méi)有意義的?，F(xiàn)在我們來(lái)學(xué)習(xí)這些特定元素是怎么被結(jié)合起來(lái)，從而形成一個(gè)完整的HTML頁(yè)面的： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的測(cè)試站點(diǎn)</title> </head> <body> <p>這是我的頁(yè)面</p> </body> </html> ``` 分析如下: * <!DOCTYPE html>: 聲明文檔類型. 很久以前，早期的HTML(大約1991年2月)，文檔類型聲明類似于鏈接，規(guī)定了HTML頁(yè)面必須遵從的良好規(guī)則，能自動(dòng)檢測(cè)錯(cuò)誤和其他有用的東西。使用如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 然而這種寫(xiě)法已經(jīng)過(guò)時(shí)了，這些內(nèi)容已成為歷史。只需要知道 <!DOCTYPE html> 是最短有效的文檔聲明。 * <html></html>: <html>元素。這個(gè)元素包裹了整個(gè)完整的頁(yè)面，是一個(gè)根元素。 * <head></head>: <head>元素. 這個(gè)元素是一個(gè)容器，它包含了所有你想包含在HTML頁(yè)面中但不想在HTML頁(yè)面中顯示的內(nèi)容。這些內(nèi)容包括你想在搜索結(jié)果中出現(xiàn)的關(guān)鍵字和頁(yè)面描述，CSS樣式，字符集聲明等等。以后的章節(jié)能學(xué)到更多關(guān)于<head>元素的內(nèi)容。 * <meta charset="utf-8">: 這個(gè)元素設(shè)置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識(shí)別你放上去的所有文本內(nèi)容。毫無(wú)疑問(wèn)要使用它，并且它能在以后避免很多其他問(wèn)題。 * <title></title>: 設(shè)置頁(yè)面標(biāo)題，出現(xiàn)在瀏覽器標(biāo)簽上，當(dāng)你標(biāo)記/收藏頁(yè)面時(shí)它可用來(lái)描述頁(yè)面。 * <body></body>: <body>元素。 包含了你訪問(wèn)頁(yè)面時(shí)所有顯示在頁(yè)面上的內(nèi)容，文本，圖片，音頻，游戲等等。 ## HTML中的空白 在上面的例子中，你可能已經(jīng)注意到了在代碼中包含了很多的空格——這是沒(méi)有必要的；下面的兩個(gè)代碼片段是等價(jià)的：  無(wú)論你在HTML元素的內(nèi)容中使用多少空格(包括空白字符，包括換行)，當(dāng)渲染這些代碼的時(shí)候，HTML解釋器會(huì)將連續(xù)出現(xiàn)的空白字符減少為一個(gè)單獨(dú)的空格符。 那么為什么我們會(huì)在HTML元素的嵌套中使用那么多的空白呢? 答案就是為了可讀性 —— 如果你的代碼被很好地進(jìn)行格式化，那么就很容易理解你的代碼是怎么回事，反之就只有聚做一團(tuán)的混亂.。在我們的HTML代碼中，我們讓每一個(gè)嵌套的元素以兩個(gè)空格縮進(jìn)。 你使用什么風(fēng)格來(lái)格式化你的代碼取決于你 (比如所對(duì)于每層縮進(jìn)使用多少個(gè)空格)，但是你應(yīng)該堅(jiān)持使用某種風(fēng)格。 # 實(shí)體引用： 在HTML中包含特殊字符 在HTML中，字符 <, >,",' 和 & 是特殊字符. 它們是HTML語(yǔ)法自身的一部分, 那么你如何將這些字符包含進(jìn)你的文本中呢, 比如說(shuō)如果你真的想要在文本中使用符號(hào)&或者小于號(hào), 而不想讓它們被瀏覽器視為代碼并被解釋? 我們必須使用字符引用 —— 表示字符的特殊編碼, 它們可以在那些情況下使用. 每個(gè)字符引用以符號(hào)&開(kāi)始, 以分號(hào)(;)結(jié)束.  在下面的例子中你可以看到兩個(gè)段落，它們?cè)谡務(wù)搘eb技術(shù):  在下面的實(shí)時(shí)輸出中，你會(huì)看到第一段是錯(cuò)誤的，因?yàn)闉g覽器會(huì)認(rèn)為第二個(gè)<p>是開(kāi)始一個(gè)新的段落！ 第二段是正確的，因?yàn)槲覀冇米址脕?lái)代替了角括號(hào)（'<'和'>'符號(hào)）.  # HTML注釋 如同大部分的編程語(yǔ)言一樣，在HTML中有一種可用的機(jī)制來(lái)在代碼中書(shū)寫(xiě)注釋 —— 注釋是被瀏覽器忽略的，而且是對(duì)用戶不可見(jiàn)的，它們的目的是允許你描述你的代碼是如何工作的和不同部分的代碼做了什么等等。 如果你在半年后重新返回你的代碼庫(kù)，而且不能記起你所做的事情 —— 或者當(dāng)你處理別人的代碼的時(shí)候， 那么注釋是很有用的. 為了將一段HTML中的內(nèi)容置為注釋，你需要將其用特殊的記號(hào)<!--和-->包括起來(lái)， 比如：  正如你下面所見(jiàn)的那樣，第一段出現(xiàn)在了實(shí)時(shí)輸出中，但是第二段卻沒(méi)有。  # 參考資料 * 《開(kāi)始學(xué)習(xí) HTML - 學(xué)習(xí) Web 開(kāi)發(fā) | MDN》