正則表達(dá)式與HTML5新元素
ProcessOn是一個(gè)在線協(xié)作繪圖平臺(tái),為用戶提供最強(qiáng)大、易用的作圖工具!
它可以很方便的在線簡(jiǎn)單繪制一些東西,讓自己去具體理解。
正則表達(dá)式
今日的正則只是學(xué)習(xí)正則的簡(jiǎn)單使用。在HTML5的標(biāo)簽屬性的強(qiáng)大面前,我們已經(jīng)可以不用去先學(xué)習(xí)javascript才能再去正則了,因?yàn)镠TML5的input標(biāo)簽的pattern可以實(shí)現(xiàn)標(biāo)簽的驗(yàn)證,近似取代復(fù)雜的javascript使用正則驗(yàn)證表單,在未來(lái)一定會(huì)完全取代的。
正則的簡(jiǎn)單使用:
[0-9] 查找任何從 0 至 9 的數(shù)字。
[a-z] 查找任何從小寫 a 到小寫 z 的字符。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符。
[A-z] 查找任何從大寫 A 到小寫 z 的字符。
n{X} 匹配包含 X 個(gè) n 的序列的字符串。
n{X,Y} 匹配包含 X 或 Y 個(gè) n 的序列的字符串。
n{X,} 匹配包含至少 X 個(gè) n 的序列的字符串。
記得這幾個(gè)可以實(shí)現(xiàn)簡(jiǎn)單的正則運(yùn)算了。如:
<form action="#"> <input type="text" pattern="[0-9a-zA-Z]{1,}" required> <input type="submit" value="提交"> </form>
這就是個(gè)簡(jiǎn)單驗(yàn)證范圍在1個(gè)字符以上的任意0到9或a到z或A到Z的表單驗(yàn)證,而required是設(shè)置這個(gè)文本為必填項(xiàng),否則會(huì)在提交表單時(shí)提示填寫。
而具體的使用正則,則需要記得元字符、量詞及方括號(hào)的用意。
pattern屬性規(guī)定了正則的匹配方式,還有只能是編寫與正則匹配的長(zhǎng)度。
它現(xiàn)在無(wú)法現(xiàn)實(shí)到像javascript的RegExp對(duì)象那么方便,不可以去設(shè)置修飾符,就是設(shè)置全局或大小寫敏感等。
但它的功能已經(jīng)很強(qiáng)大了。
而為什么無(wú)法設(shè)置修飾符,因?yàn)樗钦齽t表達(dá)式,而在w3c里解釋是pattern 是正則表達(dá)式,而不是字符串,則必須省略該修飾符,所以它不能設(shè)置這個(gè)修飾符,不是會(huì)出錯(cuò)。
補(bǔ)充小知識(shí):匹配中文的正則
[\u4e00-\u9fa5]這個(gè)確實(shí)只匹配中文
[^\x00-\xff]這個(gè)匹配所有非ASCII的字符,也就是一般意義上的半角字符,而這些%?。ㄖ惖氖侨亲址?。
HTML5之音頻與視頻元素
audio音頻標(biāo)簽
<audio controls autoplay loop > <source src="URL" type="audio/mp4"> <source ssrc="URL" type="audio/ogg"> <p>你的瀏覽器不支持</p> </audio>
效果圖:
它的屬性:
autoplay autoplay 如果出現(xiàn)該屬性,則音頻在就緒后馬上播放。
controls controls 如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。
loop loop 如果出現(xiàn)該屬性,則每當(dāng)音頻結(jié)束時(shí)重新開始播放。
preload preload 如果出現(xiàn)該屬性,則音頻在頁(yè)面加載時(shí)進(jìn)行加載,并預(yù)備播放。如果 使用 "autoplay",則忽略該屬性。
src url 要播放的音頻的 URL。
video視頻標(biāo)簽
<video controls loop muted width="400" height="400" poster="播放前的顯示圖片URL"> <source src="視頻本地地址URL" type="video/mp4"> <source src="視頻本地地址URL" type="video/ogg"> <p>你的瀏覽器不支持</p> </video>
它的屬性:
autoplay autoplay 如果出現(xiàn)該屬性,則視頻在就緒后馬上播放。
controls controls 如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。
loop loop 如果出現(xiàn)該屬性,則當(dāng)媒介文件完成播放后再次開始播放。
muted muted 規(guī)定視頻的音頻輸出應(yīng)該被靜音。
poster URL 規(guī)定視頻下載時(shí)顯示的圖像,或者在用戶點(diǎn)擊播放按鈕前顯示的圖像。
preload preload 如果出現(xiàn)該屬性,則視頻在頁(yè)面加載時(shí)進(jìn)行加載,并預(yù)備播放。如果 使用 "autoplay",則忽略該屬性。
src url 要播放的視頻的 URL。
width pixels 設(shè)置視頻播放器的寬度。
height pixels 設(shè)置視頻播放器的高度。
它們都有三種格式一種是mp4,一種是ogg,還有一種webm,目前在這方面支持的格式還不夠完善。
以上所述是小編給大家介紹的正則表達(dá)式與HTML5新元素,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- HTML5 實(shí)現(xiàn)的一個(gè)俄羅斯方塊實(shí)例代碼
- 關(guān)于Android HTML5 audio autoplay無(wú)效問(wèn)題的解決方案
- HTML5 canvas 9繪制圖片實(shí)例詳解
- js HTML5多圖片上傳及預(yù)覽實(shí)例解析(不含前端的文件分割)
- 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- 使用HTML5+Boostrap打造簡(jiǎn)單的音樂(lè)播放器
- NodeJS與HTML5相結(jié)合實(shí)現(xiàn)拖拽多個(gè)文件上傳到服務(wù)器的實(shí)現(xiàn)方法
- JS+HTML5手機(jī)開發(fā)之滾動(dòng)和慣性緩動(dòng)實(shí)現(xiàn)方法分析
- HTML5 移動(dòng)頁(yè)面自適應(yīng)手機(jī)屏幕寬度詳解
相關(guān)文章
使用正則限制input框只能輸入數(shù)字/英文/中文等等
限制input框只能輸入數(shù)字或英文的方法有很多,下面為大介紹下使用正則是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-11-11學(xué)php正則!超基礎(chǔ)簡(jiǎn)單例子
我一直都覺(jué)得正則表達(dá)式只要在要用的時(shí)候翻一下百度就Ok了,然后今天寫php的時(shí)候發(fā)現(xiàn),原來(lái)我正則完全一點(diǎn)都不懂。2011-09-09javascript中使用正則表達(dá)式刪除前后空格的方法
去掉前后位空格的方法有很多種,下面腳本之家小編給大家分享使用js正則表達(dá)式如何刪除前后空格,感興趣的朋友跟著一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09郵箱地址正則表達(dá)式驗(yàn)證代碼合集腳本之家特別版
由于我們自己也經(jīng)常需要用到一些常用的正則,每次都上網(wǎng)搜多次,這里腳本之家特為大家整理一些,方面使用。2010-05-05javascript下一個(gè)還原h(huán)tml代碼的正則
javascript下一個(gè)還原h(huán)tml代碼的正則...2007-08-08