一.基本塊級標簽
1.HTML標簽的分類：
a.塊級標簽：顯示為塊狀，獨占一行，自動換行。
b.行級標簽：在一行中，從左往右依次排列，不會自動換行。
2.h標簽（標題標簽）
h標簽：標題標簽，顯示為黑體加粗！！！
標題標簽，共分六種：h1~h6:h1最大，h6最小！
<h1>這是h1標簽</h1> <h2>這是h2標簽</h2> <h3>這是h3標簽</h3> <h4>這是h4標簽</h4> <h5>這是h5標簽</h5> <h6>這是h6標簽</h6>
2.hr標簽
<!--hr標簽：表示一條水平線-->
<hr />自閉和標簽
3.p標簽（段落標簽）
p標簽：表示段落標簽。
相當於我們文章中的一段文字！！
4.<br />換行符
注意：在代碼中，直接回車換行，瀏覽器不認識。必須使用換行符<br />告訴瀏覽器這里要換行。
5.pre標簽（預格式標簽）
pre標簽會保留代碼中的空格，回車等符號，直接在瀏覽器中顯示。
pre標簽常用於在網頁中顯示代碼，保留代碼格式！！！
6.blockquote（塊引用標簽）
blockquote:塊引用標簽。表明一段話是從其他網站引用的。
有一個重要屬性：cite=""表示這段話的引用來源，常放一個網站地址。
但是瀏覽器顯示並沒有任何區別。
二.基於布局的塊級標簽
1.無序列表
有多個列表項組成，每個列表前面帶小黑點，稱為無序列表。用<ui>表示。列表中的每一個小項用<li>表示。
<ul> <li>這是無序列表第一項</li> <li>這是無序列表第二項</li> <li>這是無序列表第三項</li> <li>這是無序列表第四項</li> </ul>
2.有序列表
有序列表用<ol>標簽，列表中的每一個小項用<li>表示。
<ol> <li>這是有序列表第一項</li> <li>這是有序列表第二項</li> <li>這是有序列表第三項</li> <li>這是有序列表第四項</li> </ol>
3.定義列表（定義描述列表）
定義列表<dl>，里面有一個標題<dt>,有多個描述項<dd>.
標題默認頂格顯示，描述項相對標題向后縮進。
<dl> <dt>這是dl列表的標題</dt> <dd>這是dl列表的描述項1</dd> <dd>這是dl列表的描述項2</dd> <dd>這是dl列表的描述項3</dd> </dl>
4.圖片組合標簽（了解）
組合標簽<figure>,里面有兩部分；
①圖片<img/>后續講解；
②圖片的標題：<figcaption></figcaption>
5.分區標簽div（最常用的標簽）
沒有任何的特殊作用，
僅僅起到一個包裹的功能，常用於網頁中划分區塊。
此標簽中可以包裹任何內容，需要配合CSS一起使用。
三.基本行級標簽
1.塊級標簽與行級標簽的區別(很重要！！！)
① 塊級標簽：默認寬度100%(占滿一行)；
塊級標簽自動換行(獨占一行，右邊不能有任何東西)；
塊級標簽可以使用CSS設置寬度高度！
② 行級標簽：默認寬度由內容撐開(內容多寬、寬度就占多寬)；
行級標簽不會自動換行(一行當中，從左往右依次排列)；
行級標簽的寬度高度不能設置！
2.常見的行級標簽
1、span標簽：
① span標簽只是包裹作用，沒有任何其他含義；
② span
作用與div類似，需配合CSS使用。只不過div是塊級標簽、span是行級標簽。
2、[em/strong i/b 區別] ：{重點}
① em和i都能傾斜。strong和b都能加粗！但是，i和b僅僅是單純的傾斜加粗，而em和Strong多了強調的語義。
② em和strong都表示強調，但是strong強調的級別更高！
注意：
1、強調的目的：讓搜索引擎知道網頁重點強調的內容！便於搜索引擎顯示！
2、Strong和em都可以多層嵌套，表示強調程度的遞增！
3、q標簽
q標簽：表示短引用 。
cite屬性：用於聲明引用的來源。
【常用的引用標簽】
<blockquote>用於引用一段內容</blockquote>
<q>用於引用一句話</q>
<cite>常用於引用作品名、書畫名等</cite>
相同點：三個引用標簽，都用cite屬性表示引用來源
不同點：① 引用的內容不同。
blockquote->一段話，q->一句話，cite->作品名
② 顯示的默認效果不同。
blockquote->默認整段向右縮進；
q->默認加引號；
cite->默認傾斜！
4、small和big
small標簽：將字體縮小一號；
big標簽：將字體放大一號；
注意：
① small和big可以多層嵌套，直到字體達到最小或最大為止；
② 這倆標簽已經被淘汰，並不建議使用。
5、img 圖片標簽
① src屬性：表示圖片的路徑
[圖片路徑的合法方式]
a.網絡鏈接：由於圖片在其他網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式；
<img src="https://www.baidu.com/img/bd_logo1.png" />
b.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協議才能訪問！所以，嚴禁使用這種方式！
<img src="file:///E:/icon.jpg" />
c.相對路徑：
① 圖片與當前文檔在同一層文件夾：直接寫圖片名
eg:<img src="icon.jpg" />
② 圖片在當前文檔的下一層文件夾：文件夾名/圖片名
eg:<img src="img/icon.jpg" />
③ 圖片在當前文檔的上一層文件夾： ../圖片名 (../表示后退一層)
eg:<img src="../icon.jpg" />
但是，一定要注意：圖片必須包含在項目里面，不能訪問項目外的圖片。
② height:圖片的高度 width：圖片的寬度
eg:<img src="img/icon.jpg" height="500" width="10" />
③ title：圖片的標題，也就是鼠標指上后看到的提示文字
eg:<img src="img/icon.jpg" title="鼠標指上后看到的提示文字" />
④ alt: 圖片無法加載時顯示的文字。省略alt，將默認顯示title內容。
eg:<img src="img/icon.jpg" alt="圖片無法加載時顯示的文字" />
⑤ align：圖片周圍的文字相對於圖片如何對齊。
可選值：top->圖片頂部 center->圖片中部 bottom->圖片底部
eg: <img src="img/icon.jpg" align="top" />12345
6.a標簽（超鏈接）
a標簽屬性
①href屬性：表示超鏈接需要跳轉的頁面。
A.可以寫網絡地址：
<a href="http://www.baidu.com">這是一個超鏈接</a>
B.可以打開本地html文件：
采用相對路徑確定文件地址。與img標簽確定方式相同。
②title屬性：鼠標指上后顯示的提示文字。
③target屬性：設置新頁面打開的窗口位置
可選值：-self自身頁面打開（默認）-blank新窗口打開
【超鏈接的特殊應用】
1.功能性鏈接：（了解）
mailto：//點擊鏈接給指定郵箱發送郵件
代碼示例：
<a href="mailto://jianghao@jerei.com" >發郵件！！</a>
tencent://message/?uin=1097270356 點擊與指定QQ聊天
還有：tell：//手機端點擊打電話；
message：//手機端點擊發送短信；
ftp://使用ftp協議進行文件的上傳下載；
2.錨鏈接：（重點）
①在頁面的指定位置設置一個錨點，用name屬性表示錨點的名字；
<a name="top"></a>
②將超鏈接的href屬性，設置為#加錨點的名字；
<a href="#top">點擊鏈接，跳轉到top錨點位置</a>
>>>頁面間錨鏈接
①在新頁面的指定位置設置一個錨點，用name屬性表示錨點的名字；
<a name="top"></a>
②將超鏈接的href屬性，設置為“新頁面地址#加錨點名字”；
<a href="test.html#top">點擊鏈接，跳轉到test.html的top錨點位置</a>
7.W3c規范：
1.W3c:萬維網聯盟，負責制定和維護Web行業開發標准；
2.W3c要求的規范：
①規范中倡導
兩個分離：
內容與表現分離；（HTML與CSS分離開）
內容與行為分離：（HTML與JavaScript分離開）
②HTML語言要遵循語義化！！
③關於代碼書寫的規范：
標簽與屬性必須要小寫
標簽必須要閉合
屬性值必須用引號引起來（img src="屬性值"）
標簽必須正確嵌套（不能交叉，塊級標簽可以包裹行級標簽，行級標簽不能包裹塊級標簽）
8. 其他的行級標簽:[了解即可]
(1)u標簽:帶下划線
代碼：
<u>u標簽帶下划線</u>
<span style="text-decoration: underline;">css實現下划線</span>
(2)s標簽：帶刪除線
代碼：
<s>s標簽帶刪除線</s>
<span style="text-decoration: line-through;">css實現刪除線</span>
(3)定義專業術語(dfn 定義專業術語 abbr 專業術語縮寫詞)
提示搜索引擎，當前為一段計算機代碼。
但是code不會保留代碼格式，需要配合pre標簽共同使用。
(5)var:表示變量
代碼：
<var>x</var>+<var>y</var>=<var>z</var>
(6)bdo：定義文本的顯示方向
rtl 從右向左 ltr從左向右
(7)kbd：需要用戶輸入的文字
(8)sup，sub:上下標
(9)time:表示時間
HTML5語義化標簽
1.header：表示文章的頭部
2.footer：表示文章的底部
3.section：表示網站或者文章的一個章節，也就是文章的一大塊
4.article：表示一篇文章
5.aside：表示與文章相關，但是不屬於文章一部分的內容
6.hgroup：表示包裹一組標題標簽h1~h6
7.nav:表示一個導航欄