HTML入門(mén)

在本文，我們將帶領(lǐng)你從HTML最基礎(chǔ)的部分開(kāi)始學(xué)習(xí) - 我們定義元素，屬性以及你可能聽(tīng)到的其他重要術(shù)語(yǔ)，以及它們適合語(yǔ)言的位置。我們還顯示了HTML元素的結(jié)構(gòu)，典型的HTML頁(yè)面的結(jié)構(gòu)，以及解釋其他重要的基本語(yǔ)言特性。一路上，我們會(huì)玩一些HTML，讓你感興趣！

什么是 HTML?

HTML (HyperText Markup Language) 不是一種編程語(yǔ)言；它是一種標(biāo)記語(yǔ)言，用于告訴你的瀏覽器如何構(gòu)造你訪問(wèn)的網(wǎng)頁(yè)。它可以像Web開(kāi)發(fā)人員希望的那樣復(fù)雜或簡(jiǎn)單。HTML由一系列的 elements，你可以使用它來(lái)封裝，包裝或標(biāo)記內(nèi)容的不同部分，使其以某種方式顯示，或以某種方式執(zhí)行。封閉tags 可以使一點(diǎn)內(nèi)容成為超鏈接以鏈接到Web上的另一頁(yè)面，斜體字等等。例如，采取以下行內(nèi)容

My cat is very grumpy

如果我們想要自己的行，我們可以指定它是一個(gè)段落通過(guò)將它包含在段落標(biāo)簽(<p>) 元素：

<p>My cat is very grumpy</p>

剖析一個(gè) HTML 元素

讓我們進(jìn)一步探討我們的段落元素：

我們的元素的主要部分是：

1. 開(kāi)始標(biāo)簽（Opening tag）：這包括元素的名稱（在這種情況下，p），包裹在開(kāi)始和結(jié)束尖括號(hào)中。這表示元素開(kāi)始或開(kāi)始生效 - 在這種情況下，表示了一個(gè)段落的開(kāi)頭。
2. 結(jié)束標(biāo)簽（Closing tag）：這與開(kāi)始標(biāo)簽相同，除了它在元素名稱之前包含正斜杠。這表示元素結(jié)束的位置 - 在這種情況下，表示了一個(gè)段落的結(jié)尾。沒(méi)有包含結(jié)束標(biāo)簽是一個(gè)初學(xué)者常見(jiàn)的錯(cuò)誤，并可能導(dǎo)致奇怪的結(jié)果。
3. 內(nèi)容（Content）：這是元素的內(nèi)容，在這種情況下只是文本。
4. 元素（Element）：開(kāi)始標(biāo)簽，加上結(jié)束標(biāo)簽，加上內(nèi)容，等于元素。

實(shí)踐操作：創(chuàng)建你的第一個(gè)HTML文檔

通過(guò)使用標(biāo)簽<em>和</ em>（在其旁邊放置<em>打開(kāi)元素，在輸入?yún)^(qū)域中編輯下面的行， 和</ em>之后，關(guān)閉元素） - 這應(yīng)該給線斜體強(qiáng)調(diào)！你可以在"輸出"區(qū)域中實(shí)時(shí)查看更改更新。

如果你犯了錯(cuò)誤，你可以使用重置按鈕總是重置。如果你真的卡住了，按顯示解決方案按鈕看到答案。

Input

Output

This is my text.

嵌套元素

你也可以把元素放到其它元素之中——這被稱作嵌套。如果我們想要表明我們的小貓脾氣很暴躁，可以將very嵌套在<strong>中，意味著這個(gè)單詞被著重強(qiáng)調(diào)：

<p>My cat is <strong>very</strong> grumpy.</p>

你需要確保元素被正確的嵌套：在上面的例子中我們先打開(kāi)<p>元素，然后才打開(kāi)<strong>元素，因此必須先將<strong>元素關(guān)閉，然后再去關(guān)閉<p>元素。下面的例子是錯(cuò)誤的：

<p>My cat is <strong>very grumpy.</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í)元素中并被一些其它文本所包圍，而不是一整個(gè)段落或者一組內(nèi)容。內(nèi)聯(lián)元素不會(huì)導(dǎo)致文本換行：它通常出現(xiàn)在一堆文字之間例如超鏈接元素<a>或者強(qiáng)調(diào)元素<em>和 <strong>。

看一看下面的例子：

<em>first</em><em>second</em><em>third</em><p>fourth</p><p>fifth</p><p>sixth</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 ）。

以上結(jié)果如下：

firstsecondthird

fourth

fifth

sixth

提示：HTML5重新定義了HTML5中的元素類別：請(qǐng)參閱 元素內(nèi)容分類。盡管這些新的定義更精確，但卻比上述的"塊級(jí)元素"和"內(nèi)聯(lián)元素"更難理解，因此在之后的討論中仍使用舊的定義。

空元素

不是所有元素都擁有開(kāi)始標(biāo)簽，內(nèi)容和結(jié)束標(biāo)簽。一些元素只有一個(gè)標(biāo)簽，通常用來(lái)在此元素所在位置插入/嵌入一些東西 。例如：元素<img>是用來(lái)在元素<img>所在位置插入一張指定的圖片。例子如下：

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

顯示如下：

提示：空元素有時(shí)也稱為 void元素。

屬性

元素也可以擁有屬性，如下：

屬性包含元素的額外信息，這些信息不會(huì)出現(xiàn)在實(shí)際的內(nèi)容中。在上述例子中，這個(gè)class屬性給元素賦了一個(gè)識(shí)別的名字（id），這個(gè)名字此后可以被用來(lái)識(shí)別此元素的樣式信息和其他信息。

一個(gè)屬性必須包含如下內(nèi)容：

1. 在元素和屬性之間有個(gè)空格space（如果有一個(gè)或多個(gè)已存在的屬性，就與前一個(gè)屬性之間有一個(gè)空格。）
2. 屬性后面緊跟著一個(gè)"="符號(hào)。
3. 有一個(gè)屬性值，由一對(duì)引號(hào)" "引起來(lái)。

學(xué)習(xí)實(shí)踐：為一個(gè)元素添加屬性

另一個(gè)例子是關(guān)于元素<a>的——元素<a>是錨，它使被標(biāo)簽包裹的內(nèi)容成為一個(gè)超鏈接。此元素也可以添加大量的屬性，其中兩個(gè)如下：

• href：這個(gè)屬性聲明超鏈接的web地址，當(dāng)這個(gè)鏈接被點(diǎn)擊瀏覽器會(huì)跳轉(zhuǎn)至href聲明的web地址。例如：href="https://www.mozilla.org/"。
• title：標(biāo)題屬性為超鏈接聲明額外的信息，比如你將鏈接至那個(gè)頁(yè)面。例如：title="The Mozilla homepage"。當(dāng)鼠標(biāo)移至超鏈接上時(shí)，title屬性會(huì)作為一個(gè)工具提示出現(xiàn)。

在下面的文本框中內(nèi)容，使之變成指向任一個(gè)你喜歡的web地址的鏈接。首先，添加<a>元素，然后為它添加href屬性和title屬性。你可以適時(shí)地在輸出區(qū)域看到你改變的內(nèi)容。你應(yīng)該可以看到一個(gè)鏈接，當(dāng)鼠標(biāo)移上此鏈接時(shí)會(huì)顯示title屬性值，當(dāng)點(diǎn)擊此鏈接時(shí)會(huì)跳轉(zhuǎn)到href指定的web地址。記?。涸谠孛蛯傩悦g以及兩個(gè)屬性之間要有一個(gè)空格space。

當(dāng)你出錯(cuò)時(shí)，你可以用Reset 按鈕修改它。當(dāng)你真正完成這個(gè)任務(wù)時(shí)，點(diǎn)擊Show solution 按鈕觀看答案。

Input

Output

A link to my favourite website.

布爾屬性

有時(shí)你會(huì)看到?jīng)]有值的屬性，它是合規(guī)的。這些屬性被稱為布爾屬性，他們只能有跟它的屬性名一樣的屬性值。例如disabled這個(gè)屬性，他們可以標(biāo)記form input（文本框）使之變?yōu)椴豢捎茫ㄗ兓疑?，此時(shí)用戶不能向他們輸入任何數(shù)據(jù)。

<input type="text" disabled="disabled">

采用如下簡(jiǎn)寫(xiě)更佳（下面一句為可用可輸入數(shù)據(jù)的文本框，以作為對(duì)比）：

<input type="text" disabled><input type="text">

上面兩個(gè)文本框顯示如下：

省略包圍屬性值的引號(hào)

當(dāng)你瀏覽那些粗糙的web網(wǎng)站，你將會(huì)看見(jiàn)各種各樣奇怪的標(biāo)記風(fēng)格，其中就有不給屬性值添加引號(hào)。在某些情況下它是被允許的，但是其他情況下會(huì)破會(huì)你的標(biāo)記。例如，我們可以寫(xiě)一個(gè)只擁有一個(gè)href屬性的鏈接，如下：

<a href=https://www.mozilla.org/>favourite website</a>

然而，當(dāng)我們?cè)偬砑右粋€(gè)title屬性時(shí)就會(huì)出錯(cuò)，如下：

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</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">A link to my example.</a><a >A link to my example.</a>

但你應(yīng)該注意單引號(hào)和雙引號(hào)不能在一個(gè)屬性值里面混用。下面的語(yǔ)法是錯(cuò)誤的：

<a href="http://www.example.com'>A link to my example.</a>

在一個(gè)HTML中已使用一種引號(hào)，你可以在此引號(hào)中嵌套另外一種引號(hào)：

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

如果你想嵌套一樣的引號(hào)，你就必須使用實(shí)體引用：包括HTML中的特殊字符。

分析HTML文檔

學(xué)習(xí)了一些HMTL元素的基礎(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>My test page</title>  </head>  <body>    <p>This is my page</p>  </body></html>

分析如下：

1. <!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àn)在沒(méi)有人再這樣寫(xiě)，需要保證每一個(gè)東西都正常工作已成為歷史。你只需要知道<!DOCTYPE html>是最短的有效的文檔聲明。
2. <html></html>：<html>元素。這個(gè)元素包裹了整個(gè)完整的頁(yè)面，是一個(gè)根元素。
3. <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)容。
4. <meta charset="utf-8">：這個(gè)元素設(shè)置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字?；旧纤茏R(shí)別你放上去的所有文本內(nèi)容。毫無(wú)疑問(wèn)要使用它，并且它能在以后避免很多其他問(wèn)題。
5. <title></title>：設(shè)置頁(yè)面標(biāo)題，出現(xiàn)在瀏覽器標(biāo)簽上，當(dāng)你標(biāo)記/收藏頁(yè)面時(shí)它可用來(lái)描述頁(yè)面。
6. <body></body>：<body>元素。包含了你訪問(wèn)頁(yè)面時(shí)所有顯示在頁(yè)面上的內(nèi)容，文本，圖片，音頻，游戲等等。

學(xué)習(xí)實(shí)踐：為HTML文檔添加一些特征

如果你想在你的本地練習(xí)寫(xiě)一些HTML頁(yè)面，你可以這樣做：

1. 復(fù)制上面的HTML頁(yè)面例子。
2. 在編輯器創(chuàng)建一個(gè)新文件。
3. 粘貼代碼到這個(gè)文件。
4. 保存為index.html。

提示：你也可以在MDN Learning Area Github repo上找到這些基礎(chǔ)的HTML示例。

你可以打開(kāi)瀏覽器看看這段代碼的效果是什么樣的，然后改變代碼刷新瀏覽器看看新的結(jié)果。 最開(kāi)始的代碼是這樣的效果：

所以在這段練習(xí)中，你可以用你的電腦在本地編寫(xiě)運(yùn)行代碼，如上所述，你也可以在下面的簡(jiǎn)單可編輯窗口編輯它（此時(shí)這個(gè)簡(jiǎn)單的可編輯窗口僅顯示<body>標(biāo)簽內(nèi)的內(nèi)容）。我們希望你能夠?qū)嵺`以下步驟：

• 在開(kāi)始標(biāo)簽<body>下方，為這個(gè)文檔添加一個(gè)主標(biāo)題。這個(gè)主標(biāo)題應(yīng)該被包含在一個(gè)<open>開(kāi)始標(biāo)簽和一個(gè)</open>結(jié)束標(biāo)簽之間。
• 編輯這個(gè)段落以包含一些你感興趣的文本。
• 把字詞包含在開(kāi)始標(biāo)記<strong>和結(jié)束標(biāo)記</strong>之間可以使他們以粗體顯示，從而突出任何重要的字詞。
• 在你的文檔中添加一個(gè)超文本鏈接，就如本章前面提到的。
• 在段落下方向你的文檔添加一張圖片，就如本章前面提到的。如果你嘗試鏈對(duì)不同的圖片（在你的本地計(jì)算機(jī)上或網(wǎng)絡(luò)上的其他位置）添加鏈接，那就更棒了。

當(dāng)你出錯(cuò)時(shí)，你可以用Reset按鈕重置。如果你遇到問(wèn)題，請(qǐng)按Show solution按鈕查看答案。

Input

Output

This is my page

HTML中的空格

在上面的例子中，你可能已經(jīng)注意到了大量的空格被包括在代碼清單中 - 這不是必須的；以下兩個(gè)代碼段是等效的：

<p>Dogs are silly.</p><p>Dogs        are         silly.</p>

無(wú)論你使用多少空格（包括空格字符，但不包括換行符），當(dāng)渲染這些代碼的時(shí)候，HTML解釋器會(huì)將連續(xù)出現(xiàn)的空白字符減少為一個(gè)單獨(dú)的空格符。那么為什么我們會(huì)使用那么多的空格呢? 答案就是為了可讀性 —— 如果你的代碼被很好地進(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ù)：

<p>In HTML, you define a paragraph using the <p> element.</p><p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

在下面的實(shí)時(shí)輸出中，你會(huì)看到第一段是錯(cuò)誤的，因?yàn)闉g覽器會(huì)認(rèn)為第二個(gè)<p>是開(kāi)始一個(gè)新的段落！第二段是正確的，因?yàn)槲覀冇米址脕?lái)代替了角括號(hào)（'<'和'>'符號(hào)）。

提示：維基百科上有一個(gè)包含所有可用HTML字符實(shí)體引用的列表：XML和HTML字符實(shí)體引用列表。

HTML注釋

如同大部分的編程語(yǔ)言一樣，在HTML中有一種可用的機(jī)制來(lái)在代碼中書(shū)寫(xiě)注釋 —— 注釋是被瀏覽器忽略的，而且是對(duì)用戶不可見(jiàn)的，它們的目的是允許你描述你的代碼是如何工作的和不同部分的代碼做了什么等等。如果你在半年后重新返回你的代碼庫(kù)，而且不能記起你所做的事情 —— 或者當(dāng)你處理別人的代碼的時(shí)候，那么注釋是很有用的。

為了將一段HTML中的內(nèi)容置為注釋，你需要將其用特殊的記號(hào)<!--和-->包括起來(lái)， 比如：

<p>I'm not inside a comment</p><!-- <p>I am!</p> -->

如下圖所示，第一段出現(xiàn)在實(shí)時(shí)輸出中，但第二段沒(méi)有出現(xiàn)。

總結(jié)

你已經(jīng)來(lái)到了這篇文章的結(jié)尾 —— 希望你享受你的基礎(chǔ)HTML學(xué)習(xí)的旅程。在這里你應(yīng)該可以理解HTML語(yǔ)言的全貌，它在基礎(chǔ)的級(jí)別是如何工作，而且可以使用一些元素和屬性。在這個(gè)模塊的后續(xù)文章中，我們會(huì)深入一些你已經(jīng)見(jiàn)過(guò)的東西的細(xì)節(jié)，并且介紹一些新的HTML的特性。未完待續(xù)！

提示：現(xiàn)在，你將開(kāi)始學(xué)習(xí)更多關(guān)于HTML的知識(shí)，你可能也想了解一些層疊樣式列表（CSS）的基礎(chǔ)知識(shí)。CSS是一種用來(lái)設(shè)計(jì)網(wǎng)頁(yè)樣式的語(yǔ)言（比如，用它改變字體、顏色或頁(yè)面布局等）。你很快就會(huì)發(fā)現(xiàn)，HTML和CSS能很好地協(xié)調(diào)配合。