隨堂筆記之正則與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 的序列的字串。

記得這幾個可以實現簡單的正規運算了。如：

<span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> pattern</span><span style="color: #0000ff;">="[0-9a-zA-Z]{1,}"</span><span style="color: #ff0000;"> required</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

這就是個簡單驗證範圍在1個字元以上的任意0到9或a到z或A到Z的表單驗證，而

required是設定這個文字為必填項，否則會在提交表單時提示填寫。

而具體的使用正規，則需要記住元字元、量詞及方括號的用意。

pattern屬性規定了正規的匹配方式，還有隻能是寫與正規相符的長度。

它現在無法現實到像javascript的RegExp物件那麼方便，不可以去設定修飾符，就是設定全域或大小寫敏感等。

但它的功能已經很強大了。

而為什麼無法設定修飾符，因為它是正規表示式，而在w3c裡解釋是pattern 是正規表示式，而不是字串，

則必須省略該修飾符，所以它不能設定這個修飾符，不是會出錯。

 補充小知識：配對中文的正規

[u4e00-u9fa5]這確實只符合中文

[^x00-xff]這個匹配所有非ASCII的字符，也就是一般意義上的半角字符，而這些%！ ）（之類的是全角字符。

HTML5之音頻與視頻元素

 audio音訊標籤

<span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">controls autoplay loop </span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/mp4"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">ssrc</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/ogg"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你的浏览器不支持<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>   
<span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span>

效果圖：

 

 它的屬性：

autoplay autoplay 如果出現該屬性，則音訊在就緒後馬上播放。

controls controls 如果出現該屬性，則向使用者顯示控件，例如播放按鈕。

loop loop 如果出現該屬性，則每當音訊結束時重新開始播放。

preload preload 如果出現該屬性，則音訊在頁面加載時進行加載，並預備播放。如果 使用 "autoplay"，則忽略該屬性。

src url 要播放的音訊的 URL。

 

video視訊標籤

<span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">controls loop muted width</span><span style="color: #0000ff;">="400"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="400"</span><span style="color: #ff0000;"> poster</span><span style="color: #0000ff;">="播放前的显示图片URL"</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="视频本地地址URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/mp4"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="视频本地地址URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/ogg"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你的浏览器不支持<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>        
<span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span>

 

它的屬性： 

autoplay autoplay 如果出現該屬性，則影片在就緒後馬上播放。

controls controls 如果出現該屬性，則向使用者顯示控件，例如播放按鈕。

loop loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。

muted muted 規定視訊的音訊輸出應該被靜音。

poster URL 規定影片下載時顯示的圖片，或在使用者點擊播放按鈕前顯示的圖片。

preload preload 如果出現該屬性，則影片在頁面加載時進行加載，並預備播放。如果 使用 "autoplay"，則忽略該屬性。

src url 要播放的影片的 URL。

width pixels 設定影片播放器的寬度。

height pixels 設定影片播放器的高度。

 

 

 它們都有三種格式一種是mp4，一種是ogg，還有一種webm，目前在這方面支援的格式還不夠完善。