隨堂筆記之正則與HTML5新元素

来源:http://www.cnblogs.com/zhangzhicheng/archive/2016/08/04/5738763.html
-Advertisement-
Play Games

在進入主題前,先插個網站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,目前在這方面支持的格式還不夠完善。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js代碼: 游戲的對象 ,食物,蛇 ,游戲控制思路如下 (完整代碼在https://github.com/774044859yf/ObjectSnakeGame下載) var snake = { ...
  • [1]參數預設值 [2]rest參數 [3]擴展運算符 [4]箭頭函數 ...
  • jQuery.data的是jQuery的數據緩存系統。它的主要作用就是為普通對象或者DOM元素添加數據。 1 內部存儲原理 這個原理很簡單,原本要添加在DOM元素本身的數據,現在被集中的存儲在cache集合中。它們之間靠一個從1開始的數字鍵來聯繫著。這樣DOM元素就不會像以前那麼笨重了,更不會出現以... ...
  • 一、引言 前面我們介紹了有關於內置對象的很多很多的API,講道理得話如果想徹底的掌握那一定要經過一定的代碼段沉澱下。大家可以想象一下,既然在程式中有很多的內置對象供我們使用,那我們是不是也可以定義一些對象作為我們自己的特用對象呢?答案肯定是可以的。 二、導入 在工作中根據內容需求不同我們可以定義不同 ...
  • 在JavaScript的學習當中,this關鍵字的出現頻率可不低,所以想想有必要對this關鍵字做一個總結。在總結過程中,參考的資料來源於書本及網上。 一、定義 1、this是函數內部的一個特殊對象(或this引用)--它引用的是函數據以執行的環境對象。(來源於JavaScript高級程式設計) 2 ...
  • 正則需要傳參時,必須使用new RegExp(); var re = new RegExp('\\b'+sClass+'\\b'); 量詞,轉義字元: \s : 空格\S : 非空格 \d : 數字\D : 非數字 \w : 字元(字母,數字,下劃線)\W : 非字元 \. :真正的點 \b:獨立的 ...
  • 給select元素增加:padding-left:20px;但是未生效,如下圖所示: 在select上如何使設置padding生效? 方法一: 設置屬性appearance: 給select增加屬性: appearance: none; -webkit-appearance: none; 效果如下: ...
  • 內聯樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet) 例外:但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表; 1,內聯樣式表權值為1000; 2,ID選擇器的權值為100; 3,Cla ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...