「HTML 」簡介

weixin_34236869發表於2017-04-19
HTML
  • 1.認識網頁
  • 2.常見瀏覽器介紹
  • 3.Web 標準
  • 4.HTML 簡介
  • 5.文件型別 <!DOCTYPE>
  • 6.字符集
  • 7.實體字元

1.認識網頁

網頁主要由文字、影像和超連結等元素構成。當然，除了這些元素，網頁中還可以包含音訊、視訊以及Flash等。

網頁是如何形成的呢?
網頁是由多元素構成,比如文字、影像和超連結等,
我們前端並不能把這些直接放到網頁中,
而是通過程式碼的格式
經過瀏覽器的渲染
才能展示給客戶豐富多彩的網頁

2.常見瀏覽器介紹

瀏覽器是網頁執行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。

  • 瀏覽器核心
    • 渲染引擎(layout engineer 或者 Rendering Engine)
      它負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
    • JS 引擎
      解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。有一個網頁標準計劃小組製作了一個 ACID 來測試引擎的相容性和效能。核心的種類很多，如加上沒什麼人使用的非商業的免費核心，可能會有10多種，但是常見的瀏覽器核心可以分這四種：Trident、Gecko、Blink、Webkit。

  • (1) Trident(IE核心)

    • 國內很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 "相容模式"。
    • 代表： IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。
    • Window10 釋出後，IE 將其內建瀏覽器命名為 Edge，Edge 最顯著的特點就是新核心 EdgeHTML。

  • (2) Gecko(Firefox 核心)

    Mozilla FireFox(火狐瀏覽器) 採用該核心，Gecko 的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。 可惜這幾年已經沒落了， 比如 開啟速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。

  • (3) webkit(Safari)

    • Safari 是蘋果公司開發的瀏覽器，所用瀏覽器核心的名稱是大名鼎鼎的 WebKit。
    • 現在很多人錯誤地把 webkit 叫做 chrome核心（即使 chrome核心已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所裡面了。
    • 代表瀏覽器：傲遊瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 預設瀏覽器，

  • (4) Bink(chrome/Opera)

    • 在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內建於 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。
    • 大部分國產瀏覽器最新版都採用Blink核心。

  • 移動端的瀏覽器核心主要說的是系統內建瀏覽器的核心。

    • 目前移動裝置瀏覽器上常用的核心有 Webkit，Blink，Trident，Gecko 等，
      • 其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit，
      • Android 4.4 之前的 Android 系統瀏覽器核心是 WebKit，
      • Android4.4 系統瀏覽器切換到了Chromium，核心是 Webkit 的分支 Blink，
      • Windows Phone 8 系統瀏覽器核心是 Trident。

  • 瀏覽器相容
    主流瀏覽器都相容 HTML5 的新標籤，對於 IE8 及以下版本不認識 HTML5的新元素，可以使用 JavaScript 建立一個沒用的元素來解決，例如：

    <script>
    document.createElement("header");
</script>

    也可以使用 shiv 來解決相容性問題，詳情可參考 HTML5 Shiv

3.Web標準

通過以上瀏覽器的核心不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別。

由於不同的瀏覽器解析出來的效果可能不一樣，開發者常常需要為多版本的開發為艱苦工作。
  • Web 標準的好處
    1、讓Web的發展前景更廣闊
    2、內容能被更廣泛的裝置訪問
    3、更容易被搜尋引擎搜尋
    4、降低網站流量費用
    5、使網站更易於維護
    6、提高頁面瀏覽速度
  • Web 標準構成

    • Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。
      主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。

      • 結構標準：結構用於對網頁元素進行整理和分類，主要包括XML和XHTML兩個部分。

      • 樣式標準：表現用於設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

      • 行為標準：行為是指網頁模型的定義及互動的編寫，主要包括DOM和ECMAScript兩個部分。

4414359-068c81361154f971.png
gx.png

4.HTML 簡介

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文字標籤語言”，主要是通過HTML標籤對網頁中的文字、圖片、聲音等內容進行描述。

  • HTML 歷史


    4414359-a8b7590bdba50dcb.png
    html-history.png

  • HTML語法骨架格式


    4414359-2a5ffd4343c9ade8.png
    html-overview.png

html標籤： 作用所有html中標籤的一個根節點。
head標籤： 作用：用於存放： title,meta,base,style,script,link 注意在head標籤中我們必須要設定的標籤是title
title標籤： 作用：讓頁面擁有一個屬於自己的標題。
body標籤： 作用：頁面在的主體部分，用於存放所有的html標籤： p,h,a,b,u,i,s,em,del,ins,strong,img

  • 注意事項：
    • <!DOCTYPE html> 必須首行定格
    • <title> 為文件標題
    • <meta charset="utf-8"> 文件解碼格式
    • <meta name="keywords" content="..."> 和 <meta name="description" content="..."> 提供給搜尋引擎使用
    • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 移動端瀏覽器的寬高與縮放
    • <link> 標籤可以引入 favicon 和樣式表 CSS 檔案

5.文件型別<!DOCTYPE>

<!DOCTYPE> 標籤位於文件的最前面，用於向瀏覽器說明當前文件使用哪種 HTML 或 XHTML 標準規範，必需在開頭處使用

<!DOCTYPE>標籤為所有的XHTML文件指定XHTML版本和型別，只有這樣瀏覽器才能將該網頁作為有效的XHTML文件，並按指定的文件型別(Document Type Definition 或 DTD)進行解析。

  • tips:
    • DOCTYPE並不是HTML標籤,而是一個宣告
    • DOCTYPE的作用是:告訴瀏覽器按照哪個規則去解析頁面

一個標準的HTML文件,開頭第一句都應該是<!DOCTYPE>,根據HTML版本的不同,寫法上會有所差別.

DOCTYPE寫法

版本 Emmet語法 DOCTYPE 宣告
HTML 5 html:5+tab或者!+tab <!DOCTYPE html>
HTML 4.01 Strict html:4s+tab <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional html:4t+ tab <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict html:xs+tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional html:xt+tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4414359-46fbe2cc136915d7.gif
element-dtd.gif

6.字符集

  • utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。
  • gb2312 簡單中文 包括6763個漢字
  • BIG5 繁體中文 港澳臺等用
  • GBK包含全部中文字元 是GB2312的擴充套件，加入對繁體字的支援，相容GB2312
  • UTF-8則包含全世界所有國家需要用到的字元

記住一點，以後我們統統使用UTF-8 字符集

7.實體字元

實體字元（ASCII Encoding Reference）是用來在程式碼中以實體代替與HTML語法相同的字元，避免瀏覽解析錯誤。它的兩種表示方式，第一種為 & 外加實體字元名稱，例如 &nbsp;，第二種為 & 加實體字元序號，例如 &#160;。

常用HTML字元實體（建議使用實體）：

字元 名稱 實體名 實體數
" 雙引號 &quot; &#34;
& &符 &amp; &#38;
< 左尖括號（小於號） &lt; &#60;
> 右尖括號（大於號） &gt; &#62;
空格 &nbsp; &#160;
中文全形空格 &amp; &#12288;

常用特殊字元實體（不建議使用實體）：

字元 名稱 實體名 實體數
¥ 元 &yen; &#165;
¦ 斷豎線 &brvbar; &#166;
© 版權 &copy; &#169;
® 註冊商標R &reg; &#174;
™ 商標TM &trade; &#8482;
· 間隔符 &middot; &#183;
« 左雙尖括號 &laquo; &#171;
» 右雙尖括號 &raquo; &#187;
° 度 &deg; &#176;
× 乘 &times; &#215;
÷ 除 &divide; &#247;
‰ 千分比 &permil; &#8240;
± plus-or-minus &plusmn; &#177;
² 平方2（上標2） &sup2; &#178;
³ 平方3（上標3） &sup3; &#179;

tips：具體所需可在使用時查詢，無需記憶。

相關文章