HTML/HTML5 基礎(chǔ)知識(shí) | 面試題專用

DTD 介紹

DTD（Document Type Definition 文檔類型定義）是一組機(jī)器可讀的規(guī)則虱咧，它們定義 XML 或 HTML 的特定版本中所有允許元素及它們的屬性和層次關(guān)系的定義阻问。在解析網(wǎng)頁(yè)時(shí)在旱，瀏覽器將使用這些規(guī)則檢查頁(yè)面的有效性并且采取相應(yīng)的措施。
DTD 是對(duì) HTML 文檔的聲明，還會(huì)影響瀏覽器的渲染模式（工作模式）

什么是 HTML？

HTML 是網(wǎng)頁(yè)的基礎(chǔ)也物。它代表超文本標(biāo)記語(yǔ)言。

作為一個(gè) Web 用戶列疗，當(dāng)你訪問(wèn)本頁(yè)面時(shí)滑蚯，這個(gè)過(guò)程看起來(lái)是這樣的：

在設(shè)備上打開(kāi) Web 瀏覽器應(yīng)用程序。
單擊指向此頁(yè)面的鏈接或直接在地址欄中鍵入U(xiǎn)RL抵栈。
運(yùn)行此網(wǎng)站的 Web 服務(wù)器接收來(lái)自您和您的瀏覽器的請(qǐng)求告材，并向?yàn)g覽器發(fā)送一些 HTML 代碼。
瀏覽器下載 HTML 代碼古劲，對(duì)其進(jìn)行解析斥赋，并在屏幕上顯示結(jié)果。

這就是為什么這個(gè)頁(yè)面會(huì)顯示你現(xiàn)在正在閱讀的內(nèi)容产艾。HTML 是用來(lái)表示構(gòu)成此頁(yè)面的各種元素的語(yǔ)言疤剑。

SGML 、 HTML 闷堡、XML 和 XHTML 的區(qū)別骚露？

SGML 是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言，是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國(guó)際標(biāo)準(zhǔn)語(yǔ)言缚窿，是所有電子文檔標(biāo)記語(yǔ)言的起源
HTML（HyperText Markup Language）是超文本標(biāo)記語(yǔ)言，它定義了網(wǎng)頁(yè)內(nèi)容的含義和結(jié)構(gòu)焰扳。
XML 是可擴(kuò)展標(biāo)記語(yǔ)言是未來(lái)網(wǎng)頁(yè)語(yǔ)言的發(fā)展方向倦零，XML 和 HTML 的最大區(qū)別就在于 XML 的標(biāo)簽是可以自己創(chuàng)建的，數(shù)量無(wú)限多吨悍，而 HTML 的標(biāo)簽都是固定的而且數(shù)量有限扫茅。
XHTML 是一個(gè)基于 XML 的標(biāo)記語(yǔ)言，他與 HTML 沒(méi)什么本質(zhì)的區(qū)別育瓜，但他比 HTML 更加嚴(yán)格葫隙。
為了規(guī)范 HTML，W3C 結(jié)合 XML 制定了 XHTML1.0 標(biāo)準(zhǔn)躏仇，這個(gè)標(biāo)準(zhǔn)沒(méi)有增加任何新的標(biāo)簽恋脚，只是按照 XML 的要求來(lái)規(guī)范 HTML腺办。兩者最主要的區(qū)別是：
- 文檔頂部 doctype 聲明不同，XHTML 的 doctype 頂部聲明中明確規(guī)定了xhtml DTD的寫法
- 元素必須始終正確嵌套
- 標(biāo)簽必須始終關(guān)閉
- 標(biāo)簽名必須小寫
- 特殊字符必須轉(zhuǎn)義
- 文檔必須有根元素
- 屬性值必須用雙引號(hào) "" 括起來(lái)
- 禁止屬性最小化（例如糟描，必須使用 checked="checked" 而不是 checked）

DOCTYPE 有什么用怀喉？

<!DOCTYPE> 聲明位于 HTML 文檔中的第一行，處于 <html> 標(biāo)簽之前船响。告知瀏覽器的解析器使用標(biāo)準(zhǔn)模式渲染文檔躬拢。DOCTYPE 不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。

// 返回當(dāng)前文檔關(guān)聯(lián)的文檔類型定義（DTD）见间，如果當(dāng)前文檔沒(méi)有 DTD聊闯，則該屬性返回 null坏为。
document.doctype

Doctype

標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別赚楚？它們有何意義？

標(biāo)準(zhǔn)模式：又稱嚴(yán)格模式严就，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼荒辕。
- 標(biāo)準(zhǔn)模式的渲染方式和 JS 引擎的解析方式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行汗销。
兼容模式：又稱怪異模式或混雜模式，是指瀏覽器用自己的方式解析代碼抵窒。
- 在兼容模式中弛针，頁(yè)面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作李皇。
如何區(qū)分：
- 在 HTML4.01 標(biāo)準(zhǔn)中削茁，瀏覽器解析時(shí)到底使用標(biāo)準(zhǔn)模式還是兼容模式，與網(wǎng)頁(yè)中的 DTD 直接相關(guān)掉房，因?yàn)?HTML 4.01 基于 SGML茧跋，DTD 規(guī)定了標(biāo)記語(yǔ)言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)卓囚。且有三種
- HTML5 不基于 SGML瘾杭，因此不需要對(duì) DTD 進(jìn)行引用。只需要在頂部聲明 <!DOCTYPE html>
目的：防止呈現(xiàn)文檔時(shí)瀏覽器切換到 “兼容模式”哪亿。
怪異模式和標(biāo)準(zhǔn)模式
怪異模式（Quirks Mode）對(duì) HTML 頁(yè)面的影響

頁(yè)面導(dǎo)入樣式時(shí)粥烁，使用 link 和 @import 有什么區(qū)別？

link 屬于 XHTML 標(biāo)簽蝇棉，除了加載 CSS 外讨阻，還能用于定義 RSS，定義 rel 連接屬性等作用篡殷；而 @import 是 CSS 提供的钝吮，只能用于加載 CSS；
頁(yè)面被加載的時(shí)，link 會(huì)同時(shí)被加載奇瘦，而 @import 引用的 CSS 會(huì)等到頁(yè)面被加載完再加載棘催；
@import 是CSS2.1 提出的，只在 IE5 以上才能被識(shí)別链患，而 link 是 XHTML 標(biāo)簽巧鸭，無(wú)兼容問(wèn)題；
link 方式的樣式的權(quán)重高于 @import 的權(quán)重麻捻。

HTML 中 form 里 action 方法的 Get 和 Post 有什么區(qū)別纲仍？

Get：Form 的默認(rèn)方法。
Get 是用來(lái)從服務(wù)器上獲得數(shù)據(jù)贸毕。Post 是用來(lái)向服務(wù)器上傳遞數(shù)據(jù)
Get 將表單中數(shù)據(jù)的按照 name=value 的形式郑叠，添加到 action 所指向的 URL 后面，并且兩者使用 "?" 連接明棍，而各個(gè)變量之間使用 "&" 連接乡革。Post 是將表單中的數(shù)據(jù)放在 form 的數(shù)據(jù)體中，按照變量和值相對(duì)應(yīng)的方式摊腋，傳遞到 action 所指向 URL
Get 是不安全的沸版，因?yàn)樵趥鬏斶^(guò)程，數(shù)據(jù)被放在請(qǐng)求的 URL 中兴蒸。Post 的所有操作對(duì)用戶來(lái)說(shuō)都是不可見(jiàn)的视粮，其放置 request body 中
Get 傳輸?shù)臄?shù)據(jù)量小，這主要是因?yàn)槭?URL 長(zhǎng)度限制橙凳。Post 可以傳輸大量的數(shù)據(jù)蕾殴，所以在上傳文件只能使用 Post
Get 限制 Form 表單的數(shù)據(jù)集的值必須為 ASCII 字符。Post 支持整個(gè) ISO10646 字符集
Get 請(qǐng)求瀏覽器會(huì)主動(dòng) cache岛啸。Post 支持不會(huì)
Get 請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽歷史記錄中钓觉。Post 中的參數(shù)不會(huì)被保留。
GET 和 POST 本質(zhì)上就是 TCP 鏈接坚踩，并無(wú)差別荡灾。但是由于 HTTP 的規(guī)定和瀏覽器/服務(wù)器的限制，導(dǎo)致他們?cè)趹?yīng)用過(guò)程中體現(xiàn)出一些不同瞬铸。
GET 產(chǎn)生一個(gè) TCP 數(shù)據(jù)包卧晓；POST 產(chǎn)生兩個(gè) TCP 數(shù)據(jù)包。

Meta viewport 原理是什么赴捞？

meta viewport 標(biāo)簽的作用是讓當(dāng)前 viewport 的寬度等于設(shè)備的寬度，同時(shí)當(dāng)設(shè)置 user-scalbale="no" 時(shí)不允許用戶進(jìn)行手動(dòng)縮放
viewport 的原理：移動(dòng)端瀏覽器通常都會(huì)在一個(gè)比移動(dòng)端屏幕更寬的虛擬窗口中渲染頁(yè)面郁稍，這個(gè)虛擬窗口就是 viewport赦政；目的是正常展示沒(méi)有做移動(dòng)端適配的網(wǎng)頁(yè)，讓他們完整的展示給用戶；
viewport 屬性值

屬性	描述
width	設(shè)備的虛擬視口的寬度恢着。
height	設(shè)備的虛擬視口的高度桐愉。
device-width	設(shè)備屏幕的物理寬度。
device-height	設(shè)備屏幕的物理高度掰派。
initial-scale	訪問(wèn)頁(yè)面時(shí)的初始縮放从诲。1.0無(wú)法縮放。
user-scalable	允許設(shè)備放大和縮小靡羡，值為 yes 或 no系洛。
minimum-scale	允許用戶的最小縮放值，1.0 表無(wú)法縮放略步。
maximum-scale	允許用戶的最大縮放值描扯，1.0 表無(wú)法縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Meta 的目的是什么趟薄？

meta 元素可用于包含描述 HTML 文檔屬性的名稱/值對(duì)绽诚，如作者，字符編號(hào)杭煎，關(guān)鍵字列表恩够，文檔作者等信息

<!DOCTYPE html>
<html>
  <head>
    <!-- 推薦 Meta Tags -->
    <meta charset="utf-8" />
    <meta name="language" content="english" />
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Author Name" />
    <meta name="designer" content="Designer Name" />
    <meta name="publisher" content="Publisher Name" />
    <meta name="no-email-collection" content="name@email.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 搜索引擎優(yōu)化 Meta Tags -->
    <meta name="description" content="Project Description" />
    <meta
      name="keywords"
      content="Software Engineer,Product Manager,Project Manager,Data Scientist"
    />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="web" />
    <meta name="robots" content="noodp" />

    <!-- 可選 Meta Tags-->
    <meta name="distribution" content="web" />
    <meta name="web_author" content="" />
    <meta name="rating" content="" />
    <meta name="subject" content="Personal" />
    <meta name="title" content=" - Official Website." />
    <meta name="copyright" content="Copyright 2020" />
    <meta name="reply-to" content="" />
    <meta name="abstract" content="" />
    <meta name="city" content="Bangalore" />
    <meta name="country" content="INDIA" />
    <meta name="distribution" content="" />
    <meta name="classification" content="" />

    <!-- 移動(dòng)設(shè)備上 HTML 頁(yè)面的 Meta Tgas -->
    <meta name="format-detection" content="telephone=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- http-equiv Tags -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>HTML5 Meta Tags</title>
  </head>
  <body>
    ...
  </body>
</html>

Meta Refresh

<!-- 在5秒鐘內(nèi)重定向到提供的 URL。設(shè)置為0可立即重定向 -->
<meta http-equiv="refresh" content="3;url=https://juejin.cn/user/96412754251390" />

Note：如果你的網(wǎng)站不是專門為響應(yīng)而設(shè)計(jì)的羡铲，并且在這個(gè)尺寸下工作得很好蜂桶，不要使用響應(yīng)元標(biāo)簽，因?yàn)樗鼤?huì)讓體驗(yàn)變得更糟犀勒。
Stop using the viewport meta tag (until you know how to use it)
metatags

什么是替換元素與非替換元素

替換元素：就是瀏覽器根據(jù)其標(biāo)簽的元素屬性來(lái)判斷顯示具體的內(nèi)容的元素屎飘，且元素一般擁有固定的尺寸（寬高或?qū)捀弑龋?
- 在 html 中像這樣的元素有 img，input贾费，textarea钦购，select，object褂萧，這些都是替換元素押桃，這些元素都沒(méi)有實(shí)際的內(nèi)容。
非替換元素：html 中大多數(shù)都是非替換元素导犹，他們直接將內(nèi)容告訴瀏覽器唱凯，直接顯示出來(lái)。
- 如：p標(biāo)簽谎痢，瀏覽器會(huì)直接顯示 p標(biāo)簽里的內(nèi)容磕昼。
tips：替換元素和非替換元素不僅是在行內(nèi)元素中有，塊級(jí)元素也有替換和非替換之分节猿，比如嵌入的文檔 iframe票从，audio漫雕，canvas 在某些情況下也為替換元素。

塊級(jí)元素和行內(nèi)元素的區(qū)別峰鄙？

HTML4.01 中浸间，元素被分成兩大類：inlink（行內(nèi)元素）與 block（塊級(jí)元素）。區(qū)別如下：

塊級(jí)元素	行內(nèi)元素
獨(dú)占一行	不獨(dú)占一行
可以設(shè)置寬高（盒模型）	不可以設(shè)置寬高吟榴，寬高由元素內(nèi)部的內(nèi)容決定魁蒜，`padding` 和 `margin` 的 `top/bottom` 不會(huì)對(duì)元素生效
可以包含行內(nèi)元素和其他塊級(jí)元素	行內(nèi)元素只能包含文本和其他行內(nèi)元素。

默認(rèn)情況下是這樣吩翻，但可以利用 display 來(lái)修改其為塊級(jí)還是行內(nèi)
內(nèi)聯(lián)元素和塊級(jí)元素

塊級(jí)元素和行內(nèi)元素分別有哪些兜看？空（void）元素有哪些？

CSS 規(guī)范規(guī)定仿野，每個(gè)元素都有 display 屬性铣减，每個(gè)元素都有默認(rèn)的 display 值。例如：
- div 默認(rèn)display 屬性值為 block脚作，為塊級(jí)元素葫哗；
- span 默認(rèn) display 屬性值為 inline，為行內(nèi)元素球涛。
塊級(jí)元素：
- <h1>-<h6>劣针、<p>、<div>亿扁、<ul>捺典、<ol>、<form>从祝、<table>襟己、<address>、<blockquote>牍陌、<center>擎浴、<dir>、<dl>毒涧、<fieldset>贮预、<hr>、<menu>契讲、<noscript>仿吞、<pre>、<noframes>捡偏、<isindex>
- 當(dāng)元素的 display 屬性為 block唤冈、list-item 或 table 時(shí)，該元素將成為 “塊級(jí)元素”银伟。
行內(nèi)元素：
- <a>你虹、<img>凉当、<input>、<span>售葡、<textarea>、<label>忠藤、<select>挟伙、<abbr>、<acronym>模孩、<b>尖阔、<bdo>、<big>榨咐、<br>介却、<cite>、<code>块茁、<dfn>齿坷、<em>、<font>数焊、<i>永淌、<kbd>、<q>佩耳、<s>遂蛀、<samp>、<small>干厚、<strike>李滴、<strong>、<sub>蛮瞄、<sup>所坯、<tt>、<u>
- 當(dāng)元素的 display 屬性為 inline裕坊、inline-block 或 inline-table 時(shí)包竹，該元素將成為 “行內(nèi)元素”
常見(jiàn)的空元素：標(biāo)簽內(nèi)沒(méi)有內(nèi)容的 HTML 標(biāo)簽被稱為空元素。
- <br>籍凝、<hr>周瞎、<img>、<input>饵蒂、<link>声诸、<meta>
不常見(jiàn)的空元素：<area>、<base>退盯、<col>彼乌、<command>泻肯、<embed>、<keygen>慰照、<param>灶挟、<source> <track>、<wbr>

什么是可選標(biāo)簽毒租？為什么要使用它稚铣？

在 HTML 中，某些元素具有可選標(biāo)簽墅垮。實(shí)際上惕医，即使元素本身是必需的，也可以從 HTML 文檔中完全刪除某些元素的開(kāi)始和結(jié)束標(biāo)簽。
p，li齿税，td挖函，tr，th，html，head，body 等椒楣。如：

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.

您不必提供 </p> 結(jié)束標(biāo)簽。瀏覽器會(huì)檢測(cè)到它需要它們牡肉，并且無(wú)論如何都會(huì)正確顯示在 DOM 中捧灰。但這可能帶給你編寫上的困難！
您可以節(jié)省一些字節(jié)并減少需要在 html 文件中下載的字節(jié)统锤。

為了便于閱讀毛俏，當(dāng)您的標(biāo)簽內(nèi)有內(nèi)容/文本時(shí)，帶上結(jié)束標(biāo)簽饲窿。

簡(jiǎn)述一下 src 與 href 的區(qū)別煌寇？

src 用于引用資源，替換當(dāng)前元素逾雄；href 用于在當(dāng)前文檔和引用資源之間確立聯(lián)系阀溶。
href（hyperReference）即超文本引用：瀏覽器遇到并行下載資源，不阻塞頁(yè)面解析鸦泳，與 link 引入 css 一樣银锻，瀏覽器并行下載 css 不阻塞頁(yè)面解析
- href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接做鹰，用于超鏈接击纬。
src （resource）即資源：當(dāng)瀏覽器遇到 src 時(shí)，會(huì)暫停頁(yè)面解析钾麸，直到該資源下載或執(zhí)行完畢更振，這也是script 標(biāo)簽之所以放底部的原因
- 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í)行完畢，圖片和框架等元素也如此睡汹，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)肴甸。這也是為什么將 js 腳本放在底部而不是頭部。

img 上 title 與 alt

title 是鼠標(biāo)放在圖片上面時(shí)顯示的文字囚巴，title 是對(duì)圖片的描述和進(jìn)一步的說(shuō)明原在。
alt 定義了圖像的備用文本描述。
tips：瀏覽器并非總是會(huì)顯示圖像彤叉。當(dāng)有下列情況時(shí)庶柿，alt 屬性可以為圖像提供替代的信息：
- 非可視化瀏覽器（Non-visual browsers）（比如有視力障礙的人使用的音頻瀏覽器）
- 用戶選擇不顯示圖像（比如為了節(jié)省帶寬，或出于隱私等考慮不加載包括圖片在內(nèi)的第三方資源文件）
- 圖像文件無(wú)效秽浇，或是使用了不支持的格式
- 瀏覽器禁用圖像等
- tips：建議盡可能地通過(guò) alt 屬性提供一些有用的信息浮庐。

<!-- × -->
<img src="wenhao.jpg" alt="圖片" />

<!-- √ -->
<img src="wenhao.jpg" alt="滿臉問(wèn)號(hào)的男人" />

圖像上 alt 屬性的用途是什么？
- 如果用戶無(wú)法查看圖像柬焕，alt 屬性將為圖像提供可選信息审残。alt 屬性應(yīng)該用來(lái)描述任何圖像，除了那些僅用于裝飾目的的圖像斑举，在這種情況下搅轿，應(yīng)該將其留空。
- 裝飾性圖像應(yīng)具有空 alt 屬性富玷。
- 網(wǎng)絡(luò)爬蟲使用 alt 標(biāo)簽來(lái)理解圖像內(nèi)容璧坟，因此它們被認(rèn)為對(duì)搜索引擎優(yōu)化（SEO）很重要。
- 在 alt 標(biāo)簽的末尾增加可訪問(wèn)性赎懦。
img

為什么在 img 標(biāo)簽中使用 srcset 屬性雀鹃？請(qǐng)描述瀏覽器遇到該屬性后的處理過(guò)程。

為了設(shè)計(jì)響應(yīng)式圖片铲敛。我們可以使用兩個(gè)新的屬性 srcset 和 sizes 來(lái)提供更多額外的資源圖像和提示褐澎，幫助瀏覽器選擇正確的一個(gè)資源。
srcset：定義了我們?cè)试S瀏覽器選擇的圖像集伐蒋，以及每個(gè)圖像的大小工三。
sizes：定義了一組媒體條件（例如屏幕寬度）并且指明當(dāng)某些媒體條件為真時(shí)迁酸，什么樣的圖片尺寸是最佳選擇。
處理過(guò)程：
- 查看設(shè)備寬度
- 檢查 sizes 列表中哪個(gè)媒體條件是第一個(gè)為真
- 查看給予該媒體查詢的槽大小
- 加載 srcset 列表中引用的最接近所選的槽大小的圖像

<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">

響應(yīng)式圖像：如果您只是在更改分辨率俭正，請(qǐng)使用srcset奸鬓。
響應(yīng)式圖像教程

noscript 標(biāo)簽的作用

<noscript> 元素用來(lái)定義在腳本未被執(zhí)行時(shí)的替代內(nèi)容（文本）。
<noscript> 標(biāo)簽中的內(nèi)容只有在下列情況下才會(huì)顯示出來(lái)：
- 瀏覽器不支持腳本
- 瀏覽器支持腳本掸读，但腳本被禁用

<!-- 給予用戶友好的提示! -->
<noscript>您的瀏覽器不支持 JavaScript串远！</noscript>

label 的作用是什么？是怎么用的儿惫？

label 標(biāo)簽定義表單控制間的關(guān)系澡罚，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上肾请。
兩種用法：一種是 id 綁定留搔，一種是嵌套

<label for="select">愛(ài)我</label>
<input type="radio" id="select" name="love" value="love" />
<label>恨我<input type="radio" name="hate" value="hate" /></label>

title 與 h1 的區(qū)別、b 與 strong 的區(qū)別铛铁、i 與 em 的區(qū)別隔显？

<title> 與 <h1> 的區(qū)別
- <title> 用于網(wǎng)站信息標(biāo)題，一個(gè)網(wǎng)站可以有多個(gè) title饵逐，seo 權(quán)重高于 h1括眠；
- <h1> 概括的是文章主題，一個(gè)頁(yè)面最好只用一個(gè) h1倍权，seo 權(quán)重低于 title掷豺。
<b> 與 <strong> 的區(qū)別
- <b> 為了加粗而加粗
- <strong> 為了標(biāo)明重點(diǎn)內(nèi)容而加粗，有語(yǔ)氣加強(qiáng)的含義
<i> 與 <em> 的區(qū)別
- <i> 為了斜體而斜體薄声，<em> 為了標(biāo)明重點(diǎn)而斜體萌业，且對(duì)于搜索引擎來(lái)說(shuō) <strong> 和 <em> 比 <b> 和 <i> 要重視的多

`rel="noopener"` 應(yīng)在什么場(chǎng)景下使用，為什么奸柬？

rel="noopener" 是 <a> 標(biāo)簽的一個(gè)屬性生年。他可以禁止打開(kāi)的新頁(yè)面中使用 window.opener 屬性，這樣一來(lái)打開(kāi)的新頁(yè)面就不能通過(guò) window.opener 去操作你的頁(yè)面廓奕。
新頁(yè)面可以通過(guò) window.opener.location = newURL 將你的頁(yè)面導(dǎo)航至任何網(wǎng)址抱婉。

<!-- home.html -->
<a href="./home.html" target="_blank">home</a>
<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->

<!-- details.html -->
<h1>點(diǎn)關(guān)注 不迷路！</h1>
<script>
  window.opener.location = 'https://juejin.cn/user/96412754251390'
</script>

如果您正在使用帶有 target ="_ blank" 的外部鏈接桌粉，則您的鏈接應(yīng)具有 rel="noopener" 屬性蒸绩，以防止標(biāo)簽被挪用。如果您需要支持舊版本的 Firefox铃肯，請(qǐng)使用 rel="noopener noreferrer"
總結(jié)：rel="noopener" 應(yīng)用于超鏈接患亿，防止打開(kāi)的鏈接操縱源頁(yè)面

為什么最好把 link 標(biāo)簽放在 head 之間？

把 <link> 標(biāo)簽放在 <head></head> 之間是規(guī)范要求的內(nèi)容。此外步藕，這種做法可以讓頁(yè)面逐步呈現(xiàn)惦界，提高了用戶體驗(yàn)。
將樣式表放在文檔底部附近咙冗，會(huì)使許多瀏覽器（包括 Internet Explorer）不能逐步呈現(xiàn)頁(yè)面沾歪。
一些瀏覽器會(huì)阻止渲染，以避免在頁(yè)面樣式發(fā)生變化時(shí)雾消，重新繪制頁(yè)面中的元素灾搏。
這種做法可以防止呈現(xiàn)給用戶空白的頁(yè)面或沒(méi)有樣式的內(nèi)容。

為什么最好把 JS 的 script 標(biāo)簽放在 body 之前立润，有例外情況嗎狂窑？

腳本在下載和執(zhí)行期間會(huì)阻止 HTML 解析。把 <script> 標(biāo)簽放在底部桑腮，保證 HTML 首先完成解析蕾域，將頁(yè)面盡早呈現(xiàn)給用戶。
例外情況：當(dāng)你的腳本里包含 document.write() 時(shí)到旦。
- 但是現(xiàn)在，document.write() 不推薦使用巨缘。
- 同時(shí)添忘，將 <script> 標(biāo)簽放在底部，意味著瀏覽器不能開(kāi)始下載腳本若锁，直到整個(gè)文檔（document）被解析搁骑。對(duì)此比較好的做法是，<script> 使用 defer 屬性又固，放在 <head> 中仲器。

HTML 全局屬性（global attribute）有哪些

accesskey：設(shè)置快捷鍵，提供快速訪問(wèn)元素
class：為元素設(shè)置類標(biāo)識(shí)仰冠，多個(gè)類名用空格分開(kāi)乏冀，CSS 和 JavaScript 可通過(guò) class 屬性獲取元素
contenteditable：指定元素內(nèi)容是否可編輯
contextmenu：自定義鼠標(biāo)右鍵彈出菜單內(nèi)容
data-*：為元素增加自定義屬性
dir：設(shè)置元素文本方向
draggable：設(shè)置元素是否可拖拽
dropzone：設(shè)置元素拖放類型： copy，move洋只，link
hidden：表示一個(gè)元素是否與文檔辆沦。樣式上會(huì)導(dǎo)致元素不顯示，但是不能用這個(gè)屬性實(shí)現(xiàn)樣式效果
id：元素 id识虚，文檔內(nèi)唯一
lang：元素內(nèi)容的的語(yǔ)言
spellcheck：是否啟動(dòng)拼寫和語(yǔ)法檢查
style：行內(nèi) CSS 樣式
tabindex：設(shè)置元素可以獲得焦點(diǎn)肢扯，通過(guò) tab 可以導(dǎo)航
title：元素相關(guān)的建議信息
translate：元素和子孫節(jié)點(diǎn)內(nèi)容是否需要本地化

請(qǐng)描述下 SEO 中的 TDK？

在 SEO 中担锤，所謂的 TDK 其實(shí)就是 title蔚晨、description、keywords 這三個(gè)標(biāo)簽
- title 標(biāo)題標(biāo)簽
- description 描述標(biāo)簽
- keywords 關(guān)鍵詞標(biāo)簽

你有使用過(guò)什么模板引擎肛循？為什么使用它铭腕？

常用模板引擎：Pug（以前叫 Jade）银择、 Haml、Handlebars谨履、art-template 等
這些模版語(yǔ)言大多是相似的欢摄，都提供了用于展示數(shù)據(jù)的內(nèi)容替換和過(guò)濾器的功能
大部分模版引擎都支持自定義過(guò)濾器，以展示自定義格式的內(nèi)容笋粟。

!!! 5 
html 
  head 
    title = HelloWorld 
  body 
    h1使用Jade創(chuàng)建HelloWorld網(wǎng)頁(yè)

編譯為

<!DOCTYPE html>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1>使用Jade創(chuàng)建HelloWorld網(wǎng)頁(yè)</h1>
  </body>
</html>

它幫助我們用更少的代碼更快地編寫 HTML 代碼怀挠。

iframe 是什么？有什么優(yōu)缺點(diǎn)害捕？

HTML內(nèi)聯(lián)框架元素（<iframe>）表示嵌入的瀏覽上下文绿淋。它能夠?qū)⒘硪粋€(gè) HTML 頁(yè)面嵌入到當(dāng)前頁(yè)面中。
iframe 是用來(lái)在網(wǎng)頁(yè)中插入第三方頁(yè)面尝盼，早期的頁(yè)面使用 iframe 主要是用于導(dǎo)航欄這種很多頁(yè)面都相同的部分吞滞，這樣在切換頁(yè)面的時(shí)候避免重復(fù)下載。
tips：可以將提示文字放在 <iframe></iframe> 之間盾沫，來(lái)提示某些不支持 iframe 的瀏覽器
優(yōu)點(diǎn)
- 便于修改裁赠，模擬分離，像一些信息管理系統(tǒng)會(huì)用到赴精。
- iframe 能夠原封不動(dòng)的把嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)佩捞。
- 如果有多個(gè)網(wǎng)頁(yè)引用 iframe，那么你只需要修改 iframe 的內(nèi)容蕾哟，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁(yè)面內(nèi)容的更改一忱，方便快捷谭确。
- 網(wǎng)頁(yè)如果為了統(tǒng)一風(fēng)格帘营，頭部和版本都是一樣的，就可以寫成一個(gè)頁(yè)面逐哈，用 iframe 來(lái)嵌套芬迄，可以增加代碼的可重用。
- 并行加載腳本
- security sandbox（安全沙盒）
- 解決加載緩慢的第三方內(nèi)容昂秃。如：圖標(biāo)和廣告等的加載問(wèn)題薯鼠。
缺點(diǎn)
- 沒(méi)有語(yǔ)意。搜索引擎無(wú)法解讀這種頁(yè)面械蹋，不利于SEO
- 會(huì)產(chǎn)生很多頁(yè)面出皇，不容易管理。
- 即使內(nèi)容為空哗戈，加載也需要時(shí)間郊艘。
- iframe 的創(chuàng)建比一般的 DOM 元素慢了 1-2 個(gè)數(shù)量級(jí)
- 很多的移動(dòng)設(shè)備（PDA手機(jī)）無(wú)法完全顯示框架，設(shè)備兼容性差。
- iframe 框架頁(yè)面會(huì)增加服務(wù)器的 http 請(qǐng)求纱注，對(duì)于大型網(wǎng)站是不可取的畏浆。
- iframe 會(huì)阻塞主頁(yè)面的 onload 事件。
- iframe 和主頁(yè)面共享連接池狞贱，而瀏覽器對(duì)相同域的連接有限制刻获，所以會(huì)影響頁(yè)面的并行加載。
- 如果需要使用 iframe瞎嬉，最好通過(guò) javascript 動(dòng)態(tài)給 iframe 添加 src 屬性值蝎毡，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題
- iframe 框架結(jié)構(gòu)有時(shí)會(huì)讓人感到迷惑，如果框架個(gè)數(shù)多的話氧枣，可能會(huì)出現(xiàn)上下沐兵、左右滾動(dòng)條，會(huì)分散訪問(wèn)者的注意力便监，用戶體驗(yàn)度差扎谎。
tips：除非特殊需要，一般不推薦使用烧董。目前 iframe 的優(yōu)點(diǎn)完全可以使用 Ajax 實(shí)現(xiàn)毁靶，因此已經(jīng)沒(méi)有必要使用 iframe 了。
iframe

div+css 的布局較 table 布局有什么優(yōu)點(diǎn)逊移？

分離方便预吆、改版快淤齐、清晰簡(jiǎn)潔填具、seo
- 表現(xiàn)與結(jié)構(gòu)相分離卢未。
- 改版的時(shí)候更方便，只要改 css 文件胶背。
- 頁(yè)面加載速度更快、結(jié)構(gòu)化清晰喘先、頁(yè)面顯示簡(jiǎn)潔钳吟。
- 易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前窘拯。

很多網(wǎng)站不常用 table红且，iframe 這兩個(gè)元素，知道原因嗎涤姊？

因?yàn)闉g覽器頁(yè)面渲染的時(shí)候是從上至下的暇番，而 table 和 iframe 這兩種元素會(huì)改變這樣渲染規(guī)則，他們需要等待自己元素內(nèi)的內(nèi)容加載完才整體渲染思喊。用戶體驗(yàn)會(huì)很不友好壁酬。

還有一些其他的影響：詳細(xì)參考為什么我們不建議用Table布局，iframe 的話本文有所提及，可以翻閱查找

HTML 中的 lang 屬性有什么作用舆乔？

通過(guò)在 css:lang() 偽類拼寫和語(yǔ)法檢查器中使用頁(yè)面樣式來(lái)幫助搜索引擎進(jìn)行語(yǔ)言檢測(cè)

:lang(zh) {
  font-size: 1.5em;
}

HTML的lang屬性的作用
HTML中html元素的lang屬性的說(shuō)明
網(wǎng)頁(yè)頭部的聲明應(yīng)該是用 lang="zh" 還是 lang="zh-cn"岳服？

什么 `enctype='multipart/form-data'` 意思？

enctype 屬性指定將表單數(shù)據(jù)提交到服務(wù)器時(shí)應(yīng)如何編碼希俩。

HTML5

HTML5 是 HTML（超文本標(biāo)記語(yǔ)言）最新的修訂版本吊宋，由萬(wàn)維網(wǎng)聯(lián)盟（W3C）于 2014 年 10 月完成標(biāo)準(zhǔn)制定。目標(biāo)是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)颜武。它是一種為萬(wàn)維網(wǎng)構(gòu)建和顯示內(nèi)容的語(yǔ)言璃搜，萬(wàn)維網(wǎng)是互聯(lián)網(wǎng)的核心技術(shù)。

HTML5 向后兼容舊瀏覽器嗎盒刚？

HTML5 被設(shè)計(jì)成盡可能向后兼容現(xiàn)有的 web 瀏覽器

HTML5 為什么只需要寫 `<!DOCTYPE html>`腺劣？

HTML5 不基于 SGML，因此不需要對(duì) DTD 進(jìn)行引用因块，但是需要 DOCTYPE 來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）
HTML4.01 基于 SGML橘原，所以需要對(duì) DTD 進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型涡上。
其中趾断，SGML 是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言，簡(jiǎn)單的說(shuō)吩愧，就是比 HTML芋酌，XML 更老的標(biāo)準(zhǔn)，這兩者都是由 SGML 發(fā)展而來(lái)的雁佳。但是脐帝，HTML5 不是疚顷。

HTML5 文檔類型和字符集是封字？

HTML5 文檔類型：<!DOCTYPE html>
HTML5 字符集編碼：<meta charset="UTF-8" />

HTML5 有哪些新特性

在 HTML5 中窗市，DOM 拓展了三種選擇器 document.querySelector咨察、document.querySelectorAll、matchesSelector()
拖拽釋放（Drag and drop）API
繪畫 canvas缎浇，支持內(nèi)聯(lián) SVG扎拣。支持 MathML
媒體播放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)赴肚，瀏覽器關(guān)閉后數(shù)據(jù)不丟失素跺；sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
更好的實(shí)踐 web 語(yǔ)義化，比如 article誉券、footer指厌、header、nav踊跟、section 等語(yǔ)義標(biāo)簽
表單控件：calendar踩验、date鸥诽、time、email箕憾、url 等
新增表單元素：datalist牡借、keygen、output
新的技術(shù)：多線程編程的 webWorker袭异，全雙工通信協(xié)議 webSocket 和地理定位 Geolocation

什么是 data-* 屬性钠龙？

自定義數(shù)據(jù)屬性以 data 開(kāi)始，并將根據(jù)您的需求進(jìn)行命名
您可以使用 JavaScript 獲得這些屬性的值
在 JavaScript 框架變得流行之前御铃，前端開(kāi)發(fā)者經(jīng)常使用 data-* 屬性碴里，把額外數(shù)據(jù)存儲(chǔ)在 DOM 自身中，而當(dāng)時(shí)沒(méi)有其他 Hack 手段（比如使用非標(biāo)準(zhǔn)屬性或 DOM 上額外屬性）上真。它用于存儲(chǔ)頁(yè)面或應(yīng)用程序?qū)Ｓ玫淖远x數(shù)據(jù)咬腋，對(duì)于這些數(shù)據(jù)，沒(méi)有更合適的屬性或元素睡互。
而現(xiàn)在根竿，不鼓勵(lì)使用 data-* 屬性。原因：
- 用戶可以通過(guò)在瀏覽器中利用檢查元素湃缎，輕松地修改屬性值犀填，借此修改數(shù)據(jù)
- 數(shù)據(jù)模型最好存儲(chǔ)在 JavaScript 本身中，并利用框架提供的數(shù)據(jù)綁定嗓违，使之與 DOM 保持更新

HTML5 中不推薦使用哪些 HTML 標(biāo)簽九巡？

<acronym>：建議用 <abbr>
<applet>：建議用 <object>
<basefont>：建議用 <font>
<bgsound>：建議用 <audio>
<b>：不推薦使用，建議用 font-weight 代替
<big>：不推薦使用蹂季，建議用 font-size 代替
<blink>：建議采用 animation 代替
<center>：不推薦使用冕广，建議用 text-align: center 代替
<dir>：建議根據(jù)語(yǔ)義采用 <ul>、<ol> 或者 <dl>
<font>：不推薦使用偿洁，建議用 CSS 代替撒汉，以便更好控制。
<frame>：不推薦使用涕滋，建議用 <iframe> 代替睬辐。但 <iframe> 現(xiàn)在又可以用 ajax 來(lái)代替
<frameset>：不推薦使用
<hgroup>：不推薦使用
<isindex>：建議用 <input>
<listing>：建議用 <pre> 或使用語(yǔ)義更好的 <code>
<marquee>：不推薦使用
<multicol>：建議用 <input>
<nobr>：不推薦使用，建議用 white-space 代替
<noframes>：不推薦使用宾肺，建議用幀 CSS 代替
<plaintext>：建議用 <pre> 或使用語(yǔ)義更好的 <code>
<u>：不推薦使用溯饵，建議用幀 font-style 代替
<spacer>：不推薦使用
<strike>：建議用語(yǔ)義更好的 <del> 或 <s>
<tt>：建議用 <code> 或 <span>
<xmp>：建議用帶有 CSS 的 <pre> 或使用語(yǔ)義更好的 <code>
HTML5與HTML4的區(qū)別
HTML 元素參考

你如何理解 Web 的語(yǔ)義化?

web 語(yǔ)義化是指通過(guò) HTML 標(biāo)簽表示頁(yè)面包含的信息，包含了 HTML 標(biāo)簽的語(yǔ)義化和 CSS 命名的語(yǔ)義化锨用。
HTML 標(biāo)簽的語(yǔ)義化是指：通過(guò)使用包含語(yǔ)義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)
CSS 命名的語(yǔ)義化是指：為 HTML 標(biāo)簽添加有意義的 class丰刊，id 補(bǔ)充未表達(dá)的語(yǔ)義，如Microformat通過(guò)添加符合規(guī)則的 class 描述信息

HTML 為什么需要結(jié)構(gòu)語(yǔ)義化

便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)增拥。
在沒(méi)有 CSS 樣式的情況下啄巧，能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)寻歧。
屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)簽來(lái) "讀" 你的網(wǎng)頁(yè)。
搜索引擎的爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重秩仆，利于 SEO码泛。

它用于改進(jìn)文檔的自動(dòng)化處理。自動(dòng)處理發(fā)生的頻率比你意識(shí)到的要高——搜索引擎中的每個(gè)網(wǎng)站排名都是從所有網(wǎng)站的自動(dòng)處理中派生出來(lái)的澄耍。

<!-- 機(jī)器：這種結(jié)構(gòu)看起來(lái)可能是導(dǎo)航元素弟晚？ -->
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

<!-- 機(jī)器: 這是導(dǎo)航元素！ -->
<nav class="some-meaningless-class"><ul><li><a>...</nav>

為什么要使用HTML5語(yǔ)義標(biāo)簽而不是div逾苫？
我應(yīng)該為圖標(biāo)使用 <i> 標(biāo)簽而不是 <span>卿城？
<section> 和 <div>之間有什么區(qū)別？

什么是語(yǔ)義和非語(yǔ)義元素铅搓？

語(yǔ)義元素：對(duì)瀏覽器和開(kāi)發(fā)人員都清楚地描述了其含義瑟押。例如：<form>，<table>星掰，<figcaption>多望，<figure>，<header>氢烘，<footer>怀偷，<main>，<aside>播玖，<article>椎工，<section>，<nav>蜀踏，<mark>维蒙，<h1~h6>，<details>果覆，<summary>颅痊，<time> 明確規(guī)定其含義。
非語(yǔ)義元素：<div>局待，<span> 等不包含任何含義斑响。

簡(jiǎn)述 HTML5 一些語(yǔ)義的用法

<header> 用于包含有關(guān)頁(yè)面某個(gè)部分的介紹性和導(dǎo)航信息。這可以包括章節(jié)標(biāo)題钳榨、作者姓名舰罚、出版時(shí)間和日期、目錄或其他導(dǎo)航信息重绷。
<article> 是用來(lái)存放一個(gè)自成體系的作文沸停，在邏輯上可以在頁(yè)面之外獨(dú)立地重新創(chuàng)建膜毁，而不會(huì)失去它的意義昭卓。個(gè)人博客文章或新聞故事就是很好的例子愤钾。
<section> 是一個(gè)靈活的容器，用于保存共享公共信息主題或目的的內(nèi)容候醒。
<footer> 用于保存應(yīng)該出現(xiàn)在內(nèi)容節(jié)末尾的信息能颁，并包含有關(guān)該節(jié)的附加信息。作者姓名倒淫、版權(quán)信息和相關(guān)鏈接是此類內(nèi)容的典型示例伙菊。
<main> 元素表示 body 文檔的主要內(nèi)容。主要內(nèi)容區(qū)域由與文檔的中心主題或應(yīng)用程序的中心功能直接相關(guān)或擴(kuò)展的內(nèi)容組成敌土。
HTML5 中的語(yǔ)義

Canvas 和 SVG

Canvas 和 SVG 都允許您在瀏覽器中創(chuàng)建圖形镜硕，但是它們?cè)诟旧鲜遣煌摹?/li>

SVG

SVG 意為可縮放矢量圖形（Scalable Vector Graphics）是一種基于 XML 的圖像格式，用于為 web 定義基于向量的二維圖形返干。與光柵圖像（例如 .jpg兴枯、.gif、.png 等）不同矩欠，矢量圖像可以在不損失圖像質(zhì)量的情況下進(jìn)行任何程度的放大或縮小财剖。

<!-- SVG 是矢量和聲明性的 -->
<svg viewBox="0 0 200 200">
    <circle cx="10" cy="10" r="10" />
</svg>

Canvas

Canvas 是一個(gè) HTML5 元素，用于在網(wǎng)頁(yè)上繪制圖形癌淮。它是一個(gè)帶有 "立即模式" 圖形應(yīng)用程序編程接口（API）的位圖躺坟，用于在其上繪圖。<canvas> 元素只是圖形的容器乳蓄。為了繪制圖形咪橙，你應(yīng)該使用 js 畫布在繪制路徑、方框虚倒、圓匣摘、文本和添加圖像時(shí)有幾種策略。

HTML <canvas> 元素提供了一個(gè)空白繪圖區(qū)域裹刮，可通過(guò) JavaScript API（Canvas API 或 WebGL API）繪制圖形及圖形動(dòng)畫
- 通過(guò) Javascript 來(lái)繪制 2D 圖形
- 是逐像素進(jìn)行渲染的
- 其位置發(fā)生改變音榜，會(huì)重新進(jìn)行繪制

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
</script>

Canvas 的一些預(yù)期用途包括構(gòu)建圖形、動(dòng)畫捧弃、游戲和圖像合成赠叼。
Canvas 元素用于在網(wǎng)頁(yè)上繪制圖形，該元素標(biāo)簽強(qiáng)大之處在于可以直接在 HTML 上進(jìn)行圖形操作

Canvas 和 SVG 的區(qū)別

Canvas	SVG
基于柵格（由像素組成）	基于矢量（由形狀組成）违霞，非常適合 UI/UX 動(dòng)畫
依賴分辨率	不依賴分辨率
不支持事件處理器	支持事件處理器
文本渲染能力差	良好的文字渲染功能
使用更多的對(duì)象或更小的曲面或兩者都提供更好的性能	復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快）
最適合圖像密集型的游戲嘴办，其中的許多對(duì)象會(huì)被頻繁重繪	不適合游戲應(yīng)用
僅通過(guò)腳本修改	通過(guò)腳本和 CSS 修改
能夠以 .png 或 .jpg 格式保存結(jié)果圖像	多個(gè)圖形元素，成為頁(yè)面 DOM 樹(shù)的一部分
可伸縮性差买鸽。不適合以較高分辨率打印涧郊。可能發(fā)生像素化	更好的可擴(kuò)展性眼五∽彼遥可以任何分辨率高質(zhì)量打印彤灶。不會(huì)發(fā)生像素化

100 * 100的 canvas 占多少內(nèi)存？

100*100的 canvas 占多少內(nèi)存

您如何為您的網(wǎng)站選擇 svg 或 canvas批旺？

如果你知道你需要矢量藝術(shù)幌陕，則選擇 SVG。與 JPG 之類的柵格圖形相比汽煮，矢量藝術(shù)在視覺(jué)上是清晰的搏熄，并且文件大小通常較小。
像一個(gè)小的平面顏色圖標(biāo)暇赤，這顯然是 SVG 的領(lǐng)域心例。
像互動(dòng)游戲，那顯然是 Canvas鞋囊。

新標(biāo)簽

新語(yǔ)義和結(jié)構(gòu)元素

canvas 標(biāo)簽定義圖形契邀，比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API

<canvas width="300" height="300">
  抱歉失暴，您的瀏覽器不支持canvas元素
</canvas>

figure 代表一段獨(dú)立的內(nèi)容坯门，經(jīng)常與說(shuō)明（caption）配合使用，并且作為一個(gè)獨(dú)立的引用單元
figcaption 是與其相關(guān)聯(lián)的圖片的說(shuō)明/標(biāo)題逗扒，用于描述其父節(jié)點(diǎn) figure 元素里的其他數(shù)據(jù)古戴。

<style>
  figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
  }
  img {
    max-width: 220px;
    max-height: 150px;
  }
  figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
  }
</style>

<figure>
  <img src="1.jpg" alt="索隆">
  <figcaption>An elephant at sunset</figcaption>
</figure>

summary 利用了一個(gè) details 元素的一個(gè)內(nèi)容的摘要，標(biāo)題或圖例矩肩。
details 可創(chuàng)建一個(gè)掛件现恼，僅在被切換成展開(kāi)狀態(tài)時(shí)，它才會(huì)顯示內(nèi)含的信息黍檩。
- 標(biāo)簽用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)叉袍。
- 給他來(lái)點(diǎn)動(dòng)畫效果：如何對(duì)Details元素進(jìn)行動(dòng)畫處理

<style>
  details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
  }
  summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
  }
  details[open] {
    padding: 0.5em;
  }
  details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
  }
</style>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

header、nav刽酱、main喳逛、footer、section棵里、article

<section>
  <header></header>
  <main>
    <nav></nav>
  </main>
  <footer></footer>
</section>
<article></article>

map 定義一個(gè)客戶端圖像映射润文。圖像映射（image-map）指帶有可點(diǎn)擊區(qū)域的一幅圖像
- area 元素永遠(yuǎn)嵌套在 map 元素內(nèi)部。area 元素可定義圖像映射中的區(qū)域殿怜。

<div>
  <img
    src="../img/cs.jpg"
    width="500"
    height="500"
    alt="pic"
    usemap="#circusmap"
  />
  <map name="circusmap">
    <area shape="rect" coords="90,18,202,186" />
    <area shape="rect" coords="222,141,318, 256"  />
    <area shape="circle" coords="343,111,455, 267"  />
    <area shape="rect" coords="35,328,143,500"  />
  </map>
</div>

mark 突出顯示 html 中的文本典蝌。在這個(gè)標(biāo)簽出現(xiàn)之前，常使用使用 em 或 strong 賦予突出顯示的內(nèi)容一些語(yǔ)義⊥访眨現(xiàn)在不推薦了募壕。如果需要突出顯示悴品，請(qǐng)使用此標(biāo)簽

<p><mark>Lio</mark></p>

默認(rèn)背景顏色 <mark> 是黃色

/* default style */
mark {
  background: yellow;
  color: black;
}

可以使用 CSS 自定義樣式

mark {
  background: red;
  color: white;
}

meter 標(biāo)簽定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測(cè)量逝慧。也被稱為 gauge（尺度）。
- <meter> 標(biāo)簽不應(yīng)用于指示進(jìn)度（在進(jìn)度條中）笑陈。如果標(biāo)記進(jìn)度條，請(qǐng)使用 <progress> 標(biāo)簽侧纯。

<div>
  <meter value="4" min="0" max="10">4/10</meter><br />
  <meter value="0.6">60%</meter>
</div>

progress 標(biāo)簽標(biāo)示任務(wù)的進(jìn)度（進(jìn)程）。

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

time 定義日期或時(shí)間甲脏。

<p>The concert starts at <time datetime="2020-06-01T20:00:00">20:00</time>.</p>

bdi 允許您設(shè)置一段文本眶熬，使其脫離其父元素的文本方向設(shè)置。

<p dir="ltr">Lorem ipsum <bdi>dolor</bdi> sit amet.</p>

dialog 標(biāo)簽定義一個(gè)對(duì)話框块请、確認(rèn)框或窗口娜氏。

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

新多媒體元素

source 定義視頻源 <video> 和 <audio>
track 定義文本軌道
video 定義視頻元素
- HTML5支持 mp4、webm 和 ogg 格式的視頻墩新。其中 Ogg 格式在 IE 中不受任何方式的支持
- src 指定視頻的來(lái)源贸弥。
- 當(dāng)不給 video 設(shè)置高度和寬度時(shí)，瀏覽器不知道視頻的大小海渊，當(dāng)視頻加載時(shí)绵疲，頁(yè)面將發(fā)生變化或閃爍

<!-- 1. 用 src 屬性定義 -->
<video
  src="video.mp4"
  controls
></video>

<!-- 2. 定義 source 標(biāo)簽 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    你的瀏覽器不支持 HTML5 viedo 標(biāo)簽。
</video>

embed 將外部?jī)?nèi)容嵌入文檔中的指定位置臣疑。

<embed
  src="https://juejin.cn/user/96412754251390"
  height="700"
  width="100%"
/>

<embed
  type="video/webm"
  src="/media/cc0-videos/flower.mp4"
  height="700"
  width="100%"
/>

audio 定義音頻內(nèi)容
- HTML5 支持 MP3盔憨、Wav 和 Ogg 格式的音頻。

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  您的瀏覽器不支持 HTML5 audio 標(biāo)簽讯沈。
</audio>

新表單元素

datalist
- <datalist> 標(biāo)簽定義選項(xiàng)列表郁岩。與 input 元素配合使用該元素，來(lái)定義 input 可能的值缺狠。
- datalist 及其選項(xiàng)不會(huì)被顯示出來(lái)问慎，它僅僅是合法的輸入值列表。
- 使用 input 元素的 list 屬性來(lái)綁定 datalist

<label for="course">選擇學(xué)習(xí)課程：</label>
<input list="target" name="course" id="course" />
<datalist id="target">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="Node"></option>
  <option value="Vue"></option>
  <option value="React"></option>
  <option value="Webpack"></option>
</datalist>

keygen 該元素有助于生成密鑰和通過(guò)表單提交挤茄。
- keygen 必須在表單內(nèi)使用如叼。
- keygen 已經(jīng)從 Web 標(biāo)準(zhǔn)中刪除，請(qǐng)使用 JavaScript 生成密鑰
- MDN
output 標(biāo)簽定義不同類型的輸出穷劈，比如腳本的輸出薇正。

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
  0 <input type="range" id="a" value="50"> 100
  * <input type="number" id="b" value="1" /> =
  <output name="x" for="a b"></output>
</form>

HTML5 之前的一些元素

pre 標(biāo)簽可定義預(yù)格式化的文本。被包圍在 <pre> 標(biāo)簽中的文本通常會(huì)保留空格和換行符挖腰。而文本也會(huì)呈現(xiàn)為等寬字體。
strong 用于指示比周圍文本更重要的文本练湿，例如警告或錯(cuò)誤猴仑。從語(yǔ)義上講，它的重要性。它顯示為粗體
b 與 strong 非常相似辽俗，因?yàn)樗诧@示為粗體疾渣。然而，與它不同的是崖飘，它并沒(méi)有真正傳達(dá)出任何重要性榴捡，它更像是一種文體而非語(yǔ)義。
em 用于強(qiáng)調(diào)某個(gè)詞朱浴。它顯示為斜體

<strong>lorem</strong>
<b>lorem</b>
<em>lorem</em>

q 和 blockquote
- q 引號(hào)
- blockquote 塊引號(hào)

<q>lorem</q>
<blockquote>lorem</blockquote>

bdo 可以更改 HTML 文本的方向吊圾。
- rtl：從右到左。ltr：從左到右翰蠢。

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

使用 abbr 標(biāo)簽縮寫您的代碼项乒，當(dāng)你傳遞一個(gè)標(biāo)題時(shí)，它將創(chuàng)建一個(gè)工具提示
- <abbr> 不同瀏覽器的默認(rèn)樣式有些不同梁沧。在 Chrome 和 Firefox 中檀何，它將帶有下劃線，并且在懸停時(shí)將帶有 title 傳遞的值的工具提示廷支。如果您在 Safari 上打開(kāi)此頁(yè)面频鉴，則不會(huì)出現(xiàn)下劃線。此外恋拍，僅當(dāng)您具有 title 屬性時(shí)才顯示下劃線砚殿。
- 由于跨瀏覽器的差異，建議為 <abbr> 代碼加上自定義樣式芝囤。這樣似炎，您將在瀏覽器之間擁有一致的外觀

定義術(shù)語(yǔ)時(shí)，可以與 dfn 混合使用

<dfn>
  <abbr title="Today I learned">TIL</abbr> something awesome!   
</dfn>

指示的非縮寫詞并將其輸出到頁(yè)面上的括號(hào)中

abbr[title]::after {
  content: ' (' attr(title) ')';
}

利用 hover 狀態(tài)僅在點(diǎn)擊時(shí)顯示非縮寫詞

abbr[title]:hover::after {
  content: ' (' attr(title) ')';
}

使用 abbr 標(biāo)簽來(lái)指示在順序鍵盤導(dǎo)航中是可聚焦的 tabindex="0"悯姊，然后在聚焦時(shí)觸發(fā)我們的非縮寫內(nèi)容羡藐。

<abbr title="Today I learned" tabindex="0">TIL</abbr>

abbr[title]:focus::after {
  content: ' (' attr(title) ')';
}

也可以使用一些提示工具，如 Bootstrap 的工具提示組件悯许。

kbd 和 code
- kbd：表示用戶從鍵盤仆嗦、語(yǔ)音輸入或任何其他文本輸入設(shè)備輸入的文本。
- code：表示計(jì)算機(jī)代碼的簡(jiǎn)短片段的文本先壕。
- 兩者使用同樣的 monospace 字體瘩扼。但是在語(yǔ)義上它們是不同的。最好使用 kbd 代替 code

<kbd>Ctrl</kbd> + <kbd>C</kbd>
<code>Ctrl</code> + <code>C</code>

/* Default Style */
kbd {
  font-family: monospace;
}

kbd, code {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
}

s 和 del 刪除線
- s 當(dāng)您嘗試表示不再相關(guān)或不再準(zhǔn)確的事物時(shí)垃僚，使用它集绰。
- del 當(dāng)您要指示某些內(nèi)容已從文檔中刪除時(shí)，使用它谆棺。
- 它們都是刪除線栽燕。但是，它們傳達(dá)了關(guān)于內(nèi)容的不同含義。

<s>Lorem ipsum dolor sit amet.</s>

<!-- 常使用于商品價(jià)格折扣 -->
<span><s>$1999</s></span>
<span style="color: red;">$99</span>

<del>Lorem ipsum dolor sit amet.</del>

<!-- 常使用于待辦事項(xiàng)清單 -->
<ul>
  <li><del>打卡</del></li>
  <li>喝杯咖啡</li>
</ul>

ins

<p>
  Lorem ipsum
  <ins>dolor sit amet consectetur adipisicing elit.</ins> Perferendis, rem.
</p>

20 HTML Elements for Better Text Semantics
有哪些被低估未被廣泛使用的有用的 HTML標(biāo)簽碍岔？

新屬性

contenteditable
- contenteditable 屬性應(yīng)用于任何HTML元素浴讯，它可以像 input 或 <textare> 那樣工作編輯它們
- 您可以為其添加事件監(jiān)聽(tīng)器，監(jiān)聽(tīng)其內(nèi)容變化
- contenteditable 屬性值有3個(gè)不同的值：true蔼啦、false榆纽、inherit

<div contenteditable="true">
  <h1>元素可編輯</h1>
</div>
<div contenteditable="false">
  <h1>元素不可編輯</h1>
</div>
<div contenteditable="inherit">
  <h1>元素繼承其父元素的可編輯狀態(tài)</h1>
</div>

input
- required 必須輸入內(nèi)容。
- autofocus 屬性能夠讓 button捏肢，input 或 textarea 元素在頁(yè)面加載完成時(shí)自動(dòng)成為頁(yè)面焦點(diǎn)
- pattern 用正則表達(dá)式驗(yàn)證

<!-- required -->
<input type="text" id="username1" name="username" required>

<!-- autofocus -->
<input type="text" id="username2" name="username" >

<!-- pattern -->
<input
  type="password"
  name="password"
  placeholder="請(qǐng)輸入密碼"
  pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
  required
/>

HTML5 新的表單輸入類型奈籽？
- 新輸入類型（type 13種）：date、month猛计、week唠摹、time爆捞、number奉瘤、range、email煮甥、url盗温、color、datatime-local成肘、datetime卖局、search、tel
- search：用于搜索域双霍，比如站點(diǎn)搜索或 Google 搜索砚偶，域顯示為常規(guī)的文本域。
- url ：用于應(yīng)該包含 URL 地址的輸入域在提交表單時(shí)洒闸，會(huì)自動(dòng)驗(yàn)證 url 域的值染坯。
- email：用于應(yīng)該包含 e-mail 地址的輸入域，在提交表單時(shí)丘逸，會(huì)自動(dòng)驗(yàn)證 email 域的值单鹿。
- datetime：選取時(shí)間、日深纲、月仲锄、年（UTC 時(shí)間）
- date：選取日、月湃鹊、年
- month：選取月儒喊、年
- week：選取周和年
- time：選取時(shí)間（小時(shí)和分鐘）
- datetime-local：選取時(shí)間、日币呵、月澄惊、年（本地時(shí)間）
- number：用于應(yīng)該包含數(shù)值的輸入域，您還能夠設(shè)定對(duì)所接受的數(shù)字的限定。
- range：用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域掸驱，類型顯示為滑動(dòng)條肛搬。
- color：定義拾色器。
- tel：定義用于輸入電話號(hào)碼的字段毕贼。
- 其中 datetime 不在被推薦使用温赔，轉(zhuǎn)而使用 datatime-local

<!-- url -->
<input type="url" />

<!-- tel -->
<input type="tel" name="tel" />

<!-- search -->
<input type="search" />

<!-- email -->
<form action="/">
    <input type="email" />
    <input type="submit" value="提交">
</form>

<!-- date -->
<input type="date" value="2020-06-01" min="2020-01-01" max="2022-01-01" />

<!-- time -->
<input type="time" value="12:00" />

<!-- datetime -->
<input type="datetime" value="2020-09-12T23:00Z" />

<!-- week -->
<input type="week" />

<!-- month -->
<input type="month" value="2020-06-01" />

<!-- datetime-local -->
<input type="datetime-local" value="2020-09-06T23:00" />

<!-- number -->
<input type="number" name="number" min="2" max="10" value="3"  />

<!-- color -->
<input type="color" onchange="showColor(event)">

<!-- range -->
<input type="range" name="range" min="0" max="100" step="1" value="" />

hiden 屬性規(guī)定對(duì)元素進(jìn)行隱藏。
- 可以對(duì) hidden 屬性進(jìn)行設(shè)置鬼癣，使用戶在滿足某些條件時(shí)才能看到某個(gè)元素（比如選中復(fù)選框陶贼，等等）。然后待秃，可使用 JavaScript 來(lái)刪除 hidden 屬性拜秧，使該元素變得可見(jiàn)。

<div hidden>lorem</div>

Download
- 錨點(diǎn)標(biāo)簽的默認(rèn)設(shè)置是導(dǎo)航鏈接章郁，它將轉(zhuǎn)到您在 href 屬性中指定的鏈接
- 添加 download 屬性時(shí)枉氮，它將變成一個(gè)下載鏈接。提示您要下載的文件暖庄。下載的文件將具有與原始文件名相同的名稱聊替。但是，您也可以通過(guò)將值傳遞給 download 屬性來(lái)設(shè)置自定義文件名
- download 屬性僅適用于同源 URL培廓。如果的 href 來(lái)源與網(wǎng)站的來(lái)源不同惹悄，那么它將無(wú)法正常工作。換句話說(shuō)肩钠，您只能下載屬于該網(wǎng)站的文件泣港。此屬性遵循同源策略中的相同規(guī)則概述。

<a href="../img/cs.jpg" download>
    使用原始文件名下載本地文件
</a>

<a href="../img/cs.jpg" download='logo'>
  使用自定義文件名下載 logo.png
</a>

同源政策
瀏覽器同源政策及其規(guī)避方法

HTML5 的 form 如何關(guān)閉自動(dòng)完成功能价匠？

將 input 設(shè)置為 autocomplete=off

<!-- 不使用 autocomplete -->
<input type="email" name="email" />

<!-- 使用 autocomplete -->
<form action="/post">
    <input type="email" name="email" autocomplete="off" />
    <input type="submit" value="提交" />
</form>

`<script>` 標(biāo)簽上的 `defer` 和 `async` 屬性是什么当纱？

<script>：當(dāng)遇到腳本時(shí)，HTML 停止解析霞怀，腳本被獲取并立即執(zhí)行惫东。執(zhí)行結(jié)束后，HTML 解析繼續(xù)毙石。
defer 和 async 的作用：都是讓腳本的下載和執(zhí)行不阻塞頁(yè)面的渲染

區(qū)別：

defer 是推遲執(zhí)行廉沮，它是等到頁(yè)面渲染完畢，所有腳本下載完成徐矩，在 DOMContentLoaded 事件前按照腳本的在文檔中的順序執(zhí)行滞时；
async 是立即下載并執(zhí)行，加載和渲染后續(xù)文檔元素的過(guò)程將和 js 腳本的加載與執(zhí)行并行進(jìn)行（異步）

關(guān)于 defer滤灯，我們還要記住的是它是按照加載順序執(zhí)行腳本的
標(biāo)簽為 async 的腳本并不保證按照指定它們的先后順序執(zhí)行坪稽。對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的曼玩，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行窒百。
async 對(duì)于應(yīng)用腳本的用處不大黍判，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來(lái)說(shuō)卻是非常合適的篙梢。

<script src="longTime.js"></script>
<script src="longTime.js" defer></script>
<script src="longTime.js" async></script>

注意：沒(méi)有 src 屬性的腳本（即不是內(nèi)聯(lián)腳本）顷帖，async 和 defer 屬性會(huì)被忽略。

如何處理 HTML5 新標(biāo)簽的瀏覽器兼容問(wèn)題渤滞？如何區(qū)分 HTML 和 HTML5贬墩？

IE6-8 支持通過(guò) document.createElement 方法產(chǎn)生的標(biāo)簽，利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽
使用 html5shiv 框架
HTML5：
- DOCTYPE 聲明
- 新增的語(yǔ)義元素（<header>妄呕、<section> 等）
- 新增功能元素

HTML5 的構(gòu)成要素是什么陶舞？

語(yǔ)義：提供更準(zhǔn)確地描述內(nèi)容。
連接：提供新的方式與服務(wù)器通信绪励。
離線和存儲(chǔ)：允許網(wǎng)頁(yè)在本地存儲(chǔ)數(shù)據(jù)并有效地離線運(yùn)行肿孵。
多媒體：在 Open Web 中，視頻和音頻被視為一等公民（first-class citizens）优炬。
2D/3D 圖形和特效：提供更多種演示選項(xiàng)颁井。
性能和集成：提供更快的訪問(wèn)速度和性能更好的計(jì)算機(jī)硬件厅贪。
設(shè)備訪問(wèn)：允許使用各種輸入蠢护、輸出設(shè)備。
外觀：可以開(kāi)發(fā)豐富的主題养涮。
HTML5

Modernizr

Modernizr 是一個(gè)用來(lái)檢測(cè)瀏覽器功能支持情況的 JavaScript 庫(kù)葵硕。
通過(guò)這個(gè)庫(kù)我們可以檢測(cè)不同的瀏覽器對(duì)于 HTML5 特性的支持情況。

<article>
  <h1>通過(guò) Modernizr 檢測(cè) HTML5 特性</h1>
</article>
<script
  crossorigin="anonymous"
  integrity="sha384-l7lIexAaQrMGAnOGdPikxQDjq8aY1MS3oqkKPS8FXlJ47UejXvEzmezjhEwHVkzm"
  src="https://lib.baomitu.com/modernizr/2010.07.06dev/modernizr.js"
></script>
<script>
  window.onload = function () {
    //通過(guò)Modernizr.對(duì)瀏覽器canvas功能進(jìn)行檢測(cè)
    if (Modernizr.canvas) {
      console.log('本瀏覽器支持Canvas API')
    } else {
      console.log('本瀏覽器不支持Canvas API')
    }
  }
</script>

HTML5 存儲(chǔ)

localStorage

localStorage 持久化的本地存儲(chǔ)贯吓，除非是通過(guò) js 刪除懈凹，或者清除瀏覽器緩存，否則數(shù)據(jù)永遠(yuǎn)不會(huì)過(guò)期悄谐，關(guān)閉瀏覽器也不會(huì)丟失介评。

HTML5 修訂 localStorage 取代 globalStorage
在同源的所有標(biāo)簽頁(yè)和窗口之間共享數(shù)據(jù)
數(shù)據(jù)僅保存在客戶端，不與服務(wù)器進(jìn)行通信爬舰，對(duì)數(shù)據(jù)的操作是同步的
大小限制為 5M们陆；但實(shí)際 JavaScript 中的字符串為 UTF-16，因此每個(gè)字符需要兩個(gè)字節(jié)的內(nèi)存情屹。這意味著盡管許多瀏覽器的限制為 5MB坪仇，但您只能存儲(chǔ) 2.5M 個(gè)字符。
瀏覽器的支持情況：IE7 及以下版本不支持 web storage垃你。但在 IE5-7 中有個(gè) userData椅文，其實(shí)也是用于本地存儲(chǔ)喂很。

sessionStorage

sessionStorage 存儲(chǔ)對(duì)象存儲(chǔ)一個(gè)會(huì)話的數(shù)據(jù)，數(shù)據(jù)會(huì)在瀏覽器關(guān)閉后自動(dòng)刪除皆刺。

跟 localStorage 一樣少辣，大小限制最多為 5M。
同一個(gè)會(huì)話的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也會(huì)隨之銷毀羡蛾，因此 sessionStorage 不是一種持久化的本地存儲(chǔ)
與 localStorage 擁有統(tǒng)一的 API 接口毒坛；
localStorage 有自己獨(dú)立的存儲(chǔ)空間；
對(duì)數(shù)據(jù)的操作是同步的林说。
localStorage 還能這么用
給 localStorage 加上過(guò)期時(shí)間
不同類型瀏覽器存儲(chǔ)的入門
前端存儲(chǔ)除了 localStorage 還有啥

cookie煎殷、sessionStorage 和 localStorage 的區(qū)別

都是在客戶端以鍵值對(duì)存儲(chǔ)的存儲(chǔ)機(jī)制，并且只能將值存儲(chǔ)為字符串腿箩。

	cookie	localStorage	sessionStorage
由誰(shuí)初始化	客戶端或服務(wù)器豪直，服務(wù)器可以使用`Set-Cookie`請(qǐng)求頭。	客戶端	客戶端
過(guò)期時(shí)間	手動(dòng)設(shè)置	永不過(guò)期	當(dāng)前頁(yè)面關(guān)閉時(shí)
在當(dāng)前瀏覽器會(huì)話（browser sessions）中是否保持不變	取決于是否設(shè)置了過(guò)期時(shí)間	是	否
是否隨著每個(gè) HTTP 請(qǐng)求發(fā)送給服務(wù)器	是珠移，Cookies 會(huì)通過(guò)`Cookie`請(qǐng)求頭弓乙，自動(dòng)發(fā)送給服務(wù)器	否	否
容量（每個(gè)域名）	4kb	5MB	5MB
訪問(wèn)權(quán)限	任意窗口	任意窗口	當(dāng)前頁(yè)面窗口

什么是 WebSQL？

WebSQL 是使用 SQL 的客戶端（瀏覽器）的數(shù)據(jù)庫(kù) API钧惧。
Web SQL 數(shù)據(jù)庫(kù) API 并不是 HTML5 規(guī)范的一部分暇韧，但是它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫(kù)的 APIs浓瞪。
并非所有瀏覽器都支持WebSQL懈玻。
現(xiàn)在不推薦使用 WebSQL ，而是使用 IndexedDB 代替它乾颁。

什么是 IndexedDB涂乌？

IndexedDB 是一種底層異步 API，瀏覽器內(nèi)置的數(shù)據(jù)庫(kù)英岭，用于在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)（也包括文件/二進(jìn)制大型對(duì)象（blobs））湾盒。

它將將數(shù)據(jù)存儲(chǔ)為鍵值對(duì)。
大多數(shù)瀏覽器都支持 IndexedDB诅妹。

IndexedDB API 功能強(qiáng)大罚勾，但對(duì)于簡(jiǎn)單的情況可能看起來(lái)太復(fù)雜如果你更喜歡一個(gè)簡(jiǎn)單的API，請(qǐng)嘗試 localForage吭狡，dexie.js尖殃，PouchDB，IDB，IDB-KEYVAL，JsStore 或者 lovefield 之類的庫(kù)辑舷，這些庫(kù)使 IndexedDB 對(duì)開(kāi)發(fā)者來(lái)說(shuō)更加友好古毛。

IndexedDB
瀏覽器數(shù)據(jù)庫(kù) IndexedDB 入門教程

為什么在 HTML5 中使用 IndexedDB 代替 WebSQL遍尺？

IndexedDB 像一個(gè) NoSQL 數(shù)據(jù)庫(kù)饭弓，而 WebSQL 像關(guān)系型數(shù)據(jù)庫(kù)橱野，使用 SQL 查詢數(shù)據(jù)灶搜。W3C WebSQL 已經(jīng)不再支持這種技術(shù)邀桑。

HTML5 應(yīng)用程序緩存（Application Cache）

根據(jù)最新的標(biāo)準(zhǔn)瞎疼，該特性已經(jīng)從 Web 標(biāo)準(zhǔn)中刪除，建議使用 Service Workers 代替壁畸。這里找了一些資料贼急，感興趣了解一下。

有趣的HTML5：離線存儲(chǔ)
Using the application cache
HTML5-離線緩存（Application Cache）

什么是 Web Workers捏萍？

Web Workers 幫助我們?cè)诤笈_(tái)運(yùn)行 JavaScript 代碼太抓，而不會(huì)阻止應(yīng)用程序。
Web Workers 在一個(gè)隔離的（新的）線程中運(yùn)行令杈，用于執(zhí)行 JavaScript 代碼走敌，并且通過(guò) postMessage 將結(jié)果回傳到主線程。這樣就不會(huì)阻塞主線程的運(yùn)行逗噩。
Web Workers 通常用于大型任務(wù)掉丽。
Web Workers 需要一個(gè)單獨(dú)的文件來(lái)存儲(chǔ)我們的 JavaScript 代碼。
Web Workers 文件是異步下載的异雁。
所有最新的瀏覽器均支持 Web Worker捶障。

客戶端 js：

var myWebWorker = new Worker("task.js") // 創(chuàng)建 worker

// 監(jiān)聽(tīng) task.js worker 消息
worker.addEventListener("message", function(event) {
  console.log("Worker said: ", event.data)
}, false)

// 啟動(dòng)工作程序
worker.postMessage("From web worker file")

task.js（工作文件）文件：

// 監(jiān)聽(tīng)客戶端 JS 文件發(fā)布消息
self.addEventListener("message", function(event) {
  // 處理后的數(shù)據(jù)發(fā)送到客戶端監(jiān)聽(tīng) JS 文件
  self.postMessage(event.data)
}, false)

使用Web Worker加速JavaScript應(yīng)用程序

WebSocket

WebSocket 是 HTML5 開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
WebSocket 是一種在客戶端與服務(wù)器之間保持TCP長(zhǎng)連接的網(wǎng)絡(luò)協(xié)議纲刀，可以隨時(shí)進(jìn)行信息交換项炼。
Websocket 使用 ws 或 wss 的統(tǒng)一資源標(biāo)志符，類似于 HTTPS柑蛇，其中 wss 表示在 TLS 之上的 Websocket芥挣。
默認(rèn)情況下驱闷，Websocket 協(xié)議使用 80 端口耻台；運(yùn)行在 TLS 之上時(shí)，默認(rèn)使用 443 端口空另。

webSocket 如何兼容低瀏覽器盆耽？

Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 編碼發(fā)送 XHR
基于長(zhǎng)輪詢的 XHR

websocket 與 socket 的區(qū)別

Socket 是傳輸控制層協(xié)議，WebSocket 是應(yīng)用層協(xié)議扼菠。更多請(qǐng)看參考

更多資料

WebSocket介紹和Socket的區(qū)別
WebSocket 教程
WebSocket
WebSocket 是什么原理摄杂？為什么可以實(shí)現(xiàn)持久連接？

地理定位 API 如何在 HTML5 中工作循榆？

HTML5 地理定位 API 允許用戶在需要時(shí)向 web 應(yīng)用程序提供用戶的位置析恢。出于隱私原因，用戶需要獲得報(bào)告位置信息的權(quán)限秧饮。
JavaScript 可以捕獲你的緯度和經(jīng)度映挂，并可以發(fā)送到后端 Web 服務(wù)器泽篮，做一些奇特的位置感知的事情，比如找到本地企業(yè)或在地圖上顯示你的位置
如今柑船，大多數(shù)瀏覽器和移動(dòng)設(shè)備都支持地理定位 API
地理定位 API 通過(guò) navigator 獲取對(duì)象帽撑。

if ("geolocation" in navigator) {
  /* geolocation is available */
} else {
  /* geolocation IS NOT available */
}

使用 navigator.geolocation.getCurrentPosition() 方法獲取用戶的位置
Navigator.geolocation

頁(yè)面可見(jiàn)性（Page Visibility）API 可以有哪些用途？

頁(yè)面可見(jiàn)性 API 提供了您可以觀察的事件鞍时，剎車了解文檔何時(shí)可見(jiàn)或隱藏亏拉，以及查看頁(yè)面當(dāng)前可見(jiàn)性狀態(tài)的功能。
使用選項(xiàng)卡式瀏覽逆巍，任何給定網(wǎng)頁(yè)都有可能在后臺(tái)及塘，因此對(duì)用戶不可見(jiàn)。頁(yè)面可見(jiàn)性 API提供了您可以觀察的事件锐极，以便了解文檔何時(shí)可見(jiàn)或隱藏磷蛹，以及查看頁(yè)面當(dāng)前可見(jiàn)性狀態(tài)的功能。
document.hidden 返回一個(gè)布爾值溪烤。
- true 表示頁(yè)面可見(jiàn)味咳，false 則表示頁(yè)面隱藏。
- 不同頁(yè)面之間來(lái)回切換檬嘀，將觸發(fā) visibilitychange 事件槽驶。
document.visibilityState：表示頁(yè)面所處的狀態(tài)，當(dāng)前頁(yè)面的可見(jiàn)性鸳兽，有四個(gè)取值
- visible：頁(yè)面徹底不可見(jiàn)掂铐。
- hidden：頁(yè)面至少一部分可見(jiàn)。
- prerender：頁(yè)面即將或正在渲染揍异，處于不可見(jiàn)狀態(tài)全陨。
- unloaded：已被廢棄，不在使用衷掷。
只要 document.visibilityState 屬性發(fā)生變化辱姨，就會(huì)觸發(fā) visibilitychange 事件

// 打開(kāi)新的頁(yè)面，來(lái)回切換標(biāo)簽頁(yè)戚嗅，觀察頁(yè)面標(biāo)題的變化
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'hidden') {
    document.title = "愛(ài)我"
  } else {
    document.title = "恨我"
  }
})

用途：

動(dòng)畫雨涛，視頻，音頻都可以在頁(yè)面顯示時(shí)打開(kāi)懦胞，在頁(yè)面隱藏時(shí)關(guān)閉
完成登陸后替久，無(wú)刷新自動(dòng)同步其他頁(yè)面的登錄狀態(tài)

// 視頻暫停或播放
document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    video.pause()
  } else if (document.visibilityState === 'visible') {
    video.play()
  }
})

tips：頁(yè)面可見(jiàn)性 API 對(duì)于節(jié)省資源和提高性能特別有用躏尉，它使頁(yè)面在文檔不可見(jiàn)時(shí)避免執(zhí)行不必要的任務(wù)蚯根。
Page Visibility（頁(yè)面可見(jiàn)性）
Page Visibility API 教程

說(shuō)一下 HTML5 Drag And Drop API

HTML 拖放（Drag and Drop）接口使應(yīng)用程序能夠在瀏覽器中使用拖放功能。例如胀糜，用戶可使用鼠標(biāo)選擇可拖拽（draggable）元素颅拦，將元素拖拽到可放置（droppable）元素吼具，并釋放鼠標(biāo)按鈕以放置這些元素。

Event	Description
Drag	每次拖動(dòng)對(duì)象時(shí)移動(dòng)鼠標(biāo)時(shí)矩距，它都會(huì)激發(fā)拗盒。事件主體是被拖放元素，在正在拖放被拖放元素時(shí)觸發(fā)锥债。
Dragstart	當(dāng)用戶開(kāi)始拖動(dòng)對(duì)象時(shí)觸發(fā)陡蝇。事件主體是被拖放元素，在開(kāi)始拖放被拖放元素時(shí)觸發(fā)哮肚。
Dragenter	當(dāng)用戶將鼠標(biāo)光標(biāo)移到目標(biāo)元素上時(shí)登夫，它將激發(fā)。事件主體是目標(biāo)元素允趟，在被拖放元素進(jìn)入某元素時(shí)觸發(fā)恼策。
Dragover	當(dāng)鼠標(biāo)移到某個(gè)元素上時(shí)觸發(fā)此事件。事件主體是目標(biāo)元素潮剪，在被拖放在某元素內(nèi)移動(dòng)時(shí)觸發(fā)涣楷。
Dragleave	當(dāng)鼠標(biāo)離開(kāi)元素時(shí)觸發(fā)此事件。事件主體是目標(biāo)元素抗碰，在被拖放元素移出目標(biāo)元素是觸發(fā)狮斗。
Drop	拖放操作結(jié)束時(shí)觸發(fā)。事件主體是目標(biāo)元素弧蝇，在目標(biāo)元素完全接受被拖放元素時(shí)觸發(fā)碳褒。
Dragend	當(dāng)用戶釋放鼠標(biāo)按鈕以完成拖動(dòng)操作時(shí)觸發(fā)。事件主體是被拖放元素看疗，在整個(gè)拖放操作結(jié)束時(shí)觸發(fā)

draggable 是可枚舉的屬性指示該元素是否可以拖動(dòng)沙峻，用于標(biāo)識(shí)元素是否允許使用 HTML拖放API

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
  function allowDrop(e) {
    e.preventDefault()
  }

  function drag(e) {
    e.dataTransfer.setData("text", e.target.id)
  }

  function drop(ev) {
    e.preventDefault()
    var data = e.dataTransfer.getData("text")
    e.target.appendChild(document.getElementById(data))
  }
</script>

HTML Drag and Drop API
確定從 Dragenter 和 Dragover 事件中拖動(dòng)的內(nèi)容
觸摸屏設(shè)備上的 HTML5 Drag and Drop API
HTML5在窗口間 drag and drop

其他 HTML5 API

document.querySelector() 和 document.querySelectorAll()

querySelector()：根據(jù) css 選擇器返回第一個(gè)匹配的元素，如果沒(méi)有匹配返回 null
querySelectorAll()：方法返回文檔中匹配指定 CSS 選擇器的所有元素两芳，返回 NodeList 對(duì)象摔寨。如果 querySelectorAll 沒(méi)有匹配的內(nèi)容返回的是一個(gè)空數(shù)組。

classList

控制 CSS 的增盗扇、刪祷肯、切換、是否存在某個(gè)類

ele.classList.add("addClass")
ele.classList.remove("removeClass")
ele.classList.toggle("toggleClass")
ele.classList.contains("containsClass")

contextMenu

它并不會(huì)替換原有的右鍵菜單疗隶，而是將你的自定義右鍵菜單添加到瀏覽器的右鍵菜單里

<div id="menu">Lorem ipsum dolor sit amet.</div>
<script>
  menu.addEventListener('contextmenu', function() {
    alert('點(diǎn)我！')
  })
</script>

你也可以阻止它翼闹，顯示自己自定義的菜單

menu.addEventListener('contextmenu', function(e) {
  e.preventDefault()
  // ...
})

如何為您的Web應(yīng)用程序創(chuàng)建自定義上下文菜單

dataset

通過(guò) dataset 可以方便的獲取或設(shè)置 data-* 自定義數(shù)據(jù)屬性集

<div class="avatar" data-user="lisi" data-avatar-type="circle" data-animateSpeed>
  lorem
</div>
<script>
  const avatar = document.querySelector('.avatar')
  avatar.dataset.user === 'lisi' // true
  avatar.dataset.avatarType === 'circle' // true
  avatar.dataset.animateSpeed = 4000
    
  // 添加不存在的屬性
  avatar.dataset.id = 'user'
  // console.log(avatar.dataset)
</script>

tabindex

tabindex 屬性規(guī)定當(dāng)使用 "tab" 鍵進(jìn)行導(dǎo)航時(shí)元素的順序斑鼻。
在 HTML4.01 中，tabindex 屬性可用于：<a>猎荠，<area>坚弱，<button>蜀备，<input>，<object>荒叶，<select> 和 <textarea>碾阁。
- 在 HTML5 中，tabindex 屬性可用于任何的 HTML 元素（它會(huì)驗(yàn)證任何 HTML 元素些楣。但不一定是有用）

<ul>
  <li tabindex="2">HTML</li>
  <li tabindex="1">CSS</li>
  <li tabindex="3">JAVASCRIPT</li>
</ul>

accessKey

accessKey 屬性規(guī)定激活（使元素獲得焦點(diǎn)）元素的快捷鍵脂凶。
不同瀏覽器使用的快捷鍵方法不同：
- IE，Chrome愁茁，Safari蚕钦，Opera 15+：[ALT] + accesskey
- Opera prior version 15：[SHIFT] [ESC] + accesskey
- Firefox：[ALT] [SHIFT] + accesskey

<input accesskey="b" />
<a  accesskey="c">百度一下，你就知道</a>

FullScreen（全屏）

FullScreen API 是一個(gè)新的 JavaScript API
全屏顯示可以是任意元素
HTML5 API 存在兼容性問(wèn)題（IE9+）鹅很，即使高版本瀏覽器也有兼容性問(wèn)題
不同瀏覽器需要添加不同的前綴 webkit嘶居、moz、o促煮、ms

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // 默認(rèn)全屏模式打開(kāi) "body"
fullscreen(false); // 退出全屏模式

:fullscreen CSS 偽元素代表一個(gè)元素邮屁，當(dāng)瀏覽器是在全屏模式下的顯示。

.elem:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

預(yù)加載

預(yù)取 CSS 文件菠齿，預(yù)渲染整個(gè)頁(yè)面或提前解析域
瀏覽器有一個(gè)簡(jiǎn)單的內(nèi)置方式來(lái)完成所有這些事情樱报。有六個(gè) <link rel> 標(biāo)簽指示瀏覽器預(yù)加載內(nèi)容：

<link rel="prefetch" href="/index.css" as="style" />
<link rel="preload" href="/index.css" as="style" />
<link rel="preconnect"  />
<link rel="dns-prefetch"  />
<link rel="prerender"  />
<link rel="modulepreload" href="/index.js" />

preload

使用 preload 作為 rel 屬性的屬性值。還需要通過(guò) href 和 as 屬性指定需要被預(yù)加載資源的資源路徑及其類型泞当。

<link rel="preload" href="index.css" as="style">

使用 as 來(lái)指定將要預(yù)加載的內(nèi)容的類型迹蛤，將使得瀏覽器能夠：
- 更精確地優(yōu)化資源加載優(yōu)先級(jí)。
- 匹配未來(lái)的加載需求襟士，在適當(dāng)?shù)那闆r下盗飒，重復(fù)利用同一資源。
- 為資源應(yīng)用正確的內(nèi)容安全策略陋桂。
- 為資源設(shè)置正確的 Accept 請(qǐng)求頭逆趣。
- MDN 完整列表

prefetch

<link rel="prefetch"> 要求瀏覽器在后臺(tái)下載并緩存資源（例如 JS 或 CSS）。下載的優(yōu)先級(jí)較低嗜历，因此不會(huì)干擾更重要的資源宣渗。當(dāng)您知道在下一個(gè)頁(yè)面上需要該資源，并且想要提前對(duì)其進(jìn)行緩存時(shí)梨州，這將很有幫助痕囱。
下載資源后，瀏覽器不執(zhí)行任何操作暴匠。不執(zhí)行 JS鞍恢，不應(yīng)用 CSS。它只是被緩存了，因此當(dāng)其他需求時(shí)帮掉，它立即可用弦悉。
通過(guò) link 標(biāo)簽的 rel 屬性指定為 "prefetch"，在 href 屬性里指定要加載資源的地址

<!-- 預(yù)加載整個(gè)頁(yè)面 -->
<link rel="prefetch"  />

<!-- 預(yù)加載一個(gè)圖片 -->
<link rel="prefetch"  />

preconnent

<link rel="preconnect"> 要求瀏覽器提前執(zhí)行到域的連接蟆炊。

<link rel="dns-prefetch" >

dns-prefetch

DNS-prefetch（DNS 預(yù)獲然颉）是嘗試在請(qǐng)求資源之前解析域名。這可能是后面要加載的文件涩搓，也可能是用戶嘗試打開(kāi)的鏈接目標(biāo)污秆。

<link rel="dns-prefetch" >

鏈接預(yù)加載的一些注意事項(xiàng)

預(yù)加載可以跨域進(jìn)行，當(dāng)然缩膝，請(qǐng)求時(shí) cookie 等信息也會(huì)被發(fā)送混狠。
預(yù)加載可能破壞網(wǎng)站統(tǒng)計(jì)數(shù)據(jù)，而用戶并沒(méi)有實(shí)際訪問(wèn)疾层。
瀏覽器兼容性不是很好

prerender

<link rel="prerender"> 要求瀏覽器加載 URL 并將其呈現(xiàn)在不可見(jiàn)的標(biāo)簽中将饺。當(dāng)用戶單擊指向該 URL 的鏈接時(shí)，應(yīng)立即呈現(xiàn)該頁(yè)面痛黎。當(dāng)您確實(shí)確定用戶接下來(lái)將訪問(wèn)特定頁(yè)面并且想要更快地呈現(xiàn)它時(shí)予弧，這將很有幫助。

<link rel="prerender"  />

當(dāng)您確定大多數(shù)用戶將導(dǎo)航到特定頁(yè)面時(shí)湖饱，您希望加快速度掖蛤，那么你可以使用它

modulepreload

<link rel="modulepreload"> 告訴瀏覽器盡快下載，緩存和編譯 JS 模塊腳本井厌。
使用它可以更快地加載您的 ES 模塊應(yīng)用程序蚓庭。此標(biāo)簽僅適用于預(yù)加載 ES 模塊——即您通過(guò) import ... 或?qū)氲哪K <script type="module">。

<link rel="modulepreload" href="/static/Header.js" />

Preload, prefetch and other <link> tags
dns-prefetch
通過(guò)rel="preload"進(jìn)行內(nèi)容預(yù)加載
預(yù)取仅仆，預(yù)加載器赞，預(yù)瀏覽

其他

對(duì)于 WEB 標(biāo)準(zhǔn)以及 W3C 的理解與認(rèn)識(shí)問(wèn)題

web 標(biāo)準(zhǔn)簡(jiǎn)單來(lái)說(shuō)可以分為結(jié)構(gòu)、表現(xiàn)和行為墓拜。
- 結(jié)構(gòu)主要是有 HTML 標(biāo)簽組成港柜。或許通俗點(diǎn)說(shuō)咳榜，在頁(yè)面 body 里面我們寫入的標(biāo)簽都是為了頁(yè)面的結(jié)構(gòu)夏醉。
- 表現(xiàn)即指 css 樣式表，通過(guò) css 可以是頁(yè)面的結(jié)構(gòu)標(biāo)簽更具美感涌韩。
- 行為是指頁(yè)面和用戶具有一定的交互畔柔，同時(shí)頁(yè)面結(jié)構(gòu)或者表現(xiàn)發(fā)生變化，主要是由 js 組成贸辈。
web 標(biāo)準(zhǔn)一般是將該三部分獨(dú)立分開(kāi)释树，使其更具有模塊化肠槽。但一般產(chǎn)生行為時(shí)擎淤，就會(huì)有結(jié)構(gòu)或者表現(xiàn)的變化奢啥，也使這三者的界限并不那么清晰。
萬(wàn)維網(wǎng)聯(lián)盟（W3C）是一個(gè)國(guó)際組織嘴拢，它開(kāi)發(fā)開(kāi)放標(biāo)準(zhǔn)以確保 Web 的長(zhǎng)期發(fā)展桩盲。
W3C 對(duì) web 標(biāo)準(zhǔn)提出了規(guī)范化的要求，也就是在實(shí)際編程中的一些代碼規(guī)范：
- web 標(biāo)準(zhǔn)規(guī)范要求席吴，書寫標(biāo)簽必須閉合赌结、標(biāo)簽小寫、不亂嵌套孝冒，標(biāo)簽規(guī)范可以提高搜索引擎對(duì)頁(yè)面的抓取效率柬姚，對(duì) SEO 很有幫助
- 建議使用外鏈 CSS和 JS 腳本，從而達(dá)到結(jié)構(gòu)庄涡、表現(xiàn)與行為的分離量承，提高頁(yè)面的渲染速度，提高用戶的體驗(yàn)
- 樣式與標(biāo)簽的分離穴店，更合理的語(yǔ)義化標(biāo)簽撕捍，使內(nèi)容能被更多的用戶所訪問(wèn)、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)泣洞、更少的代碼和組件忧风，從而降低維護(hù)成本、改版方便
- 不需要變動(dòng)頁(yè)面內(nèi)容球凰，便可提供打印版本而不需要復(fù)制內(nèi)容狮腿，提高網(wǎng)站易用性；
- 遵循 w3c 制定的 web 標(biāo)準(zhǔn)呕诉，能夠使用戶瀏覽者更方便的閱讀缘厢，使網(wǎng)頁(yè)開(kāi)發(fā)者之間更好的交流。

前端頁(yè)面有哪三層構(gòu)成义钉，分別是什么昧绣？作用是什么？

分成：結(jié)構(gòu)層捶闸、表示層夜畴、行為層。
結(jié)構(gòu)層（structural layer）：由 HTML 或 XHTML 之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建删壮。標(biāo)簽贪绘，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述央碟，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息税灌。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段×獾樱”
表示層（presentation layer）：由 CSS 負(fù)責(zé)創(chuàng)建苞也。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。
行為層（behaviorlayer）：負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題粘秆。這是 JavaScript 語(yǔ)言和 DOM 主宰的領(lǐng)域如迟。

什么是漸進(jìn)式渲染？

漸進(jìn)式渲染（Progressive rendering）：是用于提高網(wǎng)頁(yè)性能（尤其是提高用戶感知的加載速度）攻走，以盡快呈現(xiàn)頁(yè)面的技術(shù)殷勘。
此類技術(shù)的示例：
- 圖片懶加載：頁(yè)面上的圖片不會(huì)一次性全部加載。當(dāng)用戶滾動(dòng)頁(yè)面到圖片部分時(shí)昔搂，JavaScript 將加載并顯示圖像玲销。
- 確定顯示內(nèi)容的優(yōu)先級(jí)（Hierarchical rendering）：為了盡快將頁(yè)面呈現(xiàn)給用戶，頁(yè)面只包含基本的最少量的 CSS摘符、腳本和內(nèi)容钥庇，然后可以使用延遲加載腳本或監(jiān)聽(tīng) DOMContentLoaded/load 事件加載其他資源和內(nèi)容汤求。
- 異步加載 HTML 片段：當(dāng)頁(yè)面通過(guò)后臺(tái)渲染時(shí)打洼，把 HTML 拆分辕棚，通過(guò)異步請(qǐng)求，分塊發(fā)送給瀏覽器别凹。
異步片段：使用Marko重新發(fā)現(xiàn)漸進(jìn)式HTML渲染
什么是漸進(jìn)式渲染草讶？

你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎？

漸進(jìn)增強(qiáng)（Progressive enhancement）

優(yōu)雅降級(jí)（Graceful degradation）

什么是微格式炉菲？在前端構(gòu)建中應(yīng)該考慮微格式嗎堕战？

微格式（Microformats）是一種讓機(jī)器可讀的語(yǔ)義化 XHTML 詞匯的集合，是結(jié)構(gòu)化數(shù)據(jù)的開(kāi)放標(biāo)準(zhǔn)拍霜。是為特殊應(yīng)用而制定的特殊格式嘱丢。
優(yōu)點(diǎn)：將智能數(shù)據(jù)添加到網(wǎng)頁(yè)上，讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示祠饺。（如：豆瓣越驻，有興趣自行 google）
Microformats

什么是字符編碼？

字符編碼是一種將字節(jié)轉(zhuǎn)換為字符的方法道偷。為了正確地驗(yàn)證或顯示 HTML 文檔缀旁，程序必須選擇適當(dāng)?shù)淖址幋a。這是在標(biāo)簽中指定的：

<meta charset="UTF-8" />

UTF-8：Unicode 轉(zhuǎn)換格式勺鸦，以8位為單位并巍，即以字節(jié)為單位。UTF8 中的字符長(zhǎng)度可以從1到4個(gè)字節(jié)换途，從而使 UTF8 的寬度可變懊渡。

什么是 WHATWG刽射？

WHATWG（Web 超文本應(yīng)用技術(shù)工作組）是一個(gè)對(duì)通過(guò)標(biāo)準(zhǔn)和測(cè)試來(lái)發(fā)展Web感興趣的人們組成的社區(qū)。

什么是 WebP剃执？

WebP 類似于 JPG誓禁、PNG 這樣的圖像格式，它的大小比其他格式小大約 10-20%忠蝗。
由 Google 在2010年開(kāi)發(fā)和推出现横。
并非所有瀏覽器都支持 WebP漓拾。
可以使用插件將其他格式轉(zhuǎn)換為 WebP阁最。

什么是 Web 組件？

Web Components 是一套不同的技術(shù)骇两，允許您創(chuàng)建可重用的定制元素（它們的功能封裝在您的代碼之外）并且在您的web應(yīng)用中使用它們速种。不需要需要任何外部庫(kù)來(lái)工作。

特征：

Custom elements（自定義元素）
Shadow DOM（影子DOM）
HTML templates（HTML 模板）
HTML Import 允許導(dǎo)入的外部 HTML 文檔低千。

更多資料

Web組件入門實(shí)例教程

Web 應(yīng)用程序中的可訪問(wèn)性配阵？

維基百科：可訪問(wèn)性是最常用于描述設(shè)施或設(shè)施，幫助殘疾人示血，如“輪椅”棋傍。這可以擴(kuò)展到盲文標(biāo)識(shí)、輪椅坡道难审，音頻信號(hào)在人行橫道瘫拣，輪廓人行道，網(wǎng)站設(shè)計(jì)告喊，等等麸拄。

什么是 ARIA？

**Accessible Rich Internet Applications（ARIA）** 是能夠讓殘障人士更加便利的訪問(wèn) Web 內(nèi)容和使用 Web 應(yīng)用（特別是那些由JavaScript 開(kāi)發(fā)的）的一套機(jī)制黔姜。

ARIA 通過(guò) HTML 屬性為屏幕閱讀器提供了額外的信息拢切。其不影響元素如何被呈現(xiàn)在瀏覽器中。
您可以通過(guò)遵循 ARIA 標(biāo)準(zhǔn)（例如：HTML 語(yǔ)義秆吵，alt 屬性并以預(yù)期的方式使用 [role = button]）來(lái)使您的網(wǎng)站更易于訪問(wèn)

<style>
  [role='note'] {
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid rebeccapurple;
    color: rebeccapurple;
    border-radius: 5px;
  }
</style>
<section>
  <div role="note">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
    totam.
  </div>
</section>

ARIA role 沒(méi)有為大多數(shù)元素的默認(rèn)語(yǔ)義添加任何內(nèi)容
在某些情況下淮椰，HTML 元素的語(yǔ)義可以通過(guò) ARIA role，狀態(tài)或?qū)傩詠?lái)表達(dá)纳寂。常被稱為元素的“默認(rèn)隱式ARIA語(yǔ)義”
ARIA 允許開(kāi)發(fā)人員以有意義的方式重新發(fā)明和擴(kuò)展本機(jī) HTML 特性主穗。但它的特性與內(nèi)置技術(shù)相比是脆弱的。

一些冗余 ARIA 的示例：

<button role="button">按我</button>
<a  role="link"></a>
<input type="checkbox" role="checkbox" />
<input type="radio" role="radio" />

HTML5 使用默認(rèn)的隱式語(yǔ)義定義了一組新的結(jié)構(gòu)和分段元素烈疚，這些語(yǔ)義與 ARIA role 匹配（在某些情況下）：
- 使用 role = button 時(shí)黔牵，考慮使用 <button> 元素，或者其他各種原生 HTML 按鈕類型爷肝。
- 使用 role=link 時(shí)猾浦，考慮改用 <a href> 元素陆错。
- 使用 role=heading 和 aria-level="1-6"，考慮改用 <h1> 到 <h6> 元素金赦。
- 使用 role=list 和 role=listitem 時(shí)音瓷，考慮改用 <ol> 或 <ul> 和 <li> 元素。
- 使用 role=listbox 和 role=option夹抗，考慮改用 <select> 和 <option> 元素绳慎。
- 使用 role=checkbox 或 role=radio 時(shí)，考慮改用 <input type="checkbox"> 或 <input type="radio"> 元素漠烧。
- 使用 role=textbox杏愤，可以考慮使用 <input type="text"> 或搜索、電子郵件已脓、url 或電話珊楼。
- article、aside度液、footer厕宗、header、main堕担、nav已慢、section 等等…
- 這意味著在實(shí)現(xiàn)后，瀏覽器將公開(kāi)該元素的默認(rèn)隱式語(yǔ)義霹购，因此您不必這樣做佑惠。

更多資料

在 HTML 和 ARIA 大括號(hào)上（默認(rèn)的隱式 ARIA 語(yǔ)義，他們不想讓你知道）
HTML5 – W3C建議書2014年10月28日
在HTML中使用ARIA的注意事項(xiàng)

什么是屏幕閱讀器厕鹃？

屏幕閱讀器是提供輔助技術(shù)的軟件程序兢仰，該技術(shù)可以使殘障人士（例如，沒(méi)有視力剂碴，聲音或滑鼠能力的人）使用 Web 應(yīng)用程序把将。

HTML 開(kāi)發(fā)準(zhǔn)則

符合W3C：所有頁(yè)面都需要使用 W3C 驗(yàn)證程序進(jìn)行測(cè)試，以識(shí)別 HTML 代碼中可能存在的問(wèn)題忆矛。
清理注釋：在將頁(yè)面發(fā)送到生產(chǎn)環(huán)境之前察蹲，需要?jiǎng)h除不必要的代碼。
錯(cuò)誤頁(yè)面：每個(gè)網(wǎng)站都應(yīng)該存在錯(cuò)誤 404 頁(yè)面和 5xx催训。
HTML5語(yǔ)義元素：適當(dāng)使用了 HTML5 語(yǔ)義元素（<header>洽议，<section>，<footer>漫拭，<main>...）
HTMLHint：我使用工具來(lái)幫助我分析我的HTML代碼可能遇到的任何問(wèn)題亚兄。
- Dirty markup
- webhint 是一個(gè)可自定義的整理工具，可通過(guò)檢查代碼中的最佳做法和常見(jiàn)錯(cuò)誤來(lái)幫助您提高網(wǎng)站的可訪問(wèn)性采驻，速度审胚，跨瀏覽器兼容性以及其他功能匈勋。
鏈接檢查器：檢查頁(yè)面鏈接是否可用，請(qǐng)確認(rèn)您沒(méi)有任何 404 錯(cuò)誤膳叨。
Noopener：如果您正在使用帶有 target ="_ blank" 的外部鏈接洽洁，則您的鏈接應(yīng)具有 rel="noopener" 屬性，以防止標(biāo)簽被挪用菲嘴。如果您需要支持舊版本的 Firefox饿自，請(qǐng)使用 rel="noopener noreferrer"
HTML 代碼規(guī)范：開(kāi)發(fā)一致、靈活和可持續(xù)的 HTML 和 CSS 的標(biāo)準(zhǔn)龄坪。
使用出色的開(kāi)源工具 W3C tools 將代碼發(fā)揮最大潛能昭雌。

HTML 性能優(yōu)化

為頁(yè)面測(cè)速制定樣式和腳本
壓縮 HTML：將注釋、空格和空行從生產(chǎn)文件中刪除悉默。
- 刪除所有不必要的空格城豁、注釋和中斷行將減少 HTML 的大小，加快網(wǎng)站的頁(yè)面加載時(shí)間抄课，并顯著減少用戶的下載時(shí)間。
- 可以使用 Glup 等構(gòu)建工具進(jìn)行刪除
- HTML minifier | Minify Code
- Experimenting with HTML minifier — Perfection Kills
刪除不必要的屬性：像 type="text/javascript" or type="text/css" 這樣的屬性應(yīng)該被移除雳旅。
- 類型屬性不是必需的跟磨，因?yàn)?HTML5 把 text/css 和 text/javascript 作為默認(rèn)值。沒(méi)用的代碼應(yīng)在網(wǎng)站或應(yīng)用程序中刪除攒盈，因?yàn)樗鼈儠?huì)使網(wǎng)頁(yè)體積增大抵拘。
- 確保所有和 <script> 標(biāo)簽都沒(méi)有任何 type 屬性。
- The Script Tag | CSS-Tricks
避免腳本阻塞加載型豁。確保在使用 JavaScript 代碼之前加載 CSS僵蛛。
- 在引用 JavaScript 之前引用 CSS 可以實(shí)現(xiàn)更好地并行下載，從而加快瀏覽器的渲染速度迎变。
- 確保 <link> 和 <style> 始終位于 <script> 之前充尉。
- 合理安排 styles 和 scripts 來(lái)提高網(wǎng)頁(yè)速度
盡可能使用 async 和 defer
- 確保 JavaScript 腳本兼容 async 和 defer，任何時(shí)候都要盡可能使用 async衣形，特別是當(dāng)你有較多的 script 標(biāo)簽時(shí)驼侠。
- 這樣在加載 JavaScript 的過(guò)程中頁(yè)面就不會(huì)重新繪制，否則谆吴，瀏覽器在不具有這些特性的 script 標(biāo)簽后就不會(huì)重繪任何東西倒源。
- 消除渲染阻塞資源
DNS 預(yù)取：一次 DNS 查詢時(shí)間大概在 60-120ms 之間或者更長(zhǎng)句狼，提前解析網(wǎng)頁(yè)中可能的網(wǎng)絡(luò)連接域名

<link rel="dns-prefetch" >

減少內(nèi)聯(lián)腳本的數(shù)量
- 內(nèi)聯(lián)腳本在頁(yè)面加載過(guò)程中消耗很多資源笋熬，因?yàn)榻馕銎髡J(rèn)為內(nèi)聯(lián)腳本會(huì)改變頁(yè)面結(jié)構(gòu)。
- 通常腻菇，盡量少的使用內(nèi)聯(lián)腳本和減少用 document.write() 來(lái)輸出內(nèi)容胳螟，在一定情況下可以加速整體頁(yè)面的載入∩慌模現(xiàn)在瀏覽器中一般使用現(xiàn)代的 W3C DOM 方法操作頁(yè)面內(nèi)容，優(yōu)于使用 document.write() 的傳統(tǒng)方法旺隙。
縮小和壓縮圖像
- 較大的圖像會(huì)導(dǎo)致頁(yè)面需要更多的時(shí)間來(lái)加載绒极。在將圖像添加到頁(yè)面之前，請(qǐng)考慮使用 Photoshop等圖像處理工具內(nèi)置的壓縮功能蔬捷，或使用 Compress Jpeg 或 Tiny PNG 等專用工具對(duì)圖像進(jìn)行壓縮
最小化文件數(shù)量
- 減少一個(gè)頁(yè)面引用的文件數(shù)量可以降低在下載一個(gè)頁(yè)面的過(guò)程中需要的 HTTP 請(qǐng)求數(shù)量垄提，從而減少這些請(qǐng)求的收發(fā)時(shí)間。
- 根據(jù)其緩存設(shè)置周拐，瀏覽器可能會(huì)為每個(gè)所引用的文件發(fā)送一個(gè)帶 If-Modified-Since 的請(qǐng)求給網(wǎng)絡(luò)服務(wù)器铡俐，以查詢這些文件自上次加載后是否有被修改。查詢引用文件上次修改時(shí)間會(huì)花費(fèi)太多時(shí)間妥粟，導(dǎo)致網(wǎng)頁(yè)首屏延遲审丘，這是因?yàn)樵阡秩卷?yè)面之前瀏覽器必須確認(rèn)每個(gè)文件的修改時(shí)間。
最小化 iframe 的數(shù)量：僅在沒(méi)有任何其他技術(shù)可行性時(shí)才使用 iframe勾给。
避免節(jié)點(diǎn)深層級(jí)嵌套：深層級(jí)嵌套的節(jié)點(diǎn)在初始化構(gòu)建時(shí)往往需要更多的內(nèi)存占用滩报，并且在遍歷節(jié)點(diǎn)時(shí)也會(huì)更慢些，這與瀏覽器構(gòu)建 DOM 文檔的機(jī)制有關(guān)播急。瀏覽器會(huì)把整個(gè) HTML 文檔的結(jié)構(gòu)存儲(chǔ)為 DOM "樹(shù)" 結(jié)構(gòu)脓钾。當(dāng)文檔節(jié)點(diǎn)的嵌套層次越深，構(gòu)建的 DOM 樹(shù)層次也會(huì)越深桩警。
頁(yè)面緩存：在不設(shè)置頁(yè)面緩存的情況下可训，每次刷新頁(yè)面會(huì)重新讀取服務(wù)器文件。設(shè)置頁(yè)面緩存捶枢，每次刷新可從本地讀取握截，提高頁(yè)面加載效率
- 通過(guò)設(shè)置頁(yè)面頭的 expires 來(lái)定義頁(yè)面過(guò)期時(shí)間，將過(guò)期時(shí)間定久一點(diǎn)就達(dá)到了 "永久" 緩存烂叔。

<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />

避免 Table 布局：table 比其它 HTML 標(biāo)簽占更多的字節(jié)（造成下載時(shí)間延遲谨胞，占用服務(wù)器更多流量資源）
- 不使用 table 布局，而應(yīng)運(yùn)用 float长已，position畜眨，flex 或 grid 來(lái)布局。
- 當(dāng)然术瓮，table 仍是不失為一種有效的展示表格數(shù)據(jù)的方式康聂。為了幫助瀏覽器更快速的渲染你的頁(yè)面，你應(yīng)該避免嵌套 table胞四。
- 參考：為什么我們不建議用Table布局和最小化布局
如何制作快速加載的HTML頁(yè)面中還有其他方面的例子恬汁，如：高效地排列頁(yè)面組件、合理的選擇 user-agent等
優(yōu)先分配資源
預(yù)加載關(guān)鍵資產(chǎn)以提高加載速度
盡早建立網(wǎng)絡(luò)連接以提高感知的頁(yè)面速度
預(yù)取資源以加速將來(lái)的導(dǎo)航
Best Practices for Speeding Up Your Web Site
基于JavaScript和網(wǎng)絡(luò)信息API的自適應(yīng)服務(wù)

參考

HTML 最佳實(shí)踐
W3C
維基百科
MDN
HTML標(biāo)準(zhǔn)
front-end-interview-handbook
front-end-Interview-Questions
Front-End-Performance-Checklist
Front-End-Checklist
30-seconds-of-interviews
HTML 備忘單

最后編輯于：2022.05.06 00:33:09

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末辜伟，一起剝皮案震驚了整個(gè)濱河市氓侧，隨后出現(xiàn)的幾起案子脊另，更是在濱河造成了極大的恐慌，老刑警劉巖约巷，帶你破解...
沈念sama閱讀 219,366評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件偎痛，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡独郎，警方通過(guò)查閱死者的電腦和手機(jī)踩麦，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,521評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)氓癌，“玉大人谓谦，你說(shuō)我怎么就攤上這事√巴瘢” “怎么了反粥？”我有些...
開(kāi)封第一講書人閱讀 165,689評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)疲迂。經(jīng)常有香客問(wèn)我才顿，道長(zhǎng)，這世上最難降的妖魔是什么鬼譬？我笑而不...
開(kāi)封第一講書人閱讀 58,925評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任娜膘，我火速辦了婚禮，結(jié)果婚禮上优质，老公的妹妹穿的比我還像新娘。我一直安慰自己军洼，他們只是感情好巩螃，可當(dāng)我...
茶點(diǎn)故事閱讀 67,942評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著匕争，像睡著了一般避乏。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上甘桑，一...
開(kāi)封第一講書人閱讀 51,727評(píng)論 1贊 305
城市分裂傳說(shuō)
那天拍皮，我揣著相機(jī)與錄音，去河邊找鬼跑杭。笑死铆帽，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的德谅。我是一名探鬼主播爹橱，決...
沈念sama閱讀 40,447評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼窄做！你這毒婦竟也來(lái)了愧驱？” 一聲冷哼從身側(cè)響起慰技，我...
開(kāi)封第一講書人閱讀 39,349評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎组砚，沒(méi)想到半個(gè)月后吻商，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,820評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡糟红，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,990評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年艾帐，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片改化。...
茶點(diǎn)故事閱讀 40,127評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡掩蛤，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出陈肛，到底是詐尸還是另有隱情揍鸟，我是刑警寧澤，帶...
沈念sama閱讀 35,812評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布句旱，位于F島的核電站阳藻，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏谈撒。R本人自食惡果不足惜腥泥，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,471評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望啃匿。院中可真熱鬧蛔外，春花似錦、人聲如沸溯乒。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 32,017評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)裆悄。三九已至矛纹，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間光稼，已是汗流浹背或南。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,142評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留艾君，地道東北人采够。一個(gè)月前我還...
沈念sama閱讀 48,388評(píng)論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像腻贰，于是被迫代替她去往敵國(guó)和親吁恍。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,066評(píng)論 2贊 355

HTML/HTML5 基礎(chǔ)知識(shí) | 面試題專用

DTD 介紹

什么是 HTML？

SGML 、 HTML 闷堡、XML 和 XHTML 的區(qū)別骚露？

DOCTYPE 有什么用怀喉？

標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別赚楚？它們有何意義？

頁(yè)面導(dǎo)入樣式時(shí)粥烁，使用 link 和 @import 有什么區(qū)別？

HTML 中 form 里 action 方法的 Get 和 Post 有什么區(qū)別纲仍？

Meta viewport 原理是什么赴捞？

Meta 的目的是什么趟薄？

什么是替換元素與非替換元素

塊級(jí)元素和行內(nèi)元素的區(qū)別峰鄙？

塊級(jí)元素和行內(nèi)元素分別有哪些兜看？ 空（void）元素有哪些？

什么是可選標(biāo)簽毒租？為什么要使用它稚铣？

簡(jiǎn)述一下 src 與 href 的區(qū)別煌寇？

img 上 title 與 alt

為什么在 img 標(biāo)簽中使用 srcset 屬性雀鹃？請(qǐng)描述瀏覽器遇到該屬性后的處理過(guò)程。

noscript 標(biāo)簽的作用

label 的作用是什么？是怎么用的儿惫？

title 與 h1 的區(qū)別、b 與 strong 的區(qū)別铛铁、i 與 em 的區(qū)別隔显？

rel="noopener" 應(yīng)在什么場(chǎng)景下使用，為什么奸柬？

為什么最好把 link 標(biāo)簽放在 head 之間？

為什么最好把 JS 的 script 標(biāo)簽放在 body 之前立润，有例外情況嗎狂窑？

HTML 全局屬性（global attribute）有哪些

請(qǐng)描述下 SEO 中的 TDK？

你有使用過(guò)什么模板引擎肛循？為什么使用它铭腕？

iframe 是什么？有什么優(yōu)缺點(diǎn)害捕？

div+css 的布局較 table 布局有什么優(yōu)點(diǎn)逊移？

很多網(wǎng)站不常用 table红且，iframe 這兩個(gè)元素，知道原因嗎涤姊？

HTML 中的 lang 屬性有什么作用舆乔？

什么 enctype='multipart/form-data' 意思？

HTML5

HTML5 向后兼容舊瀏覽器嗎盒刚？

HTML5 為什么只需要寫 <!DOCTYPE html>腺劣？

HTML5 文檔類型和字符集是封字？

HTML5 有哪些新特性

什么是 data-* 屬性钠龙？

HTML5 中不推薦使用哪些 HTML 標(biāo)簽九巡？

你如何理解 Web 的語(yǔ)義化?

HTML 為什么需要結(jié)構(gòu)語(yǔ)義化

什么是語(yǔ)義和非語(yǔ)義元素铅搓？

簡(jiǎn)述 HTML5 一些語(yǔ)義的用法

Canvas 和 SVG

SVG

Canvas

Canvas 和 SVG 的區(qū)別

100 * 100的 canvas 占多少內(nèi)存？

您如何為您的網(wǎng)站選擇 svg 或 canvas批旺？

參考

新標(biāo)簽

新語(yǔ)義和結(jié)構(gòu)元素

新多媒體元素

新表單元素

HTML5 之前的一些元素

新屬性

HTML5 的 form 如何關(guān)閉自動(dòng)完成功能价匠？

<script> 標(biāo)簽上的 defer 和 async 屬性是什么当纱？

如何處理 HTML5 新標(biāo)簽的瀏覽器兼容問(wèn)題渤滞？如何區(qū)分 HTML 和 HTML5贬墩？

HTML5 的構(gòu)成要素是什么陶舞？

Modernizr

HTML5 存儲(chǔ)

localStorage

sessionStorage

cookie煎殷、sessionStorage 和 localStorage 的區(qū)別

什么是 WebSQL？

什么是 IndexedDB涂乌？

為什么在 HTML5 中使用 IndexedDB 代替 WebSQL遍尺？

HTML5 應(yīng)用程序緩存（Application Cache）

什么是 Web Workers捏萍？

WebSocket

地理定位 API 如何在 HTML5 中工作循榆？

頁(yè)面可見(jiàn)性（Page Visibility）API 可以有哪些用途？

說(shuō)一下 HTML5 Drag And Drop API

其他 HTML5 API

document.querySelector() 和 document.querySelectorAll()

classList

contextMenu

dataset

tabindex

accessKey

塊級(jí)元素和行內(nèi)元素分別有哪些兜看？空（void）元素有哪些？

`rel="noopener"` 應(yīng)在什么場(chǎng)景下使用，為什么奸柬？

什么 `enctype='multipart/form-data'` 意思？

HTML5 為什么只需要寫 `<!DOCTYPE html>`腺劣？

`<script>` 標(biāo)簽上的 `defer` 和 `async` 屬性是什么当纱？