1、瀏覽器頁面有哪三層構成，分別是什麼，作用是什麼?
構成：結構層、表示層、行爲層
分別是：HTML、CSS、JavaScript
作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。
2、HTML5的優點與缺點？
優點：
a、網絡標準統一、HTML5本身是由W3C推薦出來的；
b、多設備、跨平臺；
c、即時更新；
d、提高可用性和改進用戶的友好體驗；
e、有幾個新的標籤，這將有助於開發人員定義重要的內容；
f、可以給站點帶來更多的多媒體元素(視頻和音頻)；
g、可以很好的替代Flash和Silverlight；
h、涉及到網站的抓取和索引的時候，對於SEO很友好；
i、被大量應用於移動應用程序和遊戲。
缺點：
a、安全：像之前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b、完善性：許多特性各瀏覽器的支持程度也不一樣。
c、技術門檻：HTML5簡化開發者工作的同時代表了有許多新的屬性和API需要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
d、性能：某些平臺上的引擎問題導致HTML5性能低下。
e、瀏覽器兼容性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。
3、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
Doctype聲明指出閱讀程序應該使用什麼規則集來解釋文檔中的標記。在Web文檔的情況下，“閱讀程序”通常是瀏覽器或者校驗器這樣的一個程序，“規則”則是W3C所發佈的一個文檔類型定義（DTD）中包含的規則。
(1) 聲明位於文檔中的最前面的位置，處於標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的HTML 文檔。
(2) 所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因爲不同瀏覽器解析執行的方式不一樣，所以我們稱之爲怪異模式。嚴格模式是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標準運行混雜模式則是一種向後兼容的解析方法，說的透明點就是可以實現IE5.5以下版本瀏覽器的渲染模式。
(3) 瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明 ，將使網頁進入怪異模式。
4、HTML5有哪些新特性、移除了哪些元素？
Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規範，把 HTML5 的元素按優先級定義爲結構性屬性、級塊性元素、行內語義性元素和交互性元素4 大類。
結構性元素主要負責web上下文結構的定義
section：在 web 頁面應用中，該元素也可以用於區域的章節描述。
header：頁面主體上的頭部， header 元素往往在一對 body 元素中。
footer：頁面的底部（頁腳），通常會標出網站的相關信息。
nav：專門用於菜單導航、鏈接導航的元素，是 navigator 的縮寫。
article：用於表現一篇文章的主體內容，一般爲文字集中顯示的區域。
級塊性元素主要完成web頁面區域的劃分，確保內容的有效分割。
aside：用於表達註記、貼士、側欄、摘要、插入的引用等作爲補充主體的內容。
figure：是對多個元素進行組合並展示的元素，通常與 ficaption 聯合使用。
code：表示一段代碼塊。
dialog：用於表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素， dt 用於表示說話者，而 dd 用來表示說話內容。
行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展示的基礎。
meter：表示特定範圍內的數值，可用於工資、數量、百分比等。
time：表示時間值。
progress：用來表示進度條，可通過對其 max、min、step 等屬性進行控制，完成對進度的表示和監事。
video：視頻元素，用於支持和實現視頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。
audio：音頻元素，用於支持和實現音頻文件的直接播放，支持緩衝預載和多種音頻媒體格式。
交互性元素主要用於功能性的內容表達，會有一定的內容和數據的關聯，是各種事件的基礎。
details：用來表示一段具體的內容，但是內容默認可能不顯示，通過某種手段（如單擊）與 legend 交互纔會顯示出來。
datagrid：用來控制客戶端數據與顯示，可以由動態腳本及時更新。
menu：主要用於交互菜單（曾被廢棄又被重新啓用的元素）。
command：用來處理命令按鈕。
移除的元素：
(1) 純表現的元素：basefont, big, center, font, s, strike, tt, u;
(2) 對可用性產生負面影響的元素：frame, frameset, noframes;
5、你做的網頁在哪些瀏覽器測試過，這些瀏覽器的內核分別是什麼？
IE:trident內核
Firefox:gecko內核
Safari:webkit內核
Opera:以前是presto內核，Opera現已改用Goolge Chrome的Blink內核
Chrome:Blink(基於webkit, Google與Opera Software共同開發)
6、說說你對HTML5的認識，是什麼？爲什麼？
是什麼：HTML5指的是包括 HTML 、 CSS 和 JavaScript 在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要插件的豐富性網絡應用服務（Plug-in-Based Rich Internet Application ，RIA ），例如： AdobeFlash 、 Microsoft Silverlight 與 Oracle JavaFX 的需求，並且提供更多能有效加強網絡應用的標準集。 HTML5 是 HTML 最新版本， 2014 年 10 月由萬維網聯盟（ W3C ）完成標準制定。目標是替換1999 年所制定的 HTML4.01 和 XHTML 1.0 標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。
爲什麼：HTML4陳舊不能滿足日益發展的互聯網需要，特別是移動互聯網。爲了增強瀏覽器功能Flash 被廣泛使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。HTML5增強了瀏覽器的原生功能，符合HTML5 規範的瀏覽器功能將更加強大，減少了 Web 應用對插件的依賴，讓用戶體驗更好，讓開發更加方便，另外 W3C 從推出 HTML4.0 到 5.0 之間共經歷了 17 年， HTML 的變化很小，這並不符合一個好產品的演進規則。
7、對WEB標準以及W3C的理解與認識？
（1）WEB標準
什麼是WEB標準：一系列標準的集合，包括結構化標準語言（html等）、表現標準語言（css）、行爲標準語言（ECMAScript等）。這些標準大部分是由萬維網聯盟起草和發佈。
爲什麼使用web標準：爲了解決因瀏覽器版本不同、軟硬件設備不同導致的需多版本開發的問題。
（2）W3C（World WideWeb Consortium）
萬維網聯盟，是一個web開發的國際性聯盟，是Web技術領域最權威和影響力的國際中立性技術標準機構。
8、HTML5行內元素有哪些？塊級元素有哪些？空元素有哪些？
（1）行內元素：
a - 錨點
* abbr - 縮寫
* acronym- 首字
* b - 粗體 ( 不推薦 )
* bdo -bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼 ( 在引用源碼的時候需要 )
* dfn - 定義字段
* em - 強調
* font - 字體設定 ( 不推薦 )
* i - 斜體
* img - 圖片
* input -輸入框
* kbd - 定義鍵盤文本
* label -表格標籤
* q - 短引用
* s - 中劃線 ( 不推薦 )
* samp - 定義範例計算機代碼
* select- 項目選擇
* small -小字體文本
* span - 常用內聯容器，定義文本內區塊
* strike- 中劃線
* strong- 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
（2）塊元素（block element）
*address - 地址
* blockquote - 塊引用
* center - 居中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是 css layout 的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支持 frame 的瀏覽器顯示此區塊內容
* noscript - ）可選腳本內容（對於不支持 script 的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可變元素:可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊 (map)
* object - object對象
* script - 客戶端腳本
(3)空元素（在HTML[1]元素中，沒有內容的HTML元素被稱爲空元素）
<br/>//換行
<hr>//分割線
<input>//文本框等
<img>//圖片
<link><meta>
9、什麼是WebGL，它有什麼優點？
WebGL（全寫 WebGraphics Library ）是一種 3D 繪圖標準，這種繪圖技術標準允許把 JavaScript 和 OpenGL ES 2.0 結合在一起，通過增加 OpenGL ES 2.0 的一個 JavaScript 綁定， WebGL 可以爲 HTML5 Canvas 提供硬件 3D 加速渲染，這樣 Web 開發人員就可以藉助系統顯卡來在瀏覽器裏更流暢地展示 3D 場景和模型了，還能創建複雜的導航和數據視覺化。顯然，WebGL 技術標準免去了開發網頁專用渲染插件的麻煩，可被用於創建具有複雜 3D 結構的網站頁面，甚至可以用來設計 3D 網頁遊戲等等。
WebGL完美地解決了現有的 Web 交互式三維動畫的兩個問題：
第一，它通過HTML腳本本身實現 Web 交互式三維動畫的製作，無需任何瀏覽器插件支持 ；
第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是通過統一的、標準的、跨平臺的OpenGL接口實現的。
通俗說WebGL中 canvas 繪圖中的 3D 版本。因爲原生的 WebGL 很複雜，我們經常會使用一些三方的庫，如 three.js 等，這些庫多數用於 HTML5 遊戲開發。
10、請你描述一下cookies, sessionStorage和localStorage的區別？
（1）cookies：一小段文本信息，伴隨着用戶請求和頁面在服務器和瀏覽器之間傳遞。因爲HTTP協議是無狀態，對於一個瀏覽器發出的多次請求，web服務器無法區分是否來自同一個瀏覽器，此時需要額外的數據用於維持會話。（2）sessionStorage:用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問，會話結束數據隨之銷燬，它並非持久化的本地存儲。
（3）localStorage:用於持久化的本地存儲，除非主動刪除數據，否則數據永遠都不會過期。
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 請求之間保存數據。有了本地數據，就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。
sessionStorage、 localStorage 、 cookie 都是在瀏覽器端存儲的數據，其中 sessionStorage 的概念很特別，引入了一個“瀏覽器窗口”的概念。sessionStorage 是在同源的同窗口（或 tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口後， sessionStorage 即被銷燬。同時“獨立”打開的不同窗口，即使是同一頁面， sessionStorage 對象也是不同的。cookies會發送到服務器端。其餘兩個不會。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制爲每個域名 50 個，但 IE7 似乎也允許每個域名 50 個 cookie 。 Firefox 每個域名 cookie 限制爲 50 個。 Opera 每個域名 cookie 限制爲 30 個。 Firefox 和 Safari 允許 cookie 多達 4097 個字節，包括名（ name ）、值（ value ）和等號。 Opera 許 cookie 多達 4096 個字節，包括：名（ name ）、值（ value ）和等號。 Internet Explorer 允許 cookie 多達 4095 個字節，包括：名（ name ）、值（ value ）和等號。
區別：
Cookie
l 每個域名存儲量比較小（各瀏覽器不同，大致4k）
l 所有域名的存儲量有限制（各瀏覽器不同，大致4k）
l 有個數限制（各瀏覽器不同）
l 會隨請求發送到服務器
LocalStorage
l 永久存儲
l 單個域名的存儲量有限制（推薦5MB，各瀏覽器不同）
l 總體數量無限制
SessionStorage
l 只在Session內有效
l 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
11、對HTML語義化的理解？
什麼是HTML語義化？
（基本都是圍繞着幾個主要的標籤，像標題（H1~H6）、列表（li）、強調（strong em）等等）根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
爲什麼要語義化？
爲了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構；
用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重。
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方法來渲染頁面；
便於團隊開發和維護，語義化更具可讀性，是下一步頁面的重要動向，遵循W3C標準的團隊都要遵循這個標準，可以減少差異化。
語義化標籤
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article><article>SM:用來在頁面找那個表示一套結構完整且獨立的內容部分。
<aside></aside>SM:主題的附屬信息（用途很廣，主要就是一個附屬內容），如果article裏面爲一篇文章的話，那麼文章的作者以及信息內容就是這篇文章的附屬內容了。
<figrue></figure>SM:媒體元素，比如一些視頻，圖片等等。
<datalist></datalist>SM:選項列表，與input元素配合使用，來定義input可能的值。
<details></details>SM:用於描述文檔或者文檔某個部分的細節，默認屬性爲open，配合summary一起使用。
12、link和@import的區別？
XML/HTML代碼
<link rel='stylesheet' rev='stylesheet'href='CSS文件 'type='text/css' media='all' />
XML/HTML代碼
<style type='text/css'media='screen'>
@import url('CSS文件 ');
</style>
兩者都是外部引用CSS方式，但是存在一定的區別：
區別1：link 是 XHTML 標籤，除了加載 CSS 外，還可以定義 RSS 等其他事務； @import 屬於 CSS 範疇，只能加載 CSS 。
區別2：link 引用 CSS 時，在頁面載入時同時加載； @import 需要頁面網頁完全載入以後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
13、對SVG的理解？
SVG可縮放矢量圖形（ScalableVector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。 SVG 是 W3C（'World Wide Web ConSortium' 即“國際互聯網標準組織”）在2000年 8 月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG 嚴格遵從 XML 語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。SVG 於 2003 年 1 月 14 日成爲 W3C 推薦標準。
特點：
（1） 任意縮放
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
（2） 文本獨立
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們製作時完全相同的畫面。
（3） 較小文件
總體來講，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下載也很快。
（4） 超強顯示結果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
（5） 超級顏色控制
SVG圖像提供一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。
（6） 交互X和智能化
SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。
瀏覽器支持：
InternetExplorer9, 火狐，谷歌Chrome,Opera和Safari都支持SVG。
IE8和早期版本都需要一個插件，如Adobe SVG瀏覽器，這是免費提供的。
14、HTML全局屬性有哪些？
accesskey 規定激活元素的快捷鍵；
class 規定元素的一個或多個類名（引用樣式表中的類）；
contenteditable 規定元素內容是否可編輯；
contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。
data-* 用於存儲頁面或應用程序的私有定製數據。
dir 規定元素中內容的文本方向。
draggable 規定元素是否可拖動。
dropzone 規定在拖動被拖動數據時是否進行復制、移動或鏈接。
hidden 樣式上會導致元素不顯示，但是不能用這個屬性實現樣式。
id 規定元素的唯一 id。
lang 規定元素內容的語言。
spellcheck 規定是否對元素進行拼寫和語法檢查。
style 規定元素的CSS行內元素。
tabindex 規定元素的tab鍵次序。
title 規定有關元素的額外信息。
translate 規定是否應該翻譯元素內容。
15、超鏈接target屬性的取值和作用？
它的參數值主要有：
_blank：瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。
_parent：這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中，那麼它與目標_self等效。
_self：這個目標的值對所有沒有指定目標<a>標籤是默認目標，它使得目標文檔載入並顯示在相同的框架或者窗口中作爲源文檔。這個目標是多餘且不必要的，除非和文檔標題<base>標籤中的target屬性一起使用。
_top:這個目標使得文檔載入包含這個超鏈接的窗口，用_top目標將會清除所有被包含的框架並將文檔載入整個瀏覽器窗口。
16、‘data-’屬性的作用是什麼？
‘data-’爲H5新增的爲前端開發者提供自定義屬性，這些屬性集可以通過對象的‘dataset’屬性獲取，不支持該屬性的瀏覽器可以通過’getAttribute’方法獲取：
需要注意的是：“data-”之後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。所有主流瀏覽器都支持data-*屬性。即：當沒有合適的屬性和元素時，自定義的data屬性是能夠存儲頁面或App的私有的自定義數據。
17、介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎（layoutengineer或RenderingEngine）和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器，電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎：解析和執行JavaScript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
18、常見的瀏覽器內核是什麼？
viewsourceprint?
1.Trident內核： IE,MaxThon,TT,The World,360, 搜狗瀏覽器等。 [ 又稱 MSHTML]
2.Gecko內核： Netscape6 及以上版本， FF，MozillaSuite/SeaMonkey等
3.Presto內核： Opera7 及以上。 [Opera 內核原爲：Presto，現爲：Blink;]
4.Webkit內核： Safari,Chrome 等。[ Chrome 的：Blink（WebKit 的分支）]
19、iframe有哪些缺點？
（1）iframe會阻塞主頁面的onload事件；
（2）搜索引擎的檢索程序無法解讀這種頁面，不利於SEO（Search Engine Optimization）搜索引擎優化；
（3）Iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載；
（4）使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript；
20、Label的作用是什麼，是怎麼用的？
label標籤來定義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
<labelfor='Name'>Number:</label>
<inputtype=“ text “ name='Name' id='Name'/>
<label>Date:<inputtype='text' name='B'/></label>
注意:label的for屬性值要與後面對應的input標籤id屬性值相同
<labelfor='Name'>Number:</label>
<inputtype=“ text “ name='Name' id='Name'/>
21、如何實現瀏覽器多個標籤頁之間的通信？
數據存儲有本地和服務器存儲兩種方式，這裏主要講解用本地存儲方式解決。即調用localStorage、Cookie等本地存儲方式。
第一種——調用localStorage
在一個標籤頁裏面使用localStorage.setItem(key,value)添加（修改、刪除）內容；在另一個標籤頁裏面監聽storage 事件。即可得到 localstorge 存儲的值，實現不同標籤頁之間的通信。
第二種——調用cookie+setInterval()
將要傳遞的信息存儲在cookie中，每個一定時間讀取cookie消息，即可隨時獲取要傳遞的信息。
22、如何在頁面上實現一個圓形的可點擊區域？
方法一：<img>通過usemap映射到<map>的circle形<area>
方法二：設置div的border-radius:50%
方法三：JS實現，獲取鼠標點擊位置座標，判斷其到原點的距離是否不大於圓的半徑，來判斷點擊位置是否在圓內。
23、title與h3的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，h1則表示層次明確的標題，對頁面信息的抓取也有很大的影響。
Strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重度，而<B>是表示強調內容。I內容展示爲斜體，em表示強調的文本。
Physical Style Elements—自然樣式標籤: b,i, u, s, pre
Semantic Style Elements -- 語義樣式標籤: strong,em, ins, del, code
應該準確使用語義樣式標籤，但不能濫用，如果不能確定時首選使用自然樣式標籤。
24、實現不使用border畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果？
25、HTML5標籤的作用？
（1）使web頁面的內容更加有序和規範
（2）使搜索引擎更加容易按照HTML5規則識別出有效的內容
（3）使web頁面更接近於一種數據字段和表
26、簡述一下src與href的區別？
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
<scriptsrc=“js.js”></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是爲什麼將js腳本放在底部而不是頭部。
href是 HypertextReference 的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<link href='common.css' rel='stylesheet'/>那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是爲什麼建議使用 link方式來加載 css ，而不是使用 @import 方式。
27、談談你對canvas的理解？
HTML5的canvas元素使用JavaScript在網頁上繪製圖像。畫布是一個矩形區域，您可以控制其每一像素。Canvas擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。canvas可以完成動畫、遊戲、圖標、圖像處理等原來需要Flash完成的一些功能。
28、WebSocket與消息推送？
B/S架構的系統多使用HTTP協議
HTTP協議的特點：（1）無狀態協議（2）用於通過Internet發送請求消息和響應消息（3）使用端口接收和發送消息，默認爲80端口，底層通信還是使用Socket完成。
HTTP協議決定了服務器與客戶端之間的連接方式，無法直接實現消息推送（F5已壞），一些變相的解決辦法：
雙向通信與消息推送
輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後馬上返回響應信息並關閉連接。
優點：後端程序編寫比較容易。
缺點：請求中有大半是無用，浪費帶寬和服務器資源。
實例：適於小型應用。
長輪詢：客戶端向服務器發送Ajax請求，服務器接到請求後 hold 住連接，直到有新消息才返回響應信息並關閉連接，客戶端處理完響應信息後再向服務器發送新的請求。
優點：在無消息的情況下不會頻繁的請求，耗費資小。
缺點：服務器hold連接會消耗資源，返回數據順序無保證，難於管理維護。 Comet 異步的 ashx ，
實例：WebQQ、Hi 網頁版、FacebookIM 。
長連接：在頁面裏嵌入一個隱蔵iframe，將這個隱蔵 iframe 的 src 屬性設爲對一個長連接的請求或是採用 xhr 請求，服務器端就能源源不斷地往客戶端輸入數據。
優點：消息即時到達，不發無用請求；管理起來也相對便。
缺點：服務器維護一個長連接會增加開銷。
實例：Gmail聊天
Flash Socket：在頁面中內嵌入一個使用了Socket 類的 Flash 程序 JavaScript 通過調用此 Flash 程序提供的 Socket 接口與服務器端的 Socket 接口進行通信， JavaScript 在收到服務器端傳送的信息後控制頁面的顯示。
優點：實現真正的即時通信，而不是僞即時。
缺點：客戶端必須安裝Flash插件；非 HTTP 協議，無法自動穿越防火牆。
實例：網絡互動遊戲。
Websocket:
WebSocket是 HTML5 開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。依靠這種技術可以實現客戶端和服務器端的長連接，雙向實時通信。
特點:
a、事件驅動
b、異步
c、使用 ws 或者 wss 協議的客戶端 socket
d、能夠實現真正意義上的推送功能
缺點：少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。
29、img的title和alt有什麼區別？
Alt用於圖片無法加載時顯示，Title爲該屬性提供信息，通常當鼠標滑動到元素上的時候顯示。
30、表單的基本組成部分有哪些，表單的主要用途是什麼？
組成：表單標籤、表單域、表單按鈕
a、表單標籤：這裏麪包含了處理表單數據所用 CGI 程序的 URL, 以及數據提交到服務器的方法。
b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框、和文件上傳框等。
c、表單按鈕：包括提交按鈕，復位按鈕和一般按鈕；用於將數據傳送到服務器上的 CGI 腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
主要用途：表單在網頁中主要負責數據採集的功能，和向服務器傳送數據。
31、表單提交中get和post方式的區別？
（1）get是從服務器上獲取數據，post是向服務器傳送數據。
（2）get 是把參數數據隊列加到提交表單的 ACTION 屬性所指的 URL 中，值和表單內各個字段一一對應，在 URL 中可以看到。post 是通過 HTTP post 機制，將表單內各個字段與其內容放置在 HTML HEADER 內一起傳送到ACTION 屬性所指的 URL 地址，用戶看不到這個過程。
（3）對於 get 方式，服務器端用 Request.QueryString 獲取變量的值，對於 post 方式，服務器端用 Request.Form 獲取提交的數據。
（4）get 傳送的數據量較小，不能大於2KB。post傳送的數據量較大，一般被默認爲不受限制。但理論上，IIS4 中最大量爲 80KB，IIS5 中爲 100KB 。
（5）get 安全性低，post 安全性較高。
32、HTML5有哪些新增的表單元素？
新增表單元素：
email:提交表單的時候驗證輸入值是否滿足email格式
<inputtype=“email” name=“email”/>
url:提交表單的時候驗證輸入值是否滿足url的格式：
<inputtype=“url” name=“url”/>
number:根據你的設置提供選擇數字的功能，其中min爲最小值，max爲最大值，value爲默認值，step爲點擊箭頭時數字的變化量，max,min,step,value均可不寫，目前某些瀏覽器還不支持。
range：會以一個滑塊的形式表現包含一定範圍內數字值的輸入域，max爲最大值，min爲最小值，value爲默認值，如果沒有設置max和min，默認值是1-100。
<inputtype=“range”name=“range” min=20 max=200 value=“60”/>
date:選取日、月、年<inputtype=“date” name=“date”/>
month:選取月、年<inputtype=“month”name=“month”/>
week：選取周、年<inputtype=“week” name=“week”/>
time:選取小時、分鐘<inputtype=“time” name=“time”/>
datetime:選取時間、日、月、年(UTC時間)<input type=“datetime” name=“datetime”/>
datetime-local:選取時間、日、月、年(本地時間)
<input type=“datetime-local”name=“datetime-local”/>
search:用於搜索域，若加上result=“s”屬性，則會在搜索框前面加一個搜索圖標
<inputtype="search" name="search" result="s"/>
tel：驗證輸入的是否是電話號碼的格式
<inputtype="tel" name="tel" />
color：color類型會提供顏色拾取器，供用戶選擇顏色，並將用戶選擇的顏色填充到此元素中<input type="color" name="color"/>
33、HTML5廢棄了哪些HTML4標籤？
frame frameset noframe appletbig center basefront
34、HTML5提供的應用程序API主要有：
Media API、Text TrackAPI、Application Cache API、UserInteraction、Data Transfer API、CommandAPI、Constraint Validation API、HistoryAPI
35、HTML5存儲類型有什麼區別？
HTML5能夠本地存儲數據，在之前都是使用cookies使用的。HTML5提供了下面兩種本地存儲方案：
localStorage:用於持久化的本地存儲，數據永遠不會過期，關閉瀏覽器也不會丟失。
sessionStorage：同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
36、應用程序緩存和瀏覽器緩存有什麼區別？
應用程序緩存是HTML5的重要特性之一，提供了離線使用的功能，讓應用程序可以獲取本地的網站內容，例如HTML、CSS、圖片以及JavaScript。這個特性可以提高網站性能，它的實現藉助於manifest文件，如下：
<!doctypehtml>
<htmlmanifest=”example.appcache”>
…..
</html>
與傳統瀏覽器緩存相比，它不強制用戶訪問的網站內容被緩存。
37、HTML5 Canvas元素有什麼用？
Canvas元素用於在網頁上繪製圖形，該元素標籤的強大之處在於可以直接在HTML上進行圖形操作
<canvas id=“canvas1”width=“300” height=“100”>
</canvas>
38、除了audio和video，HTML5還有哪些媒體標籤？
HTML5對於多媒體提供了強有力的支持，除了 audio 和 video 標籤外，還支持以下標籤：
<embed> 標籤定義嵌入的內容，比如插件。
<embedtype=“video/quicktime” src= “Fishing.mov”>
<source> 對於定義多個數據源很有用。
<videowidth=” 450 ″ height= ” 340″ controls>
<source src=”jamshed.mp4 ″ type= ” video/mp4″ >
<source src=” jamshed.ogg ” type= ”video/ogg ” >
</video>
<track> 標籤爲諸如 video 元素之類的媒介規定外部文本軌道。 用於規定字幕文件或其他包含文本的文件，當媒介播放時，這些文件是可見的。
<videowidth=“450”height= ” 340 ″ controls>
<source src=”jamshed.mp4 ″ type= ” video/mp4″ >
<source src=” jamshed.ogg ” type= ”video/ogg ” >
<track kind=” subtitles ”label=“English”src= ” jamshed_en.vtt ” srclang= ” en ”default></track>
<track kind=“subtitles”label=“Arabic”src= “jamshed_ar.vtt”srclang= “ar”></track>
</video>
據源很有用。標籤爲諸如 video 元素之類的媒介規定外部文本軌道。 用於規定字幕文件或其他包含文本的文件，當媒介播放時，這些文件是可見的。
39、HTML5中如何嵌入視頻？
和音頻類似，HTML5支持MP4、WebM和Ogg格式的視頻，下面是簡單示例：
40、HTML5中如何嵌入音頻？
HTML5支持 MP3 、 Wav 和 Ogg 格式的音頻，下面是在網頁中嵌入音頻的簡單示例：
41、新的HTML5文檔類型和字符集是？
HTML5文檔類型很簡單：
<!doctypehtml>
HTML5使用UTF-8編碼示例：
<metacharset=“UTF-8”>
42、解釋一下CSS的盒子模型？
標準的盒模型：width = content
IE盒模型：width = content+padding-Left+padding-right+border-left+ border-right
43、請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？
CSS選擇器有以下：
1.元素選擇器（又稱爲類型選擇器）
html{color:black;}
h1{color:blue;}
h2{color:silver;}
2.類選擇器
<h1class="important">
Thisheading is very important.
</h1>
3.ID選擇器
<pid="intro">This is a paragraph of introduction.</p>
4.屬性選擇器
a[href]{color:red;}
5.後代選擇器（又稱爲包含選擇器）
h1em {color:red;}
6.子元素選擇器
h1> strong {color:red;}
7.相鄰兄弟選擇器
h1+ p {margin-top:50px;}
44、CSS有什麼特殊性？（優先級、計算特殊值）
一般情況下，優先級如下：
（外部樣式）External style sheet <（內部樣式）Internalstyle sheet <（內聯樣式）Inline style有個例外的情況，就是如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。
內聯樣式表的權值最高1000；
ID 選擇器的權值爲 100
Class 類選擇器的權值爲 10
HTML 標籤選擇器的權值爲 1
45、要動態改變層中內容可以使用的方法？
innerHTML，innerText
46、常見瀏覽器兼容性問題與解決方案
(1)瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS裏 *{margin:0;padding:0;}
備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。
(2)瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題症狀:常見症狀是IE6中後面的一塊被頂到下一行
碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最常見的瀏覽器兼容問題）
解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性
備註：我們最常用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
(3)瀏覽器兼容問題三：設置較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度
問題症狀：IE6、7和遨遊裏這個標籤的高度不受控制，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備註：這種情況一般出現在我們設置小圓角背景的標籤裏。出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小默認的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到默認的行高。
(4)瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug
問題症狀：IE6裏的間距比超過設置的間距
碰到機率：20%
解決方案 ： 在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，爲了設置寬高，我們需要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因爲它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
(5) 瀏覽器兼容問題五：圖片默認有間距
問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到機率：20%
解決方案：使用float屬性爲img佈局
備註 ： 因爲img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裏，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
(6) 瀏覽器兼容問題六：標籤最低高度設置min-height不兼容
問題症狀：因爲min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到機率：5%
解決方案：如果我們要設置一個標籤的最小高度200px，需要進行的設置爲：{min-height:200px; height:auto !important; height:200px;overflow:visible;}
備註：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
(7)瀏覽器兼容問題七：透明度的兼容CSS設置
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對於兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現兼容
47、列出display的值並說明它們的作用？
display： none | inline | block |list-item | inline-block | table | inline-table | table-caption | table-cell |table-row | table-row-group | table-column | table-column-group |table-footer-group | table-header-group | run-in | box | inline-box | flexbox |inline-flexbox | flex | inline-flex
默認值：inline
none： 隱藏對象。與visibility屬性的hidden值不同，其不爲被隱藏的對象保留其物理空間
inline： 指定對象爲內聯元素。
block： 指定對象爲塊元素。
list-item： 指定對象爲列表項目。
inline-block： 指定對象爲內聯塊元素。（CSS2）
table： 指定對象作爲塊元素級的表格。類同於html標籤<table>（CSS2）
inline-table： 指定對象作爲內聯元素級的表格。類同於html標籤<table>（CSS2）
table-caption： 指定對象作爲表格標題。類同於html標籤<caption>（CSS2）
table-cell： 指定對象作爲表格單元格。類同於html標籤<td>（CSS2）
table-row： 指定對象作爲表格行。類同於html標籤<tr>（CSS2）
table-row-group： 指定對象作爲表格行組。類同於html標籤<tbody>（CSS2）
table-column： 指定對象作爲表格列。類同於html標籤<col>（CSS2）
table-column-group： 指定對象作爲表格列組顯示。類同於html標籤<colgroup>（CSS2）
table-header-group： 指定對象作爲表格標題組。類同於html標籤<thead>（CSS2）
table-footer-group： 指定對象作爲表格腳註組。類同於html標籤<tfoot>（CSS2）
run-in： 根據上下文決定對象是內聯對象還是塊級對象。（CSS3）
box： 將對象作爲彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box： 將對象作爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox： 將對象作爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox： 將對象作爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex： 將對象作爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex： 將對象作爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
48、如何居中div,如何居中一個浮動元素？
（1）非浮動元素居中：可以設置margin:0 auto另其居中，定位，父級元素text-align:center等等
（2）浮動元素居中：
方法一：設置當前div的寬度，然後設置margin-left:50%；position:relative;left:-250px;其中的left是寬度的一半。
方法二：父元素和子元素同時左浮動，然後父元素相對左移動50%，再然後子元素相對左移動-50%。
方法三：position定位等等。
49、CSS中link和@import的區別是？
（1）link屬於HTML標籤，而@import是CSS提供的；
（2）頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
（3）import只在IE5以上才能識別，而link是HTML標籤，無兼容問題；
（4）link方式的樣式權重高於@import的權重。
50、請列舉幾種清除浮動的方法（至少兩種）？
(1)父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
(2)結尾處加空div標籤 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
(3)父級div定義 僞類:after 和zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
(4)父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因爲超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
(5)父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
51、block, inline和inline-block細節對比？
display:block:
a、block元素會獨佔一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
b、block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨佔一行。
c、block元素可以設置margin和padding屬性。
display:inline
a、inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
b、inline元素設置width,height屬性無效。
c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
display:inline-block
a、 簡單來說就是將對象呈現爲inline對象，但是對象的內容作爲block對象呈現。之後的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補充說明：
a、一般我們會用display:block，display:inline或者display:inline-block來調整元素的佈局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。
b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。
52、什麼叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐過優雅降級了,爲那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。
漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。
53、說說浮動元素會引起的問題和你的解決辦法？
問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決辦法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對於問題(1)，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
display: inline-block;
} /* for IE/Mac */
清除浮動的幾種方法：
（1）額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）
（2）使用after僞類
#parent:after{
content:" ";
height:0;
visibility:hidden;
display:block;
clear:both;}
（3）浮動外部元素
（4）設置overflow爲hidden或者auto
54、有哪些性能優化的方法？
（1）減少http請求次數：CSSSprites，JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存，圖片服務器。
（2）前端模板 JS+數據，減少由於HTML標籤導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
（3）用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
（4）當需要設置的樣式很多時設置className而不是直接操作style。
（5）少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表達式)又稱Dynamicproperties(動態屬性)。
（7）圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
回答二： (1)、減少HTTP請求次數 (2)、使用CDN (3)、避免空的src和href (4)、爲文件頭指定Expires (5)、使用gzip壓縮內容 (6)、把CSS放到頂部 (7)、把JS放到底部 (8)、避免使用CSS表達式 (9)、將CSS和JS放到外部文件中 (10)、避免跳轉 (11)、可緩存的AJAX (12)、使用GET來完成AJAX請求
55、爲什麼要初始化CSS樣式？
因爲瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）
56、解釋下浮動和它的工作原理？清除浮動的技巧？
浮動是用來做網頁佈局的, 主要用在塊級元素的橫向佈局上.
1.浮動的值只有左浮動(left)和右浮動(right)
2.設置了浮動的元素,大小與元素的大小由內容撐出.
3.設置了浮動的元素可以設置寬高.
4.設置了浮動的元素,水平浮動,直到遇到父級的邊框或者另外一個浮動元素停止浮動.
5.設置了浮動的元素,脫離文檔流,會影響到它後面的元素.(如果後面元素裏有圖片或者文字,圖片或者文字不受影響)
6.設置了浮動的元素,自動margin失效.
<!—浮動的元素會影響到它後面的元素，我們需要清除浮動造成的影響，clear樣式可以幫助我們清除浮動造成的影響
Clear:
1. left
2. right
3. both
***clear樣式,誰受影響加給誰!!! -->
當父級沒有設置高度時，其高度由它裏面的內容撐出。此時如果父級裏的元素浮動，此時父級會發生“內容塌陷”。
解決辦法：
1、 人爲設置父級高度；
2、 在浮動元素的最後添加一個空標籤，並設置clear:both解決；
3、 給父級添加overflow:hidden樣式解決
57、CSS樣式表根據所在網頁的位置，可分爲哪幾種樣式表？
外部樣式表：
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
內部樣式表：
當單個文件需要特別樣式時，就可以使用內部樣式表，可以在head部分通過<style>標籤定義內部樣式表。
內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
58、談談你對CSS中刻度的認識？
在CSS中刻度是用於設置元素尺寸的單位。
a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負長度值，或者有一定的範圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。
c、長度單位包括：相對單位和絕對單位。
相對長度單位有： em,ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位有： cm,mm, q, in, pt, pc, px
絕對長度單位：1in =2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數，只相對於根元素的大小。
瀏覽器的默認字體大小爲16像素，瀏覽器默認樣式也稱爲user agent stylesheet，就是所有瀏覽器內置的默認樣式，多數是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。
59、em與rem的區別？
rem: rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數，只相對於根元素的大小。rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。
作用：利用rem可以實現簡單的響應式佈局，可以利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法。
em: 文本相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數)。em（font size of the element）是指相對於父元素的字體大小的單位。它與rem之間其實很相似，區別在。（相對是的HTML元素的字體大，默認16px）
em與rem的重要區別：em計算的規則是依賴父元素實現，rem計算的規則依賴根元素實現。
60、box-sizing屬性的用法
設置或檢索對象的盒模型組成模式
a、box-sizing:content-box：padding和border不被包含在定義的width和height之內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding，但佔有頁面位置還要加上margin ) 此屬性表現爲標準模式下的盒模型。
b、box-sizing:border-box：padding和border被包含在定義的width和height之內。對象的實際寬度就等於設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現爲怪異模式下的盒模型。
61、瀏覽器標準模式和怪異模式之間的區別是什麼？
所謂的標準模式是指，瀏覽器按W3C標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因爲不同瀏覽器解析執行的方式不一樣，所以我們稱之爲怪異模式。瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的DTD（Document Type Definition（文檔類型定義））聲明直接相關，DTD聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTD聲明,將使網頁進入怪異模式(quirksmode)。
62、怪異Quirks模式是什麼，它和標準Standards模式有什麼區別？
從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因爲有很多頁面是基於舊的佈局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數爲真時，我們就使用新功能，而如果這個參數不爲真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因爲以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而如果沒有，則採用兼容之前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有佈局、樣式解析和腳本執行三個方面的區別。
盒模型： 在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設置行內元素的高寬： 在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
設置百分比的高度： 在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
63、說說你對邊距摺疊的理解？
外邊距摺疊：相鄰的兩個或多個外邊距(margin)在垂直方向會合併成一個外邊距(margin)
相鄰：沒有被非空內容、padding、border或clear分隔開的margin特性。非空內容就是說元素之間要麼是兄弟關係或者父子關係。
垂直方向外邊距合併計算：
a、 參加摺疊的margin都是正值：取其中 margin 較大的值爲最終 margin 值。
b、 參與摺疊的 margin都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移。
c、 參與摺疊的 margin中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加。
64、內聯與塊級標籤有何區別？
Html中的標籤默認主要分爲兩大類型，一類爲塊級元素，另一類是行內元素，許多人也把行內稱爲內聯，所以叫內聯元素，其實就是一個意思。爲了很好的佈局，必須理解它們間的區別。
65、說說隱藏元素的方式有哪些？
a、使用CSS的display:none，不會佔有原來的位置；
b、使用CSS的visibility:hidden，會佔有原來的位置；
c、使用HTML5中的新增屬性hidden=“hidden”,不會佔有原來的位置
66、爲什麼重置瀏覽器默認樣式，如何重置默認瀏覽器樣式？
每種瀏覽器都有一套默認的樣式表，即user agent stylesheet,網頁在沒有指定的樣式，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的。但這樣會有很多兼容問題。
a、 最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。
b、 使用CSSReset可以將所有瀏覽器默認樣式設置成一樣。
c、 normalize：也許有些cssreset過於簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。
67、談談你對BFC與IFC的理解（是什麼，如何產生，作用）
(1)什麼是BFC與IFC
a、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的佈局形態。一個框在常規流中必須屬於一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。
b、BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用範圍。
c、在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型可以是 block ，或者是inline ，但不能同時屬於這兩者。並且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 裏格式化，Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 裏格式化。
(2)如何產生BFC
當一個HTML元素滿足下面條件的任何一點，都可以產生Block Formatting Context：
a、float的值不爲none
b、overflow的值不爲visible
c、display的值爲table-cell, table-caption, inline-block中的任何一個
d、position的值不爲relative和static
CSS3觸發BFC方式則可以簡單描述爲：在元素定位非static，relative的情況下觸發，float也是一種定位方式。
(3)BFC的作用與特點
a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋
如果一個浮動元素後面跟着一個非浮動的元素，那麼就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的佈局形態，當float不爲none時，position爲absolute、fixed時元素將脫離標準流。
68、說說你對頁面中使用定位（position）的理解？
使用CSS佈局position非常重要，語法如下：
position：static | relative| absolute | fixed | center | page | sticky
默認值：static，center、page、sticky是CSS3中新增加的值。
（1） static
可以認爲靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。
（2） relative
相對定位，對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。
（3） absolute
a、絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊。
b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body爲對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值爲非static都行。
（4）fixed
固定定位，與absolute一致，但偏移定位是以窗口爲參考。當出現滾動條時，對象不會隨着滾動。
（5）center
與absolute一致，但偏移定位是以定位祖先元素的中心點爲參考。盒子在其包含容器垂直水平居中。（CSS3）
（6）page
與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。（CSS3）
（7） sticky
對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當捲動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）
69、如何解決多個元素重疊問題？
使用Z-index屬性可以設置元素的層疊順序
z-index:auto|<integer>
默認值：auto
適用於：定位元素。即定義了position爲非static的元素
取值：
auto:元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。
整數：用整數值來定義堆疊級別。可以爲負值。
說明：
1、 檢索或設置對象的層疊順序。
2、 z-index用於確定元素在當前層疊上下文中的層疊級別，並確定該元素是否創建新的局部層疊上下文。
3、 當多個元素層疊在一起時，數字大者將顯示在上面。
70、頁面佈局的方式有哪些？
方式：雙飛翼、多欄、彈性、流式、瀑布流、響應式佈局（1）、雙飛翼佈局 經典三列布局，也叫做聖盃佈局【Holy Grail ofLayouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點： a、三列布局，中間寬度自適應，兩邊定寬； b、中間欄要在瀏覽器中優先展示渲染； c、允許任意列的高度最高； d、要求只用一個額外的DIV標籤； e、要求用最簡單的CSS、最少的HACK語句；
（1）、雙飛翼佈局
經典三列布局，也叫做聖盃佈局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：
a、三列布局，中間寬度自適應，兩邊定寬；
b、中間欄要在瀏覽器中優先展示渲染；
c、允許任意列的高度最高；
d、要求只用一個額外的DIV標籤；
e、要求用最簡單的CSS、最少的HACK語句；
在不增加額外標籤的情況下，聖盃佈局已經非常完美，聖盃佈局使用了相對定位，以後佈局是有侷限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個div就可以不用相對佈局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼佈局。
(2)、多欄佈局
a、欄柵格系統：就是利用浮動實現的多欄佈局，在bootstrap中用的非常多。
b、多列布局：柵格系統並沒有真正實現分欄效果（如word中的分欄），CSS3爲了滿足這個要求增加了多列布局模塊
(3)、彈性佈局（Flexbox）
CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分佈一個容器裏項目佈局，即使它們的大小是未知或者動態的，這裏簡稱爲Flex。
Flexbox佈局常用於設計比較複雜的頁面，可以輕鬆的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動佈局實現元素位置的定義以及重置元素的大小。
Flexbox佈局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。
綜合而言，Flexbox佈局功能主要具有以下幾點：
a、屏幕和瀏覽器窗口大小發生改變也可以靈活調整佈局；
b、可以指定伸縮項目沿着主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；
c、可以指定伸縮項目沿着主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之後或之間；
d、可以指定如何將垂直於元素佈局軸的額外空間分佈到該元素的周圍；
e、可以控制元素在頁面上的佈局方向；
f、可以按照不同於文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先後順序重排伸縮項目順序。
(4)、瀑布流佈局
瀑布流佈局是流式佈局的一種。是當下比較流行的一種網站頁面佈局，視覺表現爲參差不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。最早採用此佈局的網站是Pinterest，逐漸在國內流行開來。
優點
a、有效的降低了界面複雜度，節省了空間：我們不再需要臃腫複雜的頁碼導航鏈接或按鈕了。
b、對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成爲最基本的用戶習慣，而且所需要的操作精準程度遠遠低於點擊鏈接或按鈕。
c、更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。
缺點
a、有限的用例：
無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。
例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。
b、額外的複雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定製化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。
c、再見了，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味着你可以和頁腳說拜拜了。
最好考慮一下頁腳對於你的網站，特別是用戶的重要性;如果其中確實有比較重要的內容或鏈接，那麼最好換一種更傳統和穩妥的方式。
千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻因爲自動加載的內容突然出現而無論如何都無法點擊頁腳中的鏈接時，他們會變的越發憤怒。
d、集中在一頁當中動態加載數據，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以類型網站來說，在這方面進行冒險是很不划算的。
e、關於頁面數量的印象：
其實站在用戶的角度來看，這一點並非負面;不過，如果對於你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那麼單頁無限滾動的方式對你並不適用。
(5)、流式佈局（Fluid）
固定佈局和流式佈局在網頁設計中最常用的兩種佈局方式。固定佈局能呈現網頁的原始設計效果，流式佈局則不受窗口寬度影響，流式佈局使用百分比寬度來限定佈局元素，這樣可以根據客戶端分辨率的大小來進行合理的顯示。
(6)、響應式佈局
響應式佈局是EthanMarcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是爲每個終端做一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。
響應式佈局可以爲不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨着目前大屏幕移動設備的普及，用“大勢所趨”來形容也不爲過。隨着越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
優點
a、面對不同分辨率設備靈活性強
b、能夠快捷解決多設備顯示適應問題
缺點
a、兼容各種設備工作量大，效率低下
b、代碼累贅，會出現隱藏無用的元素，加載時間加長
c、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
d、一定程度上改變了網站原有的佈局結構，會出現用戶混淆的情況
71、overflow：hidden是否形成新的塊級格式化上下文
會形成，觸發BFC的條件有：
float的值不爲none。overflow的值不爲visible。
display的值爲table-cell,table-caption, inline-block 中的任何一個。
position的值不爲relative 和static。