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

羯瑞_發表於2018-07-29
前端面試HTMLCSS

本文來自@羯瑞-前端讀者（fe_duzhe）希望前端面試基礎手冊能幫助要找工作的前端小夥伴~~

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的特有屬性，是圖片內容的等價描述，用於圖片無法載入時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設定有意義的值，搜尋引擎會重點分析。

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

相關文章