Doctype 作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
- <!DOCTYPE>聲明位于HTML文檔中的第一行，處于 html 標(biāo)簽之前罩扇。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔奇瘦。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
- 標(biāo)準(zhǔn)模式的排版 和 JS 運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行倦西。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作赁严。
HTML5 為什么只需要寫 <!DOCTYPE HTML>扰柠？
- HTML5 不基于 SGML粉铐，因此不需要對(duì) DTD 進(jìn)行引用，但是需要 doctype 來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）卤档；
- 而 HTML4.01 基于 SGML,所以需要對(duì) DTD 進(jìn)行引用蝙泼，才能告知瀏覽器文檔所使用的文檔類型。
行內(nèi)元素有哪些劝枣？塊級(jí)元素有哪些汤踏？ 空(void)元素有那些？
定義：CSS 規(guī)范規(guī)定舔腾，每個(gè)元素都有 display 屬性溪胶，確定該元素的類型，每個(gè)元素都有默認(rèn)的 display 值稳诚，如 div 的 display 默認(rèn)值為“block”哗脖，則為“塊級(jí)”元素；span 默認(rèn) display 屬性值為“inline”扳还，是“行內(nèi)”元素才避。
- 行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
- 塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
- 空元素：
- 常見: br hr img input link meta
- 不常見: area base col command embed keygen param source track wbr
不同瀏覽器（版本）、HTML4（5）氨距、CSS2 等實(shí)際略有差異
參考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
頁面導(dǎo)入樣式時(shí)桑逝，使用 link 和@import 有什么區(qū)別？
- link 屬于 XHTML 標(biāo)簽俏让，除了加載 CSS 外肢娘，還能用于定義 RSS, 定義 rel 連接屬性等作用；而@import 是 CSS 提供的舆驶，只能用于加載 CSS;
- 頁面被加載的時(shí)橱健，link 會(huì)同時(shí)被加載，而@import 引用的 CSS 會(huì)等到頁面被加載完再加載;
- import 是 CSS2.1 提出的沙廉，只在 IE5 以上才能被識(shí)別拘荡，而 link 是 XHTML 標(biāo)簽，無兼容問題;
- link 支持使用 js 控制 DOM 去改變樣式撬陵，而@import 不支持;
介紹一下你對(duì)瀏覽器內(nèi)核的理解珊皿？
主要分成兩部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML巨税、XML蟋定、圖像等等）、整理訊息（例如加入 CSS 等）草添，以及計(jì)算網(wǎng)頁的顯示方式驶兜，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同抄淑。所有網(wǎng)頁瀏覽器屠凶、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核肆资。
JS 引擎則：解析和執(zhí)行 javascript 來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果矗愧。
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨(dú)立郑原，內(nèi)核就傾向于只指渲染引擎唉韭。
常見的瀏覽器內(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 的分支）]
詳細(xì)文章：瀏覽器內(nèi)核的解析和對(duì)比
html5 有哪些新特性晓避、移除了那些元素簇捍？如何處理 HTML5 新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5俏拱？
-
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集暑塑，主要是關(guān)于圖像，位置锅必，存儲(chǔ)事格，多任務(wù)等功能的增加
- 繪畫 canvas
- 用于媒介回放的 video 和 audio 元素
- 本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
- sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
- 語意化更好的內(nèi)容元素搞隐，比如 article驹愚、footer、header劣纲、nav逢捺、section
- 表單控件，calendar癞季、date劫瞳、time、email绷柒、url志于、search
- 新的技術(shù) webworker, websocket, Geolocation
-
移除的元素：
- 純表現(xiàn)的元素：basefont，big废睦，center伺绽，font, s，strike，tt憔恳，u;
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame瓤荔，frameset，noframes钥组；
-
支持 HTML5 新標(biāo)簽：
IE8/IE7/IE6 支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽输硝，
可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽，
瀏覽器支持新標(biāo)簽后程梦，還需要添加標(biāo)簽?zāi)J(rèn)的樣式点把。
-
當(dāng)然也可以直接使用成熟的框架、比如 html5shim;
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
如何區(qū)分 HTML5： DOCTYPE 聲明\新增的結(jié)構(gòu)元素\功能元素
簡述一下你對(duì) HTML 語義化的理解屿附？
- 用正確的標(biāo)簽做正確的事情郎逃。
- html 語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰挺份，便于對(duì)瀏覽器褒翰、搜索引擎解析;
- 即使在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的;
- 搜索引擎的爬蟲也依賴于 HTML 標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重匀泊，利于 SEO;
- 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊优训，便于閱讀維護(hù)理解。
HTML5 的離線儲(chǔ)存怎么使用各聘，工作原理能不能解釋一下揣非？
在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)用躲因，在用戶與因特網(wǎng)連接時(shí)早敬，更新用戶機(jī)器上的緩存文件。
原理：HTML5 的離線存儲(chǔ)是基于一個(gè)新建的.appcache 文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))大脉，通過這個(gè)文件上的解析清單離線存儲(chǔ)資源搞监，這些資源就會(huì)像 cookie 一樣被存儲(chǔ)了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)镰矿，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示琐驴。
如何使用：
- 頁面頭部像下面一樣加入一個(gè) manifest 的屬性；
- 在 cache.manifest 文件的編寫離線存儲(chǔ)的資源
CACHE MANIFEST
#v1.0
CACHE:
js/app.js
css/style.css
NETWORK:
assets/logo.png
FALLBACK:
/html5/ /404.html
- 在離線狀態(tài)時(shí)衡怀，操作 window.applicationCache 進(jìn)行需求實(shí)現(xiàn)棍矛。
瀏覽器是怎么對(duì) HTML5 的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？
- 在線的情況下抛杨，瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性够委，它會(huì)請(qǐng)求 manifest 文件，如果是第一次訪問 app怖现，那么瀏覽器就會(huì)根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)茁帽。如果已經(jīng)訪問過 app 并且資源已經(jīng)離線存儲(chǔ)了玉罐，那么瀏覽器就會(huì)使用離線的資源加載頁面，然后瀏覽器會(huì)對(duì)比新的 manifest 文件與舊的 manifest 文件潘拨，如果文件沒有發(fā)生改變吊输，就不做任何操作，如果文件改變了铁追，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)季蚂。
- 離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源琅束。
請(qǐng)描述一下 cookies扭屁，sessionStorage 和 localStorage 的區(qū)別？
- cookie 是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）
- cookie 數(shù)據(jù)始終在同源的 http 請(qǐng)求中攜帶（即使不需要）涩禀，記會(huì)在瀏覽器和服務(wù)器間來回傳遞料滥。
- sessionStorage 和 localStorage 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存艾船。
- 存儲(chǔ)大锌埂：
- cookie 數(shù)據(jù)大小不能超過 4k。
- sessionStorage 和 localStorage 雖然也有存儲(chǔ)大小的限制屿岂，但比 cookie 大得多践宴，可以達(dá)到 5M 或更大。
- 有效期（生命周期）：
- localStorage: 存儲(chǔ)持久數(shù)據(jù)雁社，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)浴井；
- sessionStorage: 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除晒骇。
- cookie: 設(shè)置的 cookie 過期時(shí)間之前一直有效霉撵，即使窗口或?yàn)g覽器關(guān)閉
iframe 有那些缺點(diǎn)？
- iframe 會(huì)阻塞主頁面的 Onload 事件洪囤；
- 搜索引擎的檢索程序無法解讀這種頁面徒坡，不利于 SEO;
- iframe 和主頁面共享連接池，而瀏覽器對(duì)相同域的連接有限制瘤缩，所以會(huì)影響頁面的并行加載喇完。
使用 iframe 之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用 iframe剥啤，最好是通過 javascript
動(dòng)態(tài)給 iframe 添加 src 屬性值锦溪，這樣可以繞開以上兩個(gè)問題。
Label 的作用是什么府怯？是怎么用的刻诊？
label 標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(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>
HTML5 的 form 如何關(guān)閉自動(dòng)完成功能则涯？
給不想要提示的 form 或某個(gè) input 設(shè)置為 autocomplete=off复局。
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信? (阿里)
- WebSocket、SharedWorker粟判；
- 也可以調(diào)用 localstorge亿昏、cookies 等本地存儲(chǔ)方式；
localstorge 另一個(gè)瀏覽上下文里被添加档礁、修改或刪除時(shí)角钩，它都會(huì)觸發(fā)一個(gè)事件，
我們通過監(jiān)聽事件呻澜，控制它的值來進(jìn)行頁面信息通信彤断；
注意 quirks：Safari 在無痕模式下設(shè)置 localstorge 值時(shí)會(huì)拋出 QuotaExceededError 的異常；
webSocket 如何兼容低瀏覽器易迹？(阿里)
- Adobe Flash Socket 宰衙、
- ActiveX HTMLFile (IE) 、
- 基于 multipart 編碼發(fā)送 XHR 睹欲、
- 基于長輪詢的 XHR
頁面可見性（Page Visibility API） 可以有哪些用途供炼？
- 通過 visibilityState 的值檢測(cè)頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時(shí)間等;
- 在頁面被切換到其他后臺(tái)進(jìn)程的時(shí)候窘疮，自動(dòng)暫停音樂或視頻的播放袋哼；
如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
- map+area 或者 svg
- border-radius
- 純 js 實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡單算法闸衫、獲取鼠標(biāo)坐標(biāo)等等
實(shí)現(xiàn)不使用 border 畫出 1px 高的線涛贯，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
網(wǎng)頁驗(yàn)證碼是干嘛的蔚出，是為了解決什么安全問題弟翘。
- 區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序〗拘铮可以防止惡意破解密碼稀余、刷票、論壇灌水趋翻；
- 有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試睛琳。
title 與 h1 的區(qū)別、b 與 strong 的區(qū)別踏烙、i 與 em 的區(qū)別师骗？
- title 屬性沒有明確意義只表示是個(gè)標(biāo)題，H1 則表示層次明確的標(biāo)題讨惩，對(duì)頁面信息的抓取也有很大的影響辟癌；
- strong 是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義步脓，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：strong 會(huì)重讀愿待，而 b 是展示強(qiáng)調(diào)內(nèi)容浩螺。
- i 內(nèi)容展示為斜體，em 表示強(qiáng)調(diào)的文本仍侥；
Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽要出。
html 中 title 屬性和 alt 屬性的區(qū)別？
<img src="#" alt="alt信息" />
當(dāng)圖片不輸出信息的時(shí)候农渊，會(huì)顯示 alt 信息 鼠標(biāo)放上去沒有信息患蹂，當(dāng)圖片正常讀取，不會(huì)出現(xiàn) alt 信息砸紊。
<img src="#" alt="alt信息" title="title信息" />
當(dāng)圖片不輸出信息的時(shí)候传于，會(huì)顯示 alt 信息 鼠標(biāo)放上去會(huì)出現(xiàn) title 信息；
當(dāng)圖片正常輸出的時(shí)候醉顽，不會(huì)出現(xiàn) alt 信息沼溜，鼠標(biāo)放上去會(huì)出現(xiàn) title 信息。
另外還有一些關(guān)于 title 屬性的知識(shí)：
- title 屬性可以用在除了 base游添，basefont系草，head，html唆涝，meta找都，param，script 和 title 之外的所有標(biāo)簽廊酣。
- title 屬性的功能是提示能耻。額外的說明信息和非本質(zhì)的信息請(qǐng)使用 title 屬性。title 屬性值可以比 alt 屬性值設(shè)置的更長亡驰。
- title 屬性有一個(gè)很好的用途晓猛，即為鏈接添加描述性文字，特別是當(dāng)連接本身并不是十分清楚的表達(dá)了鏈接的目的隐解。
