「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語言來實現網頁的動態效果。
- 渲染引擎(layout engineer 或者 Rendering Engine)
最開始渲染引擎和 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。
- 目前移動裝置瀏覽器上常用的核心有 Webkit，Blink，Trident，Gecko 等，
-
瀏覽器相容
主流瀏覽器都相容 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兩個部分。
-
4.HTML 簡介
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文字標籤語言”，主要是通過HTML標籤對網頁中的文字、圖片、聲音等內容進行描述。
-
HTML 歷史
html-history.png
-
HTML語法骨架格式
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"> |
6.字符集
- utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。
- gb2312 簡單中文 包括6763個漢字
- BIG5 繁體中文 港澳臺等用
- GBK包含全部中文字元 是GB2312的擴充套件，加入對繁體字的支援，相容GB2312
- UTF-8則包含全世界所有國家需要用到的字元
記住一點，以後我們統統使用UTF-8 字符集
7.實體字元
實體字元（ASCII Encoding Reference）是用來在程式碼中以實體代替與HTML語法相同的字元，避免瀏覽解析錯誤。它的兩種表示方式，第一種為 & 外加實體字元名稱，例如 ，第二種為 & 加實體字元序號，例如  。
常用HTML字元實體（建議使用實體）：
| 字元 | 名稱 | 實體名 | 實體數 |
|---|---|---|---|
| " | 雙引號 | " |
" |
| & | &符 | & |
& |
| < | 左尖括號（小於號） | < |
< |
| > | 右尖括號（大於號） | > |
> |
| 空格 | |
  |
|
| 中文全形空格 | & |
　 |
常用特殊字元實體（不建議使用實體）：
| 字元 | 名稱 | 實體名 | 實體數 |
|---|---|---|---|
| ¥ | 元 | ¥ |
¥ |
| ¦ | 斷豎線 | ¦ |
¦ |
| © | 版權 | © |
© |
| ® | 註冊商標R | ® |
® |
| ™ | 商標TM | ™ |
™ |
| · | 間隔符 | · |
· |
| « | 左雙尖括號 | « |
« |
| » | 右雙尖括號 | » |
» |
| ° | 度 | ° |
° |
| × | 乘 | × |
× |
| ÷ | 除 | ÷ |
÷ |
| ‰ | 千分比 | ‰ |
‰ |
| ± | plus-or-minus | ± |
± |
| ² | 平方2（上標2） | ² |
² |
| ³ | 平方3（上標3） | ³ |
³ |
tips：具體所需可在使用時查詢，無需記憶。
相關文章
- html-html簡介HTML
- HTML————1、HTML簡介HTML
- HTML簡介HTML
- HTML 簡介HTML
- 01、HTML 簡介HTML
- HTML 段落簡介HTML
- HTML 表格簡介HTML
- HTML 列表簡介HTML
- HTML 框架簡介HTML框架
- HTML-簡介HTML
- html的簡介HTML
- HTTP介紹和HTML簡介HTTPHTML
- HTML5簡介HTML
- HTML簡單介紹HTML
- HTML 速查列表簡介HTML
- HTML 標題簡介HTML
- HTML 連結簡介HTML
- HTML 指令碼簡介HTML指令碼
- HTML 簡單介紹HTML
- HTML 樣式- CSS簡介HTMLCSS
- HTML 字元實體簡介HTML字元
- HTML 編輯器簡介HTML
- 001-html簡介HTML
- HTML 文字格式化簡介HTML
- HTML5 Web Workers簡介HTMLWeb
- 簡單介紹HTML5 LandmarkHTML
- html文件結構簡單介紹HTML
- HTML字元實體簡單介紹HTML字元
- html中註釋簡單介紹HTML
- html+css快速入門-css簡介HTMLCSS
- HTML5 Geolocation（地理定位）簡介HTML
- HTML5 Audio(音訊)簡介HTML音訊
- HTML編碼規範簡單介紹HTML
- ASP.NET 網頁- HTML 表單簡介ASP.NET網頁HTML
- ASP.NET Web Forms – HTML 頁面簡介ASP.NETWebORMHTML
- ASP.NET Web Forms – HTML 表單簡介ASP.NETWebORMHTML
- HTML5 應用程式快取簡介HTML快取
- HTML5 Web SQL 資料庫簡介HTMLWebSQL資料庫