超文本標記語言 (英語：Hypertext Markup Language，簡稱：HTML ) 是一種用來結構化 Web 網頁及其內容的標記語言。網頁內容可以是：一組段落、一個重點信息列表、也可以含有圖片和數據表。正如標題所示，本文將對 HTML 及其功能做一個基本介紹。
HTML 到底是什麼？
HTML 不是一門編程語言，而是一種用於定義內容結構的標記語言。HTML 由一系列的元素（elements）組成，這些元素可以用來包圍不同部分的內容，使其以某種方式呈現或者工作。 一對標籤（ tags）可以爲一段文字或者一張圖片添加超鏈接，將文字設置爲斜體，改變字號，等等。 例如，鍵入下面一行內容：
學前端，關注艾編程可以將這行文字封裝成一個段落（paragraph）元素來使其在單獨一行呈現：
<p>學前端，關注艾編程</p>HTML 元素詳解
讓我們深入探索一下這個段落元素。
這個元素的主要部分有：
屬性應該包含：
- 在屬性與元素名稱（或上一個屬性，如果有超過一個屬性的話）之間的空格符。
- 屬性的名稱，並接上一個等號。
- 由引號所包圍的屬性值。
注：不包含 ASCII 空格（以及 " ' ``=<>` ）的簡單屬性值可以不使用引號，但是建議將所有屬性值用引號括起來，這樣的代碼一致性更佳，更易於閱讀。
嵌套元素
也可以將一個元素置於其他元素之中 —— 稱作嵌套。要表明貓咪非常暴躁，可以將 “艾編程” 用 <strong> 元素包圍，爆字將突出顯示：
<p>學編程，關注<strong>艾編程</strong>:)</p>必須保證元素嵌套次序正確：本例首先使用 <p> 標籤，然後是 <strong> 標籤，因此要先結束 <strong> 標籤，最後再結束 </p> 標籤。以下這個示例就是一個錯誤的示範，這樣是不對的：
<p>學編程，關注<strong>艾編程</p></strong>元素必須正確地開始和結束，才能清楚地顯示出正確的嵌套層次。否則瀏覽器就得自己猜測，雖然它會竭盡全力，但很大程度不會給你期望的結果。所以一定要避免！
空元素
不包含任何內容的元素稱爲空元素。比如 `` 元素：
<img src="images/icodingedulgo.png" alt="艾編程logo">本元素包含兩個屬性，但是並沒有 </img> 結束標籤，元素裏也沒有內容。這是因爲圖像元素不需要通過內容來產生效果，它的作用是向其所在的位置嵌入一個圖像。
HTML 文檔詳解
以上介紹了一些基本的 HTML 元素，但孤木不成林。現在來看看單個元素如何彼此協同構成一個完整的 HTML 頁面。回顧 文件處理 小節中創建的 index.html 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入門學前端的博客，艾編程博客</title>
</head>
<body>
<img src="images/icodingedulgo.png" alt="艾編程logo">
</body>
</html>這裏有：
- <!DOCTYPE html> — 文檔類型。混沌初分，HTML 尚在襁褓（大約是 1991/92 年）之時，DOCTYPE 用來鏈接一些 HTML 編寫守則，比如自動查錯之類。DOCTYPE 在當今作用有限，僅用於保證文檔正常讀取。現在知道這些就足夠了。
- <html></html> — `` 元素。該元素包含整個頁面的內容，也稱作根元素。
- <head></head> — `` 元素。該元素的內容對用戶不可見，其中包含例如面向搜索引擎的搜索關鍵字 keywords、頁面描述、CSS 樣式表和字符編碼聲明等。
- <meta charset="utf-8"> — 該元素指定文檔使用 UTF-8 字符編碼 ，UTF-8 包括絕大多數人類已知語言的字符。基本上 UTF-8 可以處理任何文本內容，還可以避免以後出現某些問題，沒有理由再選用其他編碼。
- <title></title> — `` 元素。該元素設置頁面的標題，顯示在瀏覽器標籤頁上，也作爲收藏網頁的描述文字。
- <body></body> — `` 元素。該元素包含期望讓用戶在訪問頁面時看到的內容，包括文本、圖像、視頻、遊戲、可播放的音軌或其他內容。
圖像
重溫一下 `` 元素：
<img src="images/icodingedulogo.png" alt="艾編程logo">像之前所講，該元素通過包含圖像文件路徑的地址屬性 src，可在所在位置嵌入圖像。
該元素還包括一個替換文字屬性 alt，是圖像的描述內容，用於當圖像不能被用戶看見時顯示，不可見的原因可能是：
1、用戶有視覺障礙。視障用戶可以使用屏幕閱讀器來朗讀 alt 屬性的內容。
2、有些錯誤使圖像無法顯示。可以試着故意將 src 屬性裏的路徑改錯。保存並刷新頁面就可以在圖像位置看到：
alt 屬性的關鍵字即 “描述文本”。alt 文本應向用戶完整地傳遞圖像要表達的意思。用 "測試圖片" 來描述 Firefox 標誌並不合適，修改成 "Firefox 標誌：一隻盤旋在地球上的火狐" 就好多了。
可以試着爲圖像編寫一些更好的 alt 文本。
標記文本
本段包含了一些最常用的文本標記 HTML 元素。
標題（Heading）
標題元素可用於指定內容的標題和子標題。就像一本書的書名、每章的大標題、小標題，等。HTML 文檔也是一樣。HTML 包括六個級別的標題， <H1> (en-US)–<h6> (en-US) ，一般最多用到 3-4 級標題。
<h1>主標題</h1>
<h2>頂層標題</h2>
<h3>子標題</h3>
<h4>次子標題</h4>可以嘗試在 `` 元素上面添加一個合適的標題。
注：可以發現 MDN 網站上 第一級標題的主題是隱藏的。不要使用標題元素來加大、加粗字體，因爲標題對於 無障礙訪問 和 搜索引擎優化 等問題非常有意義。要保持頁面結構清晰，標題整潔，不要發生標題級別跳躍。
段落（Paragraph）
如上文所講，<P> 元素是用來指定段落的。通常用於指定常規的文本內容：
<p>這是一個段落</p>試着添加一些文本（在 設計網站的外觀 小節）到一個或幾個段落中，並把它們放在你的 `` 元素下方。
列表（List）
Web 上的許多內容都是列表，HTML 有一些特別的列表元素。標記列表通常包括至少兩個元素。最常用的列表類型爲：
1、無序列表（Unordered List）中項目的順序並不重要，就像購物列表。用一個 <ul> 元素包圍。
2、有序列表（Ordered List）中項目的順序很重要，就像烹調指南。用一個 <ol> 元素包圍。
列表的每個項目用一個列表項目（List Item）元素 <li> 包圍。
比如，要將下面的段落片段改成一個列表：
<p>艾編程是一個綜合性的web前端編程學習網站，
包含了html、css、JavaScript等系列知識……</p>可以這樣更改標記：
<p>Mozilla 艾編程是一個綜合性的web前端編程學習網站。包含了</p>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<p>等系列知識……</p>試着在示例頁面中添加一個有序列表和無序列表。
鏈接
鏈接非常重要 — 它們賦予 Web 網絡屬性。要植入一個鏈接，我們需要使用一個簡單的元素 — <a> — a 是 "anchor" （錨）的縮寫。要將一些文本添加到鏈接中，只需如下幾步：
- 選擇一些文本。比如 “艾編程前端”。
- 將文本包含在 <a> 元素內，就像這樣：
- <a> 艾編程前端 </a>
- 爲此 <a> 元素添加一個 href 屬性，就像這樣：
- <a href=""> 艾編程前端 </a>
- 把屬性的值設置爲所需網址：
- <a href="https://www.***.com/"> 艾編程前端 </a>
如果網址開始部分省略了 https:// 或者 http://，可能會得到錯誤的結果。在完成一個鏈接後，可以試着點擊它來確保指向正確。
href 這個名字可能開始看起來有點令人費解，代表超文本引用（ hypertext reference）。
現在就爲頁面添加一個鏈接吧。
小結
如果你一直跟着這篇文章裏的指導做的話，你應該完成了一個像下面這樣的頁面：
代碼部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>艾編程前端</title> </head> <body> <h1>艾編程前端示例頁面</h1> <img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png" alt="艾編程logo整體以盾型爲外輪廓設計，以代碼符號””爲基礎圖形進行抽象畫變形，中間的“/”符號用首字母“i”替代，同時也是諧音“愛”，象徵着美好"> <p>艾編程是一個綜合性的web前端編程學習網站。包含了</p> <ul> <li>html</li> <li>css</li> <li>JavaScript </li> </ul> <p>等系列知識……</p> <p>爲了讓您更好的學好前端編程，請參閱 <a href="https://www.****.com/">艾編程</a></p> </body> </html>
你學到了嗎？如果有幫助記得關注收藏點贊哦！