前端工程師自檢清單（HTML和CSS）

二、HTML和CSS

HTML

• 從規範的角度理解HTML，從分類和語義的角度使用標籤

Html的標籤分很多種：1.head裏面的元信息標籤    2.img、video、audio等替換型媒體標籤

                                    3.語義類標籤

《重學前端》 HTML語義

---

• 常用頁面標籤的默認樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式

html標籤默認屬性樣式

不同瀏覽器兼容問題與處理

---

• 元信息類標籤(head、title、meta)的使用目的和配置方法

元信息，就是描述自身的信息。元信息類標籤，就是HTML用於描述文檔自身的一類標籤。

head：元信息的容器

title：文檔標題

base：頁面的基準URL

meta：元信息通用標籤

頁面元信息類標籤及使用

---

• HTML5離線緩存原理

H5通過創建cache manifest文件，創建web應用的離線版本。

HTML5的離線存儲是基於一個新建的.appcache文件的，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。

HTML5離線存儲原理及實現

---

• 可以使用Canvas API、SVG等繪製高性能的動畫

Canvas見Canvas學習筆記

SVG 圖像入門教程

---

CSS

• CSS盒模型，在不同瀏覽器的差異

• CSS所有選擇器及其優先級、使用場景，哪些可以繼承，如何運用at規則

• CSS僞類和僞元素有哪些，它們的區別和實際應用

• HTML文檔流的排版規則，CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理

• 水平垂直居中的方案，可以實現6種以上並對比它們的優缺點

• BFC實現原理，可以解決的問題，如何創建BFC

• 可使用CSS函數複用代碼，實現特殊效果

• PostCSS、Sass、Less的異同，以及使用配置

• CSS模塊化方案、如何配置按需加載、如何防止CSS阻塞渲染

• 熟練使用CSS實現常見動畫，如漸變、移動、旋轉、縮放等等

• CSS瀏覽器兼容性的寫法，瞭解不同API在不同瀏覽器下的兼容性情況

• 掌握一套完整的響應式佈局方案

 

---