1.Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
Doctype 是html的格式聲明,位于HTML文檔的第一行,處于<html>標(biāo)簽之前,告訴瀏覽器的解析器,這個(gè)html文件要用什么文檔標(biāo)準(zhǔn)解析,如果沒(méi)有寫(xiě)Doctype聲明,或者寫(xiě)錯(cuò)了,瀏覽器會(huì)按照兼容模式進(jìn)行解析。
標(biāo)準(zhǔn)模式:排版和js運(yùn)作模式都以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行
兼容模式:模擬老式瀏覽器的模式進(jìn)行解析,寬松向后的方式顯示。
嚴(yán)格模式需要用 "use strict",而混雜模式則不需要
嚴(yán)格模式對(duì)語(yǔ)法要求更加嚴(yán)格,對(duì)代碼的書(shū)寫(xiě)要求更加規(guī)范
嚴(yán)格模式下:
變量聲明必須要用 var
數(shù)字不能以0開(kāi)頭
不能修改系統(tǒng)自帶的左值,如 this
函數(shù)evil()內(nèi)部聲明的變量有作用域
2.HTML5 為什么只需要寫(xiě) <!DOCTYPE HTML>?
因?yàn)镠TML5 不基于 SGML,所以不需要對(duì) DTD 進(jìn)行引用,但是需要用Doctype告訴瀏覽器需要按照什么標(biāo)準(zhǔn)進(jìn)行解析。
而HTML4.01 是基于SGML,所以需要對(duì) DTD 進(jìn)行引用,才能告訴瀏覽器該文檔所使用的文檔標(biāo)準(zhǔn)。
標(biāo)準(zhǔn)通用置標(biāo)語(yǔ)言(Standard Generalized Markup Language,SGML)
即語(yǔ)法定義、文件類型定義(簡(jiǎn)稱DTD--Definition Type Document)和文件實(shí)例。
3.行內(nèi)元素有哪些?塊級(jí)元素有哪些? 空(void)元素有那些?
css規(guī)范規(guī)定,每個(gè)元素都有默認(rèn)display屬性,以確定該元素的類型
行內(nèi) inline :span i u s b a img input select...
塊元素 block : div ul ol lo dl dd dt h1~h6 p
常見(jiàn)的空元素 void: br hr img input link meta;
鮮為人知的空元素:base command Keygen source track
4.頁(yè)面導(dǎo)入樣式時(shí),使用link和@import有什么區(qū)別?
link屬于XHTML標(biāo)簽,除了加載CSS外,還能用于定義RSS,rel連接屬性。
@import 是css提供的,只能識(shí)別css格式的文件。
頁(yè)面加載時(shí),link會(huì)同時(shí)被加載,而@import引用的css則需要等到頁(yè)面加載完后再加載。
import是css2.1提出的,ie5以上才能被兼容。而link是XHTML標(biāo)簽 不存在兼容性問(wèn)題;
5.介紹一下你對(duì)瀏覽器內(nèi)核的理解?
瀏覽器內(nèi)核:主要分為渲染引擎和js引擎
渲染引擎:負(fù)責(zé)獲取網(wǎng)頁(yè)的內(nèi)容(HTML 、XML 、圖像等),整理信息(加入css),計(jì)算顯示方式等
js引擎:解析和執(zhí)行js代碼,實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)效果。
現(xiàn)在的內(nèi)核一般指渲染引擎;
常見(jiàn)的瀏覽器內(nèi)核:
Trident內(nèi)核:IE、360、搜狗等等
Gecko內(nèi)核:Netscape6以上
Presto內(nèi)核:Opera7及以上;
Webkit內(nèi)核:Safari,Chrome等;
6.html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分 HTML 和 HTML5?
html5 新特性 :HTML5已經(jīng)不是SGML的子集了,主要是關(guān)于圖像,位置,儲(chǔ)存,多任務(wù)等功能的添加。
繪畫(huà) canvas;
媒體標(biāo)簽 video 、audio
本地離線存儲(chǔ) localStorage 長(zhǎng)期儲(chǔ)存數(shù)據(jù),瀏覽器關(guān)閉后不丟失,sessionStorage 瀏覽器關(guān)閉后自動(dòng)刪除。
新的語(yǔ)義化標(biāo)簽,如:header article section aside footer nav 等
表單控件 date、time、email、url、search等
新技術(shù) webworker、websocket、Geolocation
移除的元素 basefont、big、center、font、s、u等
frame、frameset、noframes
支持HTML5新標(biāo)簽
可以用創(chuàng)建元素的方式創(chuàng)建新標(biāo)簽
document.createElement
也可以使用html5shim;
如何區(qū)分HTML5?
Doctype聲明、新增的結(jié)構(gòu)元素、功能元素
添加了新的屬性:translate animation
7.html語(yǔ)義化:
用正確的標(biāo)簽做正確的事。
使html結(jié)構(gòu)更加清晰,便于瀏覽器、搜索引擎解析;
便于閱讀;
便于維護(hù);
便于網(wǎng)絡(luò)爬蟲(chóng)計(jì)算權(quán)重,利于SEO;
8.HTML5離線存儲(chǔ)
用戶在沒(méi)有連網(wǎng)時(shí),可以正常的訪問(wèn)站點(diǎn)或者應(yīng)用,連網(wǎng)后更新緩存。
原理:基于一個(gè)新建的.appcache文件的緩存機(jī)制,通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源,這些資源被當(dāng)做cookie一樣存儲(chǔ)下來(lái),離線狀態(tài)是瀏覽器會(huì)解析這些緩存。
使用:
1.在頁(yè)面頭部加入一個(gè)manifest屬性;
2.在cache.manifest文件編寫(xiě)離線存儲(chǔ)資源。
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3.在離線狀態(tài)時(shí),操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。
詳細(xì)的使用請(qǐng)參考:
瀏覽器怎么對(duì)HTML5的離線存儲(chǔ)資源進(jìn)行管理和加載?
在線時(shí),瀏覽器發(fā)現(xiàn)html頭部有manifest屬性,就會(huì)請(qǐng)求manifest文件,如果是第一次訪問(wèn),則下載文件進(jìn)行離線存儲(chǔ),如果不是第一次則比較文件內(nèi)容,相同則不操作,不同則重新下載。
離線時(shí),瀏覽器直接使用離線存儲(chǔ)的資源。
9.請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?
cookie是網(wǎng)站為了標(biāo)識(shí)用戶身份而儲(chǔ)存在本地終端(Client Side)上的數(shù)據(jù)(通常會(huì)加密)。
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶,會(huì)在瀏覽器和服務(wù)器中來(lái)回傳遞;
什么是Cookies(“小甜餅”)呢?簡(jiǎn)單來(lái)說(shuō),Cookies就是服務(wù)器暫時(shí)存放在你的電腦里的資料(.txt格式的文本文件),好讓服務(wù)器用來(lái)辨認(rèn)你的計(jì)算機(jī)。當(dāng)你在瀏覽網(wǎng)站的時(shí)候,Web服務(wù)器會(huì)先送一小小資料放在你的計(jì)算機(jī)上,Cookies 會(huì)幫你在網(wǎng)站上所打的文字或是一些選擇都記錄下來(lái)。當(dāng)下次你再訪問(wèn)同一個(gè)網(wǎng)站,Web服務(wù)器會(huì)先看看有沒(méi)有它上次留下的Cookies資料,有的話,就會(huì)依據(jù)Cookie里的內(nèi)容來(lái)判斷使用者,送出特定的網(wǎng)頁(yè)內(nèi)容給你。
sessionStorage和localStorage的數(shù)據(jù)則僅僅保存在本地,不會(huì)主動(dòng)發(fā)給服務(wù)器。
存儲(chǔ)大小:
cookie數(shù)據(jù)不能超過(guò)4k
sessionStorage和localStorage雖然也有限制,但比cookie大得多,能達(dá)到5M
保存期限:
localStorage 永久保存,除非手動(dòng)刪掉,瀏覽器關(guān)閉也不影響。
sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
cookie 設(shè)置的cookie過(guò)期時(shí)間之前一直有效,瀏覽器關(guān)閉也不影響。
10.iframe有那些缺點(diǎn)?
iframe會(huì)阻塞主頁(yè)面的onload事件
搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面,不利于SEO(搜索引擎優(yōu)化);
iframe和主頁(yè)面共享連接池,而瀏覽器對(duì)相同域的連接都有限制,所以會(huì)影響頁(yè)面的并行加載。
使用iframe最好通過(guò)JavaScript動(dòng)態(tài)給iframe添加src屬性,可以繞開(kāi)上述問(wèn)題。
11.Label的作用是什么?是怎么用的?(label:標(biāo)注)
label標(biāo)簽是用來(lái)定義表單控件之間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
//第一種用法,label標(biāo)簽中添加for = ‘表單的id’
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
//第二種用法,直接包裹表單控件
<label>Date:<input type="text" name="B"/></label>
12.HTML5的form如何關(guān)閉自動(dòng)完成功能?
給不想要提示的 form 或者某個(gè)input設(shè)置為 autocomplete = off ;
13.網(wǎng)頁(yè)驗(yàn)證是干嘛的,是為了解決什么安全問(wèn)題
網(wǎng)頁(yè)驗(yàn)證是區(qū)分用戶是計(jì)算機(jī)還是人的公共安全自動(dòng)程序。
可以防止惡意破解密碼,刷票,論壇灌水;
能有效防止黑客對(duì)某一指定注冊(cè)用戶使用程序暴力破解的方式不斷進(jìn)行登錄嘗試。
14.title與h1的區(qū)別,b與strong的區(qū)別、i與em的區(qū)別?
title屬性沒(méi)有明確的意義,只表示是個(gè)標(biāo)題
h1則表示層次明確的標(biāo)題;
b加粗字體,但是沒(méi)有語(yǔ)義,strong有語(yǔ)氣加強(qiáng)的意思,使用閱讀器自動(dòng)播放時(shí)會(huì)加重語(yǔ)氣。
i為斜體,沒(méi)有語(yǔ)義,em斜體表示強(qiáng)調(diào)文本。
自然樣式標(biāo)簽:b、i、u、s、pre
語(yǔ)義樣式標(biāo)簽:strong、em、ins、del、code