一、HTML部分
1、瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么?
2、HTML5的優(yōu)點與缺點？
3、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
4、HTML5有哪些新特性、移除了哪些元素？
5、你做的網(wǎng)頁在哪些流覽器測試過,這些瀏覽器的內(nèi)核分別是什么?
6、每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
7、說說你對HTML5認(rèn)識?（是什么,為什么）
8、對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識?
9、HTML5行內(nèi)元素有哪些,塊級元素有哪些, 空元素有哪些?
10、什么是WebGL,它有什么優(yōu)點?
11、請你描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?
12、說說你對HTML語義化的理解?
13、link和@import的區(qū)別?
14、說說你對SVG理解?
15、HTML全局屬性(global attribute)有哪些?
16、說說超鏈接target屬性的取值和作用？
17、
data-屬性的作用是什么？18、介紹一下你對瀏覽器內(nèi)核的理解？
19、常見的瀏覽器內(nèi)核有哪些？
20、iframe有那些缺點？
21、Label的作用是什么，是怎么用的？
22、如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
23、如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？
24、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
25、實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果？
26、HTML5標(biāo)簽的作用?(用途)
27、簡述一下src與href的區(qū)別？
28、談?wù)勀銓anvas的理解？
29、WebSocket與消息推送？
30、img的title和alt有什么區(qū)別？
31、表單的基本組成部分有哪些，表單的主要用途是什么？
32、表單提交中Get和Post方式的區(qū)別？
33、請你談?wù)凜ookie的弊端?
34、請你說說cookie 和session 的區(qū)別?
35、說說瀏覽器內(nèi)核及差異？
36、內(nèi)容還會不斷補(bǔ)充。。。
一、HTML部分
1、瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么?
構(gòu)成：結(jié)構(gòu)層、表示層、行為層分別是：HTML、CSS、JavaScript作用：HTML實現(xiàn)頁面結(jié)構(gòu)，CSS完成頁面的表現(xiàn)與風(fēng)格，JavaScript實現(xiàn)一些客戶端的功能與業(yè)務(wù)。
2、HTML5的優(yōu)點與缺點？
優(yōu)點：a、網(wǎng)絡(luò)標(biāo)準(zhǔn)統(tǒng)一、HTML5本身是由W3C推薦出來的。b、多設(shè)備、跨平臺c、即時更新。d、提高可用性和改進(jìn)用戶的友好體驗；e、有幾個新的標(biāo)簽，這將有助于開發(fā)人員定義重要的內(nèi)容；f、可以給站點帶來更多的多媒體元素(視頻和音頻)；g、可以很好的替代Flash和Silverlight；h、涉及到網(wǎng)站的抓取和索引的時候，對于SEO很友好；i、被大量應(yīng)用于移動應(yīng)用程序和游戲。
缺點：a、安全：像之前Firefox4的web socket和透明代理的實現(xiàn)存在嚴(yán)重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。b、完善性：許多特性各瀏覽器的支持程度也不一樣。c、技術(shù)門檻：HTML5簡化開發(fā)者工作的同時代表了有許多新的屬性和API需要開發(fā)者學(xué)習(xí)，像web worker、web socket、web storage 等新特性，后臺甚至瀏覽器原理的知識，機(jī)遇的同時也是巨大的挑戰(zhàn)d、性能：某些平臺上的引擎問題導(dǎo)致HTML5性能低下。e、瀏覽器兼容性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。
3、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
回答1：
（1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型 規(guī)范來解析這個文檔。
（2）、嚴(yán)格模式的排版和JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。
回答2：
doctype聲明指出閱讀程序應(yīng)該用什么規(guī)則集來解釋文檔中的標(biāo)記。在Web文檔的情況下，“閱讀程序”通常是瀏覽器或者校驗器這樣的一個程序，“規(guī)則”則是W3C所發(fā)布的一個文檔類型定義（DTD）中包含的規(guī)則。
(1)<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的HTML 文檔。
(2)所謂的標(biāo)準(zhǔn)模式是指，瀏覽器按 W3C 標(biāo)準(zhǔn)解析執(zhí)行代碼；怪異模式則是使用瀏覽器自己的方式解析執(zhí)行代碼，因為不同瀏覽器解析執(zhí)行的方式不一樣，所以我們稱之為怪異模式。嚴(yán)格模式是瀏覽器根據(jù)web標(biāo)準(zhǔn)去解析頁面，是一種要求嚴(yán)格的DTD，不允許使用任何表現(xiàn)層的語法，如
。嚴(yán)格模式的排版和JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行混雜模式則是一種向后兼容的解析方法，說的透明點就是可以實現(xiàn)IE5.5以下版本瀏覽器的渲染模式。
(3)瀏覽器解析時到底使用標(biāo)準(zhǔn)模式還是怪異模式，與你網(wǎng)頁中的 DTD 聲明直接相關(guān)， DTD 聲明定義了標(biāo)準(zhǔn)文檔的類型（標(biāo)準(zhǔn)模式解析）文檔類型，會使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示，忽略 DTD 聲明 ,將使網(wǎng)頁進(jìn)入怪異模式。
4、HTML5有哪些新特性、移除了哪些元素？
Html5 又新增了哪些元素廢棄了哪些元素Html5新增了27個元素，廢棄了16個元素，根據(jù)現(xiàn)有的標(biāo)準(zhǔn)規(guī)范，把HTML5的元素按優(yōu)先級定義為結(jié)構(gòu)性屬性、級塊性元素、行內(nèi)語義性元素和交互性元素4大類。
結(jié)構(gòu)性元素主要負(fù)責(zé)web上下文結(jié)構(gòu)的定義section：在web頁面應(yīng)用中，該元素也可以用于區(qū)域的章節(jié)描述。
header：頁面主體上的頭部，header元素往往在一對body元素中。footer：頁面的底部（頁腳），通常會標(biāo)出網(wǎng)站的相關(guān)信息。
nav：專門用于菜單導(dǎo)航、鏈接導(dǎo)航的元素，是navigator的縮寫。
article：用于表現(xiàn)一篇文章的主體內(nèi)容，一般為文字集中顯示的區(qū)域。級塊性元素主要完成web頁面區(qū)域的劃分，確保內(nèi)容的有效分割。
aside：用于表達(dá)注記、貼士、側(cè)欄、摘要、插入的引用等作為補(bǔ)充主體的內(nèi)容。
figure：是對多個元素進(jìn)行組合并展示的元素，通常與ficaption聯(lián)合使用。
code：表示一段代碼塊。dialog：用于表達(dá)人與人之間的對話，該元素包含dt和dd這兩個組合元素，dt用于表示說話者，而dd用來表示說話內(nèi)容。行內(nèi)語義性元素主要完成web頁面具體內(nèi)容的引用和描述，是豐富內(nèi)容展示的基礎(chǔ)。
meter：表示特定范圍內(nèi)的數(shù)值，可用于工資、數(shù)量、百分比等。
time：表示時間值。
progress：用來表示進(jìn)度條，可通過對其max、min、step等屬性進(jìn)行控制，完成對進(jìn)度的表示和監(jiān)事。
video：視頻元素，用于支持和實現(xiàn)視頻文件的直接播放，支持緩沖預(yù)載和多種視頻媒體格式。audio：音頻元素，用于支持和實現(xiàn)音頻文件的直接播放，支持緩沖預(yù)載和多種音頻媒體格式。交互性元素主要用于功能性的內(nèi)容表達(dá)，會有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)。
details：用來表示一段具體的內(nèi)容，但是內(nèi)容默認(rèn)可能不顯示，通過某種手段（如單擊）與legend交互才會顯示出來。
datagrid：用來控制客戶端數(shù)據(jù)與顯示，可以由動態(tài)腳本及時更新。menu：主要用于交互菜單（曾被廢棄又被重新啟用的元素）。command：用來處理命令按鈕。
5、你做的網(wǎng)頁在哪些流覽器測試過,這些瀏覽器的內(nèi)核分別是什么?
a、IE: trident內(nèi)核
b、Firefox：gecko內(nèi)核
c、Safari:webkit內(nèi)核
d、Opera:以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核e、Chrome:Blink(基于webkit，Google與Opera Software共同開發(fā))
6、每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。（重點：告訴瀏覽器按照何種規(guī)范解析頁面）
7、說說你對HTML5認(rèn)識?（是什么,為什么）
是什么：
HTML5指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（Plug-in-Based Rich Internet Application，RIA）。
例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。
HTML5是HTML最新版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。
目標(biāo)是替換1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到匹配當(dāng)代的網(wǎng)絡(luò)需求。
為什么：
HTML4陳舊不能滿足日益發(fā)展的互聯(lián)網(wǎng)需要，特別是移動互聯(lián)網(wǎng)。
為了增強(qiáng)瀏覽器功能Flash被廣泛使用，但安全與穩(wěn)定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。
HTML5增強(qiáng)了瀏覽器的原生功能，符合HTML5規(guī)范的瀏覽器功能將更加強(qiáng)大，減少了Web應(yīng)用對插件的依賴，讓用戶體驗更好，讓開發(fā)更加方便，另外W3C從推出HTML4.0到5.0之間共經(jīng)歷了17年，HTML的變化很小，這并不符合一個好產(chǎn)品的演進(jìn)規(guī)則。
8、對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識?
標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。
9、HTML5行內(nèi)元素有哪些,塊級元素有哪些, 空元素有哪些?
(1)行內(nèi)元素
a - 錨點* abbr - 縮寫* acronym - 首字* b - 粗體(不推薦)* bdo - bidi override* big - 大字體* br - 換行* cite - 引用* code - 計算機(jī)代碼(在引用源碼的時候需要)* dfn - 定義字段* em - 強(qiáng)調(diào)* font - 字體設(shè)定(不推薦)* i - 斜體* img - 圖片* input - 輸入框* kbd - 定義鍵盤文本* label - 表格標(biāo)簽* q - 短引用* s - 中劃線(不推薦)* samp - 定義范例計算機(jī)代碼* select - 項目選擇* small - 小字體文本* span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊* strike - 中劃線* strong - 粗體強(qiáng)調(diào)* sub - 下標(biāo)* sup - 上標(biāo)* textarea - 多行文本輸入框* tt - 電傳文本* u - 下劃線* var - 定義變量
(2)塊元素(block element)
address - 地址* blockquote - 塊引用* center - 舉中對齊塊* dir - 目錄列表* div - 常用塊級容易，也是css layout的主要標(biāo)簽* dl - 定義列表* fieldset - form控制組* form - 交互表單* h1 - 大標(biāo)題* h2 - 副標(biāo)題* h3 - 3級標(biāo)題* h4 - 4級標(biāo)題* h5 - 5級標(biāo)題* h6 - 6級標(biāo)題* hr - 水平分隔線* isindex - input prompt* menu - 菜單列表* noframes - frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容* noscript - ）可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）* ol - 排序表單* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表可變元素可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。* applet - java applet* button - 按鈕* del - 刪除文本* iframe - inline frame* ins - 插入的文本* map - 圖片區(qū)塊(map)* object - object對象* script - 客戶端腳本。
** (3)空元素(在HTML[1] 元素中，沒有內(nèi)容的 HTML 元素被稱為空元素)**
//換行
//分隔線<input>//文本框等
10、什么是WebGL,它有什么優(yōu)點?
WebGL（全寫Web Graphics Library）是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。
顯然，WebGL技術(shù)標(biāo)準(zhǔn)免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜3D結(jié)構(gòu)的網(wǎng)站頁面，甚至可以用來設(shè)計3D網(wǎng)頁游戲等等。
WebGL完美地解決了現(xiàn)有的Web交互式三維動畫的兩個問題：第一，它通過HTML腳本本身實現(xiàn)Web交互式三維動畫的制作，無需任何瀏覽器插件支持;第二，它利用底層的圖形硬件加速功能進(jìn)行的圖形渲染，是通過統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺的OpenGL接口實現(xiàn)的。
通俗說WebGL中canvas繪圖中的3D版本。因為原生的WebGL很復(fù)雜，我們經(jīng)常會使用一些三方的庫，如three.js等，這些庫多數(shù)用于HTML5游戲開發(fā)。
11、請你描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請求之間保存數(shù)據(jù)。有了本地數(shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)，其中sessionStorage 的概念很特別，引入了一個“瀏覽器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說只要這個瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一頁面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage 即被銷毀。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage 對象也是不同的
cookies會發(fā)送到服務(wù)器端。其余兩個不會。
Microsoft 指出 Internet Explorer 8 增加cookie 限制為每個域名50個，但I(xiàn)E7 似乎也允許每個域名50個cookie。Firefox 每個域名cookie 限制為50個。Opera每個域名cookie 限制為30個。Firefox 和Safari 允許cookie 多達(dá)4097個字節(jié)，包括名（name）、值（value）和等號。Opera 許cookie 多達(dá)4096個字節(jié)，包括：名（name）、值（value）和等號。Internet Explorer 允許cookie 多達(dá)4095個字節(jié)，包括：名（name）、值（value）和等號。
區(qū)別：
- Cookie+ 每個域名存儲量比較?。ǜ鳛g覽器不同，大致4K）+ 所有域名的存儲量有限制（各瀏覽器不同，大致4K）+ 有個數(shù)限制（各瀏覽器不同）+ 會隨請求發(fā)送到服務(wù)器- LocalStorage+ 永久存儲+ 單個域名存儲量比較大（推薦5MB，各瀏覽器不同）+ 總體數(shù)量無限制- SessionStorage+ 只在 Session 內(nèi)有效+ 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
12、說說你對HTML語義化的理解?
(1)什么是HTML語義化？
<基本上都是圍繞著幾個主要的標(biāo)簽，像標(biāo)題（H1~H6）、列表（li）、強(qiáng)調(diào)（strong em）等等> 根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機(jī)器很好地解析。
(2)為什么要語義化？
為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看；
用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。
(3) 語義化標(biāo)簽<header></header><footer></footer><nav></nav><section></section><article></article> SM:用來在頁面中表示一套結(jié)構(gòu)完整且獨立的內(nèi)容部分<aslde></aside> SM:主題的附屬信息(用途很廣，主要就是一個附屬內(nèi)容)，如果article里面為一篇文章的話，那么文章的作者以及信息內(nèi)容就是這篇文章的附屬內(nèi)容了<figure></figure>SM:媒體元素，比如一些視頻，圖片啊等等<datalist></datalist>SM:選項列表，與input元素配合使用，來定義input可能的值<details></details>SM:用于描述文檔或者文檔某個部分的細(xì)節(jié)~ 默認(rèn)屬性為open~ps:配合summary一起使用
13、link和@import的區(qū)別?
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的方式，但是存在一定的區(qū)別：
區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS?！ ?br>
區(qū)別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載?！ ^(qū)別3：link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持?！ ^(qū)別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
14、說說你對SVG理解?
SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。
SVG于2003年1月14日成為 W3C 推薦標(biāo)準(zhǔn)。
特點：
(1)任意放縮用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細(xì)節(jié)等。
(2)文本獨立SVG圖像中的文字獨立于圖像，文字保留可編輯和可搜尋的狀態(tài)。也不會再有字體的限制，用戶系統(tǒng)即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。
(3)較小文件總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
(4)超強(qiáng)顯示效果SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
(5)超級顏色控制SVG圖像提供一個1600萬種顏色的調(diào)色板，支持ICC顏色描述文件標(biāo)準(zhǔn)、RGB、線X填充、漸變和蒙版。
(6)交互X和智能化。SVG面臨的主要問題一個是如何和已經(jīng)占有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運(yùn)行環(huán)境下的廠家支持程度。
瀏覽器支持：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版本都需要一個插件 - 如Adobe SVG瀏覽器，這是免費(fèi)提供的。
15、HTML全局屬性(global attribute)有哪些?
參考資料：MDN: html global attribute或者W3C HTML global-attributes
accesskey:設(shè)置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a
可激活元素
class:為元素設(shè)置類標(biāo)識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable: 指定元素內(nèi)容是否可編輯
contextmenu: 自定義鼠標(biāo)右鍵彈出菜單內(nèi)容
data-*: 為元素增加自定義屬性
dir: 設(shè)置元素文本方向
draggable: 設(shè)置元素是否可拖拽
dropzone: 設(shè)置元素拖放類型： copy, move, link
hidden: 表示一個元素是否與文檔。樣式上會導(dǎo)致元素不顯示，但是不能用這個屬性實現(xiàn)樣式效果
id: 元素id，文檔內(nèi)唯一
lang: 元素內(nèi)容的的語言
spellcheck: 是否啟動拼寫和語法檢查
style: 行內(nèi)css樣式
tabindex: 設(shè)置元素可以獲得焦點，通過tab可以導(dǎo)航
title: 元素相關(guān)的建議信息
translate: 元素和子孫節(jié)點內(nèi)容是否需要本地化
16、說說超鏈接target屬性的取值和作用？
target這個屬性指定所鏈接的頁面在瀏覽器窗口中的打開方式。
它的參數(shù)值主要有：
a、_blank：在新瀏覽器窗口中打開鏈接文件
b、_parent：將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件，就象_self參數(shù)一。
c、_self：在同一框架或窗口中打開所鏈接的文檔。此參數(shù)為默認(rèn)值，通常不用指定。但是我不太理解。
d、_top：在當(dāng)前的整個瀏覽器窗口中打開所鏈接的文檔，因而會刪除所有框架。
17、data-屬性的作用是什么？
data-為前端開發(fā)者提供自定義的屬性，這些屬性集可以通過對象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過getAttribute方法獲取:
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
div.dataset.commentNum; // 10
需要注意的是：data-之后的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峰風(fēng)格。并不是所有的瀏覽器都支持.dataset屬性，測試的瀏覽器中只有Chrome 和Opera 支持。
即：當(dāng)沒有合適的屬性和元素時，自定義的 data 屬性是能夠存儲頁面或 App 的私有的自定義數(shù)據(jù)。
18、介紹一下你對瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。
19、常見的瀏覽器內(nèi)核有哪些？
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等Presto內(nèi)核：Opera7及以上。
[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
20、iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。
21、Label的作用是什么，是怎么用的？
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label><input type=“text“name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>
22、如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
WebSocket、SharedWorker；也可以調(diào)用localstorge、cookies等本地存儲方式；localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；注意quirks：Safari 在無痕模式下設(shè)置localstorge值時會拋出 QuotaExceededError 的異常；
23、如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？
a、map+area或者svgb、border-radiusc、純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等
24、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title屬性沒有明確意義只表示是個標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；
strong是標(biāo)明重點內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：<strong>會重讀，而<B>是展示強(qiáng)調(diào)內(nèi)容。i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；
Physical Style Elements -- 自然樣式標(biāo)簽b, i, u, s, preSemantic Style Elements -- 語義樣式標(biāo)簽strong, em, ins, del, code應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時首選使用自然樣式標(biāo)簽。
25、實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果？
<div style="height:1px;overflow:hidden;background:red"></div>
26、HTML5標(biāo)簽的作用?(用途)
a、使Web頁面的內(nèi)容更加有序和規(guī)范b、使搜索引擎更加容易按照HTML5規(guī)則識別出有效的內(nèi)容c、使Web頁面更接近于一種數(shù)據(jù)字段和表
27、簡述一下src與href的區(qū)別？
src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。<script src ="js.js"></script>當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<link href="common.css" rel="stylesheet"/>那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
28、談?wù)勀銓anvas的理解？
canvas是HTML5中新增一個HTML5標(biāo)簽與操作canvas的javascript API，它可以實現(xiàn)在網(wǎng)頁中完成動態(tài)的2D與3D圖像技術(shù)。<canvas> 標(biāo)記和 SVG以及 VML 之間的一個重要的不同是，<canvas> 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。
canvas可以完成動畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。
29、WebSocket與消息推送？
B/S架構(gòu)的系統(tǒng)多使用HTTP協(xié)議，HTTP協(xié)議的特點：
1 無狀態(tài)協(xié)議2 用于通過 Internet 發(fā)送請求消息和響應(yīng)消息3 使用端口接收和發(fā)送消息，默認(rèn)為80端口底層通信還是使用Socket完成。
HTTP協(xié)議決定了服務(wù)器與客戶端之間的連接方式，無法直接實現(xiàn)消息推送（F5已壞）,一些變相的解決辦法：
雙向通信與消息推送
輪詢：客戶端定時向服務(wù)器發(fā)送Ajax請求，服務(wù)器接到請求后馬上返回響應(yīng)信息并關(guān)閉連接。 ?優(yōu)點：后端程序編寫比較容易。 ?缺點：請求中有大半是無用，浪費(fèi)帶寬和服務(wù)器資源。 ?實例：適于小型應(yīng)用。
長輪詢：客戶端向服務(wù)器發(fā)送Ajax請求，服務(wù)器接到請求后hold住連接，直到有新消息才返回響應(yīng)信息并關(guān)閉連接，客戶端處理完響應(yīng)信息后再向服務(wù)器發(fā)送新的請求。 ?優(yōu)點：在無消息的情況下不會頻繁的請求，耗費(fèi)資小。 ?缺點：服務(wù)器hold連接會消耗資源，返回數(shù)據(jù)順序無保證，難于管理維護(hù)。 Comet異步的ashx，?實例：WebQQ、Hi網(wǎng)頁版、Facebook IM。
長連接：在頁面里嵌入一個隱蔵iframe，將這個隱蔵iframe的src屬性設(shè)為對一個長連接的請求或是采用xhr請求，服務(wù)器端就能源源不斷地往客戶端輸入數(shù)據(jù)。 ?優(yōu)點：消息即時到達(dá)，不發(fā)無用請求；管理起來也相對便。 ?缺點：服務(wù)器維護(hù)一個長連接會增加開銷。 ?實例：Gmail聊天
?Flash Socket：在頁面中內(nèi)嵌入一個使用了Socket類的 Flash 程序JavaScript通過調(diào)用此Flash程序提供的Socket接口與服務(wù)器端的Socket接口進(jìn)行通信，JavaScript在收到服務(wù)器端傳送的信息后控制頁面的顯示。 ?優(yōu)點：實現(xiàn)真正的即時通信，而不是偽即時。 ?缺點：客戶端必須安裝Flash插件；非HTTP協(xié)議，無法自動穿越防火墻。 ?實例：網(wǎng)絡(luò)互動游戲。
Websocket:WebSocket是HTML5開始提供的一種瀏覽器與服務(wù)器間進(jìn)行全雙工通訊的網(wǎng)絡(luò)技術(shù)。依靠這種技術(shù)可以實現(xiàn)客戶端和服務(wù)器端的長連接，雙向?qū)崟r通信。特點:a、事件驅(qū)動b、異步c、使用ws或者wss協(xié)議的客戶端socket
d、能夠?qū)崿F(xiàn)真正意義上的推送功能
缺點： 少部分瀏覽器不支持，瀏覽器支持的程度與方式有區(qū)別。
30、img的title和alt有什么區(qū)別？
Alt 用于圖片無法加載時顯示Title 為該屬性提供信息，通常當(dāng)鼠標(biāo)滑動到元素上的時候顯示
31、表單的基本組成部分有哪些，表單的主要用途是什么？
組成：表單標(biāo)簽、表單域、表單按鈕
a、表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL,以及數(shù)據(jù)提交到服務(wù)器的方法。
b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框、和文件上傳框等。
c、表單按鈕：包括提交按鈕，復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
主要用途：表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集的功能，和向服務(wù)器傳送數(shù)據(jù)。
32、表單提交中Get和Post方式的區(qū)別？
(1)、get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)。
(2)、get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應(yīng)，在URL中可以看到。post是通過HTTP post機(jī)制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址,用戶看不到這個過程。
(3)、對于get方式，服務(wù)器端用Request.QueryString獲取變量的值，對于post方式，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。
(4)、get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。(5)、get安全性非常低，post安全性較高。
33、請你談?wù)凜ookie的弊端?
cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲的負(fù)擔(dān)，但還是有很多局限性的。
(1)、每個特定的域名下最多生成20個cookiea、IE6或更低版本最多20個cookieb、IE7和之后的版本最后可以有50個cookie。c、Firefox最多50個cookied、chrome和Safari沒有做硬性限制
(2)、IE和Opera會清理近期最少使用的cookie，F(xiàn)irefox會隨機(jī)清理cookie。
(3)、cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。
(4)、IE提供了一種存儲可以持久化用戶數(shù)據(jù)，叫做userdata，從IE5.0就開始支持。每個數(shù)據(jù)最多128K，每個域名下最多1M。這個持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理，那么會一直存在。
優(yōu)點：極高的擴(kuò)展性和可用性
a、通過良好的編程，控制保存在cookie中的session對象的大小。
b、通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。
c、只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。
d、控制cookie的生命期，使之不會永遠(yuǎn)有效。偷盜者很可能拿到一個過期的cookie。
缺點：
a、Cookie數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
b、安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因為攔截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。
c、有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。
34、請你說說cookie 和session 的區(qū)別?
(1)、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
(2)、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙考慮到安全應(yīng)當(dāng)使用session。
(3)、session會在一定時間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會比較占用你服務(wù)器的性能考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。
(4)、單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。所以個人建議：將登陸信息等重要信息存放為session中。其他信息如果需要保留，可以放在Cookie中。
35、說說瀏覽器內(nèi)核及差異？
瀏覽器最核心的部分是“Rendering Engine”，即“渲染引擎”，我們一般叫做瀏覽器內(nèi)核。
它主要的功能是解釋網(wǎng)頁中的語法并渲染網(wǎng)頁。所以渲染引擎決定了瀏覽器如何顯示網(wǎng)頁內(nèi)容以及頁面的格式信息。
不同的瀏覽器內(nèi)核對網(wǎng)頁語法的解釋不盡相同，這就導(dǎo)致了不同瀏覽器渲染出的網(wǎng)頁可能有一些差異。比較出名的瀏覽器內(nèi)核有以下幾種：KHTML、Trident、Gecko、Presto、Webkit、Blink。
(1)、Trident內(nèi)核就是我們所熟知的IE瀏覽器的內(nèi)核，該內(nèi)核在IE4中首次采用，沿用到IE11，俗稱“IE內(nèi)核”。一直到Windows XP時期，由于Windows的市場占有率非常高導(dǎo)致IE多年一家獨大，微軟長時間沒有更新Trident內(nèi)核產(chǎn)生了不好的后果：一是Trident內(nèi)核幾乎與W3C的標(biāo)準(zhǔn)脫節(jié)；二是Trident大量的Bug沒有得到及時解決帶來的安全問題等。很多用戶開始轉(zhuǎn)投其他瀏覽器，F(xiàn)irefox和Opera就是在這個時候興起的。另外，很多國產(chǎn)瀏覽器都是“雙核瀏覽器”，其中一個核心是Trident，另一個常見的是Webkit。比如遨游瀏覽器、360安全瀏覽器等。
(2)、Gecko內(nèi)核是Firefox采用的內(nèi)核，開始于Netscape6。Gecko的特點是代碼完全公開，可開發(fā)程度很高。Gecko的出現(xiàn)和IE也不無關(guān)系，當(dāng)年IE與W3C標(biāo)準(zhǔn)嚴(yán)重脫節(jié)導(dǎo)致內(nèi)部一些開發(fā)人員不滿，他們與當(dāng)時已經(jīng)停止更新的Netscape的一些員工創(chuàng)辦了Mozilla，以當(dāng)時的Mosaic內(nèi)核為基礎(chǔ)重新編寫了內(nèi)核，于是就有了Gecko。Gecko內(nèi)核的瀏覽器仍然是Firefox的用戶最多，多以有時候也會被稱為Firefox內(nèi)核，Gecko內(nèi)核也是一個跨平臺的內(nèi)核。
(3)、Presto內(nèi)核是Opera之前使用過的內(nèi)核，Opera12.17以及更早的版本曾經(jīng)采用過的內(nèi)核，現(xiàn)在已經(jīng)停止開發(fā)并廢棄。該內(nèi)核在2003年的Opera7中首次使用，Presto的特點是渲染速度的優(yōu)化達(dá)到了極致，但代價是犧牲了網(wǎng)頁的兼容性。Presto是一個動態(tài)內(nèi)核，在腳本處理上Presto有著天生的優(yōu)勢，頁面的全部或者部分都能夠在回應(yīng)腳本事件時等情況下被重新解析。此外該內(nèi)核在執(zhí)行javascript的時候有著最快的速度，根據(jù)在同等條件下的測試，Presto內(nèi)核執(zhí)行同等Javascript所需的時間僅有Trident和Gecko內(nèi)核的三分之一（也有人測試說Presto渲染部分快部分慢，總體和其他內(nèi)核差不多）。可惜Presto是商業(yè)引擎，很大程度上限制了內(nèi)核的發(fā)展?，F(xiàn)在Opera改用Google Chrome相同的Blink內(nèi)核。
(4)、Webkit內(nèi)核是蘋果公司自己的內(nèi)核，也是蘋果Safari瀏覽器使用的內(nèi)核。Webkit引擎包含WebCore排版引擎和JavascriptCore解析引擎，均從KDE的KHTML引擎衍生而來，基于GPL開源。Google Chrome使用了Webkit內(nèi)核，在腳本解析上Chrome使用了自家研發(fā)的V8引擎?，F(xiàn)在許多手機(jī)瀏覽器使用的都是Webkit內(nèi)核，蘋果自帶Safari，Android的默認(rèn)瀏覽器等。
(5)、Blink是由Google和Opera Software開發(fā)的瀏覽器排版引擎，于2013年4月公布了這一消息。該渲染引擎是開源引擎Webkit中Webcore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。而在Google作出此舉之際，Mozilla與Samsung也達(dá)成合作開發(fā)協(xié)議開發(fā)下一代瀏覽器渲染引擎Servo。
(6)、KHTML是網(wǎng)頁排版引擎之一，由KDE開發(fā)。KHTML擁有速度快捷的優(yōu)點，但對錯誤語法的容忍度則比Mozilla產(chǎn)品所使用的Gecko引擎小。蘋果電腦于2002年采納了KHTML，作為開發(fā)Safari瀏覽器之用，并發(fā)布所修改的最新及過去版本源代碼。后來發(fā)表了開放源代碼的WebCore及WebKit引擎，它們均是KHTML的衍生產(chǎn)品，在開發(fā)網(wǎng)站列出引擎改變內(nèi)容，并會傳回至KDE計劃。
