章先介紹一些HTML最基礎的考點，很多大長面試官喜歡由淺入深地考察知識。而對于一些基礎問題的回答，很多同學反而因組織不好語言而給面試官留下不好的印象。本章節我們就帶大家一一整理和回顧。

1.1 DOCTYPE的作用

面試官：我們現在寫HTML代碼第一行通常是 !<DOCTYPE HTML>，請介紹一下DOCTYPE的作用（基礎題）

DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，且必須聲明在文檔的第一行，來告知瀏覽器用何種文檔標準來解析這個網頁，不同的渲染模式會影響瀏覽器對CSS和JavaScript的解析標準。

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

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

1. 怪異模式（quirks mode）：此種模式會模擬更舊的瀏覽器的行為。如果沒有聲明DOCTYPE，瀏覽器默認會以這種模式解析文檔。
2. 標準模式（standards mode）：瀏覽器使用W3C的標準解析渲染頁面。

面試官：如何快速檢查頁面的解析模式？（發散題）

HTML文檔對象有個 compatMode 屬性，用于記錄頁面的解析模式：

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

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

1.2 HTML的語義化

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

語義化是指使用恰當語義的html標簽，讓頁面具有良好的結構與含義；比如<p>標簽就代表段落，<article>代表正文內容等等。語義化的作用有兩點：

• 開發者友好：使用語義類標簽增強代碼的可讀性，開發者也能夠清晰地看出網頁的結構，易維護；
• 機器友好：帶有語義的標簽適合搜索引擎的爬蟲爬取有效信息，能快速生成網頁骨架或文章提綱，SEO友好。

面試官：你平時有哪些語義化的建議或最佳實踐？（發散題）

根據語義化的優點，對于富文本內容類的網站（如門戶、新聞網站），語義化利于SEO，對網站內容的傳播有很大幫助，此類網站應該重視和實踐語義化標準。而對于一些系統類網站的搭建，語義化就沒有那沒重要了，甚至刻意做語義化反而會影響開發者的效率，此類網站可以對頁面骨架做語義化，至于模塊的交互組件和表單等則無需刻意做語義化。

1.3 HTML5新增內容考察

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

HTML5新增的內容確實不少，面試官不會要求你全部記下來，我們可以挑重要的東西來回答：

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

拓展：什么是SGML

• SGML 即Standard Globalized Markup Language 是用來定義標準的標記語言，簡單的說，就是定義文檔的元語言。
• HTML 是基于SGML 的超鏈接語言，可以用于創建Web頁面。在DTD 內部定義了標簽的規則，DTD就是使用SGML 語言創建的。
• HTML5不是基于SGML 語言的，因此不需要DTD ，它是一種全新的標記語言，有自己的解析規則，HTML5的語法規則與之前版本有很大的差別，可以稱的上是一種全新的語言

1.4 meta標簽

面試官：介紹一下<meta>標簽的用途 （基礎題）

meta標簽由name和content兩個屬性來定義，來描述一個HTML網頁文檔的元信息，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等，除了一些http標準規定了一些name作為大家使用的共識，開發者也可以自定義name

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

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

1.5 src和href的區別

面試官：介紹一下src和href的區別（基礎題）

• src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載并應用到文檔內，如JS腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，所以一般JS腳本會放在底部而不是頭部。

• href是指向網絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理

1.6 img標簽的srcset

面試官：介紹一下<img>標簽的srcset和sizes屬性的作用（基礎題）

可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源

• srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小

• sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇

所以，有了這些屬性，瀏覽器會：

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

<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標簽的defer和async

面試官：介紹一下<script>標簽的defer和async的作用（基礎題）

• defer：瀏覽器指示腳本在文檔被解析后執行，<script>被異步加載后并不會立刻執行，而是等待文檔被解析完畢后執行

• async：同樣是異步加載腳本，區別是腳本加載完畢后立即執行，這導致async屬性下的腳本是亂序的，對于<script>有先后依賴關系的情況，并不適用

  如下圖：藍色線代表網絡讀取，紅色線代表執行時間，這倆都是針對腳本的；綠色線代表 HTML 解析

1.8 前端數據存儲的方式

面試官：前端有哪幾種數據存儲方式？（基礎題）

主要的存儲方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優缺點如下：

• Cookie：在HTML5標準前本地儲存的主要方式
  • 優點是兼容性好，請求頭自帶cookie方便可以和服務端進行交互
  • 缺點是大小只有4k，請求頭攜帶cookie浪費流量，每個domain限制20個cookie，JS無法直接操作，需要自行封裝

• LocalStorage：以鍵值對為標準的數據存儲方式
  • 優點是操作方便，永久性儲存（除非手動刪除），大小為5M
  • 缺點是兼容IE8+

• SessionStorage：與localStorage基本類似，區別是**sessionStorage當頁面關閉后會被清理
  • 優點是會話級隨存隨取，不占用本地空間，操作方便
  • 缺點是不能在所有同源窗口中共享，是會話級別的儲存方式，兼容IE8+

• IndexedDB：是被正式納入HTML5標準的數據庫儲存方案，它是NoSQL數據庫，用鍵值對進行儲存，可以進行快速讀取操作
  • 優點是存儲量更大，非常適合web場景，同時支持JS進行操作，非常方便
  • 缺點是兼容性IE8+

• WebSQL：類似SQLite，是真正意義上的關系型數據庫，用sql進行操作
  • 優點是關系型數據庫，適合大型的離線web應用
  • 缺點是JS需要通過transaction操作sql，火狐瀏覽器不支持

拓展：如何操作webSql

// WebSql操作實例
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>數據表已創建，且插入了兩條數據，然后又刪除了第一條。</p>';
  document.querySelector('#status').innerHTML =  msg;
});

1.9 WebSocket考點

面試官：介紹一下webSocket的特點和作用（基礎題）

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

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

本文由博客一文多發平臺 OpenWrite 發布！

現代網站開發中，代碼驗證在確保頁面符合 Web 標準方面至關重要。 W3C 驗證是代碼驗證的行業標準，用于檢查頁面是否符合這些標準。

W3C 驗證的類型

W3C 驗證有兩種類型：

• XHTML 驗證：檢查 HTML 代碼的語法和結構。
• CSS 驗證：檢查 CSS 代碼的語法和語義。

使用 W3C 驗證器

您可以使用 W3C 驗證器在線或本地進行驗證。在線驗證器可以找到 W3C 驗證器的地址：

• W3C 頁面驗證器：https://validator.w3.org/

驗證的步驟

1. 將您的頁面保存為 HTML 或 CSS 文件。
2. 在驗證器頁面中輸入頁面 URL。
3. 點擊“Validate This Page” 按鈕。 4 vicisslet akan menunjukkan驗證結果。

常見的驗證錯誤

• 語法錯誤：語法錯誤，例如不正確的標簽或屬性。
• 結構錯誤：結構錯誤，例如缺少根元素或無效的嵌套。
• 內容錯誤：內容錯誤，例如不正確的屬性值或不正確的標簽使用。

解決驗證錯誤

• 了解驗證錯誤的含義。
• 檢查代碼以找到導致錯誤的代碼行。
• 按照 W3C 標準修正錯誤。

結論

W3C 驗證是確保頁面符合 Web 標準的必不可少步驟。通過使用 W3C 驗證器和了解驗證錯誤，您可以確保您的頁面符合行業標準并提供最佳的用戶體驗。

文本標記語言 (英語：Hypertext Markup Language，簡稱：HTML ) 是一種用來結構化 Web 網頁及其內容的標記語言。網頁內容可以是：一組段落、一個重點信息列表、也可以含有圖片和數據表。正如標題所示，本文將對 HTML 及其功能做一個基本介紹。

HTML 到底是什么？

HTML 不是一門編程語言，而是一種用于定義內容結構的標記語言。HTML 由一系列的元素（elements）組成，這些元素可以用來包圍不同部分的內容，使其以某種方式呈現或者工作。 一對標簽（ tags）可以為一段文字或者一張圖片添加超鏈接，將文字設置為斜體，改變字號，等等。 例如，鍵入下面一行內容：

學前端，關注艾編程

可以將這行文字封裝成一個段落（paragraph）元素來使其在單獨一行呈現：

<p>學前端，關注艾編程</p>

HTML 元素詳解

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

這個元素的主要部分有：

屬性應該包含：

0. 在屬性與元素名稱（或上一個屬性，如果有超過一個屬性的話）之間的空格符。
1. 屬性的名稱，并接上一個等號。
2. 由引號所包圍的屬性值。

注：不包含 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" （錨）的縮寫。要將一些文本添加到鏈接中，只需如下幾步：

0. 選擇一些文本。比如 “艾編程前端”。
1. 將文本包含在<a>元素內，就像這樣：
2. <a>艾編程前端</a>
3. 為此<a>元素添加一個href屬性，就像這樣：
4. <a href="">艾編程前端</a>
5. 把屬性的值設置為所需網址：
6. <a href="https://www.icodingedu.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.icodingedu.com/">艾編程</a></p>
  </body>
</html>

你學到了嗎？如果有幫助記得關注收藏點贊哦！