前端基礎01

1.HTML、XML、XHTML的區別

  • HTML:超文本標記語言(Hyper Text Markup Language)，是一種用來描述網頁的語言，常與CSS、JavaScript一起構建網頁、網頁應用、移動應用程序的用戶界面。

  • XML:可擴展標記語言(Extensible Markup Language)，是一種用于傳輸數據的標記語言。XML標簽沒有被預定義，需要根據需要自定義標簽。

  • XHTML：可擴展超文本標記語言(Extensible HyperText Markup Language)，XHTML作用與HTML類似，但是語法更加嚴格。

  • 區別：

    1. XML和HTML是為不同的目的而設計的：XML的目的在于傳輸和存儲數據，其焦點是數據的內容/傳輸信息；HTML的目的在于顯示數據，其焦點是數據的外觀/顯示信息。
    2. XHTML是在HTML的基礎上，利用XML的規則進行擴展而得到的。在功能上XHTML與HTML相似，但在語法規則上XHTML相較與HTML更加嚴格。XHTML是HTML向XML發展過程中的過度。

2.HTML語義化

  • 是什么時HTML語義化：根據網頁內容的結構化、語義話，選擇不同的HTML標簽來進行網頁的開發。

  • 為什么要語義化：

    1. 使網頁代碼結構更加清楚，提高代碼的可讀性，便于項目的開發和維護
    2. 使搜索引擎和網頁爬蟲更容易檢索到相應的內容，便于網頁的推廣
    3. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以其他方式來渲染網頁

  • HTML 5中語義化相關的標簽：

    1. <header>：定義section或page的頁眉
    2. <footer>：定義section或page的頁腳
    3. <section>：定義文檔中的節（section、區段）
    4. <atricle>：定義文章
    5. <aside>：定義article元素中作為主要內容的附屬信息部分
    6. <nav>：定義頁面的導航鏈接區域
    7. <figure>：定義媒介內容(圖像、圖表)的分組，以及它們的標題

3.怎樣理解內容和樣式分離原則：

  • 將網頁的結構、樣式、行為分離開，使HTML只負責網頁的大體結構與承載內容，內容呈現的具體樣式則交由CSS，網頁與用戶的交互則交給JavaScript
  • 將原始混合了HTML、CSS、JavaScript的網頁分為HTML、CSS、JavaScript三大部分，CSS和JavaScript又可以根據功能、模塊的需要分為若干個部分，使得項目結構更加清晰，提高了代碼的可閱讀性和可維護性，并且給團隊分工協作帶來了便利
  • 方便多個網頁頁面共用一套樣式

4.有哪些常見的meta標簽

  • <meta chartset="utf-8" />:HTML5設置網頁字符集的方式，常用的字符集還有GB2312和GBK
  • <meta http-equiv="content-Type" content="text/html;charset=utf-8" />:之前HTML版本設置字符集的方式
  • <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />:指定瀏覽器采用何種版本渲染當前頁面——使用IE和Chrome最新版本渲染當前頁面
  • <meta http-equiv="expires" content="Monday 9 January 2017 01:00 GMT"/>: 用于設定網頁的到期時間，過期后網頁必須到服務器上重新傳輸
  • <meta http-equiv="refresh" content="2;URL=http://www.baidu.com/" />:2秒后自動跳轉到相應的頁面
  • <meta http-equiv="Set-Cookie" content="User=yanxin;path=/;exires=Monday 9 January 2017 01:00 GMT"/>:2017.01.09 01:00后網頁過期，并且保存在本地的cookies被自動刪除
  • <meta http-equiv="cache-control" content="no-siteapp" />:禁止當前頁面在移動端瀏覽時，被自動轉碼
  • <meta http-equiv="cache-control" content="no-cache" />:先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存
  • <meta http-equiv="cache-control" content="no-store" />:不允許使用緩存，每次對相關內容的修改都只能在服務器上修改
  • <meta http-equiv="cache-control" content="public" />:緩存所有相應，但并飛必須。
  • <meta http-equiv="cache-control" content="private" />:只為單個用戶緩存，不允許任何中繼進行緩存
  • <meta http-equiv="cache-control" content="maxage=60" />:表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。
  • <meta name="keywords" content="html,css,javascript" />:描述網頁的關鍵詞，方便搜索引擎搜索和分類
  • <meta name="description" content="饑人谷課程作業05" />:對網頁內容的簡要描述
  • <meta name="viewport" content="width=device-width,initial-scale=1"/>:用于指定用戶是否可以縮放Web頁面
  • <meta name="robots" content="none|noindex|nofollow|all|index|follow"/>:告訴搜索引擎應該如何處理當前網頁
  • <meta name="author" content="yanxin,yan358941877@163.com"/>:標注作者信息
  • <meta name="copyright" content="xxxxxx" />:標注網頁的版權信息
  • <meta name="renderer" content="webkit" />:renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。content的值可選：webkit、ie-comp（ie兼容模式）、ie-stand(ie標準模式)

5.文檔申明的作用?嚴格模式和混雜模式指的是什么？<!doctype html>的作用？

  • <!DOCTYPE>聲明必須是HTML文檔的第一行，位于<html>標簽之前
  • <!DOCTYPE>不是HTML標簽，它是指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的指令
  • 常用的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 來編寫標記。
    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 來編寫標記。
    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 來編寫標記。
    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，但允許添加模型（例如提供對東亞語系的 ruby 支持）。
  • DOCTYPE可聲明三種DTD類型，分別表示嚴格版本、過渡版本、基于框架的HTML文檔。當瀏覽器廠商開始創建與標準兼容的瀏覽器是，為了確保向后兼容性，創建了兩種呈現模式：標準模式和混雜模式。在標準模式中，瀏覽器以其支持的最高標準呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。
  • 標準模式和混雜模式的觸發：瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇相應的模式：
    • 如果XHTML、HTML4.01文檔包含形式完整的DOCTYPE，則瀏覽器以標準模式呈現
    • 包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現，但時有過渡DTD，但是沒有URI會導致頁面以混雜模式呈現
    • DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現
  • HTML 5沒有嚴格與寬松模式的區別，HTML 5有相對寬松的語法，實現是，已經盡可能地實現了向后兼容。

6.文檔亂碼的原因是什么？如何解決？

  • html文件保存的編碼格式與瀏覽器解析時的解碼格式不匹配導致的
  • 解決的方法是在<meta charset="">中設置編碼格式(該編碼格式與文件保存時的編碼格式一致)，告訴瀏覽器按照相同的編碼格式去解析。

7.常見的瀏覽器有哪些，什么內核？

“瀏覽器內核”主要指渲染引擎(Rendering Engine)，負責解析網頁語法(如HTML、JavaScript)并渲染、展示網頁。因此，所謂的瀏覽器內核通常也就是指瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解析也有所不同，因此同一網頁在不同的內核瀏覽器里的渲染、展示效果也可能不同。

  • Trident內核(代表：Internet Explorer)

    Trident(又稱為MSHTML)，是微軟開發的一種排版引擎。它在1997年10月與IE4一起誕生，一直在被不斷地更新和完善。而且除IE外，許多產品都在使用Trident核心，比如Windows的Help程序、RealPlayer、Windows Media Player、Windows Live Messenger、Outlook Express等等都使用了Trident技術。Trident實際上是一款開放的內核，Trident引擎被設計成一個軟件模塊，使得其他軟件開發人員很容易將網頁瀏覽功能加到他們自行開發的應用程序里，其接口內核設計相當成熟，因此涌現出許多采用IE內核而非IE的瀏覽器，但是Trident只能用于Windows平臺。使用Trident渲染引擎的瀏覽器包括：IE、傲游、世界之窗瀏覽器等。

  • Gecko內核（代表：Mozilla Firefox）

    Gecko是開放源代碼、以C++編寫的網頁排版引擎，目前被Mozilla家族網頁瀏覽器以及Netscape 6以后版本瀏覽器所使用。這款軟件原本是由網景通訊公司開發的，現在則由Mozilla基金會維護。由于Gecko的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因為這是個開源內核，因此受到許多人的青睞，采用Gecko內核的瀏覽器也很多，這也是Gecko內核雖然年輕但市場占有率能夠迅速提高的重要原因。

    Gecko排版引擎提供了一個豐富的程序界面以供與互聯網相關的應用程序使用，例如網頁瀏覽器、HTML編輯器、客戶端/服務器等。雖然最初的主要對象是Mozilla的衍生產品，如Netscape和Mozilla Firefox，但是現在已有很多其他軟件利用這個排版引擎。此外Gecko也是一個跨平臺內核，可以在Windows、BSD、Linux和Mac OS X中使用。

  • WebKit內核（代表：Safari、Chrome）

    WebKit 是一個開放源代碼的瀏覽器引擎(Web Browser Engine)，WebKit最初的代碼來自KDE的KHTML和KJS(它們均為開放源代碼，都是自由軟件，在GPL協議下授權)。所以WebKit也是自由軟件，同時開放源代碼。它的特點在于源碼結構清晰、渲染速度極快。主要代表產品有Safari和Google的瀏覽器Chrome。
    　　WebKit內核在手機上的應用也十分廣泛，例如Google的Android平臺瀏覽器、Apple的iPhone瀏覽器、Nokia S60瀏覽器等所使用的瀏覽器內核引擎，都是基于WebKit引擎的。

  • Presto內核（代表：Opera）

    Presto是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨著DOM及Script語法的事件而重新排版。Presto的特點就是渲染速度的優化達到了極致，它是目前公認的網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。

    Presto實際上是一個動態內核，與Trident、Gecko等內核的最大區別就在于腳本處理上，Presto有著天生的優勢，頁面的全部或者部分都能夠在回應腳本事件時等情況下被重新解析。此外該內核在執行JavaScript時有著最快的速度，根據同等條件下的測試，Presto內核執行同等JavaScript所需的時間僅有Trident和Gecko內核的約1/3。Presto是商業引擎，了Opera以外較少瀏覽器使用Presto內核，這在一定程度上限制了Presto的發展。

  • Chromium/Bink內核(代表：Chrome、Opera12以后的版本、360極速)：

    Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。

  • 瀏覽器野史 UserAgent列傳

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容