1. 初識(shí) HTML
- HyperTextMarkupLanguage（超文本標(biāo)記語(yǔ)言）
- 超文本包括：文字委刘、圖片、音頻鹰椒、視頻锡移、動(dòng)畫(huà)。
- HTML5的優(yōu)勢(shì)
- 世界知名瀏覽器廠商對(duì)HTML5的支持
- 市場(chǎng)的需求
- 跨平臺(tái)
- W3C標(biāo)準(zhǔn)
- W3C
- 萬(wàn)維網(wǎng)聯(lián)盟 （World Wide Web Consortium） 漆际。
- 成立于1994年罩抗，Web領(lǐng)域最權(quán)威和最具影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。
- https://www.w3.org/
- https://www.chinaw3c.org/
- W3C標(biāo)準(zhǔn)包括
- 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言(HTML灿椅、XML)
- 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言(CSS)
- 行為標(biāo)準(zhǔn)語(yǔ)言(DOM、ECMAScript)
- W3C
- 常見(jiàn)IDE
- 記事本
- Dreamweaver
- IDEA
- WebStorm
- ……
- < body >钞支、< /body>等成對(duì)的標(biāo)簽茫蛹，分別叫做 開(kāi)放標(biāo)簽和 閉合標(biāo)簽。
- 單獨(dú)呈現(xiàn)的標(biāo)簽（空元素）烁挟，如< hr/ >婴洼，意為用/來(lái)關(guān)閉空元素。
- html注釋?zhuān)?lt; !–注釋內(nèi)容–>
<!--DOCTYPE：告訴瀏覽器使用什么規(guī)范（默認(rèn)是html）-->
<!DOCTYPE html>
<!--語(yǔ)言 zh中文 en英文-->
<html lang="en">
<!-- head 標(biāo)簽代表網(wǎng)頁(yè)頭部-->
<head>
<!-- meta 描述性標(biāo)簽撼嗓，表示用來(lái)描述網(wǎng)站的一些信息-->
<!-- 一般用來(lái)做 SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,關(guān)鍵字">
<meta name="description" content="學(xué)前端Html5">
<!--網(wǎng)站標(biāo)題-->
<title>我的第一個(gè)網(wǎng)頁(yè)</title>
</head>
<!-- body代表主體-->
<body>
Hello HTML5!
</body>
</html>
2. 網(wǎng)頁(yè)基本標(biāo)簽
- 標(biāo)題標(biāo)簽
- 段落標(biāo)簽
- 換行標(biāo)簽
- 水平線標(biāo)簽
- 字體樣式標(biāo)簽
- 注釋和特殊符號(hào)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標(biāo)簽</title>
</head>
<body>
<!--標(biāo)題標(biāo)簽 -->
<h1>一級(jí)標(biāo)簽</h1>
<h2>二級(jí)標(biāo)簽</h2>
<h3>三級(jí)標(biāo)簽</h3>
<h4>四級(jí)標(biāo)簽</h4>
<h5>五級(jí)標(biāo)簽</h5>
<h6>六級(jí)標(biāo)簽</h6>
<!--段落標(biāo)簽-->
<p>p換行1</p>
<p>p換行2</p>
<!--水平線標(biāo)簽-->
<hr/>
<!--換行標(biāo)簽-->
換行1 <br/>
換行2 <br/>
<!--換行標(biāo)簽比較緊湊柬采，段落標(biāo)簽有明顯段間距-->
<!--粗體 斜體-->
<h1>字體樣式標(biāo)簽</h1>
粗體:<strong>I am CSS. </strong><br/>
斜體:<em>HTML5 and CSS3 </em><br/>
<!--特殊符號(hào)-->
空格:1 2 3 4<br/>
空格:1 2 3 4<br/>
大于號(hào):><br/>
小于號(hào):<<br/>
版權(quán)符號(hào):©<br/>
<!--特殊符號(hào)記憶：'&'開(kāi)頭;結(jié)尾，只要在idea中&敲出后就有提示-->
</body>
</html>
3. 圖像且警、超鏈接粉捻、網(wǎng)頁(yè)布局
- 圖像標(biāo)簽
<img src="path" alt="text" title="text" width="x" height="y">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像標(biāo)簽</title>
</head>
<body>
<!--img
src：圖片地址（必填）
相對(duì)地址(推薦使用)，絕對(duì)地址
../ --上級(jí)地址
alt：在圖片加載失敗的時(shí)候斑芜，就會(huì)用文字代替
title：鼠標(biāo)懸停在圖片上時(shí)肩刃，所顯示的名字
width height：圖片的高和寬
-->
<img src="../resources/image/01.jpg" alt="風(fēng)景圖片" title="懸停文字" width="200" height="200">
</body>
</html>
- 鏈接標(biāo)簽
- href： 必填，表示要跳轉(zhuǎn)到那個(gè)頁(yè)面；
-
target：表示窗口在哪里打開(kāi)盈包；
- _blank：在新標(biāo)簽中打開(kāi)沸呐；
- _self： 在自己的網(wǎng)頁(yè)中打開(kāi)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標(biāo)簽</title>
</head>
<body>
<!-- a 標(biāo)簽
href：跳轉(zhuǎn)頁(yè)面的地址
a 標(biāo)簽內(nèi)文字：即顯示的文字
可以把圖片放在a標(biāo)簽內(nèi)呢燥，點(diǎn)擊圖片跳轉(zhuǎn)網(wǎng)頁(yè)
target：表示在哪打開(kāi)新網(wǎng)頁(yè)
_self：當(dāng)前標(biāo)簽打開(kāi)
_blank：新的頁(yè)面中打開(kāi)
-->
<a target="_blank" title="懸停文字">點(diǎn)擊跳轉(zhuǎn)百度</a>
<br/>
<!-- 圖片鏈接-->
<a href="003.圖像標(biāo)簽.html">
<img src="../resources/image/01.jpg" alt="風(fēng)景圖片" title="懸停文字" width="200" height="200">
</a>
<!--錨鏈接
1.需要一個(gè)標(biāo)記錨
2.跳轉(zhuǎn)到標(biāo)記
#頁(yè)面內(nèi)跳轉(zhuǎn)
-->
<a name="top"></a>
<br/>
<!--可以在網(wǎng)址后添加#號(hào)跳到對(duì)應(yīng)網(wǎng)站的對(duì)應(yīng)位置-->
<a >百度底部</a> <br/>
<!--功能性鏈接
郵箱鏈接：mailto
qq鏈接
-->
<a href="mailto:xxxxx@qq.com">點(diǎn)擊聯(lián)系我</a>
<a target="_blank"
/>
<a target="_blank" >
<img src="http://wpa.qq.com/pa?p=2:88888888:52" alt="有事您Q我" title="有事您Q我"/>
</a>
<img src="../resources/image/01.jpg" alt="風(fēng)景圖片" title="懸停文字" width="200" height="2000">
<a href="#top">回到頂部</a>
</body>
</html>
-
行內(nèi)元素和塊元素
-
塊元素：無(wú)論內(nèi)容多少崭添，該元素獨(dú)占一行。
<p></p><hr/> <h1>...<h6> -
行內(nèi)元素：內(nèi)容撐開(kāi)寬度叛氨，左右都是行內(nèi)元素的可以排在一行呼渣。
<a><strong><em>
-
4. 列表、表格力试、媒體元素
1. 列表
什么是列表
- 列表：就是信息資源的一種展示形式徙邻。它可以使信息結(jié)構(gòu)化和條理化，并以列表的樣式顯示出來(lái)畸裳，以便瀏覽者能更快捷地獲得相應(yīng)的信息缰犁。
列表的分類(lèi)
- 無(wú)序列表
- 有序列表
- 自定義列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表學(xué)習(xí)</title>
</head>
<body>
<!--
有序列表
應(yīng)用范圍:試卷,問(wèn)答……
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>前端</li>
<li>運(yùn)維</li>
<li>C/C++</li>
<li>Android</li>
</ol>
<hr/>
<!--
無(wú)序列表
應(yīng)用范圍:導(dǎo)航,側(cè)邊欄……
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>前端</li>
<li>運(yùn)維</li>
<li>C/C++</li>
<li>Android</li>
</ul>
<hr/>
<!--
自定義列表
dl:標(biāo)簽
dt:列表名稱(chēng)
dd:列表內(nèi)容
應(yīng)用：網(wǎng)站底部
-->
<dl>
<dt>學(xué)科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>前端</dd>
<dd>運(yùn)維</dd>
<dd>C/C++</dd>
<dd>Android</dd>
</dl>
</body>
</html>
2. 表格
為什么使用表格：
- 簡(jiǎn)單通用
- 結(jié)構(gòu)穩(wěn)定
表格的基本結(jié)構(gòu)：
- 單元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格學(xué)習(xí)</title>
</head>
<body>
<!--
表格：table
行：tr
列：td
跨列：colspan
跨行：rowspan
跨行或跨列后，需要將多余的行怖糊、列刪除
-->
<table border="1px">
<tr><!--colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr><!--rowspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
3. 媒體元素
視頻和音頻
- 視頻：video
- 音頻：audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素的學(xué)習(xí)</title>
</head>
<body>
<!--
視頻
src：資源路徑
controls：控制面板
autoplay：自動(dòng)播放
-->
<video src="../resources/video/002.mp4" controls autoplay width="300"></video>
<!--音頻-->
<audio src="../resources/video/001.mp3" controls autoplay></audio>
</body>
</html>
頁(yè)面結(jié)構(gòu)
| 元素名 | 描述 |
|---|---|
| header | 標(biāo)題頭部區(qū)域的內(nèi)容（用于頁(yè)面或者頁(yè)面中的一塊區(qū)域） |
| footer | 標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面的一塊區(qū)域） |
| section | Web 頁(yè)面中的一塊獨(dú)立區(qū)域 |
| article | 獨(dú)立的文章內(nèi)容 |
| aside | 相關(guān)內(nèi)容或應(yīng)用 |
| nav | 導(dǎo)航類(lèi)輔助內(nèi)容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁(yè)面結(jié)構(gòu)</title>
</head>
<body>
<!--頁(yè)面結(jié)構(gòu)-->
<head>
<h2>頁(yè)面頭部</h2>
</head>
<section>
<h2>頁(yè)面主體</h2>
</section>
<footer>
<h2>頁(yè)面腳部</h2>
</footer>
</body>
</html>
iframe 內(nèi)聯(lián)框架
- ifram 標(biāo)簽帅容，必須要有 src 屬性即引用頁(yè)面的地址。
- 給標(biāo)簽加上 name 屬性后伍伤，可以做 a 標(biāo)簽的 target 屬性并徘，即在內(nèi)聯(lián)窗口中打開(kāi)鏈接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe 內(nèi)聯(lián)框架</title>
</head>
<body>
<!--
iframe 內(nèi)聯(lián)框架
src：地址
w-h：寬度扰魂、高度
name：框架標(biāo)識(shí)名
-->
<iframe src="地址"></iframe>
<hr/>
<iframe src="" name="mainFrame" width="300px" height="300"></iframe>
<!--通過(guò) target 將鏈接內(nèi)容載入到 iframe 內(nèi)聯(lián)框架-->
<a href="001.第一個(gè)網(wǎng)頁(yè).html" target="mainFrame">點(diǎn)擊跳轉(zhuǎn)</a>
</body>
</html>
5. 表單及表單應(yīng)用
| 標(biāo)簽 | 說(shuō)明 |
|---|---|
| input | 大部分表單元素對(duì)應(yīng)的標(biāo)簽有 text麦乞、password、checkbox劝评、radio姐直、submit、reset蒋畜、file声畏、hidden、image 和 button姻成，默認(rèn)為 text插龄，可以提交用戶名、密碼等 |
| select | 下拉選擇框 |
| textarea | 文本域 |
- from 標(biāo)簽科展，action 屬性均牢，為所提交的目的地址，method 選擇提交方式才睹，可以選擇使用 post 或者 get 方式提交膨处。
- get 效率高见秤，但在 url 中可以看到提交的內(nèi)容，不安全真椿，不能提交大文件鹃答；
- post 比較安全，且可以提交大文件突硝。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
form表單
action：表單提交的動(dòng)作测摔，可以是交給一個(gè)網(wǎng)址，也可以是交給一個(gè)請(qǐng)求處理地址
method：post / get 請(qǐng)求方式
get方式提交：我們可以在 url 中看到我們提交的信息解恰，不安全锋八，高效
post：比較安全，可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="post">
<!--文本輸入框:input type="text" -->
<p>名字：<input type="text" name="username"></p>
<!--密碼框:input type="pwd" -->
<p>密碼：<input type="password" name="password"></p>
<p>
<input type="submit"> <!--提交-->
<input type="reset"> <!--重置-->
</p>
</form>
</body>
</html>
- get 方式提交
文本框和單選框
| 屬性 | 說(shuō)明 |
|---|---|
| type | 指定元素的類(lèi)型护盈。text挟纱、password、checkbox腐宋、radio紊服、submit、reset胸竞、file欺嗤、hidden、image 和 button卫枝，默認(rèn)為 text煎饼。 |
| name | 指定表單元素的名稱(chēng)（提交時(shí)所對(duì)應(yīng)的 key）。 |
| value | 元素的初始值校赤，radio 必須提供吆玖。 |
| size | 指定表單元素的初始寬度。當(dāng) type 為 text 或者 password 時(shí)马篮，以字符為單位沾乘；其他 type 以像素為單位。 |
| maxlength | type 為 text 或者 password 時(shí)积蔚，輸入的最大字符數(shù)。 |
| check | type 為 radio 或者 checkbox 時(shí)烦周，指定按鈕是否被選中尽爆。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
form 表單
action：表單提交的動(dòng)作，可以是交給一個(gè)網(wǎng)址读慎，也可以是交給一個(gè)請(qǐng)求處理地址
method：post / get 請(qǐng)求方式
get 方式提交：我們可以在ur1中看到我們提交的信息漱贱，不安全，高效
post：比較安全夭委，可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="post">
<!--
文本輸入框：input type="text"
value="前端"：默認(rèn)初始值
maxlength="8"：最長(zhǎng)能寫(xiě)幾個(gè)字符
size="30"：文本框的長(zhǎng)度
-->
<p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
<!--
密碼框：input type="password"
-->
<p>密碼：<input type="password" name="password"></p>
<!--
單選框標(biāo)簽：input type="radio"
value：?jiǎn)芜x框的值
name：表示組
-->
<p>性別:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<input type="submit"> <!--提交-->
<input type="reset"> <!--重置-->
</p>
</form>
</body>
</html>
按鈕和多選框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
form 表單
action：表單提交的動(dòng)作幅狮，可以是交給一個(gè)網(wǎng)址，也可以是交給一個(gè)請(qǐng)求處理地址
method：post / get 請(qǐng)求方式
get 方式提交：我們可以在ur1中看到我們提交的信息，不安全崇摄，高效
post：比較安全擎值，可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
<!--
文本輸入框：input type="text"
value="前端"：默認(rèn)初始值
maxlength="8"：最長(zhǎng)能寫(xiě)幾個(gè)字符
size="30"：文本框的長(zhǎng)度
-->
<p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
<!--
密碼框：input type="password"
-->
<p>密碼：<input type="password" name="password"></p>
<!--
單選框標(biāo)簽：input type="radio"
value：?jiǎn)芜x框的值
name：表示組
-->
<p>性別:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--
多選框:input type="checkbox"
-->
<p>愛(ài)好:
<input type="checkbox" value="sleep" name="hobby">睡覺(jué)
<input type="checkbox" value="code" name="hobby">敲代碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戲
</p>
<!--
按鈕:
input type="button"：普通按鈕
input type="image"：圖像按鈕（可以提交頁(yè)面）
input type="submit"：提交按鈕
input type="reset"：重置按鈕
-->
<p>
<input type="button" name="btn" value="按鈕測(cè)試">
<input type="image" src="../resources/image/01.jpg" width="200px" height="200px">
</p>
<p>
<input type="submit"> <!--提交-->
<input type="reset" value="清空表單"> <!--重置-->
</p>
</form>
</body>
</html>
列表文本框和文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
form 表單
action：表單提交的動(dòng)作，可以是交給一個(gè)網(wǎng)址逐抑，也可以是交給一個(gè)請(qǐng)求處理地址
method：post / get 請(qǐng)求方式
get 方式提交：我們可以在ur1中看到我們提交的信息鸠儿，不安全，高效
post：比較安全厕氨，可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
<!--
文本輸入框：input type="text"
value="前端"：默認(rèn)初始值
maxlength="8"：最長(zhǎng)能寫(xiě)幾個(gè)字符
size="30"：文本框的長(zhǎng)度
-->
<p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
<!--
密碼框：input type="password"
-->
<p>密碼：<input type="password" name="password"></p>
<!--
單選框標(biāo)簽：input type="radio"
value：?jiǎn)芜x框的值
name：表示組
checked：默認(rèn)選擇
-->
<p>性別:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!--
多選框：input type="checkbox"
checked：默認(rèn)選擇
-->
<p>愛(ài)好:
<input type="checkbox" value="sleep" name="hobby">睡覺(jué)
<input type="checkbox" value="code" name="hobby" checked>敲代碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戲
</p>
<!--
按鈕:
input type="button"：普通按鈕
input type="image"：圖像按鈕（可以提交頁(yè)面）
input type="submit"：提交按鈕
input type="reset"：重置按鈕
-->
<p>
<input type="button" name="btn" value="按鈕測(cè)試">
<!-- <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
</p>
<!--
下拉框,列表框
selected：默認(rèn)選擇
-->
<p>國(guó)家:
<select name="列表名稱(chēng)">
<option value="China" selected>中國(guó)</option>
<option value="USA">美國(guó)</option>
<option value="Russia">俄羅斯</option>
<option value="UK">英國(guó)</option>
<option value="France">法國(guó)</option>
</select>
</p>
<!--
文本域
textarea name="textarea"
cols="40"：列
rows="10"：行
-->
<p>反饋:
<textarea name="textarea" cols="40" rows="10">文本內(nèi)容</textarea>
</p>
<!--
文件域
input type="file"
name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上傳">
</p>
<p>
<input type="submit"> <!--提交-->
<input type="reset" value="清空表單"> <!--重置-->
</p>
</form>
</body>
</html>
搜索框滑塊和簡(jiǎn)單驗(yàn)證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
form 表單
action：表單提交的動(dòng)作进每，可以是交給一個(gè)網(wǎng)址，也可以是交給一個(gè)請(qǐng)求處理地址
method：post / get 請(qǐng)求方式
get 方式提交：我們可以在ur1中看到我們提交的信息命斧，不安全田晚，高效
post：比較安全，可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
<!--
文本輸入框：input type="text"
value="前端"：默認(rèn)初始值
maxlength="8"：最長(zhǎng)能寫(xiě)幾個(gè)字符
size="30"：文本框的長(zhǎng)度
-->
<p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
<!--
密碼框：input type="password"
-->
<p>密碼：<input type="password" name="password"></p>
<!--
單選框標(biāo)簽：input type="radio"
value：?jiǎn)芜x框的值
name：表示組
checked：默認(rèn)選擇
-->
<p>性別:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!--
多選框：input type="checkbox"
checked：默認(rèn)選擇
-->
<p>愛(ài)好:
<input type="checkbox" value="sleep" name="hobby">睡覺(jué)
<input type="checkbox" value="code" name="hobby" checked>敲代碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戲
</p>
<!--
按鈕:
input type="button"：普通按鈕
input type="image"：圖像按鈕（可以提交頁(yè)面）
input type="submit"：提交按鈕
input type="reset"：重置按鈕
-->
<p>
<input type="button" name="btn" value="按鈕測(cè)試">
<!-- <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
</p>
<!--
下拉框,列表框
selected：默認(rèn)選擇
-->
<p>國(guó)家:
<select name="列表名稱(chēng)">
<option value="China" selected>中國(guó)</option>
<option value="USA">美國(guó)</option>
<option value="Russia">俄羅斯</option>
<option value="UK">英國(guó)</option>
<option value="France">法國(guó)</option>
</select>
</p>
<!--
文本域
textarea name="textarea"
cols="40"：列
rows="10"：行
-->
<p>反饋:
<textarea name="textarea" cols="40" rows="10">文本內(nèi)容</textarea>
</p>
<!--
文件域
input type="file"
name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上傳">
</p>
<!--
type="email"：（郵件）會(huì)簡(jiǎn)單驗(yàn)證是否是郵箱地址
type="url"：（url）會(huì)簡(jiǎn)單驗(yàn)證是否是網(wǎng)絡(luò)地址
type="number"：（number）數(shù)字驗(yàn)證
type="range"：滑塊
type="search"：搜索
-->
<p>
郵箱：<input type="email" name="email">
url：<input type="url">
</p>
<!--
數(shù)字驗(yàn)證
max：最大數(shù)量
min：最小數(shù)量
step（步長(zhǎng)）：每次點(diǎn)擊增加或減少的數(shù)量
-->
<p>
商品數(shù)量：<input type="number" name="數(shù)量" max="100" min="1" step="1">
</p>
<!--滑塊-->
<p>
音量：<input type="range" min="0" max="100" name="voice" step="2">
</p>
<!--搜索框-->
<p>
搜索：<input type="search">
</p>
<p>
<input type="submit"> <!--提交-->
<input type="reset" value="清空表單"> <!--重置-->
</p>
</form>
</body>
</html>
表單的應(yīng)用
| 屬性 | 說(shuō)明 |
|---|---|
| readonly | 只讀国葬，不可更改 |
| disable | 禁用 |
| hidden | 隱藏贤徒，雖然不可見(jiàn)但是會(huì)提交 |
| id | 標(biāo)識(shí)符，可以配合 label 的 for 屬性胃惜，增加鼠標(biāo)的可用性 |
| placehoder | text 文字域等輸入框內(nèi)的提示信息 |
| required | 不能為空 |
| patten | 正則表達(dá)式驗(yàn)證 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
form 表單
action：表單提交的動(dòng)作泞莉，可以是交給一個(gè)網(wǎng)址，也可以是交給一個(gè)請(qǐng)求處理地址
method：post / get 請(qǐng)求方式
get 方式提交：我們可以在ur1中看到我們提交的信息船殉，不安全鲫趁，高效
post：比較安全，可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
<!--
文本輸入框：input type="text"
value="前端"：默認(rèn)初始值
maxlength="8"：最長(zhǎng)能寫(xiě)幾個(gè)字符
size="30"：文本框的長(zhǎng)度
readonly：設(shè)置只讀（不能修改內(nèi)容）
hidden：隱藏
disabled：禁用
-->
<p>名字：<input type="text" name="username" value="name" maxlength="8" size="20" readonly></p>
<!--
密碼框：input type="password"
-->
<p>密碼：<input type="password" name="password" hidden value="123456"></p>
<!--
單選框標(biāo)簽：input type="radio"
value：?jiǎn)芜x框的值
name：表示組
checked：默認(rèn)選擇
-->
<p>性別:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex" disabled>女
</p>
<!--
多選框：input type="checkbox"
checked：默認(rèn)選擇
-->
<p>愛(ài)好:
<input type="checkbox" value="sleep" name="hobby">睡覺(jué)
<input type="checkbox" value="code" name="hobby" checked>敲代碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戲
</p>
<!--
按鈕:
input type="button"：普通按鈕
input type="image"：圖像按鈕（可以提交頁(yè)面）
input type="submit"：提交按鈕
input type="reset"：重置按鈕
-->
<p>
<input type="button" name="btn" value="按鈕測(cè)試">
<!-- <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
</p>
<!--
下拉框,列表框
selected：默認(rèn)選擇
-->
<p>國(guó)家:
<select name="列表名稱(chēng)">
<option value="China" selected>中國(guó)</option>
<option value="USA">美國(guó)</option>
<option value="Russia">俄羅斯</option>
<option value="UK">英國(guó)</option>
<option value="France">法國(guó)</option>
</select>
</p>
<!--
文本域
textarea name="textarea"
cols="40"：列
rows="10"：行
-->
<p>反饋:
<textarea name="textarea" cols="40" rows="10">文本內(nèi)容</textarea>
</p>
<!--
文件域
input type="file"
name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上傳">
</p>
<!--
type="email"：（郵件）會(huì)簡(jiǎn)單驗(yàn)證是否是郵箱地址
type="url"：（url）會(huì)簡(jiǎn)單驗(yàn)證是否是網(wǎng)絡(luò)地址
type="number"：（number）數(shù)字驗(yàn)證
type="range"：滑塊
type="search"：搜索
-->
<p>
郵箱：<input type="email" name="email">
url：<input type="url">
</p>
<!--
數(shù)字驗(yàn)證
max：最大數(shù)量
min：最小數(shù)量
step（步長(zhǎng)）：每次點(diǎn)擊增加或減少的數(shù)量
-->
<p>
商品數(shù)量：<input type="number" name="數(shù)量" max="100" min="1" step="1">
</p>
<!--滑塊-->
<p>
音量：<input type="range" min="0" max="100" name="voice" step="2">
</p>
<!--搜索框-->
<p>
搜索：<input type="search">
</p>
<!--增強(qiáng)鼠標(biāo)可用性-->
<p>
<label for="mark">點(diǎn)擊標(biāo)簽可選擇文本框：</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit" disabled> <!--提交-->
<input type="reset" value="清空表單"> <!--重置-->
</p>
</form>
</body>
</html>
6. 表單初級(jí)驗(yàn)證
- 常用方式
- placeholder：提示信息
- required：非空判斷
- pattern：正則表達(dá)式
<!--正則表達(dá)式-->
<p>自定義郵箱:
<input type="text" name="myEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
7. HTML5 總結(jié)
