一、前端需要注重的SEO
（1）合理的 title、description 和 keywords，他們的搜刮權重逐一減小
title 強調重點即可，主要關鍵詞湧現不要凌駕2次，而且要靠前，差別頁面 title 要有所差別；description 把頁面內容高度歸納綜合，長度適宜，不可太過堆砌關鍵詞，差別頁面 description 有所差別；keywords 列舉出主要關鍵詞即可。
（2）語義化的 HTML 代碼，相符 W3C 範例
語義化代碼讓搜刮引擎輕易明白網頁。
（3）主要內容 HTML 代碼放在最前
搜刮引擎抓取 HTML 遞次是從上到下，有的搜刮引擎對抓取長度有限定，保證主要內容肯定會被抓取。
（4）主要內容不要用JavaScript輸出
爬蟲不會實行JavaScript獵取內容。
（5）罕用iframe
搜刮引擎不會抓取 <iframe>（內聯框架） 中的內容。
（6）非裝潢性圖片必需加 alt
（7）進步網站速率
網站速率是搜刮引擎排序的一個主要目標。
二、網頁驗證碼的作用
（1）辨別用戶是盤算機照樣人的大眾全自動順序。可以防備歹意破解暗碼、刷票、論壇注水。
（2）有用防備黑客對某一個特定註冊用戶用特定順序暴力破解體式格局舉行不停的上岸嘗試。
三、網頁中運用字體
在網頁中應當運用偶数字體，偶数字號相對奇数字號更輕易和 web 設想的其他部份組成比例關係。
四、瀏覽器內核
1. 兩部份
襯着引擎(layout engineer或Rendering Engine)和JS引擎。
2. 襯着引擎
擔任獲得網頁的內容（HTML、XML、圖象等等）、整頓訊息（比方到場CSS等），以及盤算網頁的顯現體式格局，然後會輸出至顯現器或打印機。瀏覽器的內核的差別關於網頁的語法詮釋會有差別，所以襯着的結果也不相同。一切網頁瀏覽器、电子郵件客戶端以及別的需要編輯、顯現收集內容的應用順序都需要內核。
3. JS引擎
剖析和實行JavaScript來完成網頁的動態結果。
最最先襯着引擎和JS引擎並沒有辨別的很明白，厥後JS引擎愈來愈自力，內核就傾向於只指襯着引擎。
五、瀏覽器規範形式和奇異形式的區分
（1）“規範形式”(Standards Mode) 頁面根據 HTML 與 CSS 的定義襯着。
（2）“奇異形式”(Quirks Mode)瀏覽器為兼容很早之前針對舊版本瀏覽器設想、並未嚴厲遵照 W3C 規範的網頁而發生的一種頁面襯着形式。
（3）規範形式的排版和 JS 運作形式是以該瀏覽器支撐的最高規範運轉。
（4）奇異形式，頁面以寬鬆的向後兼容的體式格局顯現。模仿老式瀏覽器的行動以防備站點沒法事情。 <!doctype>不存在或花樣不準確會致使文檔以奇異形式顯現。
六、漸進加強
1. 觀點
漸進加強是指在WEB設想時強調可接見性、語義化HTML標籤、外部款式表和劇本。保證一切人都能接見頁面的基本內容和功用同時為高等瀏覽器和高帶寬用戶供應更好的用戶體驗。
2. 準繩
（1）一切瀏覽器都必需能接見基本內容
（2）一切瀏覽器都必需能運用基本功用
（3）一切內容都包含在語義化標籤中
（4）經由過程外部CSS供應加強的規劃
（5）經由過程非侵入式、外部JavaScript供應加強功用
七、link和@import的區分
（1）link是XHTML標籤，無兼容問題；而@import只在 IE5 以上才辨認。
（2）頁面被加載的時，link會同時被加載；而@import援用的CSS會比及頁面被加載完再加載。
（3）link體式格局的款式的權重 高於 @import的權重。
（4）link可以經由過程rel=”alternate stylesheet”指定候選款式。
（5）@import必需在款式劃定規矩之前，可以在CSS文件中援用其他文件。
總結
link優於@import
八、PNG、JPG和GIF區分
| PNG | JPG | GIF |
|---|---|---|
| PNG8和truecolor PNG，PNG8色彩上限為256 | 色彩上限為256 | 8位像素，256色 |
| 文件小 | 有損緊縮，可掌握緊縮質量 | 無損緊縮 |
| 支撐alpha通明度 | 不支撐通明 | 支撐boolean通明 |
| 無動畫 | 支撐簡樸動畫 | |
| 合適背景、圖標、按鈕 | 合適照片 |
九、Canvas和SVG的區分
（1）canvas輸出的是一整幅畫布。
（2）svg繪製出來的每一個圖形的元素都是自力的DOM節點，可以輕易的綁定事宜或用來修正。
（3）canvas輸出標量畫布，就像一張圖片一樣，放大會失真或許鋸齒。
（4）svg輸出的圖形是矢量圖形，後期可以修正參數來自在放大削減，不會是真和鋸齒。
十、ssessionStorage、localStorage和cookie
1. 觀點
（1）sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據。
（2）sessionStorage 和 localStorage 是HTML5 Web Storage API 供應的，可以輕易的在web請求之間保留數據。有了當地數據，就可以防止數據在瀏覽器和服務器間沒必要要地往返通報。
（3）sessionStorage 的觀點很迥殊，引入了一個“瀏覽器窗口”的觀點。sessionStorage 是在同源的同窗口（或tab）中，一向存在的數據。也就是說只需這個瀏覽器窗口沒有封閉，縱然革新頁面或進入同源另一頁面，數據依然存在。封閉窗口后，sessionStorage 即被燒毀。同時“自力”翻開的差別窗口，縱然是統一頁面，sessionStorage 對象也是差別的。
（4）cookie是網站為了標示用戶身份而貯存在用戶當地終端（Client Side）上的數據（平常經由加密），cookie數據一向在同源的http請求中照顧（縱然不需要），也會在瀏覽器和服務器間往返通報。
2. 數據發送
（1）sessionStorage和localStorage不會自動把數據發送到服務器端，僅在當地保留。
（2）cookies會把數據發送到服務器端。
3. 存儲大小
（1）cookie數據大小不能凌駕4k。
（2）sessionStorage和localStorage雖然也有存儲大小的限定，但比cookie大得多，可以到達5M或更大。
4. 有期時刻
（1）cookie 設置的逾期時刻之前一向有用，縱然窗口或瀏覽器封閉。
（2）sessionStorage 數據在當前瀏覽器窗口封閉后自動刪除。
（3）localStorage 存儲耐久數據，瀏覽器封閉后數據不喪失除非主動刪除數據。
十一、XHTML和HTML的對照
1. XHTML
（1） xhtml 語法請求嚴厲，辨別大小寫。
（2）元素必需被準確嵌套，必需有根元素。
（3）每一個 DOM 必需要閉合；空標籤也必需閉合,比方<img />, <br/>, <input />等。
（4）屬性值運用雙引號。一旦碰到毛病，馬上住手剖析，並顯現毛病信息。
2. HTML
可兼容各大瀏覽器、手機以及 PDA，而且瀏覽器也能疾速準確地編譯網頁。
十二、<!doctype>的特徵
（1）<!doctype>聲明必需處於HTML文檔的頭部，在<html>標籤之前，HTML5中不辨別大小寫。
（2）<!doctype>聲明不是一個HTML標籤，是一個用於通知瀏覽器當前HTMl版本的指令。
（3）當代瀏覽器的html規劃引擎經由過程搜檢doctype決議運用兼容形式照樣規範形式對文檔舉行襯着，一些瀏覽器有一個靠近規範模子。
十三、HTML5 <!DOCTYPE HTML>標籤
（1）在HTML4.01中<!doctype>聲明指向一個DTD，因為HTML4.01基於SGML，所以DTD指定了標記劃定規矩以保證瀏覽器準確襯着內容。
（2）HTML5不基於SGML，所以不必指定DTD，然則需要<!doctype>來範例瀏覽器的行動。
十四、HTML5的新特徵
1. 增添的元素
（1）繪畫 canvas
（2）用於序言回放的 video 和 audio 元素
（3）當地離線存儲 localStorage 歷久存儲數據，瀏覽器封閉后數據不喪失；sessionStorage 的數據在瀏覽器封閉后自動刪除
（4）語意化更好的內容元素，比方 article、footer、header、nav、section
（5）表單控件，calendar、date、time、email、url、search
（6）新技術，webworker, websocket, Geolocation
2. 移除的元素
（1）純表現的元素，basefont，big，center，font, s，strike，tt，u
（2）對可用性發生負面影響的元素，frame，frameset，noframes
十五、HTML全局屬性(global attribute)
全局屬性是一切HTML元素共有的屬性; 它們可以用於一切元素，縱然屬性能夠對某些元素不起作用。
| 屬性 | 形貌 |
|---|---|
| accesskey | 供應了一種運用快捷鍵接見當前元素的門路 |
| class | 為元素設置類標識，多個類名用空格離開，class許可css和javascript經由過程class挑選器或許相似下面的DOM要領來挑選和接見element |
| contenteditable | 指定元素內容是不是可編輯 |
| contextmenu | 自定義鼠標右鍵彈出菜單內容 |
| data-* | 為元素增添自定義屬性 |
| dir | 設置元素文本方向 |
| draggable | 設置元素是不是可拖拽 |
| dropzone | 設置元素拖放範例： copy, move, link |
| hidden | 這個布爾（Boolean）屬性示意element還沒有或是不再存在。款式上會致使元素不顯現，然則不能用這個屬性完成款式結果 |
| id | 唯一的標識，它在全部document里應當是唯一的。當需要鏈接（運用片斷標識符，錨點），實行劇本，掌握款式時，可以用它來定位辨認元素。 |
| lang | 元素內容的的言語 |
| spellcheck | 是不是啟動拼寫和語法搜檢 |
| style | 行內css款式 |
| tabindex | 設置元素可以獲得核心，經由過程tab可以導航 |
| title | 元素相干的發起信息 |
| translate | 元素和子孫節點內容是不是需要當地化 |
十六、<img>的title和alt區分
（1）title 是 global attributes（全局屬性） 之一，用於為元素供應附加的 advisory information。平常當鼠標滑動到元素上的時刻顯現。
（2）alt 是 <img> 的特有屬性，是圖片內容的等價形貌，用於圖片沒法加載時顯現、讀屏器瀏覽圖片。可進步圖片可接見性，除了純裝潢圖片外都必需設置有意義的值，搜刮引擎會重點剖析。
十七、初始化CSS款式
（1）瀏覽器的兼容問題，差別瀏覽器對有些標籤的默許值是差別的，假如沒對CSS初始化往往會湧現瀏覽器之間的頁面顯現差別。
（2）初始化款式會對SEO有肯定的影響，但魚和熊掌不可兼得，力圖影響最小的情況下初始化CSS款式。
十八、CSS兼并要領
（1）防止運用@import引入多個CSS文件。
（2）可以運用CSS東西將CSS兼并為一個CSS文件，比方運用 Sass、Compass 等。
十九、CSS Sprite
1. 觀點
將多個小圖片拼接到一個圖片中。經由過程 background-position 和元素尺寸調治需要顯現的背景圖案。
2. 長處
（1）削減HTTP請求數，極大地進步頁面加載速率
（2）增添圖片信息反覆度，進步緊縮比，削減圖片大小
（3）替換作風輕易，只需在一張或幾張圖片上修正色彩或款式即可完成
3. 瑕玷
（1）圖片兼并貧苦
（2）保護貧苦，修正一個圖片能夠需要重新規劃全部圖片，款式。
二十、display: none;和visibility: hidden;
1. 聯絡
他們都能讓元素不可見。
2. 區分
| display:none; | visibility: hidden; |
|---|---|
| 會讓元素完整從襯着樹消逝，襯着時不佔有任何空間 | 不會讓元素從襯着樹消逝，襯着時元素繼續佔有空間，只是內容不可見 |
| 非繼續屬性，子孫節點消逝因為元素從襯着樹消逝形成，經由過程修正子孫節點屬性沒法顯現； | 繼續屬性，子孫節點消逝因為繼續了hidden，經由過程設置visibility: visible;可以讓子孫節點顯式 |
| 修正通例流中元素的display平常會形成文檔重排。 | 修正visibility屬性只會形成本元素的重繪。 |
| 讀屏器不會讀取display: none;元素內容； | 會讀取visibility: hidden;元素內容 |
二十一、行內元素、塊級元素和空元素
| 行內元素 | 塊級元素 | 空元素 |
|---|---|---|
| a | div | meta |
| span | h1-h6 | link |
| img | p | img |
| b | ul-li | input |
| strong | dl-dt-dd | br |
| input | hr | |
| select |
二十二、行內元素浮動
（1）行內元素浮動后，不會成為塊級元素，然則可以設置寬和高。
（1）行內元素轉換為塊級元素，佔一行，直接設置 display:block; 但若元素設置浮動后，再設置 display:block;則就不會佔一行。
二十三、盒模子
（1）在奇異形式下，盒模子為IE盒模子而非規範形式下的W3C 盒模子，在 IE 盒模子中
box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom
（2）而在 W3C 規範的盒模子中，box 的大小就是 content 的大小。
二十四、Viewport
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
（1）width 設置viewport寬度，為一個正整數，或字符串‘device-width’
（2）device-width 裝備寬度
（3）height 設置viewport高度，平常設置了寬度，會自動剖析出高度，可以不必設置
（4）initial-scale 默許縮放比例（初始縮放比例），為一個数字，可以帶小數
（5）minimum-scale 許可用戶最小縮放比例，為一個数字，可以帶小數
（6）maximum-scale 許可用戶最大縮放比例，為一個数字，可以帶小數
（7）user-scalable 是不是許可手動縮放
瀏覽更多
本文在GitHub的地點 GitHub Front-end-questions
