html5有哪些新特性布持，移除了那些元素贤斜？
新特性：
- 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
- 拖拽釋放(Drag and drop) API
- 音頻、視頻API(audio,video)
- 畫布(Canvas) API
- 地理(Geolocation) API
- 本地離線存儲 localStorage 長期存儲數(shù)據(jù)族壳，瀏覽器關(guān)閉后數(shù)據(jù)不丟失屹篓；sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
- 表單控件盖桥，calendar梆暮、date别凹、time屈扎、email坏平、url搁痛、search
- 新的技術(shù)webworker, websocket, Geolocation
移除的元素：
- 純表現(xiàn)的元素：basefont僚焦，big雨女，center谚攒，font, s，strike氛堕，tt馏臭，u；
- 對可用性產(chǎn)生負(fù)面影響的元素：frame讼稚，frameset括儒，noframes；
你是如何理解 HTML 語義化的锐想？語義化的好處帮寻？
根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析赠摇。
語義化的好處：
- 為了在沒有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)，可以減少差異化串结。
常見的語義化標(biāo)簽及其作用：
- <title>：頁面主體內(nèi)容哑子。
<hn>：h1~h6，分級標(biāo)題肌割，<h1> 與 <title> 協(xié)調(diào)有利于搜索引擎優(yōu)化卧蜓。
<ul>：無序列表。
<li>：有序列表把敞。
<header>：頁眉通常包括網(wǎng)站標(biāo)志弥奸、主導(dǎo)航、全站鏈接以及搜索框奋早。
<nav>：標(biāo)記導(dǎo)航盛霎，僅對文檔中重要的鏈接群使用。
<main>：頁面主要內(nèi)容耽装，一個頁面只能使用一次愤炸。如果是web應(yīng)用，則包圍其主要功能掉奄。
<article>：定義外部的內(nèi)容摇幻，其中的內(nèi)容獨立于文檔的其余部分。
<section>：定義文檔中的節(jié)（section挥萌、區(qū)段）。比如章節(jié)枉侧、頁眉引瀑、頁腳或文檔中的其他部分。
<aside>：定義其所處內(nèi)容之外的內(nèi)容榨馁。如側(cè)欄憨栽、文章的一組鏈接、廣告翼虫、友情鏈接屑柔、相關(guān)產(chǎn)品列表等。
<footer>：頁腳珍剑，只有當(dāng)父級是body時掸宛，才是整個頁面的頁腳。
<small>：呈現(xiàn)小號字體效果招拙，指定細(xì)則唧瘾，輸入免責(zé)聲明措译、注解、署名饰序、版權(quán)领虹。
<strong>：和 em 標(biāo)簽一樣，用于強調(diào)文本求豫，但它強調(diào)的程度更強一些塌衰。
<em>：將其中的文本表示為強調(diào)的內(nèi)容，表現(xiàn)為斜體蝠嘉。
<mark>：使用黃色突出顯示部分文本最疆。
<figure>：規(guī)定獨立的流內(nèi)容（圖像、圖表是晨、照片肚菠、代碼等等）（默認(rèn)有40px左右margin）。
<figcaption>：定義 figure 元素的標(biāo)題罩缴，應(yīng)該被置于 figure 元素的第一個或最后一個子元素的位置蚊逢。
<cite>：表示所包含的文本對某個參考文獻(xiàn)的引用，比如書籍或者雜志的標(biāo)題箫章。
<blockquoto>：定義塊引用烙荷，塊引用擁有它們自己的空間。
<q>：短的引述（跨瀏覽器問題檬寂，盡量避免使用）终抽。
<time>：datetime屬性遵循特定格式，如果忽略此屬性桶至，文本內(nèi)容必須是合法的日期或者時間格式昼伴。
<abbr>：簡稱或縮寫。
<dfn>：定義術(shù)語元素镣屹，與定義必須緊挨著圃郊，可以在描述列表dl元素中使用。
<address>：作者女蜈、相關(guān)人士或組織的聯(lián)系信息（電子郵件地址持舆、指向聯(lián)系信息頁的鏈接）。
<del>：移除的內(nèi)容伪窖。
<ins>：添加的內(nèi)容逸寓。
<code>：標(biāo)記代碼。
<meter>：定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量覆山。（Internet Explorer 不支持 meter 標(biāo)簽）
<progress>：定義運行中的進(jìn)度（進(jìn)程）竹伸。
Doctype作用？
<!DOCTYPE>聲明叫做文件類型定義（DTD）汹买。<!DOCTYPE>聲明必須在 HTML 文檔的第一行佩伤，這并不是一個 HTML 標(biāo)簽聊倔。告訴瀏覽器使用哪個版本的HTML規(guī)范來渲染文檔。DOCTYPE不存在或形式不正確會導(dǎo)致HTML文檔以混雜模式呈現(xiàn)生巡。
標(biāo)準(zhǔn)模式（Standards mode）以瀏覽器支持的最高標(biāo)準(zhǔn)運行耙蔑；混雜模式（Quirks mode）中頁面是一種比較寬松的向后兼容的方式顯示。
HTML5的聲明<!DOCTYPE html>孤荣。HTML5 沒有 DTD 甸陌，因此也就沒有嚴(yán)格模式與混雜模式的區(qū)別，HTML5 有相對寬松的語法盐股，實現(xiàn)時钱豁，已經(jīng)盡可能大的實現(xiàn)了向后兼容。（ HTML5 沒有嚴(yán)格和混雜之分）
行內(nèi)元素有哪些疯汁？塊級元素有哪些牲尺？ 空(void)元素有那些？
行內(nèi)元素：a span img input select
塊級元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>
頁面導(dǎo)入樣式時幌蚊，使用link和@import有什么區(qū)別谤碳？
二者都是外部引用CSS的方式
不同點：
- link是xhtml標(biāo)簽，除了加載css外溢豆，還可以定義RSS等其他事務(wù)蜒简；@import屬于CSS范疇，只能加載CSS
link引用CSS時候漩仙，頁面載入時同時加載搓茬；@import需要在頁面完全加載以后加載，而且@import被引用的CSS會等到引用它的CSS文件被加載完才加載 - link是xhtml標(biāo)簽队他，無兼容問題卷仑；@import是在css2.1提出來的，低版本的瀏覽器不支持
- link支持使用javascript控制去改變樣式麸折，而@import不支持
- link方式的樣式的權(quán)重高于@import的權(quán)重
- import在html使用時候需要<style type="text/css">標(biāo)簽
HTML5的文件離線儲存怎么使用系枪，工作原理是什么？
在線情況下磕谅，瀏覽器發(fā)現(xiàn)HTML頭部有manifest屬性，它會請求manifest文件雾棺，如果是第一次訪問膊夹，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源，并進(jìn)行離線存儲捌浩。如果已經(jīng)訪問過并且資源已經(jīng)離線存儲了放刨，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件尸饺，如果文件沒有發(fā)生改變进统，就不會做任何操作助币，如果文件改變了，那么就會重新下載文件中的資源螟碎，并且進(jìn)行離線存儲眉菱。例如，
在頁面頭部加入manifest屬性
<html manifest='cache.manifest'>
在cache.manifest文件中編寫離線存儲的資源
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
//offline.html
cookies掉分，sessionStorage和localStorage的區(qū)別俭缓？
共同點：都是保存在瀏覽器端，且是同源的酥郭。
區(qū)別：
- cookies是為了標(biāo)識用戶身份而存儲在用戶本地終端上的數(shù)據(jù)华坦，始終在同源http請求中攜帶，即cookies在瀏覽器和服務(wù)器間來回傳遞不从，而sessionstorage和localstorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器惜姐，僅在本地保存。
存儲大小的限制不同椿息。cookie保存的數(shù)據(jù)很小歹袁，不能超過4k，而sessionstorage和localstorage保存的數(shù)據(jù)大撵颊，可達(dá)到5M宇攻。 - 數(shù)據(jù)的有效期不同。cookie在設(shè)置的cookie過期時間之前一直有效倡勇，即使窗口或者瀏覽器關(guān)閉逞刷。sessionstorage僅在瀏覽器窗口關(guān)閉之前有效。localstorage始終有效妻熊，窗口和瀏覽器關(guān)閉也一直保存夸浅，用作長久數(shù)據(jù)保存。
- 作用域不同扔役。cookie在所有的同源窗口都是共享帆喇；sessionstorage不在不同的瀏覽器共享，即使同一頁面亿胸；localstorage在所有同源窗口都是共享
頁面可見性（Page Visibility）API 可以有哪些用途坯钦？
- 通過visibility state的值得檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間侈玄。
- 在頁面被切換到其他后臺進(jìn)程時婉刀，自動暫停音樂或視頻的播放。
Document.hidden（只讀）
返回布爾值序仙，表示頁面是（true）否（false）隱藏突颊。如果頁面處于被認(rèn)為是對用戶隱藏狀態(tài)時返回true，否則返回false。
Document.visibilityState（只讀）
返回document的可見性, 即當(dāng)前可見元素的上下文環(huán)境. 由此可以知道當(dāng)前文檔(即為頁面)是在背后, 或是不可見的隱藏的標(biāo)簽頁律秃，或者(正在)預(yù)渲染.可用的值如下：
-
visible: 頁面內(nèi)容至少是部分可見爬橡。 在實際中，這意味著頁面是非最小化窗口的前景選項卡棒动。 -
hidden: 頁面內(nèi)容對用戶不可見糙申。 在實際中，這意味著文檔可以是一個后臺標(biāo)簽迁客，或是最小化窗口的一部分郭宝，或是在操作系統(tǒng)鎖屏激活的狀態(tài)下。 -
prerender: 頁面內(nèi)容正在被預(yù)渲染且對用戶是不可見的(被document.hidden當(dāng)做隱藏). 文檔可能初始狀態(tài)為prerender掷漱，但絕不會從其它值轉(zhuǎn)為該值粘室。 注釋：瀏覽器支持是可選的。 -
unloaded: 頁面正在從內(nèi)存中卸載卜范。 注釋：瀏覽器支持是可選的衔统。
Document.onvisibilitychange EventListener提供在visibilitychange事件被觸發(fā)時調(diào)用的代碼
如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
- WebSocket 和 SharedWorker
- 也可以調(diào)用 localstorge、cookies 等本地存儲方式海雪。 localstorge 在另一個瀏覽上下文里被添加锦爵、修改或刪除時，它都會觸發(fā)一個事件奥裸，我們通過監(jiān)聽事件险掀，控制它的值來進(jìn)行頁面信息通信。
iframe框架有那些優(yōu)缺點湾宙？
優(yōu)點：
- iframe能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來樟氢。
- 如果有多個網(wǎng)頁引用iframe，那么你只需要修改iframe的內(nèi)容侠鳄，就可以實現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改埠啃，方便快捷。
- 網(wǎng)頁如果為了統(tǒng)一風(fēng)格伟恶，頭部和版本都是一樣的碴开，就可以寫成一個頁面，用iframe來嵌套博秫，可以增加代碼的可重用潦牛。
- 如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問題可以由iframe來解決挡育。
缺點：
- 搜索引擎的檢索程序無法解讀這種頁面罢绽，不利于SEO
- iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制静盅，所以會影響頁面的并行加載。
框架結(jié)構(gòu)中出現(xiàn)各種滾動條 - 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe蒿叠，最好通過JavaScript動態(tài)給iframe添加src屬性值明垢，這樣可以繞開以上兩個問題。
- iframe會阻塞主頁面的Onload事件市咽；
- iframe頁面會增加服務(wù)器的http請求
介紹一下你對瀏覽器內(nèi)核的理解痊银？
瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”施绎，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”溯革。負(fù)責(zé)對網(wǎng)頁語法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用HTML、JavaScript）并渲染（顯示）網(wǎng)頁谷醉。 所以致稀，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息俱尼。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同抖单，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因遇八。
以前端的角度出發(fā)做好SEO(Search Engine Optimization/搜索引擎優(yōu)化)需要考慮什么矛绘？
- 了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁。
- meta標(biāo)簽優(yōu)化
包括主題（title）刃永，網(wǎng)站描述（description）货矮，和關(guān)鍵字（keywords）。還有其它的隱藏文字如author（作者）斯够，category（目錄）囚玫，language（編碼語種）等。
meta元素可提供有關(guān)頁面的元信息雳刺，如針對搜索引擎和更新頻度的描述劫灶。 - 搜索就得用關(guān)鍵詞。關(guān)鍵詞分析和選擇是SEO最重要的工作之一掖桦。首先給網(wǎng)站確定關(guān)鍵詞（一般在5個上下）本昏，然后針對這些關(guān)鍵字進(jìn)行優(yōu)化，包括關(guān)鍵詞密度（Density）枪汪，相關(guān)度（Relavacy）涌穆，突出性（Prominency）等等。
- 不同的搜索引擎對頁面的抓取和索引雀久、排序的規(guī)則都不一樣宿稀。各搜索門戶和搜索引擎的關(guān)系。
src與href的區(qū)別?
src（source）指向外部資源的位置赖捌，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置祝沸；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔中矮烹，如js腳本，img圖片和iframe等元素罩锐。
當(dāng)瀏覽器解析到該元素時奉狈，會暫停其他資源的下載和處理，直到將該資源加載涩惑、編譯仁期、執(zhí)行完畢，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)竭恬。
href（hypertext reference/超文本引用）指向網(wǎng)絡(luò)資源所在位置跛蛋，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<link href="common.css" rel="stylesheet"/>那么瀏覽器會識別該文檔為css文件痊硕，就會并行下載資源并且不會停止對當(dāng)前文檔的處理赊级。這也就是為什么建議使用link方式加載css而不是使用@import方式。
