1、內(nèi)元素和塊級(jí)元素的區(qū)別？
（2）塊級(jí)元素有：div p ul ol li dl dt dd h1-h6
（3）常見的空元素：br-換行，hr-水平分割線
2、Doctype作用？標(biāo)準(zhǔn)模式與混雜模式如何區(qū)分？
<!DOCTYPE>告訴瀏覽器使用哪個(gè)版本的html規(guī)范來渲染文檔。DOCTYPE不存在或形式不正確會(huì)導(dǎo)致html文檔以混雜模式呈現(xiàn)。
標(biāo)準(zhǔn)模式（Standards mode）以瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行；混雜模式（Quirks mode）中頁面是一種比較寬松的向后兼容的方式顯示。
3、引入樣式時(shí)，link和@import的區(qū)別？
鏈接樣式時(shí)，link只能在HTML頁面中引入外部樣式
導(dǎo)入樣式表時(shí)，@import 既可以在HTML頁面中導(dǎo)入外部樣式，也可以在css樣式文件中導(dǎo)入外部css樣式。
4、html5有哪些新特性？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim
移除的元素：
純表現(xiàn)的元素：basefont big center font s strike tt u
性能較差元素：frame frameset noframes
區(qū)分：
DOCTYPE聲明的方式是區(qū)分重要因素
根據(jù)新增加的結(jié)構(gòu)、功能來區(qū)分
5、介紹一下你對(duì)瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(Layout Engine或Rendering Engine)和js引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。
js引擎：解析和執(zhí)行JavaScript來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
6、常見的瀏覽器內(nèi)核有哪些？
Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera內(nèi)核原為：Presto，現(xiàn)為：Blink)
Webkit：Safari Chrome
7、簡(jiǎn)述一下你對(duì)HTML語義化的理解？
去掉或丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)。
有利于seo和搜索引擎建立良好溝通，有助于爬蟲抓取更多的信息，爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
方便其它設(shè)備解析。
便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化根據(jù)可讀性。
8、label標(biāo)簽的作用是什么? 是怎么用的?
去掉或丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)。
label標(biāo)簽用來定義表單控件間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。label 中有兩個(gè)屬性是非常有用的, FOR和ACCESSKEY。
FOR屬性功能：表示label標(biāo)簽要綁定的HTML元素，你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候，所綁定的元素將獲取焦點(diǎn)。例如
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
9、HTML5的form如何關(guān)閉自動(dòng)完成功能？
TML的輸入框可以擁有自動(dòng)完成的功能，當(dāng)你往輸入框輸入內(nèi)容的時(shí)候，瀏覽器會(huì)從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列在輸入框下面，這樣就不用全部輸入進(jìn)去了，直接選擇列表中的項(xiàng)目就可以了。
但有時(shí)候我們希望關(guān)閉輸入框的自動(dòng)完成功能，例如當(dāng)用戶輸入內(nèi)容的時(shí)候，我們希望使用AJAX技術(shù)從數(shù)據(jù)庫搜索并列舉而不是在用戶的歷史記錄中搜索。
方法：
在IE的internet選項(xiàng)菜單中里的自動(dòng)完成里面設(shè)置
設(shè)置form輸入框的autocomplete為on或者off來來開啟輸入框的自動(dòng)完成功能
11、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title屬性沒有明確意義，只表示標(biāo)題；h1表示層次明確的標(biāo)題，對(duì)頁面信息的抓取也有很大的影響
strong標(biāo)明重點(diǎn)內(nèi)容，語氣加強(qiáng)含義；b是無意義的視覺表示
em表示強(qiáng)調(diào)文本；i是斜體，是無意義的視覺表示
視覺樣式標(biāo)簽：b i u s
語義樣式標(biāo)簽：strong em ins del code
12、元素的alt和title有什么異同？
在alt和title同時(shí)設(shè)置的時(shí)候，alt作為圖片的替代文字出現(xiàn)，title是圖片的解釋文字.
13、瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么?
瀏覽器頁面構(gòu)成：結(jié)構(gòu)層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：HTML實(shí)現(xiàn)頁面結(jié)構(gòu)，CSS完成頁面的表現(xiàn)與風(fēng)格，JavaScript實(shí)現(xiàn)一些客戶端的功能與業(yè)務(wù)。
14、div+css的布局有什么優(yōu)點(diǎn)？
（1）改版的時(shí)候更方便 只要改css文件。
（2）頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡(jiǎn)潔。
表現(xiàn)與結(jié)構(gòu)相分離。
（3）易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。
15、網(wǎng)頁制作會(huì)用到的圖片格式有哪些？
Webp：WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。
并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測(cè)試并使用WebP格式。
Apng：是PNG的位圖動(dòng)畫擴(kuò)展，可以實(shí)現(xiàn)png格式的動(dòng)態(tài)圖片效果，有望代替GIF成為下一代動(dòng)態(tài)圖標(biāo)準(zhǔn)。
16、簡(jiǎn)述一下src與href的區(qū)別
src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系
17、從瀏覽器地址欄輸入url到顯示頁面的步驟
瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求；
服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
瀏覽器對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
載入解析到的資源文件，渲染頁面，完成。
18、HTML全局屬性(global attribute)有哪些
class:為元素設(shè)置類標(biāo)識(shí)
data-*: 為元素增加自定義屬性
draggable: 設(shè)置元素是否可拖拽
id: 元素id，文檔內(nèi)唯一
lang: 元素內(nèi)容的的語言
style: 行內(nèi)css樣式
title: 元素相關(guān)的建議信息
19、Canvas是什么？怎樣寫Canvas？
Canvas是HTML5的一個(gè)元素，它使用JavaScript在網(wǎng)頁上繪制圖形。Canvas是一個(gè)矩形區(qū)域。它的每一個(gè)像素都可以由HTML5語言來控制。使用Canvas繪制路徑、框、圓、字符和添加圖像有幾種方法。
如果要在我們的HTML文檔中添加Canvas標(biāo)簽，我們需要ID、寬度和高度。下面是如何將基本Canvas標(biāo)簽寫入HTML文檔的示例。
<canvas id="myFirstCanvas" width="100" height="100"> </canvas>
20、你能列出HTML5中新的輸入類型屬性嗎？
search：用于搜索域，比如站點(diǎn)搜索或 Google 搜索，域顯示為常規(guī)的文本域。
url ：用于應(yīng)該包含 URL 地址的輸入域在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 url 域的值。
email：用于應(yīng)該包含 e-mail 地址的輸入域，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 email 域的值。
datetime：選取時(shí)間、日、月、年（UTC 時(shí)間）
date：選取日、月、年
month：選取月、年
week：選取周和年
time：選取時(shí)間（小時(shí)和分鐘）
上一篇：JS數(shù)組去重的5種方法 下一篇：輸入網(wǎng)址后發(fā)生了什么（常見經(jīng)典面試題）
