免費AI編程助手
HTML基礎(chǔ)
超文本標記語言（Hypertext Markup Language, HTML）是一個可以用來結(jié)構(gòu)化你的Web內(nèi)容并給予其含義和目標的編碼語言。例如，你的內(nèi)容可以包括一組段落或一個重點列表，甚至可以含有圖片和數(shù)據(jù)表。這一節(jié)將為你提供足夠的信息，使你能夠?qū)TML語言加以熟悉。
什么是 HTML？
HTML并不是真正的的程序語言，他是一種標記語言 ，用來結(jié)構(gòu)化和含義化你想要放在web網(wǎng)站上的那些內(nèi)容。它由一系列的元素(elements)所組成，這些元素可以用來封裝你的內(nèi)容中擔任不同工作的各部分和各個角色。閉合標簽( tags)可以使得一個文字或者一張圖片連接到其他網(wǎng)址，可以使得文字為斜體，可讓文字變大或者變小等等。例如，鍵入下面一行內(nèi)容：
My cat is very grumpy
如果我們想要比較正式的去指明這是一個段落，我們可以將其封裝成為一個段落paragraph元素：(<p>) ：
<p>My cat is very grumpy</p>
解析一個HTML元素
讓我們深入探索一下這個段落paragraph元素。
這個元素的主要部分有：
- 開始標簽（The opening tag）：這里包含了元素的名稱（這里是 p），被開、閉尖括號所包圍。這表示元素從此開始或者開始發(fā)揮作用——在本例中即段落由此開始。
- 結(jié)束標簽（The closing tag）：與開始標簽相似，只是其在元素名之前包含了一個斜杠。這表示著元素的結(jié)尾——在這個例子中，就是這一段落的結(jié)尾。
- 內(nèi)容（The content）：這是一個元素的內(nèi)容，這個例子中就是所輸入的文本本身。
- 元素（The element）：開始標簽、結(jié)束標簽與內(nèi)容相結(jié)合，便是一個完整的元素。
元素可以有Attribute屬性，看起來像這樣：
屬性（Attribute）包含了關(guān)于元素的一些額外的信息，這些信息本身并不需要被顯現(xiàn)在內(nèi)容（Content）中。在這個例子中，class 是一個屬性名稱（name），editor-note是屬性的值（value）。class屬性允許你為元素提供一個標識名稱，以便進一步為元素指定樣式或進行其他操作時使用。
一個屬性應(yīng)該包含：
- 在屬性與元素名稱或上一個屬性（如果有超過一個屬性的話）之間的空格符
- 屬性的名稱，并接上一個等號
- 由引號所包圍的屬性值
嵌套元素
你可以將一個元素置于其他元素之中——這被稱作嵌套。如果你想表明你的貓非常非常的暴躁，我們可以將 "非常" 用<strong>元素包裹，這意味著這個單詞將被特別強調(diào)：
<p>My cat is <strong>very</strong> grumpy.</p>
你必須保證你的元素被正確地嵌套：在這個例子中我們首先使用 p 標簽，然后是 strong 標簽，接著我們需要先結(jié)束 strong 標簽，最后再結(jié)束 p 標簽。下面是一個錯誤示范：
<p>My cat is <strong>very grumpy.</p></strong>
元素必須正確開始和結(jié)束，才能清楚地顯示出正確的嵌套。如果它們像上面這樣，那么你的瀏覽器將盡量地猜測你想要表達的意思，但是你很大程度上不會得到你期望的結(jié)果。所以千萬不要這樣做！
空元素
有一些元素并不包含內(nèi)容，它們被稱為空元素?？纯次覀?HTML 代碼中的<img>元素：
<img src="images/firefox-icon.png" alt="My test image">
它含了兩個屬性，但是這里并沒有</img> 的結(jié)束標簽，也沒有內(nèi)部內(nèi)容。因為image元素不包含任何有效的內(nèi)容，它的作用是向其所在的位置嵌入一個圖像。
解析HTML文檔
上面我們介紹了一些基本的 HTML 元素，但是它們單獨并不起什么作用?，F(xiàn)在我們看看如何將它們組合起來成為一個完整的 HTML 頁面。讓我們重新看看index.html示例里的內(nèi)容（我們先前在 文件處理 里創(chuàng)建的）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>這里我們有：
<!DOCTYPE html>— 文檔類型（doctypes）。在 HTML 剛剛出現(xiàn)的時期里（大約是1991/2 年），文檔類型是用來鏈接一些應(yīng)該遵守的規(guī)則，有點像自動校正等。然而現(xiàn)在大家都不用管文件類型，只是因為歷史原因必須包含在代碼中?，F(xiàn)階段大家知道這些就夠了。<html></html>—<html>元素。這個元素包含了整個頁面的內(nèi)容，有時也被稱作根元素。<head></head>—<head>元素。這個元素可以包含你想添加的所有內(nèi)容，但是不會被用戶所看到。這里面包括像想被搜索引擎搜索到的關(guān)鍵字（keywords）和頁面描述，CSS樣式表和字符編碼聲明等等。<body></body>—<body>元素。這個元素包含了你想被用戶看到的內(nèi)容，不管是文本，圖像，視頻，游戲，可播放的音軌或是其他內(nèi)容。<meta charset="utf-8">— 這個元素指定了你的文檔需要使用的字符編碼，像 UTF-8 ，它包括了非常多人類已知語言的字符?；旧?UTF-8 可以處理任何文本內(nèi)容。我們沒有任何理由不去設(shè)定字符編碼，而且也可以避免以后可能出現(xiàn)的問題。<title></title>— 這個元素設(shè)置了頁面的標題，標題顯示在瀏覽器標簽頁上，而且在你將網(wǎng)頁添加到收藏夾或喜愛中時將作為默認名稱。
圖像
讓我們重新回到 image 元素：
<img src="images/firefox-icon.png" alt="My test image">
像我們之前說過的，它將圖像嵌入到元素所在位置。它通過包含圖像文件路徑的src(source) 屬性實現(xiàn)這一功能。
但是這一元素也要包括alt(alternative) 屬性 —— 這個屬性應(yīng)該是圖像的描述內(nèi)容，當圖像不能被某些用戶看見時，可能是因為：
- 他們是盲人或者有視覺障礙。某些有嚴重視覺損傷的用戶經(jīng)常使用屏幕閱讀器來為他們讀出
alt屬性里的內(nèi)容。 - 有些代碼里的錯誤讓圖像不能被展示出來。舉個例子，故意將
src屬性里的路徑改錯。如果你保存并且重新加載頁面，你應(yīng)該能在圖像的位置看到：
alt 屬性的關(guān)鍵就是要"可以描述圖像的文本"。當被讀出來時，alt 里面的內(nèi)容應(yīng)該向用戶傳遞足夠圖像表達的意思。所以我們現(xiàn)在的文本 "My test image" 并不合適。一個描述火狐Logo的更好的文本應(yīng)該是 "The Firefox logo: a flaming fox surrounding the Earth."。
現(xiàn)在為你的圖像嘗試一些更好的 alt 文本。
提示：點擊 MDN's Accessibility landing page 查看更多。
標記文本
這一部分包含了一些基本的標記文本的 HTML 元素。
標題
標題元素允許你指定內(nèi)容的標題和子標題。就像一本書擁有主標題，然后每一章還有標題，然后還有更小的標題，HTML 文檔也是一樣。HTML 包括六個級別的標題，h1–h6，雖然你可能只會用到 3-4 最多。
<h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4>
現(xiàn)在嘗試一下，在你的<img>元素上面添加一個合適的標題。
段落
像上面解釋過的一樣，<p>元素是用來指定段落的。你可以用它來指定常規(guī)的文本內(nèi)容：
<p>This is a single paragraph</p>
添加你的樣本內(nèi)容（從 你的網(wǎng)頁將呈現(xiàn)什么樣子？ 獲得）到一個或幾個段落里，然后將它們放在 <img> 元素之下。
列表
很多Web上的內(nèi)容都是列表，所以 HTML 有一些特別的列表元素。要標記列表通常包括至少兩個元素。最常用的列表類型是有序列表（ordered lists）和無序列表（ unordered lists）：
列表內(nèi)的每個項目被包括在一個<li>(list item)元素里。
所以，如果我們像要將下面的段落碎片改成一個列表：
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
我們可以這樣做：
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>嘗試添加一個有序列表和無序列表到你的示例頁面。
鏈接
鏈接非常重要 — 它們讓 Web 成為了 WEB（萬維網(wǎng)）。要植入一個鏈接，我們需要使用一個簡單的link —<a>— a 是 "anchor"（錨）的縮寫。要將一些文本添加到鏈接中，只需如下幾步：
- 添加一些文本。我們選擇"Mozilla Manifesto"。
- 將文本包含在 <a> 元素內(nèi)，就像這樣：
<a>Mozilla Manifesto</a>
- 賦予 <a> 元素一個 href 屬性，就像這樣：
<a href="">Mozilla Manifesto</a>
- 把你想要鏈接的網(wǎng)址放到 href 屬性內(nèi)：
<a rel="external nofollow" target="_blank" >Mozilla Manifesto</a>
如果你在網(wǎng)址開始部分省略了https://或者http://協(xié)議，你可能會得到錯誤的結(jié)果。在完成一個鏈接后，點擊它并確保它去向了你指定的網(wǎng)址。
href 這個名字可能開始看起來有點晦澀。如果你在記憶它的名字上有問題的話，記住它代表的是 hypertext reference。如果你還沒有完成過上面的操作，現(xiàn)在就為你的頁面添加一個鏈接吧。
結(jié)論
如果你一直跟著這篇文章里的指導做的話，你應(yīng)該完成了一個像下面這樣的頁面。(你也可以從這查看 view it here)：
如果你遇到困難，你可以將 Github 上的 finished example code 上與你的文件進行比較。
在這里，我們只是介紹了一點點 HTML。要學習更多，訪問我們的 HTML Learning page 。
更多建議：