整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5現(xiàn)在已經(jīng)不是SGML的子集，主要是增加了關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能。接下來通過本文對(duì)這些功能簡(jiǎn)要概述下，感興趣的朋友參考下吧
繪畫CANVAS; 用于播放媒體的video和audio元素； 本地離線存儲(chǔ)localstorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionstorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除； 語義化更好的內(nèi)容元素如：article、footer、header、nav、section； 表單控件，type屬性有calendar、date、time、email、URL、search； 移除的元素有：純表現(xiàn)的元素：basefont,big,center,font,s,strike,tt,u;對(duì)可用應(yīng)產(chǎn)生負(fù)面影響的元素：frame,frameset,noframes; 支持HTML5新標(biāo)簽：ie8/ie7/ie6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持html5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
其中input標(biāo)簽增加了許多新屬性
對(duì)input、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓元素在頁面加載后自動(dòng)獲得焦點(diǎn)。一個(gè)頁面只能有一個(gè)元素有autofocus屬性，同時(shí)設(shè)置多個(gè)，則第一個(gè)生效，當(dāng)輸入框獲取焦點(diǎn)時(shí)，提示字符消失。
這個(gè)屬性對(duì)登錄頁面很有用，可提升用戶體驗(yàn)，有時(shí)登錄頁面就一個(gè)用戶名，密碼，頁面加載后用戶要手動(dòng)定位到輸入框，才能輸入，有了autofocus，頁面打開即可直接輸入。對(duì)input的datepickers,number，range增加了max,min,step屬性。max屬性規(guī)定輸入域所允許的最大值。 min屬性規(guī)定輸入域允許的最小值。
step屬性為輸入域規(guī)定合法的數(shù)字間隔。（假如 step="3"，則合法數(shù)字應(yīng)該是 -3、0、3、6，以此類推）step 屬性可以與 max
以及 min 屬性配合使用，以創(chuàng)建合法值的范圍。
pattern屬性 pattern屬性用于驗(yàn)證輸入字段的模式，其實(shí)就是正則表達(dá)式，不用再寫js綁定正則驗(yàn)證了，非常方便。
pattern屬性適用于input的text,search,url,telephone,email,password。
舉例：給輸入框定義了 Pattern 為“[A-z]{3}”，也就是包含三個(gè)字母的正則表達(dá)式約束，如果輸入不合法，我們會(huì)看到如下效果。
multiple屬性
multiple屬性規(guī)定輸入域中可選擇多個(gè)值。
multiple屬性適用于input的email,file。允許上傳時(shí)一次上傳多個(gè)文件。
以上所述是小編給大家介紹的HTML5新增加標(biāo)簽和功能概述，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
、Html的基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
網(wǎng)頁的文本、圖片等信息；
</body>
</html>
二、Head部分：用于表示網(wǎng)頁的元數(shù)據(jù)即描述網(wǎng)頁的基本信息
其常用標(biāo)簽及屬性有：
1、title標(biāo)簽：瀏覽器標(biāo)簽頁顯示的標(biāo)題
2、meta標(biāo)簽：其常用屬性
①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼：<meta charset="UTF-8">
常見的字符集編碼格式：
a.GB-2312:國(guó)標(biāo)碼，簡(jiǎn)體中文
b.GBK：擴(kuò)展的國(guó)標(biāo)碼
c.UTF-8：萬國(guó)碼 Unicode 常用
②http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執(zhí)行，可選屬性值：Content-Type(文檔類型) refresh(網(wǎng)頁定時(shí)刷新) set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設(shè)置哪一部分，具體的設(shè)置內(nèi)容，放到content屬性中）
③name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值：author（作者） keywords（網(wǎng)頁關(guān)鍵字） description（網(wǎng)頁描述） 這兩個(gè)屬性設(shè)置，網(wǎng)頁必不可少。
3、link標(biāo)簽：鏈接網(wǎng)頁圖標(biāo)（title前的小logo），其常用屬性有：
①rel屬性：聲明鏈接文件的類型，此處選icon
②type屬性：可以省略
③href屬性：表示圖片的路徑地址
三、body部分：網(wǎng)頁的文本、圖片等信息
標(biāo)簽的分類：
塊級(jí)標(biāo)簽：顯示為塊，前后隔一行（自動(dòng)換行）
行級(jí)標(biāo)簽：按行從左往右逐一顯示。
1、 常見的塊級(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屬性，表明引用的來源，一般引用網(wǎng)址
瀏覽器默認(rèn)首行縮進(jìn)。
⑥<pre></pre>:預(yù)格式標(biāo)簽，用于重載代碼。瀏覽器默認(rèn)顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補(bǔ)充】html 文件中空格的表示：
2、 基于布局的塊級(jí)標(biāo)簽
列表：無序列表、有序列表、定義列表
①有序列表：<ol></ol> 列表項(xiàng)：<li></li>
②無序列表：<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、常見的行級(jí)標(biāo)簽
<1>span（文本）:無實(shí)際意義，用于包裹某部分文字，修改特定樣式，例如：
這是<span style="color: red;font-size: 36px;">span</span>中的文字
img（圖片）：其常用屬性：①src:表示引用圖片的地址。
路徑地址的寫法：相對(duì)路徑：以當(dāng)前文件為最準(zhǔn)，去尋找圖片地址
a、與文件處于同一層的圖片，直接寫圖片名
b、圖片在當(dāng)前文件下一層：文件名/圖片名
c、圖片在當(dāng)前文件上一層：../圖片名
絕對(duì)路徑:file:///盤符：/文件夾/圖片名，但 是嚴(yán)禁使用
圖片網(wǎng)址：網(wǎng)絡(luò)上的圖片鏈接，但是一般不用
②height和width：圖片的高度和寬度。可以用CSS樣式代替
③title：圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字
④alt:當(dāng)圖片無法顯示的時(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)的語義 。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語義化。
<6>q（短引用）
<7>small/big（縮小/放大字體）：small和big分別是縮小和擴(kuò)大字體，都可以多層嵌套直至上限或下限
<8>a（超鏈接）
1、href:超鏈接的路徑，可以是網(wǎng)絡(luò)鏈接，也可以是本地文件。
2、target:跳轉(zhuǎn)頁面打開的位置。_self自身頁面，_blank新頁面。
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)前是被鏈接的前/后一篇）
錨鏈接：
①本頁面錨鏈接:a、設(shè)置錨點(diǎn)：<a name="top"></a>
b、跳轉(zhuǎn)錨點(diǎn)：#name名
①頁面間錨鏈接:a、在即將跳轉(zhuǎn)頁面的指定位置設(shè)置錨點(diǎn)
b、跳轉(zhuǎn)錨點(diǎn)：頁面地址.html#name名
<a href="02_常見的塊級(jí)標(biāo)簽.html#Hbuilder">頁面間錨鏈接</a><br/>
功能性鏈接： mailto用于給指定郵箱發(fā)送郵件
file：///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發(fā)送息
<9>s標(biāo)簽，有誤文本：刪除線
<s>這是S標(biāo)簽中的文字</s><br />
<10>cite標(biāo)簽：瀏覽器顯示為傾斜，常用于書、畫作、作品的引用
<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:表示需要用戶用鍵盤輸入的內(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注入，來 攻擊自己的數(shù)據(jù)庫。
② URL傳參數(shù)據(jù)量有限，只能傳遞少量數(shù)據(jù)。
2>post:使用http請(qǐng)求傳遞數(shù)據(jù)。URL地址看不到數(shù)據(jù)信息，安全且傳遞信息量沒有限制
綜上所述：大部分使用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：普通按鈕，沒什么軟用
⑨其他常用屬性值：見下圖
【select標(biāo)簽】下拉選擇標(biāo)簽
寫法：
<select name="=city">
<option>青島</option>
<option>煙臺(tái)</option>
<option>北京</option>
<option>紐約</option>
<option>羅馬</option>
</select>
常用屬性
①name屬性：寫在select里，所有選項(xiàng)只有一個(gè)name
②multiple屬性：multiple="multiple"設(shè)置select為多選，一般不用
③option常用屬性：value=""屬性，當(dāng)option沒有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 無論文字多少，均顯示滾動(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)簽寫到邊框標(biāo)簽里面
一個(gè)表單可以有多組標(biāo)題加邊框組合
【h5智能表單】
1、H5新增input的form屬性，用于指定特form表單的id，實(shí)現(xiàn)input無需放在form標(biāo)簽之中，即可通過表單進(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)完成的開關(guān)也可以在input上使用，
對(duì)特定輸入框進(jìn)行修改
》》》絕大部分瀏覽器默認(rèn)開啟
Autofocus：自動(dòng)獲得焦點(diǎn)，autofocus="autofocus"只能獲得一個(gè)焦點(diǎn)
Form：所屬表單，通過id確認(rèn)屬于哪個(gè)表單
Required：必填,required="required",設(shè)置必填，否則停止提交
Pattern：使用正則表達(dá)式驗(yàn)證input的模式
Placeholder：提示，當(dāng)有value時(shí)取消提示。
例
使用 <u> 標(biāo)簽為文本添加下劃線：
<p>This is a <u>parragraph</u>.</p>
瀏覽器支持
所有主流瀏覽器都支持 <u> 標(biāo)簽。
標(biāo)簽定義及使用說明
<u> 標(biāo)簽定義與常規(guī)文本風(fēng)格不同的文本，像拼寫錯(cuò)誤的單詞或者漢語中的專有名詞。
提示和注釋
提示：請(qǐng)盡量避免使用 <u> 為文本加下劃線，用戶會(huì)把它混淆為一個(gè)超鏈接。
注釋：HTML5 規(guī)范建議開發(fā)者盡量使用其他元素替代 <u> 元素。
HTML 4.01 與 HTML5之間的差異
在 HTML 中，<u>元素 已廢棄（<u> 元素被用來定義下劃線）。
HTML5 中重新定義了 <u> 元素，它定義與常規(guī)文本風(fēng)格不同的文本，像拼寫錯(cuò)誤的單詞或者漢語中的專有名詞。
全局屬性
<u> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<u> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
