1、內(nèi)元素和塊級(jí)元素的區(qū)別？

行內(nèi)元素：不會(huì)獨(dú)立出現(xiàn)在一行，單獨(dú)使用的時(shí)候后面不會(huì)有換行符的元素。eg：span, strong, img, a 等。這些元素，默認(rèn)的高寬，總是其內(nèi)容的高寬。并且，margin和padding值，只有左右有效。

塊級(jí)元素：獨(dú)立在一行的元素，他們后面會(huì)自動(dòng)帶有換行符。eg：div , p ,form , ul , li , ol , dl 等。它們的出現(xiàn)，往往獨(dú)自占領(lǐng)一行。在沒有設(shè)置寬度的情況下，默認(rèn)寬度總是其父元素的寬度。

行內(nèi)元素轉(zhuǎn)換成塊元素，只要設(shè)置其display屬性為block即可，display:block; 。塊元素轉(zhuǎn)換成行內(nèi)元素，只要將其display屬性設(shè)置為inline即可，display:inline;。

（1）行內(nèi)元素有：a b span img input select
（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ī)范來(lái)渲染文檔。DOCTYPE不存在或形式不正確會(huì)導(dǎo)致html文檔以混雜模式呈現(xiàn)。

標(biāo)準(zhǔn)模式（Standards mode）以瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行；混雜模式（Quirks mode）中頁(yè)面是一種比較寬松的向后兼容的方式顯示。

3、引入樣式時(shí)，link和@import的區(qū)別？

鏈接樣式時(shí)，link只能在HTML頁(yè)面中引入外部樣式

導(dǎo)入樣式表時(shí)，@import 既可以在HTML頁(yè)面中導(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 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
(5)語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;

IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim

移除的元素：

1. 純表現(xiàn)的元素：basefont big center font s strike tt u

2. 性能較差元素：frame frameset noframes

區(qū)分：

1. DOCTYPE聲明的方式是區(qū)分重要因素

2. 根據(jù)新增加的結(jié)構(gòu)、功能來(lái)區(qū)分

5、介紹一下你對(duì)瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(Layout Engine或Rendering Engine)和js引擎。

渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。
js引擎：解析和執(zhí)行JavaScript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(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語(yǔ)義化的理解？

去掉或丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)。

有利于seo和搜索引擎建立良好溝通，有助于爬蟲抓取更多的信息，爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。

方便其它設(shè)備解析。

便于團(tuán)隊(duì)開發(fā)和維護(hù)，語(yǔ)義化根據(jù)可讀性。

8、label標(biāo)簽的作用是什么? 是怎么用的?

去掉或丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)。

label標(biāo)簽用來(lái)定義表單控件間的關(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ù)庫(kù)搜索并列舉而不是在用戶的歷史記錄中搜索。

方法：

1. 在IE的internet選項(xiàng)菜單中里的自動(dòng)完成里面設(shè)置

2. 設(shè)置form輸入框的autocomplete為on或者off來(lái)來(lái)開啟輸入框的自動(dòng)完成功能

11、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title屬性沒有明確意義，只表示標(biāo)題；h1表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響
strong標(biāo)明重點(diǎn)內(nèi)容，語(yǔ)氣加強(qiáng)含義；b是無(wú)意義的視覺表示
em表示強(qiáng)調(diào)文本；i是斜體，是無(wú)意義的視覺表示
視覺樣式標(biāo)簽：b i u s
語(yǔ)義樣式標(biāo)簽：strong em ins del code

12、元素的alt和title有什么異同？

在alt和title同時(shí)設(shè)置的時(shí)候，alt作為圖片的替代文字出現(xiàn)，title是圖片的解釋文字.

13、瀏覽器頁(yè)面有哪三層構(gòu)成，分別是什么，作用是什么?

瀏覽器頁(yè)面構(gòu)成：結(jié)構(gòu)層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：HTML實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)，CSS完成頁(yè)面的表現(xiàn)與風(fēng)格，JavaScript實(shí)現(xiàn)一些客戶端的功能與業(yè)務(wù)。

14、div+css的布局有什么優(yōu)點(diǎn)？

（1）改版的時(shí)候更方便 只要改css文件。
（2）頁(yè)面加載速度更快、結(jié)構(gòu)化清晰、頁(yè)面顯示簡(jiǎn)潔。
表現(xiàn)與結(jié)構(gòu)相分離。
（3）易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。

15、網(wǎng)頁(yè)制作會(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到顯示頁(yè)面的步驟

瀏覽器根據(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ǔ)法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）； 

載入解析到的資源文件，渲染頁(yè)面，完成。

18、HTML全局屬性(global attribute)有哪些

class:為元素設(shè)置類標(biāo)識(shí)

data-*: 為元素增加自定義屬性

draggable: 設(shè)置元素是否可拖拽 

id: 元素id，文檔內(nèi)唯一 

lang: 元素內(nèi)容的的語(yǔ)言 

style: 行內(nèi)css樣式 

title: 元素相關(guān)的建議信息

19、Canvas是什么？怎樣寫Canvas？

Canvas是HTML5的一個(gè)元素，它使用JavaScript在網(wǎng)頁(yè)上繪制圖形。Canvas是一個(gè)矩形區(qū)域。它的每一個(gè)像素都可以由HTML5語(yǔ)言來(lái)控制。使用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í)和分鐘）

datetime-local：選取時(shí)間、日、月、年（本地時(shí)間）

number：用于應(yīng)該包含數(shù)值的輸入域，您還能夠設(shè)定對(duì)所接受的數(shù)字的限定。

range：用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域，類型顯示為滑動(dòng)條。

21、簡(jiǎn)述幾個(gè)css hack?

(1) 圖片間隙
在div中插入圖片，圖片會(huì)將div下方撐大3px。hack1：將<div>與<img>寫在同一行。hack2：給<img>添加display：block；

dt li 中的圖片間隙。hack：給<img>添加display：block；

(2) 默認(rèn)高度，IE6以下版本中，部分塊元素，擁有默認(rèn)高度（低于18px）

hack1：給元素添加：font-size：0；

hack2：聲明：overflow：hidden；

表單行高不一致

hack1：給表單添加聲明：float：left；height： ；border： 0；

鼠標(biāo)指針

hack：若統(tǒng)一某一元素鼠標(biāo)指針為手型：cursor：pointer；

當(dāng)li內(nèi)的a轉(zhuǎn)化塊元素時(shí)，給a設(shè)置float，IE里面會(huì)出現(xiàn)階梯狀
hack1：給a加display：inline-block；

hack2：給li加float：left；

22、viewport 所有屬性 ？

(1)width :設(shè)置layout viewport的寬度，為一個(gè)正整數(shù)，或字符串'device-width';

(2)initial-scale:設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

(3)minimum-scale:允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

(4)maximum-scale:允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

(5)height:設(shè)置layout viewport的高度，這個(gè)屬性對(duì)我們并不重要，很少使用

(6)user-scalable:是否允許用戶進(jìn)行縮放，值為‘no’或者‘yes’。

安卓中還支持：target-densitydpi，表示目標(biāo)設(shè)備的密度等級(jí)，作用是決定css中的1px 代表多少物理像素

(7)target-densitydpi:值可以為一個(gè)數(shù)值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個(gè)字符串中的一個(gè)

23、meta標(biāo)簽的name屬性值？

name 屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

meta標(biāo)簽的name屬性語(yǔ)法格式是：＜meta name="參數(shù)" content="具體的參數(shù)值"＞。

其中name屬性主要有以下幾種參數(shù)：

A 、Keywords(關(guān)鍵字)說(shuō)明：keywords用來(lái)告訴搜索引擎你網(wǎng)頁(yè)的關(guān)鍵字是什么。

B 、description(網(wǎng)站內(nèi)容描述) 說(shuō)明：description用來(lái)告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

C 、robots(機(jī)器人向?qū)?說(shuō)明：robots用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。

content的參數(shù)有all,none,index,noindex,follow,nofollow,默認(rèn)是all。
舉例：＜meta name="robots" content="none"＞D 、author(作者)

24、px/em/rem有什么區(qū)別？ 為什么通常給font-size 設(shè)置的字體為62.5%

相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。

1、em的值并不是固定的；

2、em會(huì)繼承父級(jí)元素的字體大小。使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。

這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

rem是相對(duì)于瀏覽器進(jìn)行縮放的。1rem默認(rèn)是16px，在響應(yīng)式布局中，一個(gè)個(gè)除來(lái)轉(zhuǎn)換成rem，太麻煩，所以重置rem
body{font-size=62.5% } 此時(shí)1rem = 10px;若是12px則是1.2rem.

25、a標(biāo)簽中 active hover link visited 正確的設(shè)置順序是什么?

a標(biāo)簽的link、visited、hover、active是有一定順序的

a:link
a:visited
a:hover
a:active

26、a標(biāo)簽中 如何禁用href 跳轉(zhuǎn)頁(yè)面 或 定位鏈接

e.preventDefault();href="javascript:void(0);

27、手機(jī)端上 圖片長(zhǎng)時(shí)間點(diǎn)擊會(huì)選中圖片，如何處理?

onselect=function() {  return false}

28、video標(biāo)簽的幾個(gè)屬性方法

• src：視頻的URL 

• poster：視頻封面，沒有播放時(shí)顯示的圖片 

• preload：預(yù)加載 

• autoplay：自動(dòng)播放 

• loop：循環(huán)播放 

• controls：瀏覽器自帶的控制條 

• width：視頻寬度 

• height：視頻高度

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)