一，簡介 HTML 指超文本標簽語言。 HTML 是通向 WEB 技術世界的鑰匙。 HTML 5 是下一代的 HTML。 HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。 二，標簽 - 標題標簽 <h1 - h6> 定義和用法 <h1> - <h6> 標簽可定義標 ...
一，簡介
HTML 指超文本標簽語言。
HTML 是通向 WEB 技術世界的鑰匙。
HTML 5 是下一代的 HTML。
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
二，標簽 - 標題標簽 <h1 - h6>
定義和用法
<h1> - <h6> 標簽可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。
由於 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標簽層級來構建文檔的結構。因此，請不要利用標題標簽來改變同一行中的字體大小。相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。
<h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6>
三，標簽 - 段落標簽 <p>
定義和用法
<p> 標簽定義段落。
p 元素會自動在其前後創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落標簽用法</title>
</head>
<body>
<h1> 美國政府發佈命令：暫停所有中國客運航班</h1>
<p>美國交通部3日發佈命令，宣佈將從本月16日起暫停所有中國航空公司執飛的中美定期客運航班，涉及中國國際航空、首都航空、東方航空、南方航空、海南航空、廈門航空等多家航空公司。</p>
<p>上述命令宣稱，美國交通部因中國政府“未能允許美國承運人實現往返中國的定期客運航空服務，無法行使雙邊權利的全部內容”，將暫停所有中國航空公司往返美國的定期航班運營。該命令將於2020年6月16日生效。根據中國各航空公司此前發佈的6月份航班計劃，該命令將影響國航運營的北京-洛杉磯航線、南航運營的廣州-洛杉磯航線、東航運營的上海-紐約航線等多條航線。</p>
<p>美國交通部所謂的中方未能允許美國的航空公司運營往返中國的客運航線，指的是中國民航局自3月29日開始實施的“五個一”政策（一個航司一個國家只保留一條航線，一周最多執行一班）。由於該政策要求以3月12日發佈的國際航班計劃為基準，而美國各家航空公司已於此前暫停所有中美航班，因此始終未恢復航線。民航局運輸司相關負責人此前在答記者問時曾表示，“五個一”政策主要是為了堅決阻遏疫情輸入風險高發態勢。</p>
</body>
</html>
四，標簽 - 還行標簽 <br />
定義和用法
<br> 可插入一個簡單的換行符。
<br> 標簽是空標簽（意味著它沒有結束標簽，因此這是錯誤的：<br></br>）。在 XHTML 中，把結束標簽放在開始標簽中，也就是 <br />。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>換行標簽的用法</title>
</head>
<body>
<h1>美國宣佈：暫停所有中國客運航班</h1>
<p>北京時間今日凌晨消息，美國交通部3日發佈命令，<br />
<h3>宣佈將從本月16日起暫停所有中國航空公司執飛的中美定期客運航班，</h3>涉及中國國際航空、首都航空、東方航空、南方航空、海南航空、廈門航空等多家航空公司。</p>
<p>上述命令宣稱，美國交通部因中國政府“未能允許美國承運人實現往返中國的定期客運航空服務，無法行使雙邊權利的全部內容”，將暫停所有中國航空公司往返美國的定期航班運營。該命令將於2020年6月16日生效。</p>
<h2>br / 是換行標簽的用法：！！！這個標簽屬於單標簽。</h2>
</body>
</html>
五，標簽 - 文本格式化標簽 <strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>
定義和用法
文本格式化標簽包含: 1. strong 及 b 代表粗體 2. em 及 i 代表傾斜 3. del 及 s 代表刪除 4. ins 及 u 代表下劃線<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化標簽</title>
<style>
.microsoft {
color:mediumblue;
font-family:"Microsoft yahei",Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>為“黑人之死”鬧起來的國家，又多了一個法國！</h1>
<h3>示威者縱火、警方發射催淚彈……非裔美國人弗洛伊德之死引發全美大規模抗議仍在進行，2日晚，法國首都的反種族歧視抗議也在升級。</h3>
<h2><strong><em>“今日俄羅斯”（RT）3日報道稱，</em></strong></h2>
<p class="microsoft">2日晚，數百名抗議者無視疫情禁令，走上法國首都巴黎的街頭，聲援美國抗議者，並要求為本國遭受警察“暴行”的受害者討回公道。</p>
<i>法國街頭的抗議活動（資料圖）法國街頭的抗議活動（資料圖）</i>
<p>報道稱，有關部門禁止疫情期舉行大型集會，但這並沒有阻止大批示威者出動。他們喊著“為喬治伸張正義”、“為阿達瑪伸張正義”的口號上街游行。</p>
<p>據介紹，阿達瑪指的是2016年24歲法國黑人阿達瑪•特拉奧雷（Adama Traore）一案。這名年輕人在被警方拘留數小時後意外死亡。案件仍在調查中，有媒體稱阿達瑪是在警察試圖制服他時窒息而死。
</p>
<p><ins><strong>RT稱，抗議示威人群當天還試圖封鎖高速公路、設置路障、焚燒垃圾和建築物，並與警方發生小規模衝突。警方向示威者發射催淚瓦斯，試圖驅散人群。</strong></ins></p>
<p><del>這一句是故意寫錯的。為了體現刪除下滑線效果！！</del>></p>
</body>
</html>
六，標簽 - div/span標簽 <div>,<span>
定義和用法
<div> 可定義文檔中的分區或節（division/section）。
<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那麼該標簽的作用會變得更加有效。
用法
<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。
不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
<span> 標簽被用來組合文檔中的行內元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div,span標簽</title>
</head>
<body>
<div>我是一個div盒子</div>
<span>家電 國際 生鮮 超市</span>
<h2><strong>
<p>div 標簽用來佈局，但是一行只能放一個div.相當於一個大的盒子容器（division的縮寫）<br />
span標簽用來佈局，一行可以多個span.相當於n個小盒子 （span意為跨度，跨距）
</p>
</strong></h2>
</body>
</html>
七，標簽 - 圖像標簽 <img>
定義和用法
img 元素向網頁中嵌入一幅圖像。
請註意，從技術上講，<img> 標簽並不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。
<img> 標簽有兩個必需的屬性：src 屬性 和 alt 屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>img圖像標簽</title> </head> <body> <h1>景瑞笑笑</h1> <div> <img src="../images/doter.jpg" /> <h5>alt代表替換文本.當圖片顯示不出來的時候，顯示alt=後的文字</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" /> <h5>title代表滑鼠放到圖片後所顯示的文字</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" title="笑笑在向你微笑！" /> <h5>width,height width代表設置圖像的寬度,height代表設置圖像的高度</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" title="笑笑在向你微笑！" width="400" height="300" /> <h5>border代表設置圖像邊框.後期是通過css來對其進行設定的</h5> <img src="../images/doter.jpg" alt="我是景瑞笑笑" title="笑笑在向你微笑！" width="400" border="15" /> </div> <!--img 是image的縮寫<br /> src 是img的必須屬性，它用戶指定圖像的路徑和文件名 img標簽跟br /相同也是一個單標簽 --> </body> </html>View Code
八，標簽 - 鏈接標簽 <a>
定義和用法
<a> 標簽定義超鏈接，用於從一張頁面鏈接到另一張頁面。
<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。
在所有瀏覽器中，鏈接的預設外觀是：
- 未被訪問的鏈接帶有下劃線而且是藍色的
- 已被訪問的鏈接帶有下劃線而且是紫色的
- 活動鏈接帶有下劃線而且是紅色的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鏈接標簽</title>
</head>
<body>
<h1>1.外部鏈接</h1>
<h2>景瑞笑笑百日照片</h2>
<img src="../images/IMG_20200516_105313.jpg" title="小吃貨" width="400">
<br />
<a href="https://pan.baidu.com/disk/home?errmsg=Auth+Login+Sucess&errno=0&ssnerror=0&#/all?vmode=list&path=%2F%E7%AC%91%E7%AC%91%2F%E7%85%A7%E7%89%87%2F3-6%E4%B8%AA%E6%9C%88%2F%E7%99%BE%E6%97%A5%E7%85%A7"
target="_blank">百度雲盤</a>
<h1>2.內部鏈接</h1>
<a href="04-html_文本格式化標簽.html" target="_blank">新浪新聞</a>
<h2>
a標簽代表超鏈接的意思.href=""是必須要寫的裡面必須是以http//或者https//開頭的網址<br />
traget = ""有兩個參數 _self代表當前頁面打開 _blank代表新建一個視窗打開.
</h2>
</body>
</html>
九，標簽 - 鏈接補充 <a>
定義和用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鏈接標簽</title>
</head>
<body>
<h1 id="home">1.外部鏈接</h1>
<h2>景瑞笑笑百日照片</h2>
<p id="tojingrui">景瑞笑笑個人簡介: 2018年10月21日 7:20出生 性別:女 性格：開朗 </p> <br />
<img src="../images/IMG_20200516_105313.jpg" title="小吃貨" width="400">
<br />
<a href="https://pan.baidu.com/disk/home?errmsg=Auth+Login+Sucess&errno=0&ssnerror=0&#/all?vmode=list&path=%2F%E7%AC%91%E7%AC%91%2F%E7%85%A7%E7%89%87%2F3-6%E4%B8%AA%E6%9C%88%2F%E7%99%BE%E6%97%A5%E7%85%A7"
target="_blank">百度雲盤</a>
<h1>2.內部鏈接</h1>
內部鏈接可以鏈接另外一個.html的文件<br />
<a href="04-html_文本格式化標簽.html" target="_blank">新浪新聞</a>
<h1>3.空鏈接</h1>
當網站還沒有創建好的時候可以用href="#"先占位<br />
<a href="#">qq音樂</a>
<h1>4.下載鏈接</h1>
下載鏈接:下載的地址跟的是 文件 .exe .zip 等壓縮包格式的文件<br />
<a href="../Git-2.26.2-64-bit.zip">下載</a>
<h1>網頁元素鏈接</h1>
網路元素鏈接:可以把圖片，音頻，視頻都可以當做一個超鏈接來使用<br />
<a href="https://item.jd.com/100007299145.html" target="_blank"><img
src="C:\Users\Administrator\HTML5\images\華為matePro4.jpg" width="300" title="matePro40 7988元"></a>
<h1>5.錨點鏈接</h1>
錨點鏈接:當我們點擊一個鏈接,會快速定位到當前頁面的某個位置。
語法：href="#任意編寫一個名字",在定位標簽中加入id="對應的名稱"屬性中填寫的名字必須跟href指定的名字一致。<br />
<a href="#tojingrui">笑笑簡介</a>
<a href="#home">
<h3>返回頂部</h3>
</a>
<!--a標簽代表超鏈接的意思.href=""是必須要寫的裡面必須是以http//或者https//開頭的網址<br />
traget = ""有兩個參數 _self代表當前頁面打開 _blank代表新建一個視窗打開.
-->
</body>
</html>
十，標簽 - 註釋標簽及特殊符號 <!-- < --> 特殊符號參照代碼解釋
定義和用法
註釋標簽就是作文本解釋的。為了讓人更清楚每個標簽的作用。
特殊符號解釋參照代碼中註釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註釋標簽及特殊字元</title>
</head>
<body>
<h2>註釋標簽的使用:<!--文字部分-->這種格式就代表註釋！</h2>
<h1>特殊字元</h1>
<p><h3>前面加& nbsp後面加個;號. 代表: 空格符<!-- --></h3></p>
<p><h3>前面加& lt 後面加個;號. 代表: <小於號的意思<!-- <--></h3></p>
<p><h3>前面加& gt 後面加個;號. 代表: >大於號的意思<!-- >--></h3></p>
<p><h3>前面加& amp後面加個;號. 代表: &和號的意思<!-- &--></h3></p>
<p><h3>前面加& yen後面加個;號. 代表: ¥人民幣的意思<!-- --></h3></p>
<p><h3>前面加& copy後面加個;號. 代表: ©版權的意思<!-- ©--></h3></p>
<p><h3>前面加& reg後面加個;號. 代表: ®註冊商標的意思<!-- ®--></h3></p>
<p><h3>前面加& deg後面加個;號. 代表: °攝氏度的意思<!-- °--></h3></p>
<p><h3>前面加& plusmn後面加個;號. 代表: ±正負號的意思<!-- ±--></h3></p>
<p><h3>前面加& times後面加個;號. 代表: ×乘號的意思<!-- ×--></h3></p>
<p><h3>前面加& divide後面加個;號. 代表: ÷除號的意思<!-- ÷--></h3></p>
<p><h3>前面加& sup2後面加個;號. 代表: ²平方2（上標2）的意思<!-- ²--></h3></p>
<p><h3>前面加& sup3後面加個;號. 代表: ³立方3（上標3）的意思<!-- ³--></h3></p>
</body>
</html>
十一，標簽 - 表格標簽 <table>,<th>,<tr>,<td>,<thead>,<tbody>
定義和用法
<table> 標簽定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更複雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<thead> 標簽定義表格的表頭。該標簽用於組合 HTML 表格的表頭內容。
thead 元素應該與 tbody 和 tfoot 元素結合起來使用。
<tbody> 標簽表格主體（正文）。該標簽用於組合 HTML 表格的主體內容。
thead 元素用於對 HTML 表格中的表頭內容進行分組，而 tfoot 元素用於對 HTML 表格中的表註（頁腳）內容進行分組。
註釋：如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格標簽</title>
</head>
<body>
<h1 id="home">表格屬性介紹:</h1>
<p>1. align 屬性值: left,center,right 規定表格周圍元素的對齊方式<br />
<br />2. border 屬性值: 1或者"" 規定表格單元是否擁有邊框。預設為""表示沒有邊框 <br />
<br />3. cellpadding 屬性值: 像素值 規定單元邊沿與其內容之間的空白.預設1像素 <br />
<br />4. cellspacing 屬性值: 像素值 規定單元格之間的空白.預設2像素 <br />
<br />5. width 與 height 用法是設定表格的寬與長</p>
<br />
<table align="center" border="1" cellpadding="0" cellspacing="0" width=1000 height="250">
<!-- thead和tbody是表格結構區域.是為了使我們的表格結構更加的直觀清晰 -->
<thead>
<tr>
<th>商品名</th>
<th>商品編號</th>
<th>商品產地</th>
<th>操作系統</th>
</tr>
</thead>
<tbody>
<tr>
<td>華為 mate Pro40 <a href="https://item.jd.com/100007299145.html" target="_blank"><img
src="../images/華為matePro4.jpg" width="200"></a></td>
<td>100007299145</td>
<td>中國大陸</td>
<td>鴻蒙操作系統</td>
</tr>
<tr>
<td>小米（MI）小米9 Pro 5G<a href="https://item.jd.com/57631478891.html" target="_blank"><img
src="../images/小米9Pro.jpg" width="200"></a></td>
<td>57631478891</td>
<td>中國大陸</td>
<td>安卓操作系統</td>
</tr>
<tr>
<td>AppleiPhone 11<a href="https://item.jd.com/100008348508.html" target="_blank"><img
src="../images/Apple_iphone11.jpg" width="200"></a></td>
<td><a href="10-html_AppleiPhone11.html" target="_blank">100008348508</a></td>
<td>中國大陸</td>
<td>IOS操作系統</td>
</tr>
</tbody>
</table>
<a href="#home">
<h3>返回頂部</h3>
</a>
</body>
</html>
表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AppleiPhone11性能信息</title>
</head>
<body>
<h3>主體</h3>
<p>
<table align="left" border="1" cellpadding="0" cellspacing="0" width=400 height="100">
<tr>
<td>入網型號</td>
<td>A2217</td>
</tr>
<tr>
<td>產品名稱</td>
<td>iPhone 11 Pro</td>
</tr>
<tr>
<td>上市年份</td>
<td>2019年</td>
</tr>
<tr>
<td>上市年份</td>
<td>9月</td>
</tr>
</table>
</p>
<br /><br /><br /><br /><br />
<h3>基本信息</h3>
<p>
<table align="left" border="1" cellpadding="0" cellspacing="0" width=400 height="100">
<tr>
<td>機身長度（mm）</td>
<td>144</td>
</tr>
<tr>
<td>機身重量（g）</td>
<td>188</td>
</tr>
<tr>
<td>機身材質工藝</td>
<td>亞光質感玻璃 搭配不鏽鋼設計</td>
</tr>
<tr>
<td>機身寬度（mm）</td>
<td>74.1</td>
</tr>
<tr>
<td>機身材質分類</td>
<td>其他</td>
</tr>
<tr>
<td>機身厚度（mm）</td>
<td>8.1</td>
</tr>
<tr>
<td>運營商標誌或內容</td>
<td>無</td>
</tr>
</table>
</p>
<br /><br /><br /><br /><br />
</body>
</html>
十二，標簽 - 表格合併單元格
定義和用法
使用表格中，有時候會用到單元格合併的情況。需要我們合併有用的單元格並刪除沒用的單元格。才能實現web中的單元格合併。跟Excel不同必須刪除沒用的單元格才可以。 合併單元格三步走 1. 先確定時跨行(colspan)還是跨列(rowspan) 2. 找到目標單元格.協商合併語句 3. 刪除多餘的單元格（這裡是個考驗邏輯的地方）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格合併單元格</title>
</head>
<body>
<!-- 合併單元格三步走
1. 先確定時跨行(colspan)還是跨列(rowspan)
2. 找到目標單元格.協商合併語句
3. 刪除多餘的單元格（這裡是個考驗邏輯的地方） -->
<table align="center" border="1" cellpadding="0" cellspacing="2" width=1000 height = 400>
<thead>
<tr>
<td colspan="5" align="center"><h1>個人簡歷</h1></td>
</tr>
</thead>
<tbody>
<tr>
<td align="center">姓名:</td>
<td align="center" width=300></td>
<td align="center">性別:</td>
<td align="center" width=300></td>
<td rowspan="4" align="center" width=150>照片</td>
</tr>
<tr>
<td align="center">婚姻狀況:</td>
<td align="center"></td>
<td align="center">出生年月：</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">民族：</td>
<td align="center"></td>
<td align="center">政治面貌：</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">身高：</td>
<td align="center"></td>
<td align="center">學歷：</td>
<td align="center"></td>
</tr>
</tbody>
</table>
</body>
</html>
十三 - 列表 - 無序列表
定義和用法
1. 列表本身主要是用來佈局用的。無序列表顧名思義裡面的元素是無序排列的也是開髮網頁中用的最多的 2. 無序列表<ul></ul>中只能包含<li></li>不能有任何的文字和其他標簽 3. <li></li>是個容器可以存放任何東西。文字和其他任何標簽都可以使用<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>無序列表</title>
</head>
<body>
<!-- 無序列表的特點：
1. 列表本身主要是用來佈局用的。無序列表顧名思義裡面的元素是無序排列的
也是開髮網頁中用的最多的
2. 無序列表<ul></ul>中只能包含<li></li>不能有任何的文字和其他標簽
3. <li></li>是個容器可以存放任何東西。文字和其他任何標簽都可以使用 -->
<h3>我最喜歡吃的食物有：</h3>
<ul>
<li>榴蓮</li>
<li>西瓜</li>
<li>海鮮</li>
<li>火鍋</li>
<li>泰國菜</li>
</ul>
<!-- 很多網站中圖像，包括分類的選項都是通過list無序列表來做的。非常的重要
後期可以通過CSS來進行擴展，使我們的界面更加的漂亮美觀！ -->
</body>
</html>
十四 - 列表 - 有序列表
定義和用法
1. 標簽為<ol></ol>，中間也是只能放標簽<li></li>其他任何標簽跟文字不允許使用 2. 有序列表使用的場景在於.各個元素間必須按照有序的規範排列。例如：排行，銷售名次等等場景 3. 同無序列表一樣。有序列表中的屬性後期可以通過CSS來設置<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<!-- 有序列表特點：
1. 標簽為<ol></ol>，中間也是只能放標簽<li></li>其他任何標簽跟文字不允許使用
2. 有序列表使用的場景在於.各個元素間必須按照有序的規範排列。例如：排行，銷售名次等等場景
3. 同無序列表一樣。有序列表中的屬性後期可以通過CSS來設置-->
<h2>王者榮耀英雄出場排行榜</h2>
<ol>
<li>裴虔虎 20000次</li>
<li>孫尚香 16000次</li>
<li>李白 10000次</li>
<li>上官婉兒 8000次</li>
<li>張飛 6000次</li>
<li>韓信 5000次</li>
</ol>
</body>
</html>
十五 - 列表 - 自定義列表
定義和用法
1. 一般大型網站的最下方會有一些關註我們，保修與退貨，購物相關等列表格式的功能。這些都是通過自定義列表來做的 2. 其特點是有表頭，以及表頭外的選項都是圍繞表頭展開的 3. 標簽<dl></dl>中包含<dt></dt>及<dd></dd>而<dt>為表頭<dd>都是圍繞<dt>展開的<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定義列表</title>
</head>
<body>
<!-- 自定義列表使用場景
1. 一般大型網站的最下方會有一些關註我們，保修與退貨，購物相關等列表格式的功能。這些都是通過自定義列表來做的
2. 其特點是有表頭，以及表頭外的選項都是圍繞表頭展開的
3. 標簽<dl></dl>中包含<dt></dt>及<dd></dd>而<dt>為表頭<dd>都是圍繞<dt>展開的 -->
<dl>
<dt>購物相關</dt>
<dd>購物指南</dd>
<dd>配送方式</dd>
<dd>支付方式</dd>
<dd>常見問題</dd>
</dl>
<dl>
<dt>關於我們</dt>
<dd>公司介紹</dd>
<dd>華為商城簡介</dd>
<dd>華為線下門店</dd>
<dd>誠徵英才</dd>
<dd>意見反饋</dd>
</dl>
</body>
</html>
十六 - 表單域與表單元素 <input type="跟具體參數">
定義和用法
表單域使用場景 1.一般表單是用來收集用戶信息使用的，例如註冊信息 2.表單域就是把一些表單控制項及表單信息框起來把信息提交給後臺伺服器的領域 3.標簽為<from></from>關鍵字有action,method,name 4.action把數據傳送給伺服器的鏈接（腳本），method有POST跟GET方法, name就是給當前表單域起一個名字 表單元素就是表單控制項<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單域及表單元素的概念</title>
</head>
<body>
<!-- 表單域使用場景
1.一般表單是用來收集用戶信息使用的，例如註冊信息
2.表單域就是把一些表單控制項及表單信息框起來把信息提交給後臺伺服器的領域
3.標簽為<from></from>關鍵字有action,method,name
4.action把數據傳送給伺服器的鏈接（腳本），method有POST跟GET方法, name就是給當前表單域起一個名字
-->
<!-- 表單元素就是表單控制項，詳情如下 -->
<form action="10-html_AppleiPhone11.html" method="GET" name="first_form">
用戶名: <input type="text" name ="username" value="請輸入用戶名"> <br />
密 碼 ：<input type="password" name = "user_password"> <br />
<!-- 不會提交申請，後期結合javascript來使用 -->
<input type="button" value="獲取手機驗證碼" /> <br />
<!-- 必須有相同的name名才能實現多選1 -->
性別 ：男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女"/> <br />
<!-- 上面的代碼簡單演示了覆選框的使用，可以選中任意項。
特別說明：通常情況下，利用 name 屬性將表單數據提交到後臺。
覆選框還有其他屬性，下麵分別做一下介紹：
（1）.value：規定覆選框的value屬性值，它會被髮送到伺服器。
（2）.checked：規定覆選框處於選中狀態。
（2）.required（HTML5）：規定指定的覆選框必須被選中。
（3）.form（HTML5）：規定覆選框所屬的一個或多個表單。
（4）.autofocus（HTML5）：規定在頁面載入時，指定覆選框自動地獲得焦點。
（5）.disabled：規定覆選框不可用。-->
出生城市 ：上 海<input type="checkbox" checked name="city" value="0"> 北京<input type="checkbox" name="city"
value="1"> 深圳<input type="checkbox" name="city" value="2"> <br />
<!-- 詳情參照:https://blog.csdn.net/hyd19931002/article/details/78320503 -->
<input id="fileID1" type="file" multiple="multiple" name="file" /> <br />
<!-- <input type="file" /> <br /> -->
<br />
<!-- submit把數據提交給後臺伺服器 reset顧名思義重置用戶輸入 -->
<input type="submit" value="提交申請" />
<input type="reset" value="重新設置" />
</form>
</body>
</html>
十七 - label標簽
定義和用法
Label標簽是增強用戶體驗的。當我們要選中某一個選項時，不需要點中選框 只需要選中選框附近的字體就可以選中選框了 語法: <label for = "自定義名稱">包含的字體</label> <input type="checkbox" name="city" value="1" id = "自定義的名稱"> 一定兩個名稱要一致。不然不能交互<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label標簽的用法</label></title>
</head>
<body>
<!-- Label標簽是增強用戶體驗的。當我們要選中某一個選項時，不需要點中選框
只需要選中選框附近的字體就可以選中選框了
語法: <label for = "自定義名稱">包含的字體</label>
<input type="checkbox" name="city" value="1" id = "自定義的名稱">
一定兩個名稱要一致。不然不能交互
-->
<form>
性別 ：<label for="man">男</label> <input type="radio" name="sex" value="男" id="man" /> <label
for="nv">女</label><input type="radio" name="sex" value="女" id="nv" /> <br />
<br />
出生城市 ：<label for="shanghai">上 海</label><input type="checkbox" checked name="city" value="0" id="shanghai">
<label for="beijing">北京</label><input type="checkbox" name="city" value="1" id="beijing"> <label
for="shenzhen">深圳</label><input type="checkbox" name="city" value="2" id="shenzhen"> <br />
<br />
<!-- <input type="reset" value="重新設置" /> -->
<input type="reset" value=" 重 置 " />
</form>
</body>
</html>
十八 - select標簽
定義和用法
其實就是下拉菜單。當我們為了節約空間給用戶提供一個選擇的時候可以用到這種方法。 例如我們填寫的籍貫<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select標簽的用法</title>
</head>
<body>
<!-- 當我們為了節約空間給用戶提供一個選擇的時候可以用到這種方法。
例如我們填寫的籍貫 -->
<form>
<strong>籍貫 :</strong>
<select>
<option >北京</option>
<option>上海</option>
<option>廣東</option>
<option>雲南</option>
<option selected>山東</option>
<option>東北</option>
<option>江蘇</option>
</select>
</form>
</body>
</html>
十九 - textarea標簽
定義和用法
使用場景：主要用於用戶反饋，簡歷中自我介紹，電子錶單等場景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea的具體用法</title>
</head>
<body>
<!-- textarea主要運用場景:
1. 用戶反饋
2. 簡歷中的自我介紹，及工作描述 等場景 -->
<form action="17-html_select標簽.html" method="GET" target="_blank">
<h2>王者榮耀 舉報視窗：</h2>
<label for="guaji">掛機</label><input type="checkbox" name="guaji" value="0" id="guaji">
<label for="maren">言語辱罵</label><input type="checkbox" name="maren value=" 0" id="maren>
<label for=" jujue">拒絕參團</label><input type="checkbox" name="jujue" value="0" id="jujue">
<label for="raoluan">擾亂軍心</label><input type="checkbox" name="raoluan" value="0" id="raoluan">
<br />
<br />
<textarea cols="100" rows="3">如有其他情況，請填寫
</textarea>
<br />
<input type="submit">
</form>
</body>
</html>
二十 - 以上綜合案例演示
結合之前的標簽方法完成綜合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>綜合案例演示</title>
</head>
<body>
<h2>青春不常在，抓緊談戀愛</h2>
<table width=1000 border="0">
<tr>
<td>性別：</td>
<td><input type="radio" name="sex" id="nan" /><label for="nan"><img src="../images/boy.jpg">
男 </label>
<input type="radio" name="sex" id="nv" /><label for="nv"><img src="../images/gril.jpg"> 女</label>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option>--請選擇年份--</option>
<option>1980年</option>
<option>1981年</option>
<option>1982年</option>
<option>1983年</option>
<option>1984年</option>
<option>1985年</option>
<option>1986年</option>
<option>1987年</option>
<option>1988年</option>
<option>1989年</option>
<option>1990年</option>
<option>1991年</option>
<option>1992年</option>
<option>1993年</option>
<option>1994年</option>
<option>1995年</option>
<option>1996年</option>
<option>1997年</option>
<option>1998年</option>
<option>1999年</option>
<option>2000年</option>
</select>
<select>
<option>--請選擇月份--</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>6月</option>
<option>7月</option>
<option>8月</option>
<option>9月</option>
<option>10月</option>
<option>11月</option>
<option>12月</option>
</select>
<select>
<option>--請選擇日期--</option>
<option>1日</option>
<option>2日</option>
<option>3日</option>
<option>4日</option>
<option>5日</option>
<option>6日</option>
<option>7日</option>
<option>8日</option>
<option>9日</option>
<option>10日</option>
<option>11日</option>
<option>12日</option>
<option>13日</option>
<option>14日</option>
<option>15日</option>
<option>16日</option>
<option>17日</option>
<option>18日</option>
<option>19日</option>
<option>20日</option>
<option>21日</option>
<option>22日</option>
<option>23日</option>
<option>24日</option>
<option>25日</option>
<option>26日</option>
<option>27日</option>
<option>28日</option>
<option>29日</option>
<option>30日</option>
<option>31日</option>
</select>
</td>
</tr>
<tr>
<td>所在地區:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>婚姻狀況:</td>
<td><input type="radio" name="hunyin" id="weihun"><label for="weihun">未婚</label>
<input type="radio" name="hunyin" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="hunyin" id="sangou"><label for="sangou">喪偶</label>
</td>
</tr>
<tr>
<td>學歷:</td>
<td><select>
<option>中專</option>
<option>大專</option>
<option>本科</option>
<option>碩士</option>
<option>博士</option>
<option>博士後</option>
</select>
</td>
</tr>
<tr>
<td>喜歡的類型:</td>
<td><input type="checkbox" name="liketype" value="0" id="wumei" /><label for="wumei">嫵媚的</label>
<input type="checkbox" name="liketype" value="1" id="keai" /><label for="keai">可愛的</label>
<input type="checkbox" name="liketype" value="2" id="tianmei" /><label for="tianmei">甜美的</label>
<input type="checkbox" name="liketype" value="3" id="xiaoxianrou" /><label for="xiaoxianrou">小鮮肉</label>
<input type="checkbox" name="liketype" value="4" id="laorarou" /><label for="laorarou">老腊肉</label>
<input type="checkbox" name="liketype" value="5" id="dashukong" /><label for="dashukong">大叔控</label>
<input type="checkbox" name="liketype" value="6" id="douxihuan" /><label for="douxihuan">都喜歡</label>
</td>
</tr>
<tr>
<td>自我介紹：</td>
<td><textarea cols="100" rows="5">自我介紹
</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="免費註冊"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" checked="checked">我同意註冊條款和會員加入標準
</td>
</tr>
<tr>
<td></td>
<td><ins><a href="https://www.jiayuan.com/" target="_blank">我是會員，立即登錄</ins>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承諾</h3>
<ul>
<li>年滿18歲，單身</li>
<li>抱著嚴肅的態度</li>
<li>真誠尋找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
總結：HTML5就像沒有羽毛的小鳥，只有基礎架構沒有其他漂亮的外觀。而後期的CSS及javascript仿佛就是小鳥的羽毛及動態飛行等行為。可以更加豐富美化我們的web page
