HTML?？贾R(shí)點(diǎn)

章先介紹一些HTML最基礎(chǔ)的考點(diǎn)，很多大長(zhǎng)面試官喜歡由淺入深地考察知識(shí)。而對(duì)于一些基礎(chǔ)問(wèn)題的回答，很多同學(xué)反而因組織不好語(yǔ)言而給面試官留下不好的印象。本章節(jié)我們就帶大家一一整理和回顧。

1.1 DOCTYPE的作用

面試官：我們現(xiàn)在寫HTML代碼第一行通常是 !<DOCTYPE HTML>，請(qǐng)介紹一下DOCTYPE的作用（基礎(chǔ)題）

DOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，且必須聲明在文檔的第一行，來(lái)告知瀏覽器用何種文檔標(biāo)準(zhǔn)來(lái)解析這個(gè)網(wǎng)頁(yè)，不同的渲染模式會(huì)影響瀏覽器對(duì)CSS和JavaScript的解析標(biāo)準(zhǔn)。

面試官：瀏覽器解析文檔有哪幾種解析模式呢？（拓展題）

文檔的解析模式目前主要有 *兩種（注意：還有一種“準(zhǔn)標(biāo)準(zhǔn)模式”只在IE8瀏覽器里，目前主流瀏覽器已無(wú)需考慮）：

怪異模式（quirks mode）：此種模式會(huì)模擬更舊的瀏覽器的行為。如果沒有聲明DOCTYPE，瀏覽器默認(rèn)會(huì)以這種模式解析文檔。
標(biāo)準(zhǔn)模式（standards mode）：瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面。

面試官：如何快速檢查頁(yè)面的解析模式？（發(fā)散題）

HTML文檔對(duì)象有個(gè) compatMode 屬性，用于記錄頁(yè)面的解析模式：

如果文檔處于“混雜模式”，則該屬性值為 BackCompat
如果文檔處于“標(biāo)準(zhǔn)模式”或者“準(zhǔn)標(biāo)準(zhǔn)模式(almost standards mode)”，則該屬性為 CSS1Compat

const mode = document.compatMode; // 頁(yè)面的解析模式
if (mode === "BackCompat") {
  // 渲染模式為混雜模式
}

1.2 HTML的語(yǔ)義化

面試官：什么是HTML語(yǔ)義化，語(yǔ)義化的作用是什么？（基礎(chǔ)題）

語(yǔ)義化是指使用恰當(dāng)語(yǔ)義的html標(biāo)簽，讓頁(yè)面具有良好的結(jié)構(gòu)與含義；比如<p>標(biāo)簽就代表段落，<article>代表正文內(nèi)容等等。語(yǔ)義化的作用有兩點(diǎn)：

開發(fā)者友好：使用語(yǔ)義類標(biāo)簽增強(qiáng)代碼的可讀性，開發(fā)者也能夠清晰地看出網(wǎng)頁(yè)的結(jié)構(gòu)，易維護(hù)；
機(jī)器友好：帶有語(yǔ)義的標(biāo)簽適合搜索引擎的爬蟲爬取有效信息，能快速生成網(wǎng)頁(yè)骨架或文章提綱，SEO友好。

面試官：你平時(shí)有哪些語(yǔ)義化的建議或最佳實(shí)踐？（發(fā)散題）

根據(jù)語(yǔ)義化的優(yōu)點(diǎn)，對(duì)于富文本內(nèi)容類的網(wǎng)站（如門戶、新聞網(wǎng)站），語(yǔ)義化利于SEO，對(duì)網(wǎng)站內(nèi)容的傳播有很大幫助，此類網(wǎng)站應(yīng)該重視和實(shí)踐語(yǔ)義化標(biāo)準(zhǔn)。而對(duì)于一些系統(tǒng)類網(wǎng)站的搭建，語(yǔ)義化就沒有那沒重要了，甚至刻意做語(yǔ)義化反而會(huì)影響開發(fā)者的效率，此類網(wǎng)站可以對(duì)頁(yè)面骨架做語(yǔ)義化，至于模塊的交互組件和表單等則無(wú)需刻意做語(yǔ)義化。

1.3 HTML5新增內(nèi)容考察

面試官：你知道HTML5有哪些新增的東西嗎？（基礎(chǔ)題）

HTML5新增的內(nèi)容確實(shí)不少，面試官不會(huì)要求你全部記下來(lái)，我們可以挑重要的東西來(lái)回答：

新的文檔解析順序：不再基于 *SGML；
全面支持CSS3：
加了一些語(yǔ)義化元素：<header>、<mainer>、<footer>、<section>、<nav>等
刪了一些樣式類元素：<font>、<big>、<center> 等
表單能力加強(qiáng)：<input>的新類型（date、email、url等）、新屬性（autocomplete、autofocus等）
新的屬性：ping（用于a與area）、charset（用于meta）、async（用于script）等
定位能力：navigator.geolocation
多媒體支持：<video>（視頻）、<audio>（音頻）等
2D/3D 制圖支持：支持svg、canvas繪圖和動(dòng)畫等
新的緩存策略：Localstorage、SessionStorage、IndexedDB等
新的網(wǎng)絡(luò)協(xié)議：WebSocket
新的跨域通信方案：XHTMLHttpRequest2、PostMessage......

拓展：什么是SGML

SGML 即Standard Globalized Markup Language 是用來(lái)定義標(biāo)準(zhǔn)的標(biāo)記語(yǔ)言，簡(jiǎn)單的說(shuō)，就是定義文檔的元語(yǔ)言。
HTML 是基于SGML 的超鏈接語(yǔ)言，可以用于創(chuàng)建Web頁(yè)面。在DTD 內(nèi)部定義了標(biāo)簽的規(guī)則，DTD就是使用SGML 語(yǔ)言創(chuàng)建的。
HTML5不是基于SGML 語(yǔ)言的，因此不需要DTD ，它是一種全新的標(biāo)記語(yǔ)言，有自己的解析規(guī)則，HTML5的語(yǔ)法規(guī)則與之前版本有很大的差別，可以稱的上是一種全新的語(yǔ)言

1.4 meta標(biāo)簽

面試官：介紹一下<meta>標(biāo)簽的用途（基礎(chǔ)題）

meta標(biāo)簽由name和content兩個(gè)屬性來(lái)定義，來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的元信息，例如作者、日期和時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵詞、頁(yè)面刷新等，除了一些http標(biāo)準(zhǔn)規(guī)定了一些name作為大家使用的共識(shí)，開發(fā)者也可以自定義name

面試官：移動(dòng)端適配的viewpoint，能否手寫一下？（拓展題）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.5 src和href的區(qū)別

面試官：介紹一下src和href的區(qū)別（基礎(chǔ)題）

src是指向外部資源的位置，指向的內(nèi)容會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在的位置，在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，如JS腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，所以一般JS腳本會(huì)放在底部而不是頭部。
href是指向網(wǎng)絡(luò)資源所在位置（的超鏈接），用來(lái)建立和當(dāng)前元素或文檔之間的連接，當(dāng)瀏覽器識(shí)別到它他指向的文件時(shí)，就會(huì)并行下載資源，不會(huì)停止對(duì)當(dāng)前文檔的處理

1.6 img標(biāo)簽的srcset

面試官：介紹一下<img>標(biāo)簽的srcset和sizes屬性的作用（基礎(chǔ)題）

可以設(shè)計(jì)響應(yīng)式圖片，我們可以使用兩個(gè)新的屬性srcset 和 sizes來(lái)提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個(gè)資源

srcset 定義了我們?cè)试S瀏覽器選擇的圖像集，以及每個(gè)圖像的大小
sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當(dāng)某些媒體條件為真時(shí)，什么樣的圖片尺寸是最佳選擇

所以，有了這些屬性，瀏覽器會(huì)：

查看設(shè)備寬度
檢查 sizes 列表中哪個(gè)媒體條件是第一個(gè)為真
查看給予該媒體查詢的槽大小
加載 srcset 列表中引用的最接近所選的槽大小的圖像
srcset提供了根據(jù)屏幕條件選取圖片的能力

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw"
/>

1.7 script標(biāo)簽的defer和async

面試官：介紹一下<script>標(biāo)簽的defer和async的作用（基礎(chǔ)題）

defer：瀏覽器指示腳本在文檔被解析后執(zhí)行，<script>被異步加載后并不會(huì)立刻執(zhí)行，而是等待文檔被解析完畢后執(zhí)行
async：同樣是異步加載腳本，區(qū)別是腳本加載完畢后立即執(zhí)行，這導(dǎo)致async屬性下的腳本是亂序的，對(duì)于<script>有先后依賴關(guān)系的情況，并不適用
如下圖：藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時(shí)間，這倆都是針對(duì)腳本的；綠色線代表 HTML 解析

1.8 前端數(shù)據(jù)存儲(chǔ)的方式

面試官：前端有哪幾種數(shù)據(jù)存儲(chǔ)方式？（基礎(chǔ)題）

主要的存儲(chǔ)方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優(yōu)缺點(diǎn)如下：

Cookie：在HTML5標(biāo)準(zhǔn)前本地儲(chǔ)存的主要方式
- 優(yōu)點(diǎn)是兼容性好，請(qǐng)求頭自帶cookie方便可以和服務(wù)端進(jìn)行交互
- 缺點(diǎn)是大小只有4k，請(qǐng)求頭攜帶cookie浪費(fèi)流量，每個(gè)domain限制20個(gè)cookie，JS無(wú)法直接操作，需要自行封裝

LocalStorage：以鍵值對(duì)為標(biāo)準(zhǔn)的數(shù)據(jù)存儲(chǔ)方式
- 優(yōu)點(diǎn)是操作方便，永久性儲(chǔ)存（除非手動(dòng)刪除），大小為5M
- 缺點(diǎn)是兼容IE8+

SessionStorage：與localStorage基本類似，區(qū)別是**sessionStorage當(dāng)頁(yè)面關(guān)閉后會(huì)被清理
- 優(yōu)點(diǎn)是會(huì)話級(jí)隨存隨取，不占用本地空間，操作方便
- 缺點(diǎn)是不能在所有同源窗口中共享，是會(huì)話級(jí)別的儲(chǔ)存方式，兼容IE8+

IndexedDB：是被正式納入HTML5標(biāo)準(zhǔn)的數(shù)據(jù)庫(kù)儲(chǔ)存方案，它是NoSQL數(shù)據(jù)庫(kù)，用鍵值對(duì)進(jìn)行儲(chǔ)存，可以進(jìn)行快速讀取操作
- 優(yōu)點(diǎn)是存儲(chǔ)量更大，非常適合web場(chǎng)景，同時(shí)支持JS進(jìn)行操作，非常方便
- 缺點(diǎn)是兼容性IE8+

WebSQL：類似SQLite，是真正意義上的關(guān)系型數(shù)據(jù)庫(kù)，用sql進(jìn)行操作
- 優(yōu)點(diǎn)是關(guān)系型數(shù)據(jù)庫(kù)，適合大型的離線web應(yīng)用
- 缺點(diǎn)是JS需要通過(guò)transaction操作sql，火狐瀏覽器不支持

拓展：如何操作webSql

// WebSql操作實(shí)例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;

// 建表 => 插入 => 刪除
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
  tx.executeSql('DELETE FROM LOGS  WHERE id=1');
  msg = '<p>數(shù)據(jù)表已創(chuàng)建，且插入了兩條數(shù)據(jù)，然后又刪除了第一條。</p>';
  document.querySelector('#status').innerHTML =  msg;
});

1.9 WebSocket考點(diǎn)

面試官：介紹一下webSocket的特點(diǎn)和作用（基礎(chǔ)題）

WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。它允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送

本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！

現(xiàn)代網(wǎng)站開發(fā)中，代碼驗(yàn)證在確保頁(yè)面符合 Web 標(biāo)準(zhǔn)方面至關(guān)重要。 W3C 驗(yàn)證是代碼驗(yàn)證的行業(yè)標(biāo)準(zhǔn)，用于檢查頁(yè)面是否符合這些標(biāo)準(zhǔn)。

W3C 驗(yàn)證的類型

W3C 驗(yàn)證有兩種類型：

XHTML 驗(yàn)證：檢查 HTML 代碼的語(yǔ)法和結(jié)構(gòu)。
CSS 驗(yàn)證：檢查 CSS 代碼的語(yǔ)法和語(yǔ)義。

使用 W3C 驗(yàn)證器

您可以使用 W3C 驗(yàn)證器在線或本地進(jìn)行驗(yàn)證。在線驗(yàn)證器可以找到 W3C 驗(yàn)證器的地址：

W3C 頁(yè)面驗(yàn)證器：https://validator.w3.org/

驗(yàn)證的步驟

將您的頁(yè)面保存為 HTML 或 CSS 文件。
在驗(yàn)證器頁(yè)面中輸入頁(yè)面 URL。
點(diǎn)擊“Validate This Page” 按鈕。 4 vicisslet akan menunjukkan驗(yàn)證結(jié)果。

常見的驗(yàn)證錯(cuò)誤

語(yǔ)法錯(cuò)誤：語(yǔ)法錯(cuò)誤，例如不正確的標(biāo)簽或?qū)傩浴?/li>
結(jié)構(gòu)錯(cuò)誤：結(jié)構(gòu)錯(cuò)誤，例如缺少根元素或無(wú)效的嵌套。
內(nèi)容錯(cuò)誤：內(nèi)容錯(cuò)誤，例如不正確的屬性值或不正確的標(biāo)簽使用。

解決驗(yàn)證錯(cuò)誤

了解驗(yàn)證錯(cuò)誤的含義。
檢查代碼以找到導(dǎo)致錯(cuò)誤的代碼行。
按照 W3C 標(biāo)準(zhǔn)修正錯(cuò)誤。

結(jié)論

W3C 驗(yàn)證是確保頁(yè)面符合 Web 標(biāo)準(zhǔn)的必不可少步驟。通過(guò)使用 W3C 驗(yàn)證器和了解驗(yàn)證錯(cuò)誤，您可以確保您的頁(yè)面符合行業(yè)標(biāo)準(zhǔn)并提供最佳的用戶體驗(yàn)。

文本標(biāo)記語(yǔ)言 (英語(yǔ)：Hypertext Markup Language，簡(jiǎn)稱：HTML ) 是一種用來(lái)結(jié)構(gòu)化 Web 網(wǎng)頁(yè)及其內(nèi)容的標(biāo)記語(yǔ)言。網(wǎng)頁(yè)內(nèi)容可以是：一組段落、一個(gè)重點(diǎn)信息列表、也可以含有圖片和數(shù)據(jù)表。正如標(biāo)題所示，本文將對(duì) HTML 及其功能做一個(gè)基本介紹。

HTML 到底是什么？

HTML 不是一門編程語(yǔ)言，而是一種用于定義內(nèi)容結(jié)構(gòu)的標(biāo)記語(yǔ)言。HTML 由一系列的元素（elements）組成，這些元素可以用來(lái)包圍不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。一對(duì)標(biāo)簽（ tags）可以為一段文字或者一張圖片添加超鏈接，將文字設(shè)置為斜體，改變字號(hào)，等等。例如，鍵入下面一行內(nèi)容：

學(xué)前端，關(guān)注艾編程

可以將這行文字封裝成一個(gè)段落（paragraph）元素來(lái)使其在單獨(dú)一行呈現(xiàn)：

<p>學(xué)前端，關(guān)注艾編程</p>

HTML 元素詳解

讓我們深入探索一下這個(gè)段落元素。

這個(gè)元素的主要部分有：

屬性應(yīng)該包含：

在屬性與元素名稱（或上一個(gè)屬性，如果有超過(guò)一個(gè)屬性的話）之間的空格符。
屬性的名稱，并接上一個(gè)等號(hào)。
由引號(hào)所包圍的屬性值。

注：不包含 ASCII 空格（以及 " ' ``=<>` ）的簡(jiǎn)單屬性值可以不使用引號(hào)，但是建議將所有屬性值用引號(hào)括起來(lái)，這樣的代碼一致性更佳，更易于閱讀。

嵌套元素

也可以將一個(gè)元素置于其他元素之中 —— 稱作嵌套。要表明貓咪非常暴躁，可以將 “艾編程” 用 <strong> 元素包圍，爆字將突出顯示：

<p>學(xué)編程，關(guān)注<strong>艾編程</strong>:)</p>

必須保證元素嵌套次序正確：本例首先使用 <p>標(biāo)簽，然后是<strong>標(biāo)簽，因此要先結(jié)束<strong>標(biāo)簽，最后再結(jié)束</p>標(biāo)簽。以下這個(gè)示例就是一個(gè)錯(cuò)誤的示范，這樣是不對(duì)的：

<p>學(xué)編程，關(guān)注<strong>艾編程</p></strong>

元素必須正確地開始和結(jié)束，才能清楚地顯示出正確的嵌套層次。否則瀏覽器就得自己猜測(cè)，雖然它會(huì)竭盡全力，但很大程度不會(huì)給你期望的結(jié)果。所以一定要避免！

空元素

不包含任何內(nèi)容的元素稱為空元素。比如 `` 元素：

<img src="images/icodingedulgo.png" alt="艾編程logo">

本元素包含兩個(gè)屬性，但是并沒有 </img> 結(jié)束標(biāo)簽，元素里也沒有內(nèi)容。這是因?yàn)閳D像元素不需要通過(guò)內(nèi)容來(lái)產(chǎn)生效果，它的作用是向其所在的位置嵌入一個(gè)圖像。

HTML 文檔詳解

以上介紹了一些基本的 HTML 元素，但孤木不成林?，F(xiàn)在來(lái)看看單個(gè)元素如何彼此協(xié)同構(gòu)成一個(gè)完整的 HTML 頁(yè)面。回顧文件處理小節(jié)中創(chuàng)建的 index.html 示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>入門學(xué)前端的博客，艾編程博客</title>
  </head>
  <body>
    <img src="images/icodingedulgo.png" alt="艾編程logo">
  </body>
</html>

這里有：

<!DOCTYPE html> — 文檔類型。混沌初分，HTML 尚在襁褓（大約是 1991/92 年）之時(shí)，DOCTYPE 用來(lái)鏈接一些 HTML 編寫守則，比如自動(dòng)查錯(cuò)之類。DOCTYPE 在當(dāng)今作用有限，僅用于保證文檔正常讀取。現(xiàn)在知道這些就足夠了。
<html></html> — `` 元素。該元素包含整個(gè)頁(yè)面的內(nèi)容，也稱作根元素。
<head></head> — `` 元素。該元素的內(nèi)容對(duì)用戶不可見，其中包含例如面向搜索引擎的搜索關(guān)鍵字keywords、頁(yè)面描述、CSS 樣式表和字符編碼聲明等。
<meta charset="utf-8"> — 該元素指定文檔使用 UTF-8 字符編碼，UTF-8 包括絕大多數(shù)人類已知語(yǔ)言的字符?；旧?UTF-8 可以處理任何文本內(nèi)容，還可以避免以后出現(xiàn)某些問(wèn)題，沒有理由再選用其他編碼。
<title></title> — `` 元素。該元素設(shè)置頁(yè)面的標(biāo)題，顯示在瀏覽器標(biāo)簽頁(yè)上，也作為收藏網(wǎng)頁(yè)的描述文字。
<body></body> — `` 元素。該元素包含期望讓用戶在訪問(wèn)頁(yè)面時(shí)看到的內(nèi)容，包括文本、圖像、視頻、游戲、可播放的音軌或其他內(nèi)容。

圖像

重溫一下 `` 元素：

<img src="images/icodingedulogo.png" alt="艾編程logo">

像之前所講，該元素通過(guò)包含圖像文件路徑的地址屬性 src，可在所在位置嵌入圖像。

該元素還包括一個(gè)替換文字屬性 alt，是圖像的描述內(nèi)容，用于當(dāng)圖像不能被用戶看見時(shí)顯示，不可見的原因可能是：

1、用戶有視覺障礙。視障用戶可以使用屏幕閱讀器來(lái)朗讀 alt 屬性的內(nèi)容。

2、有些錯(cuò)誤使圖像無(wú)法顯示?？梢栽囍室鈱?src 屬性里的路徑改錯(cuò)。保存并刷新頁(yè)面就可以在圖像位置看到：

alt 屬性的關(guān)鍵字即“描述文本”。alt 文本應(yīng)向用戶完整地傳遞圖像要表達(dá)的意思。用 "測(cè)試圖片" 來(lái)描述 Firefox 標(biāo)志并不合適，修改成 "Firefox 標(biāo)志：一只盤旋在地球上的火狐" 就好多了。

可以試著為圖像編寫一些更好的 alt 文本。

標(biāo)記文本

本段包含了一些最常用的文本標(biāo)記 HTML 元素。

標(biāo)題（Heading）

標(biāo)題元素可用于指定內(nèi)容的標(biāo)題和子標(biāo)題。就像一本書的書名、每章的大標(biāo)題、小標(biāo)題，等。HTML 文檔也是一樣。HTML 包括六個(gè)級(jí)別的標(biāo)題， <H1> (en-US)–<h6> (en-US) ，一般最多用到 3-4 級(jí)標(biāo)題。

<h1>主標(biāo)題</h1>
<h2>頂層標(biāo)題</h2>
<h3>子標(biāo)題</h3>
<h4>次子標(biāo)題</h4>

可以嘗試在 `` 元素上面添加一個(gè)合適的標(biāo)題。

注：可以發(fā)現(xiàn) MDN 網(wǎng)站上第一級(jí)標(biāo)題的主題是隱藏的。不要使用標(biāo)題元素來(lái)加大、加粗字體，因?yàn)闃?biāo)題對(duì)于無(wú)障礙訪問(wèn) 和搜索引擎優(yōu)化等問(wèn)題非常有意義。要保持頁(yè)面結(jié)構(gòu)清晰，標(biāo)題整潔，不要發(fā)生標(biāo)題級(jí)別跳躍。

段落（Paragraph）

如上文所講，<P> 元素是用來(lái)指定段落的。通常用于指定常規(guī)的文本內(nèi)容：

<p>這是一個(gè)段落</p>

試著添加一些文本（在設(shè)計(jì)網(wǎng)站的外觀小節(jié)）到一個(gè)或幾個(gè)段落中，并把它們放在你的 `` 元素下方。

列表（List）

Web 上的許多內(nèi)容都是列表，HTML 有一些特別的列表元素。標(biāo)記列表通常包括至少兩個(gè)元素。最常用的列表類型為：

1、無(wú)序列表（Unordered List）中項(xiàng)目的順序并不重要，就像購(gòu)物列表。用一個(gè) <ul> 元素包圍。

2、有序列表（Ordered List）中項(xiàng)目的順序很重要，就像烹調(diào)指南。用一個(gè) <ol> 元素包圍。

列表的每個(gè)項(xiàng)目用一個(gè)列表項(xiàng)目（List Item）元素 <li> 包圍。

比如，要將下面的段落片段改成一個(gè)列表：

<p>艾編程是一個(gè)綜合性的web前端編程學(xué)習(xí)網(wǎng)站，
       包含了html、css、JavaScript等系列知識(shí)……</p>

可以這樣更改標(biāo)記：

<p>Mozilla 艾編程是一個(gè)綜合性的web前端編程學(xué)習(xí)網(wǎng)站。包含了</p>

<ul>
  <li>html</li>
  <li>css</li>
  <li>JavaScript</li>
</ul>

<p>等系列知識(shí)……</p>

試著在示例頁(yè)面中添加一個(gè)有序列表和無(wú)序列表。

鏈接

鏈接非常重要 — 它們賦予 Web 網(wǎng)絡(luò)屬性。要植入一個(gè)鏈接，我們需要使用一個(gè)簡(jiǎn)單的元素 — <a> — a 是 "anchor" （錨）的縮寫。要將一些文本添加到鏈接中，只需如下幾步：

選擇一些文本。比如 “艾編程前端”。
將文本包含在<a>元素內(nèi)，就像這樣：
<a>艾編程前端</a>
為此<a>元素添加一個(gè)href屬性，就像這樣：
<a href="">艾編程前端</a>
把屬性的值設(shè)置為所需網(wǎng)址：
<a href="https://www.icodingedu.com/">艾編程前端</a>

如果網(wǎng)址開始部分省略了 https:// 或者 http://，可能會(huì)得到錯(cuò)誤的結(jié)果。在完成一個(gè)鏈接后，可以試著點(diǎn)擊它來(lái)確保指向正確。

href 這個(gè)名字可能開始看起來(lái)有點(diǎn)令人費(fèi)解，代表超文本引用（ hypertext reference）。

現(xiàn)在就為頁(yè)面添加一個(gè)鏈接吧。

小結(jié)

如果你一直跟著這篇文章里的指導(dǎo)做的話，你應(yīng)該完成了一個(gè)像下面這樣的頁(yè)面：

代碼部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>艾編程前端</title>
  </head>
  <body>
    <h1>艾編程前端示例頁(yè)面</h1>
    <img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png" alt="艾編程logo整體以盾型為外輪廓設(shè)計(jì)，以代碼符號(hào)””為基礎(chǔ)圖形進(jìn)行抽象畫變形，中間的“/”符號(hào)用首字母“i”替代，同時(shí)也是諧音“愛”，象征著美好">

    <p>艾編程是一個(gè)綜合性的web前端編程學(xué)習(xí)網(wǎng)站。包含了</p>

    <ul>
      <li>html</li>
      <li>css</li>
      <li>JavaScript </li>
    </ul>

    <p>等系列知識(shí)……</p>

    <p>為了讓您更好的學(xué)好前端編程，請(qǐng)參閱 <a href="https://www.icodingedu.com/">艾編程</a></p>
  </body>
</html>

你學(xué)到了嗎？如果有幫助記得關(guān)注收藏點(diǎn)贊哦！

在線咨詢

上一篇：干貨：HTML中“input”背景提示文字美化
下一篇：前端入門-CSS 多列文本

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML?？贾R(shí)點(diǎn)