建企業(yè)門戶網(wǎng)站刷神馬關(guān)鍵字排名軟件
目錄
- DOCTYPE（文章類型）
- head標(biāo)簽
- 瀏覽器亂碼的原因及解決
- 常用的meta標(biāo)簽與SEO
- script標(biāo)簽中defer和async的區(qū)別
- src&href區(qū)別
- HTML5有哪些更新
- 語(yǔ)義化標(biāo)簽
- 媒體標(biāo)簽
- 表單
- 進(jìn)度條、度量器
- DOM查詢
- Web存儲(chǔ)
- Canvas和SVG
- 拖放 （HTML5 drag API）
- WebSocket
- img的srcset屬性
- 行內(nèi)元素、塊級(jí)元素、空元素
- Web Worker
- HTML5離線存儲(chǔ)
- title與h1、b與strong、i與em的區(qū)別
- iframe的優(yōu)缺點(diǎn)
- 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的區(qū)別
DOCTYPE（文章類型）
<!DOCTYPE html>
DOCTYPE作用：
<!DOCTYPE>：HTML5中一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，作用是告訴瀏覽器（解析器）應(yīng)該以什么樣的文檔類型定義（HTML或XHTML）來(lái)解析文檔，不同的渲染模式會(huì)影響瀏覽器對(duì)CSS、JavaScript的解析。
瀏覽器渲染頁(yè)面的兩種模式：
瀏覽器渲染頁(yè)面有兩種模式：CSS1Compat（標(biāo)準(zhǔn)模式）與BackCompat（怪異模式）
在W3C標(biāo)準(zhǔn)出臺(tái)以前，瀏覽器在對(duì)頁(yè)面的渲染上沒(méi)有統(tǒng)一規(guī)范，各個(gè)瀏覽器對(duì)頁(yè)面的渲染上存在差異，甚至是同一瀏覽器的不同版本中，對(duì)瀏覽器的渲染也不同，產(chǎn)生了Quirks mode或Compatibility Mode。
在W3C標(biāo)準(zhǔn)推出之后，瀏覽器渲染頁(yè)面有了統(tǒng)一標(biāo)準(zhǔn)(CSScompat或Strict mode、Standars mode)。但為了保證舊的網(wǎng)頁(yè)還能繼續(xù)正常渲染使用，保持瀏覽器渲染的兼容性，瀏覽器都保留了舊的渲染方法。因此瀏覽器的渲染產(chǎn)生了Quircks mode和Standars mode兩種模式。
標(biāo)準(zhǔn)模式CSS1Compat： 瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面。
HTML4提供了三種DOCTYPE可選擇：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0提供了三種DOCTYPE可選擇：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
怪異模式BackCompat： 瀏覽器使用自己的解析渲染引擎來(lái)解析渲染頁(yè)面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
或什么也不加
width則是元素的實(shí)際寬度，內(nèi)容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width);
怪異模式和標(biāo)準(zhǔn)模式
head標(biāo)簽
<head>標(biāo)簽是 HTML 文檔的一個(gè)重要部分，它通常位于文檔的起始位置，在<html>標(biāo)簽內(nèi)部。<head>標(biāo)簽中包含的元素提供了關(guān)于文檔的元信息，以及引用外部資源和定義文檔屬性的方法。
作用：
- 文檔元信息：描述文檔的屬性，如標(biāo)題、字符編碼等
- 引用外部資源：head中引用外部資源，如樣式表、腳本文件、圖標(biāo)等，也可以定義網(wǎng)站圖標(biāo)。
- SEO搜索引擎優(yōu)化：一些元信息和標(biāo)簽可以用于改善搜索引擎對(duì)頁(yè)面內(nèi)容的理解和索引。
<head>部分有以下幾標(biāo)簽：<base>、<link>、<meta>、<script>、<style>、<title>，其中，<title>定義文檔標(biāo)題，是head部分中唯一必需的元素。
瀏覽器亂碼的原因及解決
字符編碼是一種將字符映射到數(shù)字編碼的方法，用于在計(jì)算機(jī)中表示和存儲(chǔ)文本。如果網(wǎng)頁(yè)的字符編碼與瀏覽器解析時(shí)的字符編碼不一致，就可能出現(xiàn)亂碼問(wèn)題。
- 字符編碼不一致： 當(dāng)網(wǎng)頁(yè)的字符編碼與瀏覽器解析時(shí)的字符編碼不匹配時(shí)，瀏覽器無(wú)法正確解析和顯示字符。即網(wǎng)頁(yè)源代碼是
gbk的編碼，而內(nèi)容中的中文字是utf-8編碼，當(dāng)瀏覽器打開就會(huì)出現(xiàn)html亂碼。
解決： 確保服務(wù)器響應(yīng)頭和HTML中的標(biāo)簽正確設(shè)置字符編碼。通常使用UTF-8編碼。
服務(wù)端設(shè)置響應(yīng)頭：Content-Type: text/html; charset=utf-8
HTML中設(shè)置<meta>標(biāo)簽：<meta charset="UTF-8"> - 服務(wù)器端編碼問(wèn)題： 服務(wù)器生成的文本或數(shù)據(jù)以錯(cuò)誤的字符編碼傳遞給瀏覽器，導(dǎo)致瀏覽器無(wú)法正確解析。
解決： 在服務(wù)器端確保生成的文本和數(shù)據(jù)以正確的字符編碼輸出。通常使用UTF-8編碼。 - 字體問(wèn)題： 某些字體可能不包含特定字符的字形，導(dǎo)致瀏覽器無(wú)法正確渲染這些字符。
解決： 在CSS中使用通用字體族（如font-family: sans-serif;）以便瀏覽器可以自動(dòng)選擇適合的字體。
常用的meta標(biāo)簽與SEO
<!-- charset：描述HTML文檔的編碼類型 --><meta charset="UTF-8"><!-- viewport：適配移動(dòng)端，可控制視口的大小和比例content參數(shù)：width viewport 寬度(數(shù)值/device-width)height viewport 高度(數(shù)值/device-height)initial-scale 初始縮放比例maximum-scale 最大縮放比例minimum-scale 最小縮放比例user-scalable 是否允許用戶縮放(yes/no)--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="頁(yè)面內(nèi)容描述"><meta name="keywords" content="頁(yè)面關(guān)鍵詞"><meta name="author" content="網(wǎng)頁(yè)作者信息"><!-- refresh：頁(yè)面重定向和刷新 --><meta http-equiv="refresh" content="0; url=http://example.com"><!-- robots：搜索引擎索引方式content參數(shù)：all：文件將被檢索，且頁(yè)面上的鏈接可以被查詢none：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢index：文件將被檢索follow：頁(yè)面上的鏈接可以被查詢noindex：文件將不被檢索nofollow：頁(yè)面上的鏈接不可以被查詢--><meta name="robots" content="index,follow" />
script標(biāo)簽中defer和async的區(qū)別
在HTML中會(huì)遇到以下三類script：
<script src='xxx'></script> //（同步）容易阻塞瀏覽器解析HTML文檔，導(dǎo)致白屏。
<script src='xxx' async></script> //（異步）可能阻塞，也可能不阻塞。
<script src='xxx' defer></script> //（異步）不阻塞瀏覽器解析HTML文檔。
1、瀏覽器在解析HTML文檔時(shí)，如果遇到 <script src='xxx'></script> 標(biāo)簽，會(huì)停止解析文檔，立即加載并執(zhí)行指定的腳本，執(zhí)行完畢之后，才會(huì)繼續(xù)解析后面的標(biāo)簽。
2、瀏覽器在解析HTML文檔時(shí)，如果遇到 <script src='xxx' async></script> 標(biāo)簽時(shí)，說(shuō)明該腳本的網(wǎng)絡(luò)請(qǐng)求加載是異步進(jìn)行的，不用等腳本加載完之后再加載頁(yè)面或加載其他腳本，不會(huì)阻塞瀏覽器解析HTML。但是當(dāng)腳本加載完畢之后，如果此時(shí)HTML還未解析完，瀏覽器會(huì)暫停解析HTML，先讓JS引擎執(zhí)行代碼，執(zhí)行完畢后再解析HTML。
3、瀏覽器在解析HTML文檔時(shí)，如果遇到 <script src='xxx' defer></script> 標(biāo)簽時(shí)，說(shuō)明該腳本的網(wǎng)絡(luò)請(qǐng)求加載是異步進(jìn)行的，不用等腳本加載完之后再加載頁(yè)面或加載其他腳本，不會(huì)阻塞瀏覽器解析HTML。且當(dāng)腳本加載完畢之后，如果此時(shí)HTML還未解析完，瀏覽器不會(huì)暫停解析HTML，而是等HTML解析完畢之后，再讓JS引擎執(zhí)行代碼。
瀏覽器的渲染流程：
1、瀏覽器接收到字節(jié)數(shù)據(jù)，轉(zhuǎn)成字符串，網(wǎng)頁(yè)字符串交給HTML解析器，通過(guò)詞法分析轉(zhuǎn)換成token標(biāo)記，然后解析器根據(jù)token構(gòu)建節(jié)點(diǎn)，形成DOM樹。
2、瀏覽器的加載解析過(guò)程是“自上而下”的，若在解析html時(shí)，遇到JavaScript資源URL（沒(méi)有標(biāo)記異步方式），則需要停止當(dāng)前DOM樹創(chuàng)建，直到JavaScript加載并被JavaScript引擎執(zhí)行后才繼續(xù)DOM樹的創(chuàng)建。因?yàn)閖s可能會(huì)改動(dòng)dom和css造成解析浪費(fèi)。如果腳本是外部的則會(huì)等待腳本下載完畢再繼續(xù)解析文檔，腳本解析會(huì)將腳本中改變DOM和CSS的地方分別解析出來(lái)，追加到DOM樹和Style表上。
3、如果節(jié)點(diǎn)中有其他資源，如圖片、視頻等，調(diào)用資源加載器去加載這些內(nèi)容，但這些都是異步加載的，不會(huì)阻礙當(dāng)前DOM數(shù)繼續(xù)創(chuàng)建。css相關(guān)的請(qǐng)求資源會(huì)被瀏覽器生成相應(yīng)的CSSDOM，即使DOM解析完畢，頁(yè)面也不會(huì)渲染，頁(yè)面渲染的條件是DOM和CSSDOM都解析完畢，進(jìn)行合并生成RenderTree，進(jìn)一步進(jìn)行布局繪制。加載過(guò)程中遇到外部css文件，瀏覽器另外發(fā)出一個(gè)請(qǐng)求，來(lái)獲取css文件。css不妨礙DOM的解析，但是會(huì)阻塞頁(yè)面渲染。
重繪：
在不影響元素周圍或內(nèi)部的布局的情況下，只改變某個(gè)元素的外觀（如修改元素的顏色、背景、陰影等），引起瀏覽器的repaint，重畫某一部分，跳過(guò)了創(chuàng)建布局樹和分層的階段。
重排：
在元素的尺寸、位置或者整體布局改變時(shí)，瀏覽器會(huì)重新計(jì)算并更新頁(yè)面的布局（如添加、刪除、修改元素、改變窗口大小等），重排會(huì)影響整個(gè)頁(yè)面的布局和渲染，因此代價(jià)較大。
避免重排的方式：樣式集中改變、使用 absolute 或 fixed 脫離文檔流。
src&href區(qū)別
<img src="" alt="">
<input type="text" src="">
<script src=""></script>
<iframe src="" frameborder="0"></iframe><a href=""></a>
<link rel="stylesheet" href="style.css">
1、src（source）指向外部資源，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)，會(huì)暫停其他資源的下載和處理，直接將其指向的資源同步加載、編譯、執(zhí)行到相應(yīng)的文檔內(nèi)。這也就是為什么要把js腳本放在底部而不是頭部。
-- src：img、input、style、script、iframe
2、href（Hypertext Reference）指超文本引用，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接；在文檔中添加href資源時(shí)，會(huì)將其指向的資源異步下載到相應(yīng)的文檔內(nèi)，不會(huì)停止對(duì)當(dāng)前文檔的處理。這也就是為什么建議使用link方式來(lái)加載css，而不是@import方式。
-- href：link、a
HTML5有哪些更新
語(yǔ)義化標(biāo)簽
語(yǔ)義化是指根據(jù)內(nèi)容的結(jié)構(gòu)，選擇合適的標(biāo)簽，即用正確的標(biāo)簽做正確的事情。
優(yōu)點(diǎn)：
1、對(duì)機(jī)器友好，帶有語(yǔ)義的文字表現(xiàn)力豐富，更適合搜索引擎的爬蟲爬取有效信息，有利于搜索引擎優(yōu)化SEO（search engine optimization）。語(yǔ)義類還支持讀屏軟件，根據(jù)文章可以自動(dòng)生成目錄。
2、對(duì)開發(fā)者友好，使用語(yǔ)義類標(biāo)簽增強(qiáng)了可讀性，結(jié)構(gòu)更加清晰，開發(fā)者能清晰的看出網(wǎng)頁(yè)的結(jié)構(gòu)，便于團(tuán)隊(duì)的開發(fā)與維護(hù)。
<header>定義文檔的頁(yè)眉（頭部）</header><nav>定義導(dǎo)航鏈接的部分</nav><footer>定義文檔或節(jié)的頁(yè)腳（底部）</footer><article>定義文章內(nèi)容</article><section>定義文檔中的節(jié)（section、區(qū)段）</section><aside>定義其所處內(nèi)容之外的內(nèi)容（側(cè)邊）</aside>
媒體標(biāo)簽
1、音頻：<audio src=""></audio>
2、視頻：<video src=""></video>
3、媒體資源
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">
</video>
表單
新增表單元素：
· email：提交表單的時(shí)候驗(yàn)證輸入值是否滿足email的格式
· tel：驗(yàn)證輸入的是否是電話號(hào)碼的格式
· url：提交表單的時(shí)候驗(yàn)證輸入值是否滿足url的格式
· number：根據(jù)你的設(shè)置提供選擇數(shù)字的功能，其中min為最小值，max為最大值，value為默認(rèn)值，step為點(diǎn)擊箭頭時(shí)數(shù)字的變化量，max、min、step、value均可不寫，目前某些瀏覽器還不支持。
· range：會(huì)以一個(gè)滑塊的形式表現(xiàn)包含一定范圍內(nèi)數(shù)字值的輸入域，max為最大值，min為最小值，value為默認(rèn)值，如果沒(méi)有設(shè)置max和min，默認(rèn)值是1-100
· date：選取日、月、年
· month：選取月、年
· week：選取周、年
· time：選取小時(shí)、分鐘
· datetime-local：選取時(shí)間、日、月、年(本地時(shí)間)
· search：用于搜索域，若加上result="s"屬性，則會(huì)在搜索框前面加一個(gè)搜索圖標(biāo)
· color：color類型會(huì)提供顏色拾取器，供用戶選擇顏色，并將用戶選擇的顏色填充到此元素中
新增表單屬性：
· autofocus：在頁(yè)面加載時(shí)，自動(dòng)獲得焦點(diǎn)。
· placeholder：提供一種提示（hint），描述輸入域所期待的值。
· autocomplete ：規(guī)定 form元素或者input元素?fù)碛凶詣?dòng)完成功能，即記錄用戶之前輸入的值，關(guān)閉為off，默認(rèn)為on。
· required：要求該輸入框是必填項(xiàng)，當(dāng)提交表單的時(shí)候會(huì)自動(dòng)驗(yàn)證其內(nèi)容是否不為空。
· pattern：利用正則表達(dá)式用于驗(yàn)證 <input> 元素的值。
· multiple：規(guī)定<input> 元素中可選擇多個(gè)文件或郵箱。
新增表單事件：
· oninput：監(jiān)聽當(dāng)前指定元素內(nèi)容的改變，只要內(nèi)容改變(添加內(nèi)容，刪除內(nèi)容)事件就會(huì)觸發(fā)。
· oninvalid：當(dāng)表單提交驗(yàn)證不通過(guò)時(shí)會(huì)觸發(fā)該事件。
進(jìn)度條、度量器
1、進(jìn)度條：<progress value="22" max="100"></progress>
2、度量器：<meter value="2" min="0" max="10"></meter>
DOM查詢
Web存儲(chǔ)
cookie與sessionStorage和localStorage：
1、保存方式：
cookie存放在客戶的瀏覽器上。
session都在客戶端中保存，不參與服務(wù)器通訊。
2、生命周期：
cookie可設(shè)置失效時(shí)間。
localStorage除非手動(dòng)清除否則可永久保存。
sessionStorage關(guān)閉當(dāng)前頁(yè)面或?yàn)g覽器后失效。
3、存儲(chǔ)大小
cookie 4KB左右
session 5MB
4、使用情景
cookie因每次請(qǐng)求都會(huì)攜帶在http中，可用來(lái)識(shí)別用戶登錄。
localStorage可用來(lái)跨頁(yè)面?zhèn)鲄ⅰ?br /> sessionStorage可用來(lái)保留一些臨時(shí)數(shù)據(jù)。
Canvas和SVG
1、Canvas：圖形容器，用于圖形的繪制，通過(guò)JavaScript來(lái)繪制2D圖形，逐像素進(jìn)行渲染，當(dāng)其位置發(fā)生變化，就會(huì)重繪。
- 位圖繪制： Canvas 是一個(gè) HTML5 元素，提供了一個(gè)位圖繪制的區(qū)域，你可以在上面繪制像素。繪制結(jié)果是一張位圖圖像。
- 像素操作： 你可以直接操作像素?cái)?shù)據(jù)，繪制圖形、圖像和復(fù)雜的效果。因?yàn)槭窍袼夭僮?#xff0c;縮放可能會(huì)導(dǎo)致圖像失真。
- 實(shí)時(shí)繪制： Canvas 適用于需要實(shí)時(shí)更新和繪制的場(chǎng)景，如游戲、數(shù)據(jù)可視化等。
- 動(dòng)畫和交互性： Canvas 能夠?qū)崿F(xiàn)動(dòng)畫效果，但需要通過(guò) JavaScript 來(lái)處理動(dòng)畫幀和交互事件。
- 圖形復(fù)雜性： 對(duì)于繪制簡(jiǎn)單圖形或需要復(fù)雜的像素級(jí)操作的情況，Canvas 是一個(gè)不錯(cuò)的選擇。
2、SVG： 基于可擴(kuò)展標(biāo)記語(yǔ)言XML描述的2D圖形的語(yǔ)言，每個(gè)被繪制的圖形均被視為對(duì)象，如果對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。
- 矢量圖形： SVG 是一種基于 XML 的圖形描述語(yǔ)言，它使用矢量圖形來(lái)描述圖像，這意味著圖像可以無(wú)限縮放而不失真。
- DOM 元素： SVG 圖形被視為 DOM（文檔對(duì)象模型）元素，可以像 HTML 元素一樣進(jìn)行操作。這使得它可以與其他 DOM 元素交互、操作和樣式化。
- 分辨率無(wú)關(guān)性： 由于是矢量圖形，SVG 不依賴于分辨率，所以它適合用于不同大小的顯示屏和設(shè)備。
- 動(dòng)畫和交互性： SVG 支持內(nèi)置的動(dòng)畫和交互功能，可以使用 CSS 和 JavaScript 來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)態(tài)效果。
- 圖形復(fù)雜性： 對(duì)于圖像和圖形的繪制，特別是在需要復(fù)雜路徑和形狀的情況下，SVG 是一個(gè)很好的選擇。
- 文本支持： SVG 具有文本支持，可以嵌入文本和文字，使其成為圖像和圖表的好選擇。
拖放 （HTML5 drag API）
拖放：拖放是一種常見的特性，即抓取對(duì)象以后拖到另一個(gè)位置。
<style>#div1 {width: 140px;height: 160px;padding: 10px;border: 1px solid #a1a1a1;}#dragimg {width: 120px;height: 140px;}
</style><body><div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)"></div><img src="./static/123.png" draggable="true" ondragstart="drag(event)" decoding="async" loading="lazy" id="dragimg"><script>function allowDrag(event) {event.preventDefault()}function drag(ev) {ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {ev.preventDefault()var data = ev.dataTransfer.getData("Text")ev.target.appendChild(document.getElementById(data))}</script>
</body>
WebSocket
WebSocket：是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議，實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通訊的目的。
【W(wǎng)ebSocket】前端使用WebSocket實(shí)時(shí)通信
img的srcset屬性
<img src="/static/flamingo-fallback.jpg"srcset="/static/flamingo4x.png 4x,/static/flamingo3x.png 3x,/static/flamingo2x.png 2x,/static/flamingo1x.png 1x "sizes="(max-width: 360px) 340px, 128px" />
//在圖片密度為1x時(shí)，加載/static/flamingo1x.png
//在圖片密度為2x時(shí)，加載/static/flamingo2x.png
//在圖片密度為3x時(shí)，加載/static/flamingo3x.png
//在圖片密度為4x時(shí)，加載/static/flamingo4x.png
//sizes="[media query] [length], [media query] [length] ... "
實(shí)現(xiàn)響應(yīng)式圖片，在指定寬度或像素密度下加載對(duì)應(yīng)的圖片地址。
srcset指定圖片的地址和對(duì)應(yīng)的圖片質(zhì)量。sizes用來(lái)設(shè)置圖片的尺寸零界點(diǎn)。
行內(nèi)元素、塊級(jí)元素、空元素
1、行內(nèi)元素特點(diǎn)：
· 可以與其他行內(nèi)元素位于同一行；
· 行內(nèi)內(nèi)部可以容納其他行內(nèi)元素，但不可以容納塊元素，不然會(huì)出現(xiàn)無(wú)法預(yù)知的效果；
常見行內(nèi)元素有：span、img、input、select、strong、em、a、b。
2、塊元素特點(diǎn)：
· 獨(dú)占一行，排斥其他元素跟其位于同一行，包括塊元素和行內(nèi)元素；
· 塊元素內(nèi)部可以容納其他塊元素或行元素；
常見塊元素有：h1~h6、p、div、ul、ol、li、dl、dt、dd、hr。
3、空元素特點(diǎn)：
· 沒(méi)有內(nèi)容的HTML元素
· 自閉合標(biāo)簽
常見的空元素有：br、hr、img、input、link、meta。
Web Worker
當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)，頁(yè)面的狀態(tài)是不可響應(yīng)的，直到腳本已完成。
web worker 是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(yùn)行。
JavaScript采用的是單線程，當(dāng)有多個(gè)任務(wù)時(shí)，需要排隊(duì)執(zhí)行，而web worker的作用是為JavaScript創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建Worker線程，在主線程運(yùn)行任務(wù)時(shí)，Worker線程在后臺(tái)運(yùn)行其他任務(wù)，互不干擾。
Web Worker 使用教程
<body><p>計(jì)數(shù)：<span id="result"></span></p><button onclick="startWorker()">開始工作</button><button onclick="stopWorker()">停止工作</button><script>var wkr;function startWorker() {//檢測(cè)是否存在 Workerif (typeof (Worker) !== "undefined") { if (typeof (wkr) == "undefined") {wkr = new Worker("demo_workers.js") //創(chuàng)建Web Worker對(duì)象}//向 web worker 添加一個(gè) "onmessage" 事件監(jiān)聽器wkr.onmessage = function (event) {document.getElementById("result").innerHTML = event.data}} else {document.getElementById("result").innerHTML = "抱歉，您的瀏覽器不支持Web Workers..."}}function stopWorker() {wkr.terminate() //終止 Web Workerwkr = undefined}</script>
</body>
HTML5離線存儲(chǔ)
離線存儲(chǔ)：通過(guò)將網(wǎng)頁(yè)的資源（如 HTML、CSS、JavaScript、圖像等）保存在用戶的設(shè)備上，允許用戶在沒(méi)有網(wǎng)絡(luò)連接的情況下，仍然能夠訪問(wèn)和使用網(wǎng)頁(yè)。在用戶連接網(wǎng)絡(luò)之后，更新用戶機(jī)器上的緩存文件。
過(guò)程：
1、創(chuàng)建一個(gè)Cache Manifest文件，在其中列出需要在離線時(shí)緩存的資源，以及網(wǎng)絡(luò)策略，并在需要離線存儲(chǔ)功能的HTML文件中，通過(guò)<html lang="en" manifest="index.manifest">引入該文件。
2、在線時(shí)：當(dāng)用戶第一次訪問(wèn)這個(gè)頁(yè)面時(shí)，瀏覽器會(huì)根據(jù)頁(yè)面頭部manifest屬性的信息，下載并解析Cache Manifest文件的內(nèi)容。瀏覽器會(huì)根據(jù)CACHE部分列出的資源進(jìn)行下載并保存到本地。當(dāng)再次訪問(wèn)時(shí)，瀏覽器會(huì)使用離線資源加載頁(yè)面，并且通過(guò)對(duì)比新的manifest文件與舊的manifest文件，進(jìn)行下載并更新需要更新的資源。
3、離線時(shí)：瀏覽器會(huì)直接使用離線存儲(chǔ)資源。
CACHE MANIFEST
# Version 1.0CACHE:
styles.css
script.js
images/logo.pngNETWORK:
*FALLBACK:.manifest 文件由多個(gè)部分組成，包括 “CACHE”、“NETWORK” 和 “FALLBACK”。其中：
CACHE 部分列出了需要在離線時(shí)緩存的資源。
NETWORK 定義了在離線狀態(tài)下需要從網(wǎng)絡(luò)加載的資源。通常使用 * 表示所有資源都需要從網(wǎng)絡(luò)加載，也就是離線時(shí)不使用本地緩存。但當(dāng)CACHE和NETWORK中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線存儲(chǔ)，即CACHE的優(yōu)先級(jí)更高。
FALLBACK 可以定義一些在離線時(shí)備用的資源。例如，如果某個(gè)資源在離線時(shí)不可用，你可以為它指定一個(gè)備用的資源。
title與h1、b與strong、i與em的區(qū)別
1、title與h1：
title：通常用于指定文檔的標(biāo)題，顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁(yè)上，不會(huì)在網(wǎng)頁(yè)內(nèi)容上顯示出來(lái)。
h1：HTML 標(biāo)題元素，用于表示文檔的主要標(biāo)題。一個(gè)頁(yè)面應(yīng)該只有一個(gè) h1 元素，表示頁(yè)面的主題或主要內(nèi)容。
2、b與strong：
b：表示粗體文本的標(biāo)簽，它在樣式上使文本變粗，但沒(méi)有強(qiáng)調(diào)的語(yǔ)義含義。
strong：表示強(qiáng)調(diào)的語(yǔ)義標(biāo)簽，它在樣式上通常也會(huì)使文本變粗，但更重要的是強(qiáng)調(diào)文本的重要性或語(yǔ)義上的強(qiáng)調(diào)。搜索引擎和屏幕閱讀器等工具可能會(huì)對(duì) strong 元素給予更大的重視。
3、i與em：
i：表示斜體文本的標(biāo)簽，它在樣式上使文本變斜，但沒(méi)有強(qiáng)調(diào)的語(yǔ)義含義。
em：表示強(qiáng)調(diào)的語(yǔ)義標(biāo)簽，它在樣式上通常也會(huì)使文本變斜，但更重要的是強(qiáng)調(diào)文本的重要性或語(yǔ)義上的強(qiáng)調(diào)。與 strong 類似，em 也可能受到搜索引擎和閱讀器的特殊處理。
iframe的優(yōu)缺點(diǎn)
<iframe>（內(nèi)聯(lián)框架）是 HTML 中的一個(gè)元素，用于在當(dāng)前網(wǎng)頁(yè)中嵌入另一個(gè)網(wǎng)頁(yè)或內(nèi)容。
優(yōu)點(diǎn)：
1、異步加載：解決加載緩慢的第三方內(nèi)容（如圖表、廣告等）加載問(wèn)題，能并行加載腳本。
2、方便管理： <iframe> 內(nèi)部的內(nèi)容與外部頁(yè)面相互隔離，內(nèi)部?jī)?nèi)容的樣式和腳本不會(huì)影響外部頁(yè)面，且 <iframe> 允許你將不同的功能模塊分開開發(fā)和維護(hù)。如果有多頁(yè)面需要用到iframe的內(nèi)容，只要修改iframe的內(nèi)容就可以實(shí)現(xiàn)統(tǒng)一管理。
3、內(nèi)容嵌入：可以在一個(gè)頁(yè)面中完整的嵌入另一個(gè)頁(yè)面或內(nèi)容。
缺點(diǎn)：
1、性能問(wèn)題：如果過(guò)多地使用 <iframe> ，會(huì)導(dǎo)致頁(yè)面加載時(shí)間延長(zhǎng)，增加服務(wù)器的http請(qǐng)求（iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載），阻塞父頁(yè)面的load事件。
2、跨域安全性：如果在 <iframe> 中嵌入了來(lái)自其他域的內(nèi)容，可能會(huì)受到跨域腳本攻擊或其他安全問(wèn)題的影響。
3、SEO問(wèn)題：搜索引擎可能無(wú)法正確解釋嵌入在 <iframe> 中的內(nèi)容，影響搜索引擎優(yōu)化。
4、可維護(hù)性：過(guò)多地使用 <iframe> 可能會(huì)導(dǎo)致頁(yè)面的維護(hù)變得復(fù)雜，尤其是當(dāng)多個(gè)嵌套 <iframe> 之間需要進(jìn)行交互時(shí)。
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的區(qū)別
“漸進(jìn)增強(qiáng)” 和 “優(yōu)雅降級(jí)” 是兩種前端設(shè)計(jì)理念，旨在確保網(wǎng)頁(yè)在不同瀏覽器和設(shè)備上的兼容性和用戶體驗(yàn)。
漸進(jìn)增強(qiáng)： 漸進(jìn)增強(qiáng)主要是針對(duì)低版本的瀏覽器進(jìn)行頁(yè)面重構(gòu)，從基本功能開始，逐步添加更高級(jí)的功能和樣式，以適應(yīng)不同瀏覽器和設(shè)備的能力，達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí)： 優(yōu)雅降級(jí)是從一個(gè)完整、豐富的功能和樣式出發(fā)，逐步降低功能和樣式，以適應(yīng)舊版瀏覽器的能力。核心思想是構(gòu)建一個(gè)面向現(xiàn)代瀏覽器的優(yōu)化版本，然后在老舊瀏覽器中逐漸降低功能，以確保網(wǎng)頁(yè)在這些瀏覽器中的可用性。
區(qū)別：
1、漸進(jìn)增強(qiáng)是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始的，并在此基礎(chǔ)上不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要；優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始的，并試圖減少用戶體驗(yàn)的供給。
2、漸進(jìn)增強(qiáng)是向前看，同時(shí)保證其根基處于安全地帶；降級(jí)意味著往回看，主鍵降低功能。
3、漸進(jìn)增強(qiáng)適用于構(gòu)建跨瀏覽器兼容的網(wǎng)站，強(qiáng)調(diào)核心功能和可用性。優(yōu)雅降級(jí)適用于優(yōu)先關(guān)注現(xiàn)代瀏覽器，但仍要確保在舊版本瀏覽器上有合理的降級(jí)方案。
學(xué)習(xí)文章：前端面試題之HTML篇