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>