- 什麼是語義化的html?
用有一定語義的英文字母（标簽）标記，因為HTML本身就是标記語言，以前的html結構都是一堆沒有語義的冷冰冰的标簽。
- 為什麼要做到語義化？
①利于SEO，語義化能和搜尋引擎建立良好的聯系，搜尋引擎爬蟲依賴于标簽來确定上下文和各個關鍵字的權重，有利于抓取更多的有效資訊。
②讓頁面的内容結構化，便于對浏覽器、搜尋引擎解析。
③在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。
④支援多終端裝置的浏覽器渲染,友善其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以語義的方式來渲染網頁。
⑤便于團隊開發和維護，語義化更具可讀性，如果遵循W3C标準的團隊都遵循這個标準，可以減少差異化，利于規範化。
⑥用正确的标簽做正确的事情。
- cookies，sessionStorage 和 localStorage 的差別？
①cookie在浏覽器和伺服器端來回傳遞資料，而localStorage和sessionStorage不會自動把資料發送給伺服器，僅會儲存在本地。cookie會在浏覽器請求頭或者ajax請求頭中發送cookie内容。
②cookie可以設定過期日期，sessionStorage是會話級的資料，浏覽器視窗關閉即清除，localStorage是永久性的資料，一旦指派，不管多長時間這值都是存在的，除非手動清除。
③cookie的存儲大小受限制，單個域名存儲量一般不超過4k，而localStorage和sessionStorage的單個域名存儲量存儲大小一般不超過5M，大大提高了存儲的體積。
④使用場景：
cookie一般存儲使用者名密碼相關資訊，一般使用escape轉義編碼後存儲。
localStorage可以用來統計頁面通路次數。
sessionStorage可以用來統計目前頁面元素的點選次數。
- html5 第一行為什麼隻需要寫<!DOCTYPE html>（大小寫不敏感）？
說明：DTD（Document Type Definition文檔類型定義）規定了标記語言的規則，這樣浏覽器才能正确地呈現内容。
說明：SGML 是一種很強大但很複雜的标記語言，HTML、XML 就是從中衍生出來的。
html 4.01 中的 DOCTYPE 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。而html5不基于 SGML，是以不需要對 DTD 進行引用，但是需要 DOCTYPE 來規範浏覽器的行為。
- 如果我不放入<! DOCTYPE html> ，HTML5還會工作麼？
不會，浏覽器将不能識别他是HTML文檔，同時HTML5的标簽将不能正常工作。
- html5有哪些新特性？
html5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
①繪畫 canvas；
②用于媒介回放的 video 和 audio 元素；
③本地離線存儲 localStorage 長期存儲資料，浏覽器關閉後資料不丢失；
④本地離線存儲 sessionStorage 資料在浏覽器關閉後自動删除；
⑤語意化更好的内容元素，比如 article、footer、header、nav、section；
⑥表單控件，calendar、date、time、email、url、search；
⑦新的技術webworker, websockt, Geolocation；
- 如何處理html5新标簽的浏覽器相容問題？
①IE8/IE7/IE6支援通過document.createElement方法産生的标簽。
②當然最好的方式是直接使用成熟的架構、使用最多的是 html5shim 架構：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
- SGML（标準通用标記語言）和HTML（超文本标記語言），XML（可擴充标記語言）和HTML的之間有什麼關系？
SGML（标準通用标記語言）是一個标準，告訴我們怎麼去指定文檔标記。它隻描述文檔标記是怎麼樣的元語言，HTML是被用SGML描述的标記語言。是以利用SGML建立了HTML參照和必須共同遵守的DTD，你會經常在HTML頁面的頭部發現“DOCTYPE”屬性，用來定義用于解析目标DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
現在解析SGML是一件痛苦的事情，是以建立了XML使事情更好。XML使用了SGML，例如：在SGML中你必須使用起始和結束标簽，但是在XML你可以有自動關閉的結束标簽。
XHTML建立于XML，它被使用在HTML4.0中。你可以參考下面代碼片段中展示的XML DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
總之，SGML是所有類型的父類，較舊的HTML利用SGML，HTML4.0使用派生自XML的XHTML
- 從浏覽器位址欄輸入url到顯示頁面的過程？
①浏覽器根據請求的URL交給DNS域名解析，找到真實IP，向伺服器發起請求；
②伺服器交給背景處理完成後傳回資料，浏覽器接收檔案（HTML、JS、CSS、圖象等）；
③浏覽器對加載到的資源（HTML、JS、CSS等）進行文法解析，建立相應的内部資料結構（如HTML的DOM）；
④載入解析到的資源檔案，渲染頁面，完成。
- HTTP的幾種請求方法用途？
①GET方法：發送一個請求來取得伺服器上的某一資源；
②POST方法：向URL指定的資源送出資料或附加新的資料;
③PUT方法：跟POST方法很像，也是想伺服器送出資料。但是，它們之間有不同。PUT指定了資源在伺服器上的位置，而POST沒有；
④HEAD方法：隻請求頁面的首部；
⑤DELETE方法：删除伺服器上的某資源；
⑥OPTIONS方法：它用于擷取目前URL所支援的方法。如果請求成功，會有一個Allow的頭包含類似“GET,POST”這樣的資訊；
⑦TRACE方法：被用于激發一個遠端的，應用層的請求消息回路；
⑧CONNECT方法：把請求連接配接轉換到透明的TCP/IP通道；
- html标簽屬性src與href的差別？
src用于替換目前元素，href用于在目前文檔和引用資源之間确立聯系。
src是source的縮寫，指向外部資源的位置，指向的内容将會嵌入到文檔中目前标簽所在位置；在請求src資源時會将其指向的資源下載下傳并應用到文檔内，例如js腳本，img圖檔和frame等元素。
<script src="common.js"></script>
當浏覽器解析到該元素時，會暫停其他資源的下載下傳和處理，直到将該資源加載、編譯、執行完畢，圖檔和架構等元素也如此，類似于将所指向資源嵌入目前标簽内。這也是為什麼将js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和目前元素（錨點）或目前文檔（連結）之間的連結，如果我們在文檔中添加
<link href="common.css" target="_blank" rel="external nofollow" rel=”stylesheet”/>
那麼浏覽器會識别該文檔為css檔案，就會并行下載下傳資源并且不會停止對目前文檔的處理。這也是為什麼建議使用link方式來加載css，而不是使用@import方式。
- 圖檔格式有哪些？
png-8，png-24，jpeg，gif，svg，webp，apng。
webp格式，谷歌開發的一種旨在加快圖檔加載速度的圖檔格式。圖檔壓縮體積大約隻有JPEG的2/3，并能節省大量的伺服器帶寬資源和資料空間。Facebook Ebay等知名網站已經開始測試并使用WebP格式。在品質相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%。
apng：全稱是“Animated Portable Network Graphics”, 是PNG的位圖動畫擴充，可以實作png格式的動态圖檔效果。04年誕生，但一直得不到各大浏覽器廠商的支援，直到日前得到 iOS safari 8的支援，有望代替GIF成為下一代動态圖示準。
- 一個頁面上有大量的圖檔，加載很慢，你有哪些方法優化這些圖檔的加載？
①圖檔懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖檔位置與浏覽器頂端的距離與頁面的距離，如果前者小于後者，優先加載。
②如果為幻燈片、相冊等，可以使用圖檔預加載技術，将目前展示圖檔的前一張和後一張優先下載下傳。
③如果圖檔為css圖檔，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
④如果圖檔過大，可以使用特殊編碼的圖檔，加載時會先加載一張壓縮的特别厲害的縮略圖，以提高使用者體驗。
⑤如果圖檔展示區域小于圖檔的真實大小，則因在伺服器端根據業務需要先行進行圖檔壓縮，圖檔壓縮後大小與展示一緻。
前端需要注意哪些SEO？
①合理的title、description、keywords：搜尋對着三項的權重逐個減小，
title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；
description把頁面内容高度概括，長度合适，不可過分堆砌關鍵詞，不同頁面description有所不同；
keywords列舉出重要關鍵詞即可；
②語義化的HTML代碼，符合W3C規範：語義化代碼讓搜尋引擎容易了解網頁重要内容；
③HTML代碼放在最前：搜尋引擎抓取HTML順序是從上到下，有的搜尋引擎對抓取長度有限制，保證重要内容一定會被抓取
；
④重要内容不要用js輸出：爬蟲不會執行js擷取内容
⑤少用iframe：搜尋引擎不會抓取iframe中的内容；
⑥非裝飾性圖檔必須加alt；
⑦提高網站速度：網站速度是搜尋引擎排序的一個重要名額；
img标簽的alt和title屬性差別？
①alt意思為改變、替換，是給搜尋引擎識别，在圖像無法顯示時的替代文本；
②title是關于元素的注釋資訊，主要是給使用者解讀。當滑鼠放到文字或是圖檔上時有title文字顯示。（因為IE不标準）在IE浏覽器中alt起到了title的作用，變成文字提示。在定義img對象時，将alt和title屬性寫全，可以保證在各種浏覽器中都能正常使用。
- 什麼是CDN？
經過一系列複雜的邏輯運算和資料處理，用于這次給你看的淘寶網首頁的HTML内容便生成成功了。對web前端稍微有點常識的童鞋都應該知道，下一步浏覽器會去加載頁面中用到的css、js、圖檔、腳本和資源檔案。但是可能相對較少的同學才會知道，你的浏覽器在同一個域名下并發加載的資源數量是有限制的，例如IE6-7是兩個，IE8是6個，Chrome各版本不大一樣，一般是4-6個。
我剛剛看了一下，我通路淘寶網首頁需要加載126個資源，那麼如此小的并發連接配接數自然會加載很久。是以前端開發人員往往會将上述這些資源檔案分布在好多個域名下，變相的繞過浏覽器的這個限制，同時也為下文的CDN工作做準備。據不可靠消息，在雙十一當天高峰，淘寶的通路流量最巅峰達到871GB/S。這個數字意味着需要178萬個4Mb帶寬的家庭寬帶才能負擔的起，也完全有能力拖垮一個中小城市的全部網際網路帶寬。
那麼顯然，這些通路流量不可能集中在一起。并且大家都知道，不同地區不同網絡（電信、聯通等）之間互訪會非常緩慢，但是你卻發現很少發現淘寶網通路緩慢。這便是CDN(Content Delivery Network)，即内容分發網絡的作用。
淘寶在全國各地建立了數十上百個CDN節點，利用一些手段保證你通路的（這裡主要指js、css、圖檔等）地方是離你最近的CDN節點，這樣便保證了大流量分散在各地通路的加速節點上。
![DOM下元素 offset client scroll 相關屬性簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)