HTML5中新增的佈局標籤 新增表單元素 校驗數字的表示式 校驗字元的表示式
阿新 • • 發佈：2021-01-09
HTML5基礎
HTML5中新增的佈局標籤
html 1990 html4.0.1 1997 html5 2008 穩定版 2012年
新增的結構標籤 （更加語義化）
-
header標籤
-
<header>這裡是頭部區</header>
-
-
footer標籤
-
<footer>這裡是頁尾區</footer>
-
-
main標籤
-
<main>這裡是主體區</main>
-
-
nav標籤
-
<nav>
<a>首頁</a>
<a>關於我們</a>
<a>聯絡我們</a>
</nav>
-
-
article標籤
-
<article>這裡是一個有完整含義的內容區</article>
-
-
section標籤
-
<section>
<h2>標題一</h2>
<p>內容區域</p>
</section>
<section>
<h2>標題二</h2>
<p>內容區域</p>
</section>
-
-
aside標籤
-
<aside>這裡是側邊欄</aside>
-
新增的其他標籤
-
figure標籤
-
標籤規定獨立的流內容（影象、圖表、照片、程式碼等等）。
figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文件流產生影響。
-
<figure>
<figcaption>figure的標題</figcaption>
</figure>
-
標籤規定獨立的流內容（影象、圖表、照片、程式碼等等）。
-
mark標籤
-
<p>今天天氣<mark>晴朗</mark></p>
-
-
time標籤
-
<time datetime="2019-02-19">元宵節</time>
-
-
progress標籤
-
progress 標籤標示任務的進度（程序）。
-
<progress value="30" max="100"></progress>
-
-
meter標籤
-
屬性 屬性值 說明 high number 定義度量的值位於哪個點，被界定為高的值。 low number 定義度量的值位於哪個點，被界定為低的值。 max number 定義最大值。預設值是 1。 min number 定義最小值。預設值是 0。 optimum number 定義什麼樣的度量值是最佳的值。如果該值高於 "high" 屬性，則意味著值越高越好。如果該值低於 "low" 屬性的值，則意味著值越低越好。 value number 定義度量的值。
-
HTML5相容
-
方案一：使用javascript新增元素的方法解決
-
document.createElement("header");
-
document.createElement("footer");
-
header, footer{
display:block;
}
-
-
方案二：使用封裝好的外掛html5shiv.js解決相容性問題
-
<script type="text/javascript" src="./html5shiv.js"></script>
-
HTML5已移除的標籤
-
acronym
-
applet
-
basefont
-
big
-
center
-
dir
-
font
-
frame
-
frameset
-
noframes
-
strike
新增多媒體標籤
-
audio標籤
-
<audio src="videoAudio/hanmai.mp3" controls="controls"></audio> -
瀏覽器支援
-
ie8不支援audio標籤
-
-
HTML5支援的音訊格式
-
Ogg audio/ogg 支援的瀏覽器：Chrome、Firefox、Opera10+
-
MP3 audio/mpeg 支援的瀏覽器：Chrome、Firefox、Opera10+、IE9+、Safari5+
-
-
audio標籤相關的屬性
-
src屬性規定要播放的音訊/視訊的URL
-
controls屬性規定瀏覽器應該為音訊/視訊提供播放控制元件
-
loop屬性規定當音訊/視訊結束後將重新開始播放：如果設定該屬性，則音訊/視訊將迴圈播放
-
muted屬性規定要播放的音訊/視訊為靜音
-
-
-
video標籤
-
<video src="videoAudio/movie.ogg" controls="controls"></video> -
瀏覽器支援
-
ie8不支援video標籤
-
-
HTML5支援的視訊格式
-
Ogg ：支援的瀏覽器：Firefox、Chrome、Opera
-
MEPG4：支援的瀏覽器：Safari、Chrome、IE9+、Firefox
-
WebM：支援的瀏覽器：Firefox、Chrome、Opera
-
-
video標籤相關的屬性
-
src屬性規定要播放的音訊/視訊的URL
-
controls屬性規定瀏覽器應該為音訊/視訊提供播放控制元件
-
autoplay如果出現該屬性，則視訊在就緒後馬上播放。
-
loop屬性規定當音訊/視訊結束後將重新開始播放：如果設定該屬性，則音訊/視訊將迴圈播放
-
muted屬性規定要播放的音訊/視訊為靜音
-
-
只屬於video標籤的屬性
-
width屬性規定視訊播放器的寬度
-
height屬性規定視訊播放器的高度
-
<video src="videoAudio/butterfly.ogg" width="400" height="400"></video> -
poster預覽圖片
-
<video src="videoAudio/butterfly.ogg" controls width="200" poster="pic.png"></video>
-
-
-
source標籤
-
為媒介元素（比如video和audio）定義媒介資源
-
<video controls="controls" width="300">
<source src="videoAudio/movie.ogg" type="video/ogg">
<source src="videoAudio/movie.mp4" type="video/mp4">
</video>
-
-
src屬性規定要播放的音訊/視訊的URL
-
type屬性規定媒體資源的MIME型別
-
注意：source元素可以連結不同的音訊/視訊檔案，瀏覽器將使用第一個可識別的格式
新增表單元素
新增input型別
-
url
-
<input type="url" name="myurl">
-
-
email
-
<input type="email" name="usremail">
-
-
search
-
<input type="search" value="在這裡搜尋">
-
-
number
-
<input type="number" value="10" min="0" max="20" step="2"/>
-
-
range
-
<input type="range" value="5" min="1" max="10" step="1"/>
-
-
color
-
<input type="color">
-
-
date
-
<input type="date">
-
-
datetime-local
-
<input type="datetime-local">
-
-
month
-
<input type="month">
-
-
time
-
<input type="time">
-
-
week
-
<input type="week">
-
-
datalist標籤
-
<input id="myCar" list="cars">
<datalist id="cars">
<option value="WEB"></option>
<option value="ASD"></option>
</datalist>
-
新增表單屬性
-
min、max和step屬性
-
placeholder屬性
-
<input type="text" placeholder="請您輸入">
-
-
autofocus
-
<input type="text">
<input type="text" autofocus>
-
-
form屬性
-
<form action="" id="form1">
<input type="text" name="username">
</form>
<input type="reset" form="form1">
-
-
required屬性
-
規定必須在提交之前填寫輸入域（不能為空）
-
<input type="text" name="username" required>
-
-
pattern屬性
-
<input type="text" name="username" pattern="[0-9]"> -
校驗數字的表示式
-
1 數字：^[0-9]*$
2 n位的數字：^\d{n}$
3 至少n位的數字：^\d{n,}$
4 m-n位的數字：^\d{m,n}$
5 零和非零開頭的數字：^(0|[1-9][0-9]*)$
6 非零開頭的最多帶兩位小數的數字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 帶1-2位小數的正數或負數：^(\-)?\d+(\.\d{1,2})?$
8 正數、負數、和小數：^(\-|\+)?\d+(\.\d+)?$
9 有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$
10 有1~3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整數：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
12 非零的負整數：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
13 非負整數：^\d+$ 或 ^[1-9]\d*|0$
14 非正整數：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15 非負浮點數：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16 非正浮點數：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17 正浮點數：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 負浮點數：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 浮點數：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ -
校驗字元的表示式
-
1 漢字：^[\u4e00-\u9fa5]{0,}$
2 英文和數字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 長度為3-20的所有字元：^.{3,20}$
4 由26個英文字母組成的字串：^[A-Za-z]+$
5 由26個大寫英文字母組成的字串：^[A-Z]+$
6 由26個小寫英文字母組成的字串：^[a-z]+$
7 由數字和26個英文字母組成的字串：^[A-Za-z0-9]+$
8 由數字、26個英文字母或者下劃線組成的字串：^\w+$ 或 ^\w{3,20}$
9 中文、英文、數字包括下劃線：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10 中文、英文、數字但不包括下劃線等符號：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以輸入含有^%&',;=?$\"等字元：[^%&',;=?$\x22]+
12 禁止輸入含有~的字元：[^~\x22]+ -
特殊需求表示式
-
1 Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
4 手機號碼：^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$ (由於工信部放號段不定時，所以建議使用泛解析 ^([1][3,4,5,6,7,8,9])\d{9}$)
5 電話號碼("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6 國內電話號碼(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7 18位身份證號碼(數字、字母x結尾)：^((\d{18})|([0-9x]{18})|([0-9X]{18}))$
8 帳號是否合法(字母開頭，允許5-16位元組，允許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
9 密碼(以字母開頭，長度在6~18之間，只能包含字母、數字和下劃線)：^[a-zA-Z]\w{5,17}$
10 強密碼(必須包含大小寫字母和數字的組合，不能使用特殊字元，長度在8-10之間)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
11 日期格式：^\d{4}-\d{1,2}-\d{1,2}
12 一年的12個月(01～09和1～12)：^(0?[1-9]|1[0-2])$
13 一個月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
14 錢的輸入格式：
15 1.有四種錢的表示形式我們可以接受:"10000.00" 和 "10,000.00", 和沒有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
16 2.這表示任意一個不以0開頭的數字,但是,這也意味著一個字元"0"不通過,所以我們採用下面的形式：^(0|[1-9][0-9]*)$
17 3.一個0或者一個不以0開頭的數字.我們還可以允許開頭有一個負號：^(0|-?[1-9][0-9]*)$
18 4.這表示一個0或者一個可能為負的開頭不為0的數字.讓使用者以0開頭好了.把負號的也去掉,因為錢總不能是負的吧.下面我們要加的是說明可能的小數部分：^[0-9]+(.[0-9]+)?$
19 5.必須說明的是,小數點後面至少應該有1位數,所以"10."是不通過的,但是 "10" 和 "10.2" 是通過的：^[0-9]+(.[0-9]{2})?$
20 6.這樣我們規定小數點後面必須有兩位,如果你認為太苛刻了,可以這樣：^[0-9]+(.[0-9]{1,2})?$
21 7.這樣就允許使用者只寫一位小數.下面我們該考慮數字中的逗號了,我們可以這樣：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
22 8.1到3個數字,後面跟著任意個 逗號+3個數字,逗號成為可選,而不是必須：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
23 備註：這就是最終結果了,別忘了"+"可以用"*"替代如果你覺得空字串也可以接受的話(奇怪,為什麼?)最後,別忘了在用函式時去掉去掉那個反斜槓,一般的錯誤都在這裡
24 xml檔案：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
25 中文字元的正則表示式：[\u4e00-\u9fa5]
26 雙位元組字元：[^\x00-\xff] (包括漢字在內，可以用來計算字串的長度(一個雙位元組字元長度計2，ASCII字元計1))
27 空白行的正則表示式：\n\s*\r (可以用來刪除空白行)
28 HTML標記的正則表示式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (網上流傳的版本太糟糕，上面這個也僅僅能部分，對於複雜的巢狀標記依舊無能為力)
29 首尾空白字元的正則表示式：^\s*|\s*$或(^\s*)|(\s*$) (可以用來刪除行首行尾的空白字元(包括空格、製表符、換頁符等等)，非常有用的表示式)
30 騰訊QQ號：[1-9][0-9]{4,} (騰訊QQ號從10000開始)
31 中國郵政編碼：[1-9]\d{5}(?!\d) (中國郵政編碼為6位數字)
32 IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址時有用)
33 IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))
-
-
multiple屬性
-
<input type="file" multiple>
-
-
list屬性
-
<input type="url" list="urlList" name="weblink">
<datalist id="urlList">
<option label="百度" value="http://www.baidu.com"></option>
<option label="新浪" value="http://www.sina.com"></option>
<option label="搜狐" value="http://www.sohu.com"></option>
</datalist>
-