1.HTML、XML、XHTML的區(qū)別
HTML:超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language),是一種用來(lái)描述網(wǎng)頁(yè)的語(yǔ)言,常與CSS、JavaScript一起構(gòu)建網(wǎng)頁(yè)、網(wǎng)頁(yè)應(yīng)用、移動(dòng)應(yīng)用程序的用戶界面。
XML:可擴(kuò)展標(biāo)記語(yǔ)言(Extensible Markup Language),是一種用于傳輸數(shù)據(jù)的標(biāo)記語(yǔ)言。XML標(biāo)簽沒(méi)有被預(yù)定義,需要根據(jù)需要自定義標(biāo)簽。
XHTML:可擴(kuò)展超文本標(biāo)記語(yǔ)言(Extensible HyperText Markup Language),XHTML作用與HTML類似,但是語(yǔ)法更加嚴(yán)格。
-
區(qū)別:
- XML和HTML是為不同的目的而設(shè)計(jì)的:XML的目的在于傳輸和存儲(chǔ)數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的內(nèi)容/傳輸信息;HTML的目的在于顯示數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的外觀/顯示信息。
- XHTML是在HTML的基礎(chǔ)上,利用XML的規(guī)則進(jìn)行擴(kuò)展而得到的。在功能上XHTML與HTML相似,但在語(yǔ)法規(guī)則上XHTML相較與HTML更加嚴(yán)格。XHTML是HTML向XML發(fā)展過(guò)程中的過(guò)度。
2.HTML語(yǔ)義化
是什么時(shí)HTML語(yǔ)義化:根據(jù)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)化、語(yǔ)義話,選擇不同的HTML標(biāo)簽來(lái)進(jìn)行網(wǎng)頁(yè)的開(kāi)發(fā)。
-
為什么要語(yǔ)義化:
- 使網(wǎng)頁(yè)代碼結(jié)構(gòu)更加清楚,提高代碼的可讀性,便于項(xiàng)目的開(kāi)發(fā)和維護(hù)
- 使搜索引擎和網(wǎng)頁(yè)爬蟲(chóng)更容易檢索到相應(yīng)的內(nèi)容,便于網(wǎng)頁(yè)的推廣
- 方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以其他方式來(lái)渲染網(wǎng)頁(yè)
-
HTML 5中語(yǔ)義化相關(guān)的標(biāo)簽:
- <header>:定義section或page的頁(yè)眉
- <footer>:定義section或page的頁(yè)腳
- <section>:定義文檔中的節(jié)(section、區(qū)段)
- <atricle>:定義文章
- <aside>:定義article元素中作為主要內(nèi)容的附屬信息部分
- <nav>:定義頁(yè)面的導(dǎo)航鏈接區(qū)域
- <figure>:定義媒介內(nèi)容(圖像、圖表)的分組,以及它們的標(biāo)題
3.怎樣理解內(nèi)容和樣式分離原則:
- 將網(wǎng)頁(yè)的結(jié)構(gòu)、樣式、行為分離開(kāi),使HTML只負(fù)責(zé)網(wǎng)頁(yè)的大體結(jié)構(gòu)與承載內(nèi)容,內(nèi)容呈現(xiàn)的具體樣式則交由CSS,網(wǎng)頁(yè)與用戶的交互則交給JavaScript
- 將原始混合了HTML、CSS、JavaScript的網(wǎng)頁(yè)分為HTML、CSS、JavaScript三大部分,CSS和JavaScript又可以根據(jù)功能、模塊的需要分為若干個(gè)部分,使得項(xiàng)目結(jié)構(gòu)更加清晰,提高了代碼的可閱讀性和可維護(hù)性,并且給團(tuán)隊(duì)分工協(xié)作帶來(lái)了便利
- 方便多個(gè)網(wǎng)頁(yè)頁(yè)面共用一套樣式
4.有哪些常見(jiàn)的meta標(biāo)簽
- <meta chartset="utf-8" />:HTML5設(shè)置網(wǎng)頁(yè)字符集的方式,常用的字符集還有GB2312和GBK
- <meta http-equiv="content-Type" content="text/html;charset=utf-8" />:之前HTML版本設(shè)置字符集的方式
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />:指定瀏覽器采用何種版本渲染當(dāng)前頁(yè)面——使用IE和Chrome最新版本渲染當(dāng)前頁(yè)面
- <meta http-equiv="expires" content="Monday 9 January 2017 01:00 GMT"/>: 用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間,過(guò)期后網(wǎng)頁(yè)必須到服務(wù)器上重新傳輸
- <meta http-equiv="refresh" content="2;URL=http://www.baidu.com/" />:2秒后自動(dòng)跳轉(zhuǎn)到相應(yīng)的頁(yè)面
- <meta http-equiv="Set-Cookie" content="User=yanxin;path=/;exires=Monday 9 January 2017 01:00 GMT"/>:2017.01.09 01:00后網(wǎng)頁(yè)過(guò)期,并且保存在本地的cookies被自動(dòng)刪除
- <meta http-equiv="cache-control" content="no-siteapp" />:禁止當(dāng)前頁(yè)面在移動(dòng)端瀏覽時(shí),被自動(dòng)轉(zhuǎn)碼
- <meta http-equiv="cache-control" content="no-cache" />:先發(fā)送請(qǐng)求,與服務(wù)器確認(rèn)該資源是否被更改,如果未被更改,則使用緩存
- <meta http-equiv="cache-control" content="no-store" />:不允許使用緩存,每次對(duì)相關(guān)內(nèi)容的修改都只能在服務(wù)器上修改
- <meta http-equiv="cache-control" content="public" />:緩存所有相應(yīng),但并飛必須。
- <meta http-equiv="cache-control" content="private" />:只為單個(gè)用戶緩存,不允許任何中繼進(jìn)行緩存
- <meta http-equiv="cache-control" content="maxage=60" />:表示當(dāng)前請(qǐng)求開(kāi)始,該響應(yīng)在多久內(nèi)能被緩存和重用,而不去服務(wù)器重新請(qǐng)求。
- <meta name="keywords" content="html,css,javascript" />:描述網(wǎng)頁(yè)的關(guān)鍵詞,方便搜索引擎搜索和分類
- <meta name="description" content="饑人谷課程作業(yè)05" />:對(duì)網(wǎng)頁(yè)內(nèi)容的簡(jiǎn)要描述
- <meta name="viewport" content="width=device-width,initial-scale=1"/>:用于指定用戶是否可以縮放Web頁(yè)面
- <meta name="robots" content="none|noindex|nofollow|all|index|follow"/>:告訴搜索引擎應(yīng)該如何處理當(dāng)前網(wǎng)頁(yè)
- <meta name="author" content="yanxin,yan358941877@163.com"/>:標(biāo)注作者信息
- <meta name="copyright" content="xxxxxx" />:標(biāo)注網(wǎng)頁(yè)的版權(quán)信息
- <meta name="renderer" content="webkit" />:renderer是為雙核瀏覽器準(zhǔn)備的,用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁(yè)面。content的值可選:webkit、ie-comp(ie兼容模式)、ie-stand(ie標(biāo)準(zhǔn)模式)
5.文檔申明的作用?嚴(yán)格模式和混雜模式指的是什么?<!doctype html>的作用?
- <!DOCTYPE>聲明必須是HTML文檔的第一行,位于<html>標(biāo)簽之前
- <!DOCTYPE>不是HTML標(biāo)簽,它是指示web瀏覽器關(guān)于頁(yè)面使用哪個(gè)HTML版本進(jìn)行編寫的指令
- 常用的DOCTYPE聲明:
- HTML5:<!DOCTYPE html>
- HTML 4.01 Strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 該DTD包含所有HTML元素和屬性,但不包括展示性和棄用的元素(font)。不允許使用框架集(Framesets)
- HTML 4.01 Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">:該DTD包含所有HTML元素和屬性,包括展示性和棄用的元素(font)。不允許使用框架集(Framesets)
- HTML 4.01 Frameset:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">::該DTD包含所有HTML元素和屬性,包括展示性和棄用的元素(font),允許使用框架集(Framesets)
- XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">:該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 XML 來(lái)編寫標(biāo)記。
- XHTML 1.0 Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">:該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 XML 來(lái)編寫標(biāo)記。
- XHTML 1.0 Frameset:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font),允許框架集(Framesets)。必須以格式正確的 XML 來(lái)編寫標(biāo)記。
- XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">:該 DTD 等同于 XHTML 1.0 Strict,但允許添加模型(例如提供對(duì)東亞語(yǔ)系的 ruby 支持)。
- DOCTYPE可聲明三種DTD類型,分別表示嚴(yán)格版本、過(guò)渡版本、基于框架的HTML文檔。當(dāng)瀏覽器廠商開(kāi)始創(chuàng)建與標(biāo)準(zhǔn)兼容的瀏覽器是,為了確保向后兼容性,創(chuàng)建了兩種呈現(xiàn)模式:標(biāo)準(zhǔn)模式和混雜模式。在標(biāo)準(zhǔn)模式中,瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁(yè)面;在混雜模式中,頁(yè)面以一種比較寬松的向后兼容的方式顯示。
- 標(biāo)準(zhǔn)模式和混雜模式的觸發(fā):瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來(lái)選擇相應(yīng)的模式:
- 如果XHTML、HTML4.01文檔包含形式完整的DOCTYPE,則瀏覽器以標(biāo)準(zhǔn)模式呈現(xiàn)
- 包含過(guò)渡DTD和URI的DOCTYPE也導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn),但時(shí)有過(guò)渡DTD,但是沒(méi)有URI會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)
- DOCTYPE不存在或形式不正確會(huì)導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)
- HTML 5沒(méi)有嚴(yán)格與寬松模式的區(qū)別,HTML 5有相對(duì)寬松的語(yǔ)法,實(shí)現(xiàn)是,已經(jīng)盡可能地實(shí)現(xiàn)了向后兼容。
6.文檔亂碼的原因是什么?如何解決?
- html文件保存的編碼格式與瀏覽器解析時(shí)的解碼格式不匹配導(dǎo)致的
- 解決的方法是在<meta charset="">中設(shè)置編碼格式(該編碼格式與文件保存時(shí)的編碼格式一致),告訴瀏覽器按照相同的編碼格式去解析。
7.常見(jiàn)的瀏覽器有哪些,什么內(nèi)核?
“瀏覽器內(nèi)核”主要指渲染引擎(Rendering Engine),負(fù)責(zé)解析網(wǎng)頁(yè)語(yǔ)法(如HTML、JavaScript)并渲染、展示網(wǎng)頁(yè)。因此,所謂的瀏覽器內(nèi)核通常也就是指瀏覽器所采用的渲染引擎,渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)編寫語(yǔ)法的解析也有所不同,因此同一網(wǎng)頁(yè)在不同的內(nèi)核瀏覽器里的渲染、展示效果也可能不同。
-
Trident內(nèi)核(代表:Internet Explorer)
Trident(又稱為MSHTML),是微軟開(kāi)發(fā)的一種排版引擎。它在1997年10月與IE4一起誕生,一直在被不斷地更新和完善。而且除IE外,許多產(chǎn)品都在使用Trident核心,比如Windows的Help程序、RealPlayer、Windows Media Player、Windows Live Messenger、Outlook Express等等都使用了Trident技術(shù)。Trident實(shí)際上是一款開(kāi)放的內(nèi)核,Trident引擎被設(shè)計(jì)成一個(gè)軟件模塊,使得其他軟件開(kāi)發(fā)人員很容易將網(wǎng)頁(yè)瀏覽功能加到他們自行開(kāi)發(fā)的應(yīng)用程序里,其接口內(nèi)核設(shè)計(jì)相當(dāng)成熟,因此涌現(xiàn)出許多采用IE內(nèi)核而非IE的瀏覽器,但是Trident只能用于Windows平臺(tái)。使用Trident渲染引擎的瀏覽器包括:IE、傲游、世界之窗瀏覽器等。
-
Gecko內(nèi)核(代表:Mozilla Firefox)
Gecko是開(kāi)放源代碼、以C++編寫的網(wǎng)頁(yè)排版引擎,目前被Mozilla家族網(wǎng)頁(yè)瀏覽器以及Netscape 6以后版本瀏覽器所使用。這款軟件原本是由網(wǎng)景通訊公司開(kāi)發(fā)的,現(xiàn)在則由Mozilla基金會(huì)維護(hù)。由于Gecko的特點(diǎn)是代碼完全公開(kāi),因此,其可開(kāi)發(fā)程度很高,全世界的程序員都可以為其編寫代碼,增加功能。因?yàn)檫@是個(gè)開(kāi)源內(nèi)核,因此受到許多人的青睞,采用Gecko內(nèi)核的瀏覽器也很多,這也是Gecko內(nèi)核雖然年輕但市場(chǎng)占有率能夠迅速提高的重要原因。
Gecko排版引擎提供了一個(gè)豐富的程序界面以供與互聯(lián)網(wǎng)相關(guān)的應(yīng)用程序使用,例如網(wǎng)頁(yè)瀏覽器、HTML編輯器、客戶端/服務(wù)器等。雖然最初的主要對(duì)象是Mozilla的衍生產(chǎn)品,如Netscape和Mozilla Firefox,但是現(xiàn)在已有很多其他軟件利用這個(gè)排版引擎。此外Gecko也是一個(gè)跨平臺(tái)內(nèi)核,可以在Windows、BSD、Linux和Mac OS X中使用。
-
WebKit內(nèi)核(代表:Safari、Chrome)
WebKit 是一個(gè)開(kāi)放源代碼的瀏覽器引擎(Web Browser Engine),WebKit最初的代碼來(lái)自KDE的KHTML和KJS(它們均為開(kāi)放源代碼,都是自由軟件,在GPL協(xié)議下授權(quán))。所以WebKit也是自由軟件,同時(shí)開(kāi)放源代碼。它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快。主要代表產(chǎn)品有Safari和Google的瀏覽器Chrome。
WebKit內(nèi)核在手機(jī)上的應(yīng)用也十分廣泛,例如Google的Android平臺(tái)瀏覽器、Apple的iPhone瀏覽器、Nokia S60瀏覽器等所使用的瀏覽器內(nèi)核引擎,都是基于WebKit引擎的。 -
Presto內(nèi)核(代表:Opera)
Presto是由Opera Software開(kāi)發(fā)的瀏覽器排版引擎,供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動(dòng)態(tài)功能,例如網(wǎng)頁(yè)或其部分可隨著DOM及Script語(yǔ)法的事件而重新排版。Presto的特點(diǎn)就是渲染速度的優(yōu)化達(dá)到了極致,它是目前公認(rèn)的網(wǎng)頁(yè)瀏覽速度最快的瀏覽器內(nèi)核,然而代價(jià)是犧牲了網(wǎng)頁(yè)的兼容性。
Presto實(shí)際上是一個(gè)動(dòng)態(tài)內(nèi)核,與Trident、Gecko等內(nèi)核的最大區(qū)別就在于腳本處理上,Presto有著天生的優(yōu)勢(shì),頁(yè)面的全部或者部分都能夠在回應(yīng)腳本事件時(shí)等情況下被重新解析。此外該內(nèi)核在執(zhí)行JavaScript時(shí)有著最快的速度,根據(jù)同等條件下的測(cè)試,Presto內(nèi)核執(zhí)行同等JavaScript所需的時(shí)間僅有Trident和Gecko內(nèi)核的約1/3。Presto是商業(yè)引擎,了Opera以外較少瀏覽器使用Presto內(nèi)核,這在一定程度上限制了Presto的發(fā)展。
-
Chromium/Bink內(nèi)核(代表:Chrome、Opera12以后的版本、360極速):
Blink是一個(gè)由Google和Opera Software開(kāi)發(fā)的瀏覽器排版引擎,這一渲染引擎是開(kāi)源引擎WebKit中WebCore組件的一個(gè)分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex瀏覽器中使用。