一、HTML簡介
目標：
Q1:什麼是網頁？
網站是網頁的集合，網頁是網站中的一“頁“，網頁是構成網站的基本元素，通常由圖片、鏈接、文件等元素組成。網頁俗稱HTML文件。
Q2:什麼是HTML？
HTML爲超文本標記語言(主要是各種各樣的標籤)，不是一種編程語言。
專門用來製作網頁的。
超文本：
- 可以放圖片、聲音、動畫、多媒體等。（超越文本限制）
- 可從一個文件跳轉到另一個文件。（超級鏈接文本）
Q3:網頁是怎麼形成的？
在HTML文件中寫各種HTML標籤，再用瀏覽器打開即可。
Q4：常用的瀏覽器
瀏覽器是網頁顯示運行的平臺。
常用瀏覽器有：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera，稱爲五大瀏覽器。
（IE和Edge同爲微軟公司的瀏覽器）
瀏覽器內核：負責讀取網頁內容，整理訊息，計算網頁的吸納會死方式並顯示頁面。
國內瀏覽器一般採用Webkit和Blink內核，如QQ,UC,搜狐等。
Q5:什麼是Web標準
Web標準爲WC組織和其他標準化組織制定的一系列標準集合。W3C（萬維網聯盟）
Q6:爲什麼需要Web標準？
如果沒有標準，瀏覽器不同，顯示頁面或排版存在差異。
有Web標準，則存在各種優點：網頁規範、便於維護、提升瀏覽速度等等。
Q7:Web標準的構成（重點）
主要包括結構、表現和行爲三個方面。
Web標準提出的最佳體驗方案：結構、樣式、行爲相分離。
做一個類比：結構類比於小鳥的身體，表現類比於小鳥的羽毛，行爲類比於小鳥的行爲動作（如飛）。在這三者中結構最重要，沒有身體，你飛個毛線？？？
二、HTML標籤
目標：
1、語法規範
- 所有的標籤都必須包含在一對尖括號裏。如
<html> - 大部分情況下標籤都是成對出現的。
<html></html>即爲一對標籤，前一個爲開始標籤，後一個爲結束標籤，後一個多/。成對出現爲雙標籤，特殊的標籤爲單標籤，如<br />。單標籤特別少。 - 雙標籤關係：包含關係和並列關係
2、HTML基本結構標籤
每個網頁都會有一個基本的結構標籤，也稱骨架標籤，頁面內容在這些基本標籤上書寫。
HTML頁面也叫HTML文檔。
HTML文檔的後綴名必須是.html或.htm
三、網頁開發工具
在此使用vscode。
分析VSCode生成骨架標籤的新增代碼：
1、<!DOCTYPE>文檔類型聲明，告訴瀏覽器使用哪種HTML版本來顯示網頁。
<!DOCTYPE html>
此代碼：採用最新的HTML版本來顯示。
特別注意：
（1）<!DOCTYPE>要聲明在第一行，在Html標籤之前
（2）<!DOCTYPE>不是HTML標籤，它就是文檔類型聲明標籤
2、<html lang=""l>定義lang語言種類
en定義爲英文，zh-CN定義爲中文。
其實en也可以顯示中文，zh-CN也可以顯示英文。
3、< mata charset=“UTF-8”>
- 字符集（Characterset）是多個字符的集合，方便計算機能夠世界和存儲各種文字。
- 在< head>標籤中，通過< meta>標籤的charset屬性來規定HTML文檔應該使用哪種字符編碼。
- UTF-8稱萬國碼，基本包含了全世界所有國家需要用到的字符。
- 一定是UTF-8，不能是utf-8也不能是UTF8
四、常用標籤
重點是記住標籤的語義，即標籤的含義，即這個標籤是用來幹嘛的。
1、標題標籤< h1>-< h6> (重要)
<h1> 我是一級標題 </h1>
標籤語義：作爲標題使用，並且根據重要性遞減。1級標題比2級標題更重要。
特點：
（1）字體變粗，字號變大
（2）一個標題獨佔一行
2、段落標籤 (重要)
< p>標籤用於定義段落
<p> 我是一個段落標籤 </p>
//paragraph
標籤語義：把HTML文檔分割成若干段落。
拓展，字太長，用查看→自動換行，使其多行顯示
特點:
（1）文本會根據瀏覽器大小自動換行
（2）段落和段落之間存在較大縫隙
3、換行標籤 （重要）
<br />
//break的縮寫，意爲打斷、換行。
標籤語義：強制換行。
特點：
（1）單標籤
（2）只是另起一行，與段落不同，段落會插入垂直間距。
四、文本格式化標籤
粗體、斜體或下劃線等效果，需文本格式化標籤，使文本以特殊的方式顯示。
標籤語義：突出重要性。
五、< div>和 < span>標籤
沒有語義，相當於一個盒子，用來裝內容。
<div>這是頭部</div>
<span>今日價格</span>
div：division，表分割，分區。
span：跨度、跨矩。
特點：
（1）< div>用來佈局，一行只能放一個< div>，看成大盒子。
（2）< span>用來佈局，一行可放多個< span>，看成小盒子。
六、圖像標籤和路徑 （重點）
1、圖像標籤
< img>標籤用於定義HTML頁面中的圖像。
<img src="圖像URL" />
特點：
（1）src是< img>的必須屬性，用於指定圖像文件的路徑和文件名。
（2）單標籤
圖像標籤的其他屬性：
圖像標籤屬性的注意點：
（1）屬性在標籤名img後。
（2）屬性間不分先後順序，屬性與屬性以空格分隔
（2）屬性採取鍵值對的格式，屬性=“屬性值”
2、路徑（鋪墊知識）
（1）目錄文件夾和根目錄
目錄文件夾：即普通文件夾，存放素材
根目錄：打開目錄文件夾的第一層
（2）vscode打開目錄文件夾
文件→打開文件夾→選擇目錄文件夾，後期方便管理文件。
（3）路徑
1、相對路徑：以引用文件所在位置爲參考基礎，而建立出的目錄路徑。即圖片相對於HTML頁面的位置。
上一級，用…/退回上層
2、絕對路徑：是指目錄下的絕對位置，即從盤符開始的路徑。很少使用。
例如："D:\web\img.jpg"或完整網絡地址：“heep://www.itcase.cn/logo.gif”
相對路徑：////！！！
絕對路徑：\\!
七、超鏈接標籤（重點）
作用：從一個頁面鏈接到另一個頁面，用< a>定義
1、語法格式
<a href="跳轉目標" target="目標窗口的彈出方式"> 文本或圖像 </a>
//anchor的縮寫
| 屬性 | 作用 |
|---|---|
| href | 用於指定連接目標的url地址，必須屬性，當爲標籤應用href屬性時，它就具有了超鏈接 |
| target | 用於指定鏈接頁面的打開方式，其中_self爲默認值（當前頁面打開），_blank在新窗口中打開。 |
2、鏈接分類：
1、外部鏈接，即外部網站的地址。必須以http://開頭+外部網址
2、內部鏈接：網站內部頁面之間的相互鏈接，直接鏈接內部頁面名稱即可。
例如：< a href=“index.html>首頁 < /a> 一定要加.html哦！不然就會出現下面情況
3、空鏈接：當沒有確定鏈接目標時，可用空鏈接臨時代替。如：< a href=”#">首頁 < /a>
4、下載鏈接：如果href的地址爲文件或壓縮包，則會下載這個文件。
5、網頁元素鏈接：各種網頁元素都可以添加超鏈接，如圖像、表格、音頻、視頻等。
6、錨點鏈接：點鏈接，可用快速定位到頁面中的某個位置。
- 在鏈接文本的href屬性紅，設置屬性值**#**名字的形式，如< a href="#two>第2集< /a>
- 找到目標位置標籤，裏面添加一個id屬性=上面的名字，如< h3 id=“two”>第2集介紹 < /h3>特別注意不用#了噢！
五、HTML中的註釋和特殊字符
1、註釋
HTML中的註釋以“<!--”開頭，以“-->”結束
快捷添加註釋方法：ctrl+/
2、特殊字符
nbsp：numberspace
lt：less than
gt：greater than
只需記住這三個。