一、什么是HTML?
HTML:超文本標簽語言
HTML:網頁的源碼
瀏覽器：“解釋和執行”HTML源碼的工具
二、HTML文檔的結構
HTML文檔主要包括三大部分：文檔聲明部分、<head>頭部部分、<body>主體部分。
1、<!DOCTYPE html> 這是HTML文檔的聲明部分，在html5中，已經被簡化成了此樣式。
2、.<!---->
注釋:寫給程序員看的，網頁中不會顯示
HTML中注釋的快捷鍵：Ctrl+/
需要注意的是：文檔聲明必須有！而且必須在文檔頁面的第一行！
HTML基本標簽
三、<head>頭部部分
1.<head>
head頭部作用：用於描述網頁的一些關鍵信息，比如網頁的配置，設置，關鍵字等等...
這些信息，大多在瀏覽器看不到，但是對網頁的解析至關重要！
2.<meta charset="utf-8" />
meta標簽，用於描述網頁的各種信息，
其中<meta charset="utf-8" />設置網頁的編碼格式為UTF-8格式
常見的中文編碼格式：
GB2312：國標碼，簡體中文；
GBK：擴展的國標碼，簡體中文；
UFT-8：萬國碼，兼容各種語言編碼，常用！！！！！！
①<meta name="keywords"content="html,網頁開發">
設置網頁關鍵字，有助於搜素引擎的搜索。
name="keywords"表示這個meta標簽設置的是網頁的關鍵字，
content=""表示關鍵字的詳細信息，多個關鍵字，用英文逗號分隔；
②<meta name="description"content="這是的第一個網頁！">
設置網頁的描述信息，搜索引擎搜索時，標題下面的一段文字！非常重要！！！
name="description"表示這個meta標簽設置的是網頁的描述信息；
content=""表示描述信息的詳細內容！！！
3.<title>這是我的第一個網頁！</title>
title：網頁的標題，顯示在瀏覽器選項卡上面的文字
4.<link rel="icon"href="img/icon.jpg"/>
鏈接網頁的小圖標：網頁選項卡上的小圖片
rel="icon"表示當前link的作用，是鏈接網頁圖標；
href="img/icon.jpg"表示圖標的地址在何處
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords"content="網頁開發">
<meta name="description"content="這是我開發的第一個網頁！">
<title>這是我的第一個網頁！</title>
<link rel="icon"href="img/icon.jpg"/>
</head>
<body>
</body>
</html>
四、body主體部分
（一）HTML標簽分類
HTML標簽的分類：
塊級標簽：顯示為塊狀，獨占一行，自動換行。
行級標簽：在一行中，從左往右依次排列，不會自動換行。
【塊級標簽與行級標簽的區別】
1、塊級標簽：默認寬度100%（占滿一行）；
塊級標簽自動換行（獨占一行，右邊不能有任何東西）；
可以使用css設置寬度高度
2、行級標簽：默認寬度由內容撐開（內容多寬，寬度就占多寬）；
行級標簽不會自動換行（一行當中，從左往右依次排列）；
寬度高度不能設置
從寫法上，HTML標簽分為“成對標簽”和“自閉和標簽（空標簽）”
①成對標簽：成對出現，有開始標簽，必須有結束標簽，內容包含在兩個標簽之間。
例如<h1></h1>
②自閉和標簽（空標簽）：只有一個標簽，用/表示標簽的自閉和（/可以省略）
例如<link/><meta/><hr/>
①成對標簽：成對出現，有開始標簽，必須有結束標簽，內容包含在兩個標簽之間。
例如<h1></h1>
②自閉和標簽（空標簽）：只有一個標簽，用/表示標簽的自閉和（/可以省略）
例如<link/><meta/><hr/>
（二）基本塊級標簽
1.標題標簽
h標簽：標題標簽，顯示為黑體加粗
標題標簽，共分為6種：h1-h6，h1最大，h6最小
2.分割線標簽
hr標簽：表示一條水平線
3.段落標簽
p標簽：表示段落標簽，相當於我們文章中的一段文字
4.換行標簽
<br/>：換行符
注意：在代碼中，直接回車換行，瀏覽器並不認識，必須使用<br/>告訴瀏覽器這里要斷行
5.預格式
pre標簽：預格式標簽。會保留代碼中的空格，回車等符號，直接在瀏覽器顯示
pre標簽常用於在網頁中顯示代碼，保留代碼格式！！
6.塊引用標簽<blockquote cite="http://www.baidu.com"></blockquote>
blockquote：塊引用標簽。表明一段話是從其他網站引用的
有一個重要屬性：cite=""表示這段話的引用來源，常放一個網站地址，但是瀏覽器顯示並沒有任何區別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>這是h1標簽</h1>
<h2>這是h2標簽</h2>
<h3>這是h3標簽</h3>
<h4>這是h4標簽</h4>
<h5>這是h5標簽</h5>
<h6>這是h6標簽</h6>
<hr/>
<p>這是一段文字這是一段文字這是一段文字<br/>這是一段文字這是一段文字這是一段文字</p>
<p>這是一段文字這是一段文字這是一段文字<br/>這是一段文字這是一段文字這是一段文字</p>
<pre>
這是一段文字
這是一段文字
這是一段文字
這是一段文字
</pre>
<!--
pre標簽：預格式標簽。會保留代碼中的空格，回車等符號，直接在瀏覽器顯示
pre標簽常用於在網頁中顯示代碼，保留代碼格式！！
-->
<blockquote cite="http://www.baidu.com">
光明正大的抄你的！
</blockquote>
</body>
</html>
（三）、基於布局的塊級標簽
1、無序列表
有多個列表項組成，每個列表項前面帶小黑點，稱為無序列表。
無序列表用<ul>表示，列表中的每一項用<li>表示
2.有序列表
有序列表用<ol>表示，標簽中的每個列表項用<li>表示
3、定義列表（定義描述列表）
定義列表<dl>，里面有一個標題<dt>，有多個描述項<dd>，
標題默認頂格顯示，描述項相對標題向后縮進顯示。
4、圖片組合標簽
組合標簽<figure>里面有兩部分：
①圖片<img/>后續講解
②圖片的標題<figcaption></figcaption>
5、分區標簽div（最常用標簽）
div標簽沒有任何的特殊作用，僅僅起到一個包裹內容的作用。常用於網頁中划分區塊
div標簽中可以包裹任何內容，需配合css一起使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>這是無序列表第一項</li>
<li>這是無序列表第二項</li>
<li>這是無序列表第三項</li>
<li>這是無序列表第四項</li>
</ul>
<ol>
<li>這是有序列表第一項</li>
<li>這是有序列表第二項</li>
<li>這是有序列表第三項</li>
<li>這是有序列表第四項</li>
<dl>
<dt>這是dl列表的標題</dt>
<dd>這是dl列表的描述項1</dd>
<dd>這是dl列表的描述項2</dd>
<dd>這是dl列表的描述項3</dd>
</dl>
<figure>
<img src="img/icon.jpg"/>
<figcaption>圖片的描述標題</figcaption>
</figure>
<div style="width:500px;height:100px;background-color:yellow ;">
這是div里面的文字
<p>11111</p>
</div>
</body>
</html>
（四）、基本行級標簽
1、span標簽
：①只是包裹作用，沒有其他任何含義；
②span作用與div類似，需配合CSS使用。只不過div是塊級標簽，span是行級標簽
2、【em/strong i/b區別】
①em和i都能傾斜，strong和b都能加粗。但是，i和b僅僅是單純的傾斜加粗，而em和 strong多了強調的語義。
②em和strong都表示強調，但是strong強調的級別更高
注意：
①強調的目的：讓搜索引擎知道網頁重點強調的內容！便於搜索引擎顯示！
②strong和em都可以多層嵌套，表示強調程度的遞增！
3、q標簽
q標簽：表示短引用
cite屬性：用於聲明引用的來源
【常用引用標簽】
<blockquote>用於引用一段內容</blockquote>
<q>用於引用一句話</q>
<cite>常用於引用作品名、書畫名等</cite>
相同點：三個引用標簽，都用city屬性表示引用來源
不同點：①引用內容不同
blockquote->一段話，q->一句話，city->作品名
②顯示的默認效果不同
blockquote->默認整段向右縮進；
q->默認加引號；
city->默認傾斜
4、small和big
small標簽：將字體縮小一號；
big標簽：將字體放大一號
注意：
①small和big可以多層嵌套，直到字體達到最小或最大為止
②這倆標簽已經被淘汰，並不建議使用
5、img圖片標簽：
5.1 src屬性：表示圖片的路徑
【圖片路徑的合法方式】
a、網絡連接：由於圖片在其它網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式
<img src="https://www.baidu.com/img/bd_logo1.png"/>
b、絕對路徑：使用絕對路徑的圖片，只有在本機使用file協議才能訪問！所以嚴禁使用這種方式
<img src="file:///E:/icon.jpg"/>
c、相對路徑：
① 圖片與當前文件在同一層文件夾：直接寫圖片名
<img src="icon.jpg"/>
② 圖片在當前文檔的下一層文件夾：文件夾名/圖片名
<img src="img/icon.jpg"/>
③ 圖片在當前文檔的上一層文件夾：../圖片名（../表示后退一層）
<img src="../icon.jpg"/>
但是，一定要注意：圖片必須包含在項目里面，不能 訪問項目外的圖片。
5.2 height:圖片的高度 width:圖片的寬度
5.3 title：圖片的標題，鼠標指上后看到的提示文字
<img src="img/icon.jpg"title="鼠標指上后看到的提示文字"/>
5.4 alt:圖片無法加載時顯示的文字
<img src="img/icon.jpg"alt="圖片無法加載時看到的文字"/>
5.5 align:圖片周圍的文字相對於圖片如何對齊
可選值：top->圖片頂部center->圖片中部bottom->圖片底部
<img src="img/icon.jpg"align="bottom"/>12345
6.超鏈接標簽a
① href屬性：表示超鏈接需要跳轉的頁面
a.可以寫網絡地址：
<a href="http://www.baidu.com">這是一個超鏈接</a>
b.可以打開本地html文件：
采用相對路徑確定文件地址，與img標簽確定方式相同
<a href="02-HTML-基本塊級標簽.html">這是一個超鏈接</a>
② title屬性：鼠標指上后顯示的提示文字
<a href="http://www.baidu.com"title="hhh">這是一個超鏈接</a>
③ target屬性：設置新頁面打開的窗口位置
可選值：_self自身頁面打開（默認）_blank新窗口打開
<a href="http://www.baidu.com"target="_blank">這是一個超鏈接</a>
④ rel屬性：聲明即將跳轉的文件與當前文件的關系
rel="prev":即將打開的頁面是當前頁面的前一篇；
rel="next":即將打開的頁面是當前頁面的后一篇
<a href="next.html"rel="next">下一篇文章</a>
這個屬性設置以后對用戶沒有任何作用，但多搜索引擎是友好的，搜索引擎在抓取網頁時， 可以很清楚的知道網頁中的上下文結構關系
【超鏈接的特殊應用】
1.功能性連接（了解）：
mailto://點擊鏈接給指定郵箱發送郵件
<a href="mailto://jianghao@jrel.com">點擊鏈接發封郵件</a>
tencent://message/?uin=251241143點擊與指定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="text.html#top">點擊鏈接，跳轉到text.html的top錨點位置</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
江漢真<span style="color: red;font-size:48px ;">帥</span><br />
<em>這是em標簽</em><br />
<strong>這是strong標簽</strong><br />
<i>這是i標簽</i><br />
<b>這是b標簽</b><br />
<u>這是u標簽</u><br />
<q cite="http://www.666666.com">我是q標簽引用</q>
<blockquote>我是blockquote的引用</blockquote>
<cite>我是city標簽的引用</cite><br />
<small>我比正常小一號</small><br />
<big>我比正常大一號</big><br />
<img src="https://www.baidu.com/img/bd_logo1.png"/>
<img src="img/icon.jpg"height=""width=""title="鼠標指上后看到的提示文字"alt="圖片無法加載時看到的文字"align="bottom"/>12345
<img src="../icon.jpg" /><br />
<div style="height: 800px;background-color: red;"></div>
<a href="http://www.baidu.com"title="hhh"target="_blank">這是一個超鏈接</a>
<a href="mailto://jianghao@jrel.com"title="hhh"target="_blank">點擊鏈接發封郵件</a>
<a href="#top">點擊跳轉到頂部！</a>
<a href="img/text.html#one">點擊跳到新頁面第一部分</a>
<a href="img/text.html#two">點擊跳到新頁面第二部分</a>
<a href="img/text.html#three">點擊跳到新頁面第三部分</a>
<a href="img/text.html#four">點擊跳到新頁面第四部分</a>
</body>
</html>
w3c規范：
1.w3c:萬維網聯盟，負責制定和維護web行業開發標准；
2.w3c要求的規范：
①w3c規范中倡導的兩個分離:
內容與表現分離：（HTML與css分離）
內容與行為分離：（HTML與JavaScript分離）
②HTML語言要遵循語義化
③關於代碼書寫的規范：
HTML中的標簽與屬性必須要小寫；
HTML中的標簽必須要閉合；
屬性值必須用引號引起來；
HTML標簽必須正確嵌套
（五）、表格
表格用table表示，表格中的每一行用tr表示，一行中的每一列用td表示
th:表示表頭，表頭中的文字默認為加粗居中，th要放在tr中，用於替換td
table的常用屬性
1.border：給表格加邊框。默認給所有td加邊框，並且給整個table加外邊框，當增大 border的值時，td上的邊框不變化，只有最外層大邊框變寬
2.cellspacing：單元格與單元格之間的距離。
【注意】表格邊框線合並的css寫法:
style="border-collapse：collapse;"
這條css與cellspacing="0"有什么區別？
cellspacing="0"僅僅是將單元格之間的距離調整為0，實際上單元格之間依然還是兩條線
border-collapse：collapse；試講表格相鄰的兩條邊框進行合並處理，只有一條線存在
（一旦邊框合並，collapse屬性將會失效）
3.cellpadding:單元格中的文字與單元格邊框的距離
4.height:表格的高度
width:表格的寬度
使用表格寬高屬性設置大小：
<table height="400"width="500"></table>
使用css樣式設置大小：
<table style="height: 400px;width=500px"></table>
5.align:設置表格在瀏覽器中的位置，不建議使用了。
可選值：left/center/right
6.bgcolor:背景色
bordercolor：邊框顏色
background：背景圖
背景圖和背景色同時存在時，背景圖會覆蓋背景色
tr與td常用屬性
1.width：單元格寬度
height：單元格高度
2.bgcolor：單元格顏色
3.align：設置單元格中的文字，水平對齊方式
left/center/right
Valign：設置單元格中的文字，垂直對齊方式
4.nowrap="nowrap"當單元格文字過多時，設置單元格文字不斷行顯示。但是，
會把表格的寬度撐大
表格的跨行與跨列
1.跨列：在td上使用屬性colspan="n"進行跨列。如果一個單元格跨n列，
則單元格右邊的n-1個單元格需去掉
2.跨行：在td上使用屬性rowspan="n"進行跨列。如果一個單元格跨n行，
則單元格下邊的n-1個單元格需去掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1"cellspacing="0"style="border-collapse: collapse;"
cellpadding="15"bgcolor=""bordercolor=""background="">
<tr>
<th>標題一</th>
<th>標題二</th>
<th>標題三</th>
</tr>
<tr>
<td align="right"valign="bottom">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<table border="1">
<tr>
<th>標題一</th>
<th colspan="2">標題二</th>
</tr>
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>
</html>
（六）表單
1、form表單的兩個重要屬性
①action：表示表單提交的服務器地址
②method：表單提交數據的方式，可選值get和post
【get和post的區別】
get通過URL傳遞數據，所有內容在URL可以看到，而post無法看見
get傳遞數據不安全，而post傳遞數據安全。
get能夠傳遞的數據量有限，且只能夠傳遞文本信息。post可以傳遞大量數據，並且 可以傳遞圖片、文件等其他內容
get的傳輸速度要比post快。
【get使用URL傳遞數據的格式】
http://URL地址.html?name1=value1&name2=value2
用?表示參數傳遞的開始，多個參數之間用&符號鏈接，同一個參數用name來標識value
所以使用表單時，input輸入框的name屬性一定不能省略。
如果省略input屬性，則這個input的數據，不會往后台傳遞
2、input的常用屬性：
①type：聲明input輸入框是什么類型
②name：給input輸入框起名字。傳輸數據時，使用name=value的形式傳遞
③value：input輸入框的默認值。
④placeholder：輸入的提示文本，當輸入框為空時，顯示；當輸入框有value時消失
⑤checked="checked" 設置單選框或者復選框的默認選中
⑥disabled="disabled" 設置input禁用。一旦使用disabled禁用的輸入框，在傳
遞數據時，將不再往后台傳遞
⑦hidden="hidden" 隱藏輸入框，隱藏的內容依然可以向后台傳遞相當於
<input type="hidden"name="hidden"value="111" />
3、input的type類型
①text：表示input為文本輸入框，輸入內容正常顯示
②password：表示input為密碼輸入框，輸入內容會顯示小黑點
③radio：表示input為單選輸入框
>>>radio標簽的value屬性不能省略，往后台傳遞值時，傳遞的是value中的值
>>>radio標簽憑借name屬性來判斷是否是同一組標簽。name相同為同一組，同
一組當中只能選擇一個
>>>使用checked="checked"可以設置默認選中項。這種屬性名=屬性值的寫法，
可以省略屬性值
例如：<input type="radio"name="sex"value="男" checked/>男
④checkbox：表示復選框。其他要求與radio相同
⑤file：表示文件上傳框。點擊可以選擇文件上傳
accept屬性，可以限制只能上傳何種類型的文件。
*表示可以接受所有文件
image/*表示只能接受圖片文件
multiple=“multiple”設置可以上傳多個文件
⑥submit：表示input會顯示為提交按鈕，點擊可以提交整張表單
⑦reset：表示重置按鈕，點擊將表單恢復到初始狀態
⑧image：圖形提交按鈕。使用src屬性導入一張圖片，與submit按鈕都具有提交
表單的功能
⑨button：只是按鈕形狀，沒有任何作用
⑩hidden：隱藏的輸入框。與普通輸入框+hidden=“hidden”作用相同
4、select下拉選擇區塊
① <select></select>標簽中有多個選項，用<option></option>表示
② 一個<select></select>組合只能有一個name，所以使用時需給select標簽起name， 而不是給option標簽起name
③ option標簽如果有value屬性，則傳遞數據時將傳遞value的屬性值；如果沒有value屬性 則傳遞時將傳遞<option></option>標簽中間的文字
④ option標簽的title屬性：表示鼠標指上后顯示的文字
⑤ 給option標簽加上selected="selected"表示默認選中項
⑥ 給select標簽加multiple="multiple"表示這個下拉框可以多選，但是這個屬性幾乎不用
⑦ <optgroup lable=“組名”></optgroup>用於將所有的option標簽進行分組，使用lable 屬性表示組名
所以，完整的select下拉的結構如下：
<select name="city"> <optgroup label="group1"> <option>1</option> <option>2</option> </optgroup> <optgroup label="group2"> <option>3</option> <option>4</option> <option>5</option> </optgroup> </select>
5、textarea 文本域
①文本域可以使用cols和rows設定寬高，但我們幾乎不用
我們使用style="height: 50px;width: 150px;"來設定大小
②使用css樣式style="resize: none;"設定文本域的大小不允許拖動縮放
③使用屬性readonly="readonly"設置文本域為只讀，不允許修改
④css樣式overflow用於設置超出區域的文字如何顯示
可選值有三個：
hidden：超出區域的文字直接隱藏，無法看到；
scroll：無論文字多少，都會顯示水平和垂直方向的滾動條；
auto：（默認效果）文字少的時候沒有滾動條，文字多的時候自動顯示垂直滾動條
也可以使用overflow-x和overflow-y單獨設置水平和垂直方向滾動條是否顯示
6、HTML5智能表單
6.1 H5為我們提供了input和form關聯的新方式。並不要求input必須包含在form面。 如果input在form外面，只要給form標簽一個id，讓input標簽for屬 性關聯這id， 即可實現input與form的關聯
<form id="form1">
<input form="form1" />
6.2 H5給我們提供了一系列新的input的type類型
6.3 H5給提供的input新屬性：
placeholder：輸入框的默認提示內容
form：讓表單外面的input關聯表單id，實現input與form表單的關聯
required=“required”設置input必填
autofocus="autofocus"：設置input自動獲得焦點
autocomplete="off"關閉自動提示完成功能。此功能瀏覽器會默認打開。設置off為關閉，設置為on可以打開
可以給form標簽添加autocomplete屬性，設置整張表單的自動完成功能是否開 啟。如有個別不同的input，可以單獨再設置