前端基礎(chǔ)01

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ū)別:

    1. XML和HTML是為不同的目的而設(shè)計(jì)的:XML的目的在于傳輸和存儲(chǔ)數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的內(nèi)容/傳輸信息;HTML的目的在于顯示數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的外觀/顯示信息。
    2. 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ǔ)義化:

    1. 使網(wǎng)頁(yè)代碼結(jié)構(gòu)更加清楚,提高代碼的可讀性,便于項(xiàng)目的開(kāi)發(fā)和維護(hù)
    2. 使搜索引擎和網(wǎng)頁(yè)爬蟲(chóng)更容易檢索到相應(yīng)的內(nèi)容,便于網(wǎng)頁(yè)的推廣
    3. 方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以其他方式來(lái)渲染網(wǎng)頁(yè)
  • HTML 5中語(yǔ)義化相關(guān)的標(biāo)簽:

    1. <header>:定義section或page的頁(yè)眉
    2. <footer>:定義section或page的頁(yè)腳
    3. <section>:定義文檔中的節(jié)(section、區(qū)段)
    4. <atricle>:定義文章
    5. <aside>:定義article元素中作為主要內(nèi)容的附屬信息部分
    6. <nav>:定義頁(yè)面的導(dǎo)航鏈接區(qū)域
    7. <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聲明:
    1. HTML5:<!DOCTYPE html>
    2. 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)
    3. 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)
    4. 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)
    5. 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)記。
    6. 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)記。
    7. 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)記。
    8. 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瀏覽器中使用。

  • 瀏覽器野史 UserAgent列傳

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,786評(píng)論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,656評(píng)論 3 419
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 176,697評(píng)論 0 379
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 63,098評(píng)論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,855評(píng)論 6 410
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 55,254評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,322評(píng)論 3 442
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 42,473評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,014評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,833評(píng)論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,016評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,568評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,273評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 34,680評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 35,946評(píng)論 1 288
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,730評(píng)論 3 393
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,006評(píng)論 2 374

推薦閱讀更多精彩內(nèi)容