在本文，我們將帶領你從HTML最基礎的部分開始學習 - 我們定義元素，屬性以及你可能聽到的其他重要術語，以及它們適合語言的位置。我們還顯示了HTML元素的結構，典型的HTML頁面的結構，以及解釋其他重要的基本語言特性。一路上，我們會玩一些HTML，讓你感興趣！

什么是 HTML?

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

My cat is very grumpy

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

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

剖析一個 HTML 元素

讓我們進一步探討我們的段落元素：

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

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

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

通過使用標簽<em>和</ em>（在其旁邊放置<em>打開元素，在輸入區(qū)域中編輯下面的行， 和</ em>之后，關閉元素） - 這應該給線斜體強調！你可以在"輸出"區(qū)域中實時查看更改更新。

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

Input

Output

This is my text.

嵌套元素

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

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

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

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

所以的元素都需要正確的打開和關閉，這樣才能按你所想的方式展現(xiàn)。如果像上述的例子一樣進行了錯誤的嵌套，那么瀏覽器會去猜測你想要表達的意思，但很有可能會得出錯誤的結果。所以永遠不要這么做！

塊級元素和內聯(lián)元素

在HTML中有兩種你需要知道的重要元素類別，塊級元素和內聯(lián)元素。

• 塊級元素在頁面中以塊的形式展現(xiàn) —— 相對于其前面的內容它會出現(xiàn)在新的一行，其后的內容也會被擠到下一行展現(xiàn)。塊級元素通常用于展示頁面上結構化的內容，類似于段落、列表、導航菜單、頁腳等等。一個以block形式展現(xiàn)的塊級元素不會被嵌套進內聯(lián)元素中，但可以嵌套在其它塊級元素中。
• 內聯(lián)元素通常出現(xiàn)在塊級元素中并被一些其它文本所包圍，而不是一整個段落或者一組內容。內聯(lián)元素不會導致文本換行：它通常出現(xiàn)在一堆文字之間例如超鏈接元素<a>或者強調元素<em>和 <strong>。

看一看下面的例子：

<em>first</em><em>second</em><em>third</em><p>fourth</p><p>fifth</p><p>sixth</p>

<em>是一個內聯(lián)元素，所以就像你在下方可以看到的，第一行代碼中的三個元素都沒有間隙的展示在了同一行。而<p>是一個塊級元素，所以第二行代碼中的每個元素分別都另起了新的一行展現(xiàn)，并且每個段落間都有一些間隔（這是因為默認的瀏覽器有著默認的展示 <p>元素的 CSS styling ）。

以上結果如下：

firstsecondthird

fourth

fifth

sixth

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

空元素

不是所有元素都擁有開始標簽，內容和結束標簽。一些元素只有一個標簽，通常用來在此元素所在位置插入/嵌入一些東西 。例如：元素<img>是用來在元素<img>所在位置插入一張指定的圖片。例子如下：

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

顯示如下：

提示：空元素有時也稱為 void元素。

屬性

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

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

一個屬性必須包含如下內容：

1. 在元素和屬性之間有個空格space（如果有一個或多個已存在的屬性，就與前一個屬性之間有一個空格。）
2. 屬性后面緊跟著一個"="符號。
3. 有一個屬性值，由一對引號" "引起來。

學習實踐：為一個元素添加屬性

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

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

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

當你出錯時，你可以用Reset 按鈕修改它。當你真正完成這個任務時，點擊Show solution 按鈕觀看答案。

Input

Output

A link to my favourite website.

布爾屬性

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

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

采用如下簡寫更佳（下面一句為可用可輸入數據的文本框，以作為對比）：

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

上面兩個文本框顯示如下：

省略包圍屬性值的引號

當你瀏覽那些粗糙的web網站，你將會看見各種各樣奇怪的標記風格，其中就有不給屬性值添加引號。在某些情況下它是被允許的，但是其他情況下會破會你的標記。例如，我們可以寫一個只擁有一個href屬性的鏈接，如下：

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

然而，當我們再添加一個title屬性時就會出錯，如下：

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

此時瀏覽器會誤解你的標記，它會把title屬性理解為三個屬性——title的屬性值為"The"，另外還有兩個布爾屬性"Mozilla"和"homepage"?？聪旅娴睦?，它明顯不是我們所期望的，并且在這個編碼里面它會報錯或者出現(xiàn)異常行為。試一試把鼠標移動到連接上，看會顯示什么title屬性值！

我們建議始終添加引號——這樣可以避免很多問題，并且使代碼更易讀。

單引號或者雙引號？

在目前為止，本章內容所有的屬性都是由雙引號來包裹。也許在一些HTML中，你以前也見過單引號。這只是風格的問題，你可以從中選擇一個你喜歡的。以下兩種情況都可以：

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

但你應該注意單引號和雙引號不能在一個屬性值里面混用。下面的語法是錯誤的：

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

在一個HTML中已使用一種引號，你可以在此引號中嵌套另外一種引號：

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

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

分析HTML文檔

學習了一些HMTL元素的基礎知識，這些元素單獨一個是沒有意義的。現(xiàn)在我們來學習這些特定元素是怎么被結合起來，從而形成一個完整的HTML頁面的：

<!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頁面必須遵從的良好規(guī)則，能自動檢測錯誤和其他有用的東西。使用如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">然而現(xiàn)在沒有人再這樣寫，需要保證每一個東西都正常工作已成為歷史。你只需要知道<!DOCTYPE html>是最短的有效的文檔聲明。
2. <html></html>：<html>元素。這個元素包裹了整個完整的頁面，是一個根元素。
3. <head></head>：<head>元素。這個元素是一個容器，它包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜索結果中出現(xiàn)的關鍵字和頁面描述，CSS樣式，字符集聲明等等。以后的章節(jié)能學到更多關于<head>元素的內容。
4. <meta charset="utf-8">：這個元素設置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識別你放上去的所有文本內容。毫無疑問要使用它，并且它能在以后避免很多其他問題。
5. <title></title>：設置頁面標題，出現(xiàn)在瀏覽器標簽上，當你標記/收藏頁面時它可用來描述頁面。
6. <body></body>：<body>元素。包含了你訪問頁面時所有顯示在頁面上的內容，文本，圖片，音頻，游戲等等。

學習實踐：為HTML文檔添加一些特征

如果你想在你的本地練習寫一些HTML頁面，你可以這樣做：

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

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

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

所以在這段練習中，你可以用你的電腦在本地編寫運行代碼，如上所述，你也可以在下面的簡單可編輯窗口編輯它（此時這個簡單的可編輯窗口僅顯示<body>標簽內的內容）。我們希望你能夠實踐以下步驟：

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

當你出錯時，你可以用Reset按鈕重置。如果你遇到問題，請按Show solution按鈕查看答案。

Input

Output

This is my page

HTML中的空格

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

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

無論你使用多少空格（包括空格字符，但不包括換行符），當渲染這些代碼的時候，HTML解釋器會將連續(xù)出現(xiàn)的空白字符減少為一個單獨的空格符。那么為什么我們會使用那么多的空格呢? 答案就是為了可讀性 —— 如果你的代碼被很好地進行格式化，那么就很容易理解你的代碼是怎么回事，反之就只有聚做一團的混亂。在我們的HTML代碼中，我們讓每一個嵌套的元素以兩個空格縮進。你使用什么風格來格式化你的代碼取決于你（比如所對于每層縮進使用多少個空格），但是你應該堅持使用某種風格。

實體引用：包括HTML中的特殊字符

在HTML中，字符 <，>，"，' 和 & 是特殊字符，它們是HTML語法自身的一部分，那么你如何將這些字符包含進你的文本中呢，比如說如果你真的想要在文本中使用符號&或者小于號，而不想讓它們被瀏覽器視為代碼并被解釋？

我們必須使用字符引用 - 表示字符的特殊編碼，它們可以在哪些情況下使用。每個字符引用以&符號開頭，并以分號(;)結束。

在下面的示例中，您可以看到兩個段落，它們在談論Web技術：

<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>

在下面的實時輸出中，你會看到第一段是錯誤的，因為瀏覽器會認為第二個<p>是開始一個新的段落！第二段是正確的，因為我們用字符引用來代替了角括號（'<'和'>'符號）。

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

HTML注釋

如同大部分的編程語言一樣，在HTML中有一種可用的機制來在代碼中書寫注釋 —— 注釋是被瀏覽器忽略的，而且是對用戶不可見的，它們的目的是允許你描述你的代碼是如何工作的和不同部分的代碼做了什么等等。如果你在半年后重新返回你的代碼庫，而且不能記起你所做的事情 —— 或者當你處理別人的代碼的時候，那么注釋是很有用的。

為了將一段HTML中的內容置為注釋，你需要將其用特殊的記號<!--和-->包括起來， 比如：

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

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

總結

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

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