前端讀者 | 前端面試基礎手冊（HTML+CSS）

時間 2019-12-13

標籤前端讀者面試基礎手冊 html+css html css 欄目快樂工作简体版

原文原文鏈接

本文來自@羯瑞；但願前端面試基礎手冊能幫助要找工做的前端小夥伴~~css

HTML

合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標

title是global attributes之一，用於爲元素提供附加的advisory information。一般當鼠標滑動到元素上的時候顯示。
alt是img的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。
<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
HTML5 不基於 SGML，因此不須要引用 DTD。

經常使用的 DOCTYPE 聲明html

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">

<!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">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

常見的狀態碼：前端

截取了 w3c上的表格，其實在平常工做中經常使用的可能只有：id class data-* title stylecss3

優先級爲:web

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;