在進入主題前,先插個網站https://www.processon.com/ ProcessOn是一個線上協作繪圖平臺,為用戶提供最強大、易用的作圖工具! 它可以很方便的線上簡單繪製一些東西,讓自己去具體理解。 正則表達式 今日的正則只是學習正則的簡單使用。在HTML5的標簽屬性的強大面前,我們 已 ...
在進入主題前,先插個網站https://www.processon.com/
ProcessOn是一個線上協作繪圖平臺,為用戶提供最強大、易用的作圖工具!
它可以很方便的線上簡單繪製一些東西,讓自己去具體理解。
正則表達式
今日的正則只是學習正則的簡單使用。在HTML5的標簽屬性的強大面前,我們
已經可以不用去先學習javascript才能再去正則了,因為HTML5的input標簽的
pattern可以實現標簽的驗證,近似取代複雜的javascript使用正則驗證表單,在
未來一定會完全取代的。
正則的簡單使用:
[0-9] 查找任何從 0 至 9 的數字。
[a-z] 查找任何從小寫 a 到小寫 z 的字元。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字元。
[A-z] 查找任何從大寫 A 到小寫 z 的字元。
n{X} 匹配包含 X 個 n 的序列的字元串。
n{X,Y} 匹配包含 X 或 Y 個 n 的序列的字元串。
n{X,} 匹配包含至少 X 個 n 的序列的字元串。
記得這幾個可以實現簡單的正則運算了。如:
<form action="#"> <input type="text" pattern="[0-9a-zA-Z]{1,}" required> <input type="submit" value="提交"> </form>
這就是個簡單驗證範圍在1個字元以上的任意0到9或a到z或A到Z的表單驗證,而
required是設置這個文本為必填項,否則會在提交表單時提示填寫。
而具體的使用正則,則需要記得元字元、量詞及方括弧的用意。
pattern屬性規定了正則的匹配方式,還有隻能是編寫與正則匹配的長度。
它現在無法現實到像javascript的RegExp對象那麼方便,不可以去設置修飾符,就是設置全局或大小寫敏感等。
但它的功能已經很強大了。
而為什麼無法設置修飾符,因為它是正則表達式,而在w3c里解釋是pattern 是正則表達式,而不是字元串,
則必須省略該修飾符,所以它不能設置這個修飾符,不是會出錯。
補充小知識:匹配中文的正則
[\u4e00-\u9fa5]這個確實只匹配中文
[^\x00-\xff]這個匹配所有非ASCII的字元,也就是一般意義上的半形字元,而這些%!)(之類的是全形字元 。
HTML5之音頻與視頻元素
audio音頻標簽
<audio controls autoplay loop > <source src="URL" type="audio/mp4"> <source ssrc="URL" type="audio/ogg"> <p>你的瀏覽器不支持</p> </audio>
效果圖:
它的屬性:
autoplay autoplay 如果出現該屬性,則音頻在就緒後馬上播放。
controls controls 如果出現該屬性,則向用戶顯示控制項,比如播放按鈕。
loop loop 如果出現該屬性,則每當音頻結束時重新開始播放。
preload preload 如果出現該屬性,則音頻在頁面載入時進行載入,並預備播放。如果 使用 "autoplay",則忽略該屬性。
src url 要播放的音頻的 URL。
video視頻標簽
<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 如果出現該屬性,則視頻在就緒後馬上播放。
controls controls 如果出現該屬性,則向用戶顯示控制項,比如播放按鈕。
loop loop 如果出現該屬性,則當媒介文件完成播放後再次開始播放。
muted muted 規定視頻的音頻輸出應該被靜音。
poster URL 規定視頻下載時顯示的圖像,或者在用戶點擊播放按鈕前顯示的圖像。
preload preload 如果出現該屬性,則視頻在頁面載入時進行載入,並預備播放。如果 使用 "autoplay",則忽略該屬性。
src url 要播放的視頻的 URL。
width pixels 設置視頻播放器的寬度。
height pixels 設置視頻播放器的高度。
它們都有三種格式一種是mp4,一種是ogg,還有一種webm,目前在這方面支持的格式還不夠完善。