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