隨堂筆記之正則與HTML5新元素-html教學-PHP中文網

在進入主題前，先插個網站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>

登入後複製