特性
1.語(yǔ)意特性,添加<header><header/><nav><nav>
等標(biāo)簽
2.多媒體, 用于媒介回放的 video 和 audio 元素
3.圖像效果,用于繪畫(huà)的 canvas 元素,svg元素等
4.離線 & 存儲(chǔ),對(duì)本地離線存儲(chǔ)的更好的支持,local Store,Cookies等
5.設(shè)備兼容特性 ,HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,
6.連接特性,更有效的連接工作效率,使得基于頁(yè)面的實(shí)時(shí)聊天,更快速的網(wǎng)頁(yè)游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能
7.性能與集成特性,HTML5會(huì)通過(guò)XMLHttpRequest2等技術(shù),幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作
新增標(biāo)簽
1.多媒體:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表單元素:<datalist> ,<output> , <keygen>
3.新文檔節(jié)段和綱要:<header>頁(yè)面頭部、<section>章節(jié)、<aside>邊欄、<article>文檔內(nèi)容、<footer>頁(yè)面底部、<section>章節(jié)、<aside>邊欄、<article>文檔內(nèi)容、<footer>頁(yè)面底部
等
使用html5shiv可以解決ie低版本不兼容的問(wèn)題,只需要在head中加上,當(dāng)版本低于IE9時(shí),瀏覽器會(huì)加載html5.js腳本,使得支持html5的新功能,也可以將腳本文件下載到本地
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>
localStorage.setItem(key,value)
如果key存在時(shí),更新valuelocalStorage.getItem(key)
如果key不存在返回nulllocalStorage.removeItem(key)
一旦刪除,key對(duì)應(yīng)的數(shù)據(jù)將會(huì)全部刪除localStorage.clear()
使用removeItem逐個(gè)刪除太麻煩,可以使用clear,執(zhí)行的后果是會(huì)清除所有l(wèi)ocalStorage對(duì)象保存的數(shù)據(jù)、Html的基本結(jié)構(gòu):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
網(wǎng)頁(yè)的文本、圖片等信息;
</body>
</html>
二、Head部分:用于表示網(wǎng)頁(yè)的元數(shù)據(jù)即描述網(wǎng)頁(yè)的基本信息
其常用標(biāo)簽及屬性有:
1、title標(biāo)簽:瀏覽器標(biāo)簽頁(yè)顯示的標(biāo)題
2、meta標(biāo)簽:其常用屬性
①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼:<meta charset="UTF-8">
常見(jiàn)的字符集編碼格式:
a.GB-2312:國(guó)標(biāo)碼,簡(jiǎn)體中文
b.GBK:擴(kuò)展的國(guó)標(biāo)碼
c.UTF-8:萬(wàn)國(guó)碼 Unicode 常用
②http-equiv屬性:將我們的信息寫(xiě)給瀏覽器看,讓瀏覽器按照這里面的要求執(zhí)行,可選屬性值:Content-Type(文檔類型) refresh(網(wǎng)頁(yè)定時(shí)刷新) set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。(http-equiv屬性只是表明需要設(shè)置哪一部分,具體的設(shè)置內(nèi)容,放到content屬性中)
③name屬性:使用方法同“http-equiv”。將我們的信息寫(xiě)給搜索引擎看
常用且需要掌握的屬性值:author(作者) keywords(網(wǎng)頁(yè)關(guān)鍵字) description(網(wǎng)頁(yè)描述) 這兩個(gè)屬性設(shè)置,網(wǎng)頁(yè)必不可少。
3、link標(biāo)簽:鏈接網(wǎng)頁(yè)圖標(biāo)(title前的小logo),其常用屬性有:
①rel屬性:聲明鏈接文件的類型,此處選icon
②type屬性:可以省略
③href屬性:表示圖片的路徑地址
三、body部分:網(wǎng)頁(yè)的文本、圖片等信息
標(biāo)簽的分類:
塊級(jí)標(biāo)簽:顯示為塊,前后隔一行(自動(dòng)換行)
行級(jí)標(biāo)簽:按行從左往右逐一顯示。
1、 常見(jiàn)的塊級(jí)標(biāo)簽:
①<h1></h1>......<h6><h6>:標(biāo)題標(biāo)簽,自動(dòng)加粗,h1最大,h6最小。
②<hr/>:水平線標(biāo)簽,添加一條水平線。
③<p></p>:段落標(biāo)簽,
④<br/>:換行標(biāo)簽,
⑤<blockquote/></blockquote>:引用標(biāo)簽,cite屬性,表明引用的來(lái)源,一般引用網(wǎng)址
瀏覽器默認(rèn)首行縮進(jìn)。
⑥<pre></pre>:預(yù)格式標(biāo)簽,用于重載代碼。瀏覽器默認(rèn)顯示樣式:1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補(bǔ)充】html 文件中空格的表示:
2、 基于布局的塊級(jí)標(biāo)簽
列表:無(wú)序列表、有序列表、定義列表
①有序列表:<ol></ol> 列表項(xiàng):<li></li>
②無(wú)序列表:<ul></ul> 列表項(xiàng):<li></li>
③定義列表(實(shí)現(xiàn)圖文混排):<dl></dl>
列表標(biāo)題:<dt>一般只有一項(xiàng)</dt>
列表描述項(xiàng):<dd>可以有很多項(xiàng)</dd>
3、組合標(biāo)簽:<figure></figure>用于顯示圖片及圖片標(biāo)題
他有兩個(gè)子標(biāo)簽:<img />圖片
<figcaption></figcaption>圖片的標(biāo)題
例如:<figure>
<img src="img/EZ.jpg" height="20%" width="20%" alt="探險(xiǎn)家"/>
<figcaption>探險(xiǎn)家 伊澤瑞爾</figcaption>
</figure>
4、分區(qū)標(biāo)簽:<div></div>
5、常見(jiàn)的行級(jí)標(biāo)簽
<1>span(文本):無(wú)實(shí)際意義,用于包裹某部分文字,修改特定樣式,例如:
這是<span style="color: red;font-size: 36px;">span</span>中的文字
img(圖片):其常用屬性:①src:表示引用圖片的地址。
路徑地址的寫(xiě)法:相對(duì)路徑:以當(dāng)前文件為最準(zhǔn),去尋找圖片地址
a、與文件處于同一層的圖片,直接寫(xiě)圖片名
b、圖片在當(dāng)前文件下一層:文件名/圖片名
c、圖片在當(dāng)前文件上一層:../圖片名
絕對(duì)路徑:file:///盤(pán)符:/文件夾/圖片名,但 是嚴(yán)禁使用
圖片網(wǎng)址:網(wǎng)絡(luò)上的圖片鏈接,但是一般不用
②height和width:圖片的高度和寬度。可以用CSS樣式代替
③title:圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字
④alt:當(dāng)圖片無(wú)法顯示的時(shí)候,顯示的文字
<2>em(傾斜強(qiáng)調(diào))
<3>strong(加粗強(qiáng)調(diào))
<4>b(加粗)
<5>i(傾斜)
Strong、em、b、i的區(qū)別
1、Strong、em都表示強(qiáng)調(diào),Strong為粗體,em為斜體,而Strong的強(qiáng)調(diào) 程度逗比em高
2、Strong和b都能加粗,em和i都能傾斜,,但是Strong和em多了一層強(qiáng)調(diào)的語(yǔ)義 。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語(yǔ)義化。
<6>q(短引用)
<7>small/big(縮小/放大字體):small和big分別是縮小和擴(kuò)大字體,都可以多層嵌套直至上限或下限
<8>a(超鏈接)
1、href:超鏈接的路徑,可以是網(wǎng)絡(luò)鏈接,也可以是本地文件。
2、target:跳轉(zhuǎn)頁(yè)面打開(kāi)的位置。_self自身頁(yè)面,_blank新頁(yè)面。
3、title:鼠標(biāo)指在超鏈接上顯示的名稱。
4、Rel(被鏈接是當(dāng)前的前/后一篇):指定被鏈接文檔與當(dāng)前文檔的關(guān)系,搜索引擎 會(huì)利用該屬性 獲取更多的有關(guān)鏈接的信息:
rel="prev"被鏈接文檔是當(dāng)前文檔的前一篇文 檔,
rel="next"被鏈接文檔是當(dāng)前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當(dāng)前文檔的圖標(biāo)
rel="stylesheet"被鏈接文檔是當(dāng)前文檔的樣式表
5、Rev(當(dāng)前是被鏈接的前/后一篇)
錨鏈接:
①本頁(yè)面錨鏈接:a、設(shè)置錨點(diǎn):<a name="top"></a>
b、跳轉(zhuǎn)錨點(diǎn):#name名
①頁(yè)面間錨鏈接:a、在即將跳轉(zhuǎn)頁(yè)面的指定位置設(shè)置錨點(diǎn)
b、跳轉(zhuǎn)錨點(diǎn):頁(yè)面地址.html#name名
<a href="02_常見(jiàn)的塊級(jí)標(biāo)簽.html#Hbuilder">頁(yè)面間錨鏈接</a><br/>
功能性鏈接: mailto用于給指定郵箱發(fā)送郵件
file:///e:/aaa.png打開(kāi)本地文件
tencent://message/?uin=1315618220 給指定QQ發(fā)送息
<9>s標(biāo)簽,有誤文本:刪除線
<s>這是S標(biāo)簽中的文字</s><br />
<10>cite標(biāo)簽:瀏覽器顯示為傾斜,常用于書(shū)、畫(huà)作、作品的引用
<cite>這是cite中的文本</cite><br />
<11>code:計(jì)算機(jī)代碼,不保留代碼格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向,屬性:dir="ltr"表示從左往右,dir="rtl"表示從右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用戶用鍵盤(pán)輸入的內(nèi)容,瀏覽器顯示為等寬字體
請(qǐng)輸入“<kbd>Esc</kbd>”推遲系統(tǒng)<br />
<13>sup:上標(biāo)文本,sub:下標(biāo)文本
x<sub>6</sub><br />
? ? 空格
? ? 空格 <br />
<14>u:下劃線
<u>這是下劃線</u><br />
mark:高亮或標(biāo)記文本,瀏覽器顯示為黃色背景
<mark>mark</mark><br />
6、表格:表格的行:tr,每行中的列:td,表格的表頭:th
表格的常用屬性:
表格行列屬性:[tr和td的屬性]:
1、width/heigh:?jiǎn)卧竦膶捀?/p>
2、bgcolor:單元格的背景顏色
3、align:left center right 單元格中的文字水平對(duì)齊方式
4、valign:top center bottom 單元格中的文字垂直對(duì)其方式
5、nowrap:單元格中文字不換行
【注意】當(dāng)表格屬性與行列屬性沖突時(shí),行列屬性優(yōu)先級(jí)高
7、表單(form)
【兩個(gè)重要屬性】:action-表單提交的服務(wù)器地址 method-表單提交數(shù)據(jù)的方法(get/post)
get/post區(qū)別:
1>get使用URL傳參:http://服務(wù)器地址?name1=value1&name2=value2
(?表示傳遞參數(shù),?后面采用name=value的形式傳遞,多個(gè)參數(shù)之間用&連接) ① URL傳參不安全,所有信息可在地址欄看到,并且別人可以很容易u(yù)rl注入,來(lái) 攻擊自己的數(shù)據(jù)庫(kù)。
② URL傳參數(shù)據(jù)量有限,只能傳遞少量數(shù)據(jù)。
2>post:使用http請(qǐng)求傳遞數(shù)據(jù)。URL地址看不到數(shù)據(jù)信息,安全且傳遞信息量沒(méi)有限制
綜上所述:大部分使用post傳參,但是get傳參比Post快
【input標(biāo)簽及屬性】
①type:input輸入框的類型,可選值有:
②name:input輸入框的別名,必填,因?yàn)閭鲄⒌臅r(shí)候采用name=value的形式傳遞。
③value:input輸入框的默認(rèn)值
④placeholder:提示內(nèi)容,當(dāng)輸入框有value時(shí),提示內(nèi)容消失。
【input特殊屬性值】
① checked="checked"默認(rèn)選中
② disabled="disabled"設(shè)置控制不能使用,按鈕上不能點(diǎn)擊,輸入框上不能修改,而且如果
輸入框時(shí)disabled,則輸入框信息不傳遞到后臺(tái)
③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />
等同于配合disabled或根據(jù)其他需要,使用隱藏域傳遞信息.
【input-type屬性詳解】
①text:文本輸入框
②password:密碼輸入框,內(nèi)容不對(duì)外顯示
③radio:?jiǎn)芜x按鈕
checkbox:復(fù)選按鈕
a、單選按鈕,name和value屬性需同時(shí)存在,提交時(shí),提交的是value中的屬性值
例如:<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"
b、radio憑借name屬性區(qū)分是否為同一組,name相同為同組,且只能選擇一個(gè)
c、checked="checked"默認(rèn)選中,(radio只可以選一個(gè),checkbox可以選多個(gè))
④submit:提交按鈕,提交表單數(shù)據(jù)
⑤reset:重置按鈕,重置為默認(rèn)狀態(tài)
⑥file:文件上傳按鈕
⑦image:圖片提交按鈕,功能同submit,可以提交數(shù)據(jù)
⑧button:普通按鈕,沒(méi)什么軟用
⑨其他常用屬性值:見(jiàn)下圖
【select標(biāo)簽】下拉選擇標(biāo)簽
寫(xiě)法:
<select name="=city">
<option>青島</option>
<option>煙臺(tái)</option>
<option>北京</option>
<option>紐約</option>
<option>羅馬</option>
</select>
常用屬性
①name屬性:寫(xiě)在select里,所有選項(xiàng)只有一個(gè)name
②multiple屬性:multiple="multiple"設(shè)置select為多選,一般不用
③option常用屬性:value=""屬性,當(dāng)option沒(méi)有value屬性時(shí),往后臺(tái)傳遞的是<option></option>中間的文字,
當(dāng)有value屬性時(shí),傳遞的是value的屬性值。
title=""屬性,鼠標(biāo)之上后現(xiàn)實(shí)的文字
select="select"默認(rèn)屬性值
④optgroup屬性: 用于option屬性分組,用lable屬性表示分組名。
<optgroup label="中國(guó)">
<option>青島</option>
<option>煙臺(tái)</option>
<option>北京</option>
</optgroup>
【textarea】:文本域,其常用屬性 :
①設(shè)置寬度高度 style="width: 150px;height: 200px;
②readonly="readonly":只讀模式,不允許修改編輯
③style="resize: none;"設(shè)置為寬度高度不允許修改
④style="overflow:;"設(shè)置文字超出區(qū)域時(shí),如何處置,常用屬性值有:
hidden 超出區(qū)域的文字,隱藏?zé)o法顯示
scroll 無(wú)論文字多少,均顯示滾動(dòng)
auto 自動(dòng),根據(jù)文字多少自動(dòng)決定是否會(huì)顯示為滾動(dòng)條
【fieldset 、legend】表單的邊框與標(biāo)題
<fieldset> //邊框
<legend> //標(biāo)題
</legend>
</fieldset>
如果想讓標(biāo)題嵌入到邊框中,需將標(biāo)題標(biāo)簽寫(xiě)到邊框標(biāo)簽里面
一個(gè)表單可以有多組標(biāo)題加邊框組合
【h5智能表單】
1、H5新增input的form屬性,用于指定特form表單的id,實(shí)現(xiàn)input無(wú)需放在form標(biāo)簽之中,即可通過(guò)表單進(jìn)行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input元素的新增屬性:
Autocomplete:自動(dòng)完成功能,記錄用戶之前輸入的內(nèi)容,并在用戶下次輸入時(shí)提示用戶輸入
》》》屬性值:on/off
》》》可以再form表單使用,對(duì)整個(gè)表單的所有控件進(jìn)行自動(dòng)完成的開(kāi)關(guān)也可以在input上使用,
對(duì)特定輸入框進(jìn)行修改
》》》絕大部分瀏覽器默認(rèn)開(kāi)啟
Autofocus:自動(dòng)獲得焦點(diǎn),autofocus="autofocus"只能獲得一個(gè)焦點(diǎn)
Form:所屬表單,通過(guò)id確認(rèn)屬于哪個(gè)表單
Required:必填,required="required",設(shè)置必填,否則停止提交
Pattern:使用正則表達(dá)式驗(yàn)證input的模式
Placeholder:提示,當(dāng)有value時(shí)取消提示。
1.html中文問(wèn)題
<head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> </head>
2.標(biāo)簽
<p> 這是一個(gè)開(kāi)始標(biāo)簽 </p> 這是一個(gè)結(jié)束標(biāo)簽 <p> Hello World </p> 標(biāo)簽之間的文本叫做內(nèi)容 <h1>大標(biāo)題</h1> <h2>小一點(diǎn)的標(biāo)題</h2> <h3>再小一點(diǎn)的標(biāo)題</h3> <h4>更小一點(diǎn)的標(biāo)題</h4>
3.元素
<html> 頭標(biāo)簽 <body> 身體標(biāo)簽 <h1>標(biāo)題</h1> <br/> 換行 <hr/> 水平線 <p>段落表示</p> </body> </html>
4.屬性
<h1 align="center">居中標(biāo)題</h1> 寫(xiě)在開(kāi)始標(biāo)簽里的 align="center" 就叫屬性 align 是屬性名 center 是屬性值 屬性值應(yīng)該使用雙引號(hào)括起來(lái)
5.注釋
<!--注釋內(nèi)容-->
6.標(biāo)題
<h1>標(biāo)題1</h1> <h2>標(biāo)題2</h2> <h3>標(biāo)題3</h3> <h4>標(biāo)題4</h4> <h5>標(biāo)題5</h5> <h6>標(biāo)題5</h6>
7.段落
<p>段落1 </p> <p>段落2 </p> <p>段落3 </p>
8.粗體--斜體
<b>b標(biāo)簽粗體效果</b> <strong>strong標(biāo)簽粗體效果</strong> <br/> <!--推薦使用--> <i>使用 i 標(biāo)簽帶來(lái)的斜體效果</i> <em>使用 em 標(biāo)簽帶來(lái)的斜體效果</em> <!--推薦使用-->
9.預(yù)格式顯示Java代碼
<pre> public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World"); } } </pre>
10.刪除--下劃線
<del>使用del標(biāo)簽實(shí)現(xiàn)的刪除效果</del> <ins>使用ins標(biāo)簽實(shí)現(xiàn)的下劃線效果</ins>
11.圖像
<img src="圖片路徑"/> <!--圖像大小--> <img width="200" height="200" src="圖片路徑"/> <!--圖像位置--> <div align="left"> <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/> </div> <div align="center"> <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/> </div> <div align="right"> <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/> </div> <!--替換圖片文字,加載不出圖片時(shí)顯示文字--> <img src="http://how2j.cn/example_not_exist.gif" alt="這個(gè)是一個(gè)圖片" />
12.超鏈接
<a >12306</a> <!--target屬性表示在新頁(yè)面打開(kāi)超鏈接--> <a target="_blank">http://www.12306.com</a> <!--超鏈接上顯示文字--> <a title="跳轉(zhuǎn)到http://www.12306.com">www.12306.com</a> <!--圖片超鏈接--> <a > <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/> </a>
13.表格
<!-- table:表格 tr:行 td:列 border:帶邊框的表格 width:表格高度,px及像素的意思 td-width:單元格寬度絕對(duì)值,也可用百分比顯示(50%) algin:單元格水平對(duì)齊(left,right,center) valgin:單元格垂直對(duì)齊(top,middle,bottom) colspan:水平合并 rowspan:垂直合并 bgcolor:背景顏色 --> <table border="1" width="200px"> <tr> <td width="50px">1</td> <td algin="center">居中</td> <td algin="left">靠左</td> <td algin="right">靠右</td> <td width="80%">1</td> <td valign="middle" >中間</td> <td valign="top" >頂部</td> <td valign="bottom" >底部</td> <td colspan="2" >1,2</td> <td rowspan="2">1,3</td> <td bgcolor="pink">b</td> </tr> </table>
14.列表
<!--ul無(wú)序,ol有序--> <ul> <li>無(wú)序</li> <li>列表</li> </ul> <ol> <li>有序</li> <li>列表</li> </ol>
15.div域span
<!-- div是塊元素,即自動(dòng)換行 常見(jiàn)的塊元素還有h1,table,p span是內(nèi)聯(lián)元素,即不會(huì)換行 常見(jiàn)的內(nèi)聯(lián)元素還有img,a,b,strong 業(yè)界通常結(jié)合css來(lái)控制頁(yè)面布局 --> <div> 第一個(gè)div </div> <div> 第二個(gè)div <!--換行--> </div> <span> 第一個(gè)span </span> <span> 第二個(gè)span <!--不換行--> </span>
16.字體
<!--color表示顏色,size表示字體大小--> <font color="blue" size="+2">藍(lán)色大2號(hào)字體</font>
17.內(nèi)聯(lián)框架
<!-- iframe相當(dāng)于瀏覽器里面有個(gè)小瀏覽器,在這個(gè)小瀏覽器中,打開(kāi)另一個(gè)網(wǎng)頁(yè) --> <iframe src="http://how2j.cn/" width="600px" height="400px"> </iframe>
18.文本框
<!--普通文本框--> <input type="text"> <!--設(shè)置文本框長(zhǎng)度--> <input type="text" size="10"> <!--初始值文本框--> <input type="text" value="有初始值的文本框"> <!--有背景文字的文本框,使用屬性placeholder--> <input type="text" placeholder="請(qǐng)輸入賬號(hào)">
19.密碼框
<!--輸入的數(shù)據(jù)會(huì)自動(dòng)顯示為星號(hào)--> <input type="password">
20.表單
<!-- action獲取數(shù)據(jù)提交后的頁(yè)面,初學(xué)者體驗(yàn)效果就好 get和post的區(qū)別 get 是form默認(rèn)的提交方式 如果通過(guò)一個(gè)超鏈訪問(wèn)某個(gè)地址,是get方式 如果在地址欄直接輸入某個(gè)地址,是get方式 提交數(shù)據(jù)會(huì)在瀏覽器顯示出來(lái) 不可以用于提交二進(jìn)制數(shù)據(jù),比如上傳文件 post 必須在form上通過(guò) method="post" 顯示指定 提交數(shù)據(jù)不會(huì)在瀏覽器顯示出來(lái) 可以用于提交二進(jìn)制數(shù)據(jù),比如上傳文件 --> <form action="http://how2j.cn/study/login.jsp"> 賬號(hào):<input type="text" name="name"> <br/> 密碼:<input type="password" name="password" > <br/> <input type="submit" value="登陸"> </form>
21.單選框
<!--兩個(gè)單選,都可以同時(shí)選中。但不能取消--> 單選1 <input type="radio" > 單選2 <input type="radio" > <!--checked默認(rèn)選中--> 默認(rèn)選中 <input type="radio" checked="checked" > <!--多個(gè)可單選框,activity參數(shù)--> 學(xué)習(xí)java<input type="radio" name="activity" value="學(xué)習(xí)java" > <br/> java<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/> dota<input type="radio" name="activity" value="dota" > <br/> LOL<input type="radio" name="activity" value="lol"> <br/>
22.復(fù)選框
<!--復(fù)選框,checkbox--> 學(xué)習(xí)java<input type="checkbox" value="學(xué)習(xí)java" > <br/> 學(xué)習(xí)<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/> dota<input type="checkbox" value="dota" > <br/> LOL<input type="checkbox" value="lol"> <br/>
23.下拉列表
<!-- <select> 即下拉列表 需要配合<option>使用 size:表示顯示高度 multiple:可以用ctrl多選中 selected:默認(rèn)選中 --> <select size="2" multiple="multiple > <option >1</option> <option >2</option> <option selected="selected" >3</option> </select>
24.文本域
<!-- 文本域可以有多行,并且可以有滾動(dòng)條 cols:顯示寬度 rows:顯示行數(shù) --> <textarea cols="30" rows="8">abc def </textarea>
25.普通按鈕
<!--參數(shù)button,普通按鈕不具備提交from表單的效果--> <input type="button" value="一個(gè)按鈕">
26.提交按鈕
<!-- <input type="submit"> 即為提交按鈕 用于提交form,把數(shù)據(jù)提交到服務(wù)端 --> <form action="/study/login.jsp" method="get"> 賬號(hào):<input type="text" name="name"> <br/> 密碼:<input type="password" name="password" > <br/> <input type="submit" value="登陸"> </form>
27.重置按鈕
<!-- <input type="reset"> 重置按鈕 可以把輸入框的改動(dòng)復(fù)原 --> <form action="/study/login.jsp"> 賬號(hào):<input type="text" name="name"> <br/> 密碼:<input type="password" name="password" > <br/> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
28.圖像提交
<!--<input type="image" > 即使用圖像作為按鈕進(jìn)行form的提交--> <form action="/study/login.jsp"> 賬號(hào):<input type="text" name="name"> <br/> 密碼:<input type="password" name="password" > <br/> <input type="image" src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"> </form>
29.按鈕
<!-- <button></button>即按鈕標(biāo)簽 與<input type="button">不同的是,<button>標(biāo)簽功能更為豐富 按鈕標(biāo)簽里的內(nèi)容可以是文字也可以是圖像 如果button的type=“submit” ,那么它就具備提交form的功能 --> <form action="/study/login.jsp"> 賬號(hào):<input type="text" name="name"> <br/> 密碼:<input type="password" name="password" > <br/> <button type="submit">登陸</button> </form>
30.html綜合演示
簡(jiǎn)單登陸注冊(cè)模板.html
演示結(jié)果:
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。