本教程中，動(dòng)力節(jié)點(diǎn)小編將向您介紹一個(gè)基本的 HTML 文檔，并教您如何在瀏覽器中查看 HTML 文檔的源代碼。

HTML 用于標(biāo)記文檔，其中包含指示瀏覽器如何顯示和解釋文檔內(nèi)容的說明。例如，HTML 可以告訴瀏覽器哪些文本內(nèi)容應(yīng)該被解釋為標(biāo)題，哪些文本內(nèi)容應(yīng)該被解釋為段落。HTML 還用于添加圖像并為文本和圖像分配鏈接。這些指令是通過 HTML 標(biāo)記傳達(dá)的，這些標(biāo)記是這樣編寫的：<tagname>. 許多(盡管不是全部)HTML標(biāo)簽使用開始標(biāo)簽和結(jié)束標(biāo)簽來環(huán)繞它們用于修改的內(nèi)容。

為了了解這些標(biāo)簽的使用方式，讓我們檢查一段 HTML 代碼。下面的 HTML 代碼顯示了如何使用 HTML 標(biāo)記來構(gòu)造文本以及添加鏈接和圖像。如果您沒有立即理解標(biāo)簽，請(qǐng)不要擔(dān)心 - 我們將在下一個(gè)教程中學(xué)習(xí)這些標(biāo)簽。

<h1>Sammy's Sample HTML</h1>
<p>This code is an example of how HTML is written.</p>
<p>It uses HTML tags to structure the text.</p>
<p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p>
<p>And it also uses HTML to add an image:</p>
<img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>

此 HTML 代碼在瀏覽器中呈現(xiàn)如下：

您現(xiàn)在應(yīng)該了解 HTML 示例代碼是如何在瀏覽器中呈現(xiàn)的。接下來，我們將學(xué)習(xí)如何使用瀏覽器工具查看任何網(wǎng)頁的源代碼。

查看網(wǎng)頁源代碼

您遇到的幾乎每個(gè)網(wǎng)頁都使用 HTML 來構(gòu)建和顯示 HTML 頁面。您可以使用 Firefox 或 Chrome 等網(wǎng)絡(luò)瀏覽器檢查任何網(wǎng)頁的源代碼。在 Firefox 上，導(dǎo)航到頂部菜單中的“工具”菜單項(xiàng)，然后單擊“Web Developer/Page Source”，如下所示：

在 Firefox 上，您還可以使用鍵盤快捷鍵Command-U查看網(wǎng)頁的源代碼。

在 Chrome 上，這個(gè)過程非常相似。導(dǎo)航到頂部菜單項(xiàng)“查看”，然后單擊“開發(fā)人員/查看源代碼”。您也可以使用鍵盤快捷鍵Option-Command-U。

嘗試檢查我們將在本教程系列中構(gòu)建的演示網(wǎng)站的源代碼。您應(yīng)該會(huì)收到一個(gè)包含比我們上面的示例更多的 HTML 標(biāo)記的頁面。如果它看起來勢(shì)不可擋，請(qǐng)不要驚慌。在本教程系列結(jié)束時(shí)，您應(yīng)該對(duì)如何解釋 HTML 源代碼以及如何使用 HTML 構(gòu)建和自定義您自己的網(wǎng)站有了更好的理解。如果您想了解更多相關(guān)知識(shí)，可以關(guān)注一下動(dòng)力節(jié)點(diǎn)的HTML教程，里面有更豐富的知識(shí)等著大家去學(xué)習(xí)，希望對(duì)大家能夠有所幫助。