1.瀏覽器相關(guān)知識(shí)
瀏覽器內(nèi)核的作用:
內(nèi)核就是一個(gè)渲染引擎,用來(lái)解析代碼(html,css,js)并渲染頁(yè)面,我們先了解一下市面上流行的瀏覽器:
- Trident內(nèi)核代表產(chǎn)品Internet Explorer,又稱(chēng)其為IE內(nèi)核。
Trident(又稱(chēng)為MSHTML),是微軟開(kāi)發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括:IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。 - Gecko內(nèi)核代表作品Mozilla
- FirefoxGecko是一套開(kāi)放源代碼的、以C++編寫(xiě)的網(wǎng)頁(yè)排版引擎。Gecko是最流行的排版引擎之一,僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。
- WebKit內(nèi)核代表作品Safari、Chromewebkit
是一個(gè)開(kāi)源項(xiàng)目,包含了來(lái)自KDE項(xiàng)目和蘋(píng)果公司的一些組件,主要用于Mac OS系統(tǒng),它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點(diǎn)是對(duì)網(wǎng)頁(yè)代碼的兼容性不高,導(dǎo)致一些編寫(xiě)不標(biāo)準(zhǔn)的網(wǎng)頁(yè)無(wú)法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome(主流地位)。 - Presto內(nèi)核代表作品OperaPresto
是由Opera Software開(kāi)發(fā)的瀏覽器排版引擎,供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動(dòng)態(tài)功能,例如網(wǎng)頁(yè)或其部分可隨著DOM及Script語(yǔ)法的事件而重新排版
由于不同的瀏覽器內(nèi)核對(duì)于解讀hlml css js這三種語(yǔ)言有一定的區(qū)別,雖然各瀏覽器廠商也在日益更新靠近標(biāo)準(zhǔn)化,但各瀏覽器之間的兼容問(wèn)題對(duì)于前端工程師來(lái)說(shuō),解決他們?nèi)匀皇且豁?xiàng)繁重的任務(wù)。后續(xù)會(huì)著重這一點(diǎn)的學(xué)習(xí)。
1.<!doctype html> 的作用是什么
- DOCTYPE描述了html文檔的類(lèi)型,對(duì)不同的DOCTYPE類(lèi)型,瀏覽器會(huì)使用不同的方法來(lái)解析。
<!doctype html> 指定的是HTML5版本,之前的版本有不同的寫(xiě)法.
在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD,因?yàn)?HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語(yǔ)言的規(guī)則,這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。HTML5 不基于 SGML,所以不需要引用 DTD。 -
網(wǎng)頁(yè)中的嚴(yán)格模式和混雜模式也與之相關(guān)
在嚴(yán)格模式中,瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁(yè)面,;
在混雜模式中,頁(yè)面以一種比較寬松的向后兼容的方式顯示?;祀s模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無(wú)法工作。
瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD(文檔類(lèi)型定義Document Type Definition是一套關(guān)于標(biāo)記符的語(yǔ)法規(guī)則)來(lái)選擇要使用的呈現(xiàn)方法。
如果XHTML、HTML 4.01文檔包含形式完整的DOCTYPE,那么它一般以嚴(yán)格模式呈現(xiàn)。
html5既然沒(méi)有DTD,也就沒(méi)有嚴(yán)格模式與寬松模式的區(qū)別,html5有相對(duì)寬松的語(yǔ)法,實(shí)現(xiàn)時(shí),已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容。
2.meta 有什么作用,常見(jiàn)的值有哪些?
meta具有兩個(gè)屬性(分別為http-equiv和name)和一個(gè)對(duì)應(yīng)的變量content。它們共同實(shí)現(xiàn)不同的功能。
name屬性 用于描述網(wǎng)頁(yè),對(duì)應(yīng)屬性值為content,content中的內(nèi)容是對(duì)name填入類(lèi)型的具體描述,便于搜索引擎抓取。
常見(jiàn)屬性有
- <meta name=“keywords” content="">向搜索引擎說(shuō)明你的網(wǎng)頁(yè)的關(guān)鍵詞(與seo優(yōu)化搜索有關(guān),網(wǎng)站性能優(yōu)化也是前端必學(xué)的科目。)
- <meta name=“description” content=""> 告訴搜索引擎你的站點(diǎn)的主要內(nèi)容
- <meta name=“author” content=“你的姓名”> 告訴搜索引擎你的站點(diǎn)的制作的作者
http-equiv屬性 相當(dāng)于HTTP的作用,如定義HTTP參數(shù)。常見(jiàn)屬性有
- <meta http-equiv=“Content-Type” content=“text/html”;charset=utf-8>[指定字符集,編碼格式]
網(wǎng)頁(yè)中亂碼的問(wèn)題是由于 html文件保存的編碼格式與瀏覽器解碼格式不同??梢栽趆tml中<head>添加<meta charset=“UTF-8”>或者<meta charset=“GBK”>之類(lèi)的語(yǔ)句,瀏覽器就會(huì)按要求使用相應(yīng)的解碼方式解碼
- <meta http-equiv=“refresh” content=“n; url=”> 定時(shí)讓網(wǎng)頁(yè)在指定的時(shí)間的n內(nèi)跳轉(zhuǎn)
- <meta http-equiv=“expires” content=“Mon,12 May 2001 00:20:00 GMT”>[可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間一旦過(guò)期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時(shí)間格式
- meta http-equiv=“pragma” content=“no-cache”> [禁用緩存]
- <meta http-equiv=“set-cookie” content=“Mon, 12 May 2001 00:20:00 GMT”> cookie設(shè)定,如果網(wǎng)頁(yè)過(guò)期,存盤(pán)的cookie將被刪除。需要注意的也必須使用GMT時(shí)間格式。(Cookie就是服務(wù)器暫存放在你計(jì)算機(jī)上的一筆資料,好讓服務(wù)器用來(lái)辨認(rèn)你的計(jì)算機(jī)。當(dāng)你在瀏覽網(wǎng)站的時(shí)候,Web服務(wù)器會(huì)先送一小小資料放在你的計(jì)算機(jī)上,Cookie 會(huì)幫你在網(wǎng)站上所打的文字或是一些選擇,都記錄下來(lái)。當(dāng)下次你再光臨同一個(gè)網(wǎng)站,Web服務(wù)器會(huì)先看看有沒(méi)有它上次留下的Cookie資料,有的話,就會(huì)依據(jù)Cookie里的內(nèi)容來(lái)判斷使用者,送出特定的網(wǎng)頁(yè)內(nèi)容給你)。
3.<title>..</title>
<title> 元素可定義文檔的標(biāo)題。
瀏覽器會(huì)以特殊的方式來(lái)使用標(biāo)題,并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。同樣,當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書(shū)簽列表時(shí),標(biāo)題將成為該文檔鏈接的默認(rèn)名稱(chēng)。