HTML · 前端速查手冊

>[success] # 常見的瀏覽器介紹 <a href="http://#baidu.com/data/browser">瀏覽器份額</a> ~~~ 瀏覽器是網頁運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。 ~~~ >[danger] ##### 瀏覽器內核 ~~~ 瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。 JS 引擎則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。 ~~~ >[danger] ##### 內核代表瀏覽器 ~~~ 1.Trident(IE內核) 代表： IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。 2.Gecko(firefox) 代表：Mozilla FireFox(火狐瀏覽器) 采用該內核 3.webkit(Safari) 代表：傲游瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器， 4.Chromium/Bink(chrome) 代表：谷歌 5.Presto(Opera) 代表：opera ~~~ >[danger] ##### 移動端代表 ~~~ 目前移動設備瀏覽器上常用的內核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit，Android 4.4 之前的 Android 系統瀏覽器內核是 WebKit，Android4.4 系統瀏覽器切換到了 Chromium，內核是 Webkit 的分支 Blink，Windows Phone 8 系統瀏覽器內核是 Trident。 ~~~ >[success] # 了解html * 基本骨架 ~~~ <HTML> <head> <title></title> </head> <body> </body> </HTML> ~~~ >[danger] ##### 骨架中存放的內容 ~~~ 1.HTML標簽:是所有的一個根節點。 2.head標簽:用于存放：title(必須有的是網頁的標題),meta,base,style,script,link 3.body標簽：頁面在的主體部分，用于存放所有的HTML標簽： ~~~ >[danger] ##### 文檔類型 ~~~ 1.<!DOCTYPE html> 生是一個html5的頁面 ~~~ >[danger] ##### 字符集 ~~~ <meta charset="UTF-8"> 1.utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。 2.gb2312 簡單中文包括6763個漢字（國標） 3.BIG5 繁體中文港澳臺等用 3.GBK包含全部中文字符是GB2312的擴展，加入對繁體字的支持，兼容GB2312 4.UTF-8則包含全世界所有國家需要用到的字符 ~~~ >[danger] ##### 編寫原則 ~~~ 1.先確定語義的HTML ，再選合適的CSS。 ~~~ >[success] # 認識路徑 ~~~ 1.相對路徑 2.絕對路徑 ~~~ >[danger] ##### 相對路徑 -- 相對于當前文件本身查找路徑 ~~~ 1. 圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。 2. 圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。 3. 圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如<img src="../logo.gif" />。 ~~~ >[danger] #### 絕對路徑 ~~~ 1.完整的地址 ~~~