H5、CSS3面試題，帶走不用謝

H5篇

 

新特性、移除了哪些元素？如何處理新標簽兼容？

新特性

1. 語義化標簽，header、nav 、footer、section、aside、dialog
2. 增強型表單，Input新增date、email、color、number、tel類型
3. 視頻和音頻
4. Canvas繪圖
5. 本地存儲，sessionStorage、localStorage
6. WebSocket

移除的元素

<font> 字體標簽

<center> 水平居中

<u> 下划線

<big> 大字體

新標簽兼容方案

1. 通過js動態創建新標簽，實現兼容
2. 使用h5框架, Bootstrap、MUI、uni-app等，實現兼容

 

標簽語義化

1. 便於閱讀以及維護
2. 結構更清晰，便於瀏覽器、搜索引擎解析
3. 便於爬蟲爬取，有利於SEO

 

離線儲存

localStorage長期存儲，瀏覽器關閉后數據不丟失

sessionStorage會話存儲，當前頁關閉后自動刪除

 

 cookie,localStorage,sessionStorage三者區別

1. cookie 數據可在瀏覽器和服務器間來回傳遞，而sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存
2. cookie大小不超過 4k，sessionStorage 和 localStorage可達到5M或更大
3. cookie在設置的過期時間之前一直有效，即使窗口或瀏覽器關閉；sessionStorage在當前窗口關閉后自動刪除，localStorage除非主動刪除數據

 

cookie和session區別

1. 存放位置不同，cookie數據存放在客戶端，session數據放在服務端
2. 安全性能不同，session比cookie更安全
3. 存儲大小不同，cookie不能超過4K，而session存儲在服務端，瀏覽器對其無限制

 

實現瀏覽器多個標簽頁的通信

1. websocket
2. 調用localstorge、cookies等本地存儲方式

 

盒模型

瀏覽器將元素解析成一個個具有空間大小的盒子，包含content、padding、border、margin四部分

 

 

C3篇

 

新增偽類

nth-child，子元素選擇器

first-of-type，選擇其父元素的首個元素

last-of-type，選擇其父元素的最后元素

enabled、disable，表單控件的禁用狀態

checked，單選框或復選框被選中

 

元素垂直水平居中

1. 先absolute定位，left、top都設為50%，再margin設定寬高一半的負值，可用來居中浮動元素
2. 先absolute定位，left、top、bottom、right都設為0，再margin：auto
3. 先absolute定位,，left、top都設為50%，再設置偏移量transform: translate(-50%, -50%)

 

圖片等比縮放

img設置max-width: 100%;max-height: 100%

 

flex常用屬性

flex-direction，值row、column等，決定主軸方向

justify-content，值flex-start、flex-end、center等，決定主軸對齊方式

align-items，值flex-start、flex-end、center等，決定交叉軸上對齊方式

 

display: none與visibility: hidden區別

display：none不顯示對應的元素，在文檔布局中不再分配空間（重排+重繪）
visibility：hidden隱藏對應元素，在文檔布局中仍保留原來的空間（重繪）

 

清除浮動方式

1. 在結尾處添加空標簽，再clear:both（不推薦）
2. 父級元素定義overflow:hidden（不推薦）
3. 使用after偽元素清除浮動（推薦）
4. 使用before和after雙偽元素（推薦）