HTMLHTML5語義化與新特性什麼是HTML語義化？

表示選擇合適的標籤（語義化標籤）便於開發者閱讀和寫出更優雅的程式碼

為什麼要使用語義化標籤？

1). 在沒有CSS樣式的情況下，頁面整體也會呈現很好的結構效果

2). 更有利於使用者體驗

3). 更有利於搜尋引擎最佳化

4). 程式碼結構清晰，方便團隊開發與維護

HTML5新特性有哪些？

1). 語義化標籤

2). 音影片處理

3). Canvas / WebGL

4). history API

5). requestAnimationFrame

6). 地理位置

7). WebSocket

8). Webworks

什麼是DOCTYPE及作用？

DOCTYPE是用來宣告文件型別和DTD規範的，一個主要的用途便是檔案的合法性驗證。如果檔案程式碼不合法，那麼瀏覽器解析時會出一些錯誤。（DOCTYPE告訴瀏覽器當前是哪個文件型別）

行內元素與塊級元素

1. 行內元素的特點？

1). 元素排在一行

2). 只能包含文字或者其他內聯元素

3). 寬高就是內容寬高、設定寬高無效

2. 塊級元素的特點？

1). 元素單獨佔一行

2). 元素的寬高都可以設定

3). 可以包含內聯元素和其他塊元素

4). 為設定寬度時，預設寬度是它容器的100%

3. 常見行內元素標籤

a、br、code、em、img、input…

4. 常見塊級元素標籤：

div、p、dl、dt、form、h1~h6…

簡述一下src與href的區別

1. src是指向外部資源的位置，指向的內容會嵌入到文件中當前標籤所在的位置，在請求src資源時會將其指向的資源下載並應用到文件內，如js指令碼，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源載入、編譯、執行完畢，所以一般js指令碼會放在底部而不是頭部。

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

div+css的佈局較table佈局有什麼優點？

1. 正常場景一般都適用div+CSS佈局，

2. 優點：

1). 結構與樣式分離

2). 程式碼語義性好

3). 更符合HTML標準規範

4). SEO友好

3. Table佈局的適用場景：

某種原因不方便載入外部CSS的場景，例如郵件正文，此時用table佈局可以在無css情況下保持頁面佈局正常。

一個頁面上有大量的圖片（大型電商網站），載入很慢,你有哪些方法最佳化這些圖片的載入，給使用者更好的體驗

1. 圖片懶載入，在頁面上的未可視區域可以新增一個捲軸事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先載入。

2. 如果為幻燈片、相簿等，可以使用圖片預載入技術，將當前展示圖片的前一張和後一張優先下載。

3. 如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

4. 如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮圖，以提高使用者體驗。

5. 如果圖片展示區域小於圖片的真實大小，則因在伺服器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致

meta有哪些屬性，作用是什麼

meta標籤用於描述網頁的元資訊，如網站作者、描述、關鍵詞，meta透過name=xxx和content=xxx的形式來定義資訊，常用設定如下：

1. charset：定義HTML文件的字符集

<meta charset="UTF-8" >

2. http-equiv：可用於模擬http請求頭，可設定過期時間、快取、重新整理

＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞

3. viewport：視口，用於控制頁面寬高及縮放比例

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

viewport有哪些引數，作用是什麼

1. width/height，寬高，預設寬度980px

2. initial-scale，初始縮放比例，1~10

3. maximum-scale/minimum-scale，允許使用者縮放的最大/小比例

4. user-scalable，使用者是否可以縮放 (yes/no)