本文來自@羯瑞；希望前端面試基礎手冊能幫助要找工作的前端小伙伴~~
HTML
前端需要注意哪些SEO？
- 合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可
- 語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁
- 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
- 重要內容不要用js輸出：爬蟲不會執行js獲取內容
- 少用iframe：搜索引擎不會抓取iframe中的內容
- 非裝飾性圖片必須加alt
- 提高網站速度：網站速度是搜索引擎排序的一個重要指標
img標簽的title和alt有什么區別
- title是
global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。 - alt是
img的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。
doctype是什么，舉例常見doctype及特點
-
<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于<html>標簽之前。 -
<!DOCTYPE>聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。 - 在 HTML 4.01 中，
<!DOCTYPE>聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。 - HTML5 不基于 SGML，所以不需要引用 DTD。
常用的 DOCTYPE 聲明
- HTML 4.01 Strict：該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional：該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset：該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 Strict：該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional：該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset：該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- XHTML 1.1：該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTTP狀態碼及其含義
- 1XX：信息狀態碼
- 2XX：成功狀態碼
- 3XX：重定向
- 4XX：客戶端錯誤
- 5XX: 服務器錯誤
常見的狀態碼：
- 200：請求成功
- 301：資源（網頁等）被永久轉移到其它URL
- 404：請求的資源（網頁等）不存在
- 500：內部服務器錯誤
HTML 全局屬性有哪些
201851223235
截取了 w3c上的表格，其實在日常工作中常用的可能只有：id class data-* title style
HTML 元素可以怎么分類
- 塊級元素（block）:
div p header footer h1~h6 ol ul ... - 行內元素（inline）：
a b span em strong i ... - 行內塊元素（inline-block）:
input img ...
CSS
CSS選擇器有哪些
css_choice
介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
- 有兩種， IE 盒子模型、W3C 盒子模型；
- 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
- 區別： IE的content部分把 border 和 padding計算了進去;
CSS優先級算法如何計算
- 優先級就近原則，同權重情況下樣式定義最近者為準
- 載入樣式以最后載入的定位為準
優先級為:
- 同權重: 內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
!important > id > class > tag-
important比 內聯優先級高 - 標簽
div權重為：1；class的權重為：10；id的權重為：100
CSS實現元素垂直居中，有哪些方案？
position: absolute;top:0;left: 0;right:0;bottom: 0;margin: auto-
position: absolute;top: 50%;left: 50%;margin-top: -110px;margin-left: -73px;（垂直居中元素寬高得固定） -
vertical-align: middle(需要加行高對應div的高度) - css3 ie9+：
position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%); - css3 ie9+：
display:table-cell - css3 ie9+：
position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) - css3 ie9+：
display:flex;align-items:center;justify-content: center;
讓元素不可見的CSS方案
-
opacity:0使元素的透明度為 0，會被渲染，占據空間 -
visibility:hidden使元素不可見，會被渲染，占據空間 -
position:absolute使元素移除出可視區域，會被渲染，占據空間 -
clip-path裁剪元素移使元素不可見，會被渲染，占據空間 -
diaplay:none使元素不可見,不會被渲染
box-sizing 有哪些屬性
2018513111216
