常見的瀏覽器
瀏覽器：網頁顯示、運行的平臺
由 shell（瀏覽器的外殼） 和 內核組成
主瀏覽器：佔有一定的市場份額和擁有自主研發的內核
市場份額
傳送門
內核
內核（Rendering Engine）：負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示頁面
內核的組成：渲染引擎和JS引擎
渲染引擎：獲取網頁的內容、整理訊息、計算網頁的顯示方式，然後會輸出至顯示器或打印機。不同的內核對於網頁的語法解析也不同，以至於渲染的效果也不同
JS引擎：解析和執行javascript來實現網頁的動態效果
| 內核 | 主流瀏覽器 |
|---|---|
| Trident | IE |
| Gecko | FireFox |
| Presto | Opera |
| Webkit | Safari、Chrome |
移動端瀏覽器的內核是系統內置瀏覽器的內核
安卓：Webkit內核
蘋果：Safari或者IE內核Trident
HTML
超文本標記語言（Hyper Text Markup Language）
基本結構
// 文檔聲明、告訴瀏覽器文檔使用哪種規範（html、xml）
<!DOCTYPE html>
// 語言
<html lang="en">
<head>
// 字符集
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
//頁面上看到的
</body>
</html>
字符集
文字編碼方式（不設置容易導致亂碼）
常見編碼方式
- gb2312 簡單中文 包括6763個漢字 GUO BIAO
- BIG5 繁體中文 港澳臺等用
- GBK包含全部中文字符 是GB2312的擴展
- UTF-8則基本包含全世界所有國家需要用到的字符
常見的標籤分類
單標籤、雙標籤
塊元素
-
獨佔一行
-
高度、寬度、邊距可以控制
-
默認寬度是父級的100%
-
裏面可以放塊元素和行元素
-
文字類塊元素（p、h1–h6）裏面不可以放塊元素
行內元素
- 一行可以顯示多個
- 高、寬設置是無效的
- 默認寬度是本身內容寬度
- 行內元素只能容納文本或其他行內元素
行內塊元素
img、input
- 一行可以顯示多個
- 寬、高可以設置
注意：元素之間可以通過 display 相互轉換
音頻、視頻
// 音頻
<audio controls="controls">
<source src="/song.ogg" type="audio/ogg">
<source src="/song.mp3" type="audio/mpeg">
</audio>
// 視頻
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="/movie.ogg" type="video/ogg" />
<source src="/movie.mp4" type="video/mp4" />
<source src="/movie.webm" type="video/webm" />
<object data="/movie.mp4" width="320" height="240">
<embed width="320" height="240" src="/i/movie.swf" />
</object>
</video>