html5語義化與新特性

什么是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)