1.src和href的區別

總結來說：

• <font style="color:rgb(238, 39, 70);background-color:rgb(249, 241, 219);">src</font>用于替換當前元素，指向的資源會嵌入到文檔中，例如腳本、圖像、框架等。
• <font style="color:rgb(238, 39, 70);background-color:rgb(249, 241, 219);">href</font>用于建立文檔與引用資源之間的鏈接，例如鏈接到其他文檔或引入外部樣式表。

（1）src

src 指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求 src 資源時會將其指向的資源下載并應用到文檔內，例如 js 腳本。

img/iframe標簽加載資源是異步的，不會阻止瀏覽器解析HTML，但是在加載時元素尺寸未知會延遲渲染，直到確認尺寸；在 <font style="color:rgb(6, 6, 7);"><img></font> 和 <font style="color:rgb(6, 6, 7);"><iframe></font> 標簽中指定 <font style="color:rgb(6, 6, 7);">width</font> 和 <font style="color:rgb(6, 6, 7);">height</font> 屬性，可以避免瀏覽器因等待資源加載而延遲渲染。

<script src =”js.js”></script>

當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，這也是為什么將js 腳本放在底部而不是頭部。

（2）href

href 指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果在文檔中添加

<link href=”common.css” rel=”stylesheet”/>

那么瀏覽器會識別該文檔為 css 文件，就會并行下載資源并且不會停止對當前文檔的處理。 這也是為什么建議使用 link 方式來加載 css，而不是使用@import 方式。

link會異步加載css，而@import會在頁面加載完成后才開始加載，會出現頁面初始無樣式也就是白屏問題。

2.對HTML語義化的理解

HTML語義化是指在編寫HTML代碼時，使用具有明確含義的標簽來構建網頁內容 使得網頁內容更加清晰、易于理解和維護。

HTML語義化有以下幾個優點：

• SEO優化：搜索引擎可以通過語義化的標簽更好地理解網頁內容，從而提高網站在搜索引擎中的排名。
• 可訪問性：語義化標簽使得網頁在沒有CSS的情況下也能呈現出良好的結構，便于輔助技術（如屏幕閱讀器）為殘障人士提供更好的訪問體驗。
• 代碼可讀性和可維護性：使用語義化標簽可以使代碼更加清晰和有組織，便于團隊協作和代碼維護。
• 對機器友好，帶有語義的文字表現力豐富，更適合搜索引擎的爬蟲爬取有效信息，有利于SEO。除此之外，語義類還支持讀屏軟件，根據文章可以自動生成目錄；

語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）。通俗來講就是用正確的標簽做正確的事情。

常見的語義化標簽：

<header></header>  頭部<nav></nav>  導航欄<section></section>  區塊（有語義化的div）<main></main>  主要區域<article></article>  主要內容<aside></aside>  側邊欄<footer></footer>  底部

3.DOCTYPE（文檔類型）的使用

DOCTYPE是HTML5中一種標準通用標記語言的文檔類型聲明，它的目的是告訴瀏覽器（解析器）應該以什么樣（html或xhtml）的文檔類型定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚? JavaScript 腳本的解析。

瀏覽器渲染頁面的兩種模式（可通過document.compatMode獲取，比如，語雀官網的文檔類型是CSS1Compat：

• CSS1Compat：標準模式（Strict mode），默認模式，瀏覽器使用W3C的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈現頁面。
• BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。

前者讓IE具有兼容標準的行為 后者讓IE 像IE5一樣（支持一些非標準的特性）

4.script標簽中defer 和asnyc的區別

如果沒有這兩個屬性，瀏覽器會立即加載并執行相應的腳本，阻塞后續文檔的加載

其中藍色代表js腳本網絡加載時間，紅色代表js腳本執行時間，綠色代表html解析

defer是“渲染完再執行”

async是“下載完就執行”

另外，如果有多個defer腳本，會按照它們在頁面出現的順序加載，而多個async腳本是不能保證加載順序的。

5.常用meta標簽有哪些

meta 標簽由 name 和 content 屬性定義，用來描述網頁文檔的屬性，比如網頁的作者，網頁描述，關鍵詞等，除了HTTP標準固定了一些name作為大家使用的共識，開發者還可以自定義name。

常用的meta標簽：

（1）charset，用來描述HTML文檔的編碼類型：

<meta charset="UTF-8" >

（2） keywords，頁面關鍵詞：

<meta name="keywords" content="關鍵詞" />

（3）description，頁面描述：

<meta name="description" content="頁面描述內容" />

（4）refresh，頁面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，適配移動端，可以控制視口的大小和比例：

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

其中，content 參數有以下幾種：

• width viewport ：寬度(數值/device-width)
• height viewport ：高度(數值/device-height)
• initial-scale ：初始縮放比例
• maximum-scale ：最大縮放比例
• minimum-scale ：最小縮放比例
• user-scalable ：是否允許用戶縮放(yes/no）

（6）搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 參數有以下幾種：

• all：文件將被檢索，且頁面上的鏈接可以被查詢；
• none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
• index：文件將被檢索；
• follow：頁面上的鏈接可以被查詢；
• noindex：文件將不被檢索；
• nofollow：頁面上的鏈接不可以被查詢。

6.HTML5有哪些更新（未寫完）

語義化標簽

媒體標簽：

7.行內元素有哪些？塊級，空？鏈接

行內元素：span i em strong b a input select

塊級：div p h1~h6 ul li ol

空元素，即沒有內容的HTML元素。空元素是在開始標簽中關閉的，也就是空元素沒有閉合標簽：

• 常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
• 鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

	寬高	margin（有效）	自動換行
行內元素	設置寬高無效	左右	x
塊級元素	能夠識別寬高	上下左右	√
行內塊元素	能夠識別		x

8.對webworker的理解

Web Worker 是一種在后臺運行的多線程技術，可以提高網頁的性能和響應能力。然而，由于同源策略、無法直接操作 DOM、消息傳遞等限制，Web Worker 的使用場景和方式需要根據具體需求進行合理的設計和選擇。

webworker是運行在后臺的js 獨立于其他腳本，在進行復雜操作時不會影響主線程

Web Worker 是 HTML5 提供的一項技術，允許 JavaScript 在后臺創建多個線程來執行任務，以提高網頁的性能和響應能力。Web Worker 可以在主線程之外運行，與主線程并行工作，并且不會阻塞頁面的交互。

主要特點和用途：

• 多線程運行：Web Worker 允許 JavaScript 代碼在后臺創建一個或多個線程，獨立于主線程運行。這樣可以執行一些耗時的計算、處理大量數據、執行復雜的算法等任務，而不會影響主線程的響應性能。
• 并行處理：由于 Web Worker 運行在獨立的線程中，可以與主線程并行工作，從而提高頁面整體的性能和響應速度。
• 可以進行復雜的計算：Web Worker 適用于需要進行復雜計算或處理大量數據的場景，例如圖像處理、音視頻編解碼、物理模擬等。

Web Worker 的使用限制包括：

• 同源策略：Web Worker 遵循同源策略，即只能與加載它的腳本具有相同的域、協議和端口。
• 無法直接操作 DOM：Web Worker 不能直接訪問或操作頁面的 DOM 結構。這是為了確保多線程操作不會導致不可預測的結果或競態條件。
• 消息傳遞：Web Worker 與主線程之間的通信需要通過消息傳遞機制，即通過 postMessage() 方法發送消息，并通過 onmessage 事件接收消息。這種通信方式有一定的開銷和限制。
• 無法訪問某些全局對象和方法：無法訪問 window、document 和其他一些瀏覽器特定的全局對象和方法。

9.title&h1，b&strong，i&em的區別

title是網頁的標題，h1是網頁內容某部分的標題

b標簽只是一個簡單的加粗標簽，而strong標簽有加強語氣的效果，

i內容展示為斜體，em表示強調的文本

10.canvas和svg的區別

（1）SVG：

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言XML描述的2D圖形的語言，SVG基于XML就意味著SVG DOM中的每個元素都是可用的，可以為某個元素附加Javascript事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

其特點如下：

• 不依賴分辨率
• 支持事件處理器
• 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
• 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
• 不適合游戲應用

（2）Canvas：

Canvas是畫布，通過Javascript來繪制2D圖形，是逐像素進行渲染的。其位置發生改變，就會重新進行繪制。

其特點如下：

• 依賴分辨率
• 不支持事件處理器
• 弱的文本渲染能力
• 能夠以 .png 或 .jpg 格式保存結果圖像
• 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

注：矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

canvas按像素渲染，svg按xml繪制，所以canvas縮放會更模糊，但是動態效果更好，svg則反之。

11.head 標簽有什么作用，其中什么標簽必不可少

12.WEB標準以及W3C標準是什么？

WEB標準是指由萬維網聯盟（World Wide Web Consortium，簡稱W3C）制定的一系列技術規范和指南，旨在確保網頁在不同的瀏覽器和設備上具有一致的表現和行為。這些標準涵蓋了HTML、CSS、JavaScript等前端技術，并規定了它們的語法、結構、樣式以及交互行為等方面的規范。

W3C標準是由W3C組織制定和推廣的一系列技術標準，旨在推動網絡技術的發展和互操作性。W3C是一個國際性的標準化組織，由互聯網行業的各大公司、研究機構和個人組成，致力于制定并推廣互聯網的開放標準。W3C標準包括HTML、CSS、XML、DOM、SVG等多個技術領域，并且不斷更新和演進，以適應新的需求和技術發展。

具體來說，WEB標準和W3C標準強調以下幾個方面：

• 標簽閉合：HTML標簽必須按照規定的格式正確閉合，以確保頁面結構的準確性和一致性。
• 標簽小寫：HTML標簽和屬性應該使用小寫字母，以避免瀏覽器解析錯誤。
• 不亂嵌套：HTML標簽應該按照正確的嵌套規則進行使用，不應該出現亂七八糟的嵌套結構，以確保頁面結構的清晰和可維護性。
• 使用外鏈CSS和JS：將CSS樣式和JavaScript代碼盡可能地放在外部文件中，并通過鏈接的方式引入，以實現結構、行為和表現的分離，提高代碼的可重用性和可維護性。

通過遵循這些標準和規范，開發人員可以編寫出更加規范、可靠和跨平臺的網頁，確保網頁在不同的瀏覽器和設備上得到一致的顯示和行為，提供更好的用戶體驗。此外，遵循WEB標準和W3C標準還有助于網頁的可訪問性、可維護性和可擴展性，同時推動互聯網技術的進步和發展

---

-------了解--------

img的srcset屬性的作用

響應式頁面中經常用到根據屏幕密度設置不同的圖片。這時就用到了 img 標簽的srcset屬性。srcset屬性用于設置不同屏幕密度下，img 會自動加載不同的圖片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代碼，就能實現在屏幕密度為1x的情況下加載image-128.png, 屏幕密度為2x時加載image-256.png。

按照上面的實現，不同的屏幕密度都要設置圖片地址，目前的屏幕密度有1x,2x,3x,4x四種，如果每一個圖片都設置4張圖片，加載就會很慢。所以就有了新的srcset標準。代碼如下：

<img src="image-128.png"srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定圖片的地址和對應的圖片質量。sizes用來設置圖片的尺寸零界點。對于 srcset 中的 w 單位，可以理解成圖片質量。如果可視區域小于這個質量的值，就可以使用。瀏覽器會自動選擇一個最小的可用圖片。

sizes語法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默認顯示128px, 如果視區寬度大于360px, 則顯示340px。

屏幕密度

HTML離線存儲怎么使用，它的工作原理是什么

瀏覽器是如何對HTML5的離線儲存資源進行管理和加載

Label的作用是什么，如何使用？

Label標簽來定義表單控件的關系：當用戶選擇label標簽時，瀏覽器會自動將焦點轉到和label標簽相關的表單控件上

文檔聲明（Doctype）和<!Doctype html>有何作用，嚴格模式與混雜模式如何區分，它們有何意義？

文檔聲明（Doctype）和<!Doctype html>有何作用，嚴格模式與混雜模式如何區分，它們有何意義

文****檔聲明的作用：文檔聲明是為了告訴瀏覽器，當前HTML文檔使用什么版本的HTML來寫的，這樣瀏覽器才能按照聲明的版本來正確的解析

<!Doctype html>的作用：<!doctype html> 的作用就是讓瀏覽器進入標準模式，使用最新的 HTML5 標準來解析渲染頁面；如果不寫，瀏覽器就會進入混雜模式，我們需要避免此類情況發生。

**嚴格模式與混雜模式如何區分 **

嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。

混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。

如何區分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網頁中的 DTD 直接相關。

如果文檔**包含嚴格的 DOCTYPE** ，那么它一般以嚴格模式呈現。（嚴格 DTD ——嚴格模式）

包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最后的地址）會導致頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）

DOCTYPE 不存在或形式不正確會導致文檔以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式）

HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬松的語法，實現時，已經盡可能大的實現了向后兼容。（ HTML5 沒有嚴格和混雜之分）

意義：嚴格模式與混雜模式存在的意義與其來源密切相關，如果說只存在嚴格模式，那么許多舊網站必然受到影響，如果只存在混雜模式，那么會回到當時瀏覽器大戰時的混亂，每個瀏覽器都有自己的解析模式。

---

嚴格型：結構中不能出現格式或表現的內容，以及棄用的元素（比如 font）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

過渡型：結構中可以出現格式標記或表現(CSS)的內容 ，仍然可以使用廢棄的元素。比如Html4.01 和XHTML1.0的過渡性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

框架型：可以使用框架技術，實現多個網頁在一個瀏覽器窗口中呈現 。比如Html4.01 和XHTML1.0的框架型。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

:::tips

• <!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標簽之前。告知瀏覽器的解析器， 用什么文檔類型 規范來解析這個文檔。
• Document Type Definition定義了XML或者HTML的特定版本中允許有什么，不允許有什么，在渲染解析頁面的時候瀏覽器會根據這些規則檢查頁面的有效性并且采取相應的措施。
• DTD分為三種類型分別是嚴格型,過渡型,框架型。
• 瀏覽器解析文檔的時有兩種類型分別為嚴格模式和混雜模式,這兩種模式的區分又與DTD有密切聯系.(嚴格 DTD ——嚴格模式)，(有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式） ，（DTD不存在或者格式不正確——混雜模式），（ HTML5 沒有嚴格和混雜之分）
• 嚴格模式與混雜模式存在的意義:如果說只存在嚴格模式，那么許多舊網站必然受到影響，如果只存在混雜模式，那么會回到當時瀏覽器大戰時的混亂，每個瀏覽器都有自己的解析模式。

:::

漸進增強和優雅降級的區別

在我們構建一個web項目的時候肯定要先考慮我們的項目是要以實現完整的功能為主還是以基本功能為主。這就引出了漸進增強vs優雅降級

（****1）漸進增強（progressive enhancement）：主要是針對低版本的瀏覽器進行頁面重構，保證基本的功能情況下，再針對高級瀏覽器進行效果、交互等方面的改進和追加功能，以達到更好的用戶體驗。

（2）優雅降級 graceful degradation： 一開始就構建完整的功能，然后再針對低版本的瀏覽器進行兼容。

兩者區別：

• 優雅降級是從復雜的現狀開始的，并試圖減少用戶體驗的供給；而漸進增強是從一個非常基礎的，能夠起作用的版本開始的，并在此基礎上不斷擴充，以適應未來環境的需要；
• 降級（功能衰竭）意味著往回看，而漸進增強則意味著往前看，同時保證其根基處于安全地帶。

“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。 在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

“漸進增強”觀點則認為應關注于內容本身。內容是建立網站的誘因，有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。