【HTML5】2天搞定HTML5
一，簡介
HTML 指超文本標籤語言。javascript
HTML 是通向 WEB 技術世界的鑰匙。css
HTML 5 是下一代的 HTML。html
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。java
二，標籤 - 標題標籤 <h1 - h6>
定義和用法web
<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 元素會自動在其先後建立一些空白。瀏覽器會自動添加這些空間，您也能夠在樣式表中規定。iphone
<!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>
八，標籤 - 連接標籤 <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
相關文章
- 1. HTML5 2
- 2. HTML5遊戲2
- 3. HTML5+CSS3 2
- 4. HTML5基礎（2）
- 5. HTML5+CSS3 (2)
- 6. 【html5】html5學習筆記2--表單
- 7. HTML5定稿
- 8. HTML5 定位 geolocation
- 9. HTML5定位
- 10. 第182天：HTML5——地理定位
- 更多相關文章...
- • XSD 限定 / Facets - XML Schema 教程
- • 自定義TypeHandler - MyBatis教程
- • RxJava操作符（十）自定義操作符
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML5 2
- 2. HTML5遊戲2
- 3. HTML5+CSS3 2
- 4. HTML5基礎（2）
- 5. HTML5+CSS3 (2)
- 6. 【html5】html5學習筆記2--表單
- 7. HTML5定稿
- 8. HTML5 定位 geolocation
- 9. HTML5定位
- 10. 第182天：HTML5——地理定位