HTML5新特性

特性
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> </head>
```

3.input 有哪些新增類型？

color,選擇顏色
date 選擇日期
email 用于檢測(cè)輸入的是否為email格式的地址
month 選擇月份
number 用于應(yīng)該包含數(shù)值的輸入域，可以設(shè)定對(duì)輸入值的限定
range 用于定義一個(gè)滑動(dòng)條，表示范圍
search 用于搜索，比如站點(diǎn)搜索或 Google 搜索
tel 輸入電話號(hào)碼
-time 選擇時(shí)間
url 輸入網(wǎng)址
week 選擇周和年

4.瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別？ localStorage 如何存儲(chǔ)刪除數(shù)據(jù)。

共同點(diǎn)：sessionStorage、localStorage和cookie都由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)。
區(qū)別
1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞，localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存
2.cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下，存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器
3.cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)
4.localStorage支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者。 api 接口使用更方便。而cookie的原生接口不友好，需要程序員自己封裝
HTML5中提供了localStorage對(duì)象可以將數(shù)據(jù)長(zhǎng)期保存在客戶端，除非人為清除，localStorage提供了幾個(gè)方法:
1.存儲(chǔ):localStorage.setItem(key,value)如果key存在時(shí)，更新value
2.獲取 localStorage.getItem(key)如果key不存在返回null
3.刪除 localStorage.removeItem(key)一旦刪除，key對(duì)應(yīng)的數(shù)據(jù)將會(huì)全部刪除
4.全部清除 localStorage.clear() 使用removeItem逐個(gè)刪除太麻煩，可以使用clear,執(zhí)行的后果是會(huì)清除所有l(wèi)ocalStorage對(duì)象保存的數(shù)據(jù)
注意：localStorage存數(shù)的數(shù)據(jù)是不能跨瀏覽器共用的，一個(gè)瀏覽器只能讀取各自瀏覽器的數(shù)據(jù),儲(chǔ)存空間5M。

、Html的基本結(jié)構(gòu)：

<!DOCTYPE html>

<html>

<head>

</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>

<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>

</pre>

<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左

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)記文本，瀏覽器顯示為黃色背景

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屬性：寫(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>

【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>

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é)果:

在線咨詢

上一篇：實(shí)現(xiàn)快捷生成HTML代碼
下一篇：誰(shuí)說(shuō)國(guó)產(chǎn)編譯器沒(méi)救了？這個(gè) C/C++ 和 JavaScript 編譯器來(lái)了 - 程序人生 2020

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML5新特性

3.input 有哪些新增類型？

4.瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別？ localStorage 如何存儲(chǔ)刪除數(shù)據(jù)。

您的項(xiàng)目需求