學習的思維導圖
1. 瀏覽器的分類和內核
| 瀏覽器名稱 | 瀏覽器內核 |
|---|---|
| Microsoft Edge、IE（微軟） | Trident |
| Firefox（火狐） | Gecko |
| Google Chrome（谷歌） | Blink |
| Safari（蘋果） | Webkit |
| Opera（歐朋） | Blink晰赞，早期為 Presto |
說明：
- 瀏覽器的內核相當于汽車的發(fā)動機笼沥，負責將代碼轉換成用戶眼中的界面
- 瀏覽器市場份額：https://#baidu.com/data/browser。其中骄酗，Google Chrome瀏覽器占據的市場份額最大
- 國內的瀏覽器，如QQ瀏覽器（Blink）、360瀏覽器（Blink沐兰、Trident）和UC瀏覽器（Webkit、Trident）等蔽挠，均是采用上述瀏覽器的內核住闯。
2. Web標準
制定標準的原因：不同的瀏覽器對應不同的工作原理與解析方法，那么就會出現(xiàn)差別澳淑，為了解決這種矛盾比原，需要制定一套標準來規(guī)范Web的開發(fā)。
- 網頁的結構（.html）杠巡，負責網頁的內容整理和分類量窘，是網頁的骨架
- 網頁的樣式（.css），負責設置網頁的板式氢拥、顏色和文字大小
- 網頁的行為（.js）蚌铜，負責網頁的動態(tài)交互效果
2.1 HTML骨架
HTML：Hyper Text Markup Language，超文本標記語言
作用：主要是通過HTML標簽對網頁的文本兄一、圖片和音頻等內容進行描述厘线。
HTML有固定的基本格式：
<html>
<head>
<title>網頁標題</title>
</head>
<body>
網頁的主要內容
</body>
</html>
2.1.1 HTMl標簽的分類
雙標簽 ：<div></div>
單標簽 ：<br/>、<hr/>出革、<img/>造壮，均屬于功能性標簽
說明：標簽之間存在嵌套關系和并列關系
2.1.2 基本骨架說明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>：用于告知瀏覽器當前使用的HTML版本，解析時需要使用相應版本的HTML
<meta charset="UTF-8">：用于指定當前編碼和解碼的標準
2.2 標簽學習
（1）標題標簽：header，權重從h1-h6依次遞減耳璧，也屬于字體格式化標簽
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
（2）段落標簽：paragraph成箫，<p></p> 用于包裹一段文本
<p>我愛我的祖國</p>
（3）水平線標簽：horizontal，<hr/>
（4）換行標簽：break旨枯，<br/>蹬昌，由于在html中直接換行是不會在網頁中顯示出來，需要使用換行標簽來實現(xiàn)換行的效果
（5）字體格式化標簽
- 文字傾斜：em攀隔、i
- 文字加粗：strong（常用于強調某些文字）皂贩、b
- 貫穿線（刪除線）：del、s
- 下劃線：ins昆汹、u
說明：語義化的標簽便于搜索引擎（谷歌搜索明刷、百度搜索等）識別相應的內容，如果網頁的語義更好满粗，那么這個網頁在搜索引擎中的排名也就靠前辈末。搜索引擎不關注具體的樣式及視覺效果，而是關注標簽本身的語義化映皆。所以挤聘，推薦使用語義化強的標簽， em捅彻、strong组去、del 和 ins 標簽。
如下所示：
<em>公元221年</em>
<i>公元221年</i>
<strong>自信</strong>
<b>自信</b>
<del>原價：998</del>
<s>原價：998</s>
<ins>漢朝</ins>
<u>漢朝</u>
（6）圖片標簽
<img src="圖片的路徑" alt="替換圖片的說明文本" title="圖片標題">
屬性：
- src：圖片的路徑沟饥，可以為相對路徑添怔、絕對路徑、網絡地址
- alt：當圖片加載失敗時贤旷，用文字說明代替圖片
- title：當鼠標移動到圖片上方后顯示的標題
- width（寬度）广料、height（高度）、border（邊框）
- style：樣式屬性幼驶，包含width（寬度）艾杏、height（高度）、border（邊框）
（7）鏈接標簽
<a href="鏈接的地址" target="鏈接的打開方式"></a>
屬性：
href：鏈接跳轉的地址
地址分類：
- 站外跳轉盅藻，絕對地址跳轉购桑，需要添加合法的地址（http/https協(xié)議），如：https://www.baidu.com/氏淑；此外勃蜘，也可以是電腦本地文件的絕對地址
- 站內跳轉，相對地址跳轉假残，從當前文件去找目標文件的過程缭贡，兩個文件在同一個文件下（同級目錄）
- 錨點跳轉炉擅，頁面內部跳轉：從頁面的某一塊區(qū)域跳轉到另外一塊區(qū)域
在需要跳轉的標簽上添加 id=""，如：<p id="myId"></p>阳惹，然后在a標簽的href屬性中填寫自定義的 id 名：<a href="#myId"></a>
target：鏈接的打開方式
- _self：默認值谍失，覆蓋當前頁面打開
- _blank：新窗口打開頁面，
說明：根據具體的場景來使用鏈接打開方式莹汤，不可以一味地使用某一種快鱼。
2.3 標簽的屬性
語法：寫在標簽內部，如果是雙標簽纲岭，則寫在開始標簽里面
格式：屬性名="屬性值"
屬性可以多個并存抹竹，屬性與屬性之間使用空格分開
<hr color="red">
<h1 class="box" style="width: 200px"></h1>
2.4 路徑說明
- 絕對地址：從盤符、http協(xié)議出發(fā)去找目標文件的過程
<img src="http://......">
<img src="c://......">
- 相對地址：從當前文件出發(fā)去找目標文件的過程
（1）同級目錄：
如果當前文件和目標文件在同一個文件的話止潮，路徑直接寫目標文件的名稱即可柒莉。
如果當前文件和目標文件不在同一個文件的話，那么需要先找到目標文件對應的文件夾沽翔。
（2）非同級目錄：
上一級目錄：../ 用于跳出當前目錄
下一級目錄：文件夾名/
2.5 列表
（1）無序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
特點：列表之間沒有順序，實際工作中常用
（2）有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
特點：列表之間有順序窿凤，實際工作中不常用
（3）自定義列表
<dl>
<dt>幫助中心</dt>
<dd>賬戶管理</dd>
<dd>購物指南</dd>
<dd>訂單操作</dd>
</dl>
說明：
- ul仅偎、ol 的子元素（子標簽）必須是 li，li 標簽相當于一個容器雳殊，可以在 li 中嵌套其他的標簽（可以容納所有標簽）橘沥，包括（ ul、ol ）
<ul>
<li>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
- ul夯秃、ol 中直接輸入其他標簽或者文字的做法是不被允許的
- dl 中只能嵌套 dt 座咆、dd，直接在 dl 中輸入其他標簽或者文字的做法也是不被允許的
- dl 仓洼、dt 標簽相當于一個容器介陶，可以容納所有元素
2.6 注釋
不會被瀏覽器解析，在源代碼中顯示一段文字色建，用來提示該段代碼的作用
語法：
<!-- 被注釋的內容 -->
Windows快捷方式：ctrl + /哺呜；Mac OS中快捷方式：command + /
取消注釋快捷方式：ctrl + z 或者 ctrl + /，command + /
2.7 特殊字符
| 特殊符號 | 格式 | 描述 |
|---|---|---|
| < | < |
小于號 |
| > | > |
大于號 |
| & | & |
和號 |
| ￥ | ¥ |
人民幣 |
<p></p>
<p></p>
