正则表达式与HTML5新元素

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，目前在这方面支持的格式还不够完善。

以上所述是小编给大家介绍的正则表达式与HTML5新元素，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • HTML5 canvas 9绘制图片实例详解

    HTML5 canvas 9绘制图片实例详解

    绘制图片 Var image=new Image(); image.src=" http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg"; image.onload=function(){} Context.drawImage(image,x,y); Context.drawImage(image,x,y,w,h); Context.drawIamge(image,sx,s

  • HTML5 移动页面自适应手机屏幕宽度详解

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

  • 使用HTML5+Boostrap打造简单的音乐播放器

    使用HTML5+Boostrap打造简单的音乐播放器

    前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是jQuery的源码和Boostrap.js的源码,任务很艰巨呢,加油~在此就不整篇的贴代码了,如果感兴趣的小伙伴可以发消息给我,可以把代码传给你们~ 正文: 先上效果图 1.布局:Boostrap里的响应式和自适应布局是自然跑不掉的,container中嵌套row再分别嵌套aside和main(H5新

  • JS+HTML5手机开发之滚动和惯性缓动实现方法分析

    本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法.分享给大家供大家参考,具体如下: 1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现 思路:对比手指在屏幕上移动前后位置变化

  • NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

    NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置.这里我用的express框架是3.21.2版本. 我们来简单介绍下拖拽效果是怎么实现的. 这里先看代码: <!DOCTYPE html> <html lang=

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • HTML5 实现的一个俄罗斯方块实例代码

    HTML5 实现的一个俄罗斯方块实例代码

    示例简单,运行地址为:http://chendd.cn/demo/html/canvas/elsfk.html,得需要支持html5浏览器的环境. 实现的功能:方块旋转(W键).自动下落.移动(ASD).消行.快速下落(空格键).下落阴影.游戏结束. 为实现功能:消行时的计分.等级.以及不同等级的下落速度等. 学习了xiaoE的Java版本的俄罗斯方块后,自己动手使用html5的canvas实现的, 参考效果图如下: 详细代码如下: <!DOCTYPE html> <html> &

  • 关于Android HTML5 audio autoplay无效问题的解决方案

    前言:在android HTML5 开发中有不少人遇到过 audio 标签 autoplay在某些设备上无效的问题,网上大多是讲怎么在js中操作,即在特定的时刻调用audio的play()方法,在android上还是无效. 一.解决方案 在android 4.2添加了允许用户手势触发音视频播放接口,该接口默认为 true ,即默认不允许自动播放音视频,只能是用户交互的方式由用户自己促发播放. WebView webView = this.finishActivity(R.id.main_act_

  • 手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

    手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

    先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小 使用js框架是PhotoSwipe.  PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势. 1.可控制多种风格如: 标题.分享.全屏按钮,点击事件.是否加入字幕,背景透明等. 2.可支持移动端触摸手势兼容pc端 所有的基本手势支持:滑动下一个或上一个,拖动平移.缩放.放大或关闭,点击切换控件,双击放大或缩放.

  • 正则表达式与HTML5新元素

    正则表达式与HTML5新元素

    ProcessOn是一个在线协作绘图平台,为用户提供最强大.易用的作图工具! 它可以很方便的在线简单绘制一些东西,让自己去具体理解. 正则表达式 今日的正则只是学习正则的简单使用.在HTML5的标签属性的强大面前,我们已经可以不用去先学习javascript才能再去正则了,因为HTML5的input标签的pattern可以实现标签的验证,近似取代复杂的javascript使用正则验证表单,在未来一定会完全取代的. 正则的简单使用: [0-9] 查找任何从 0 至 9 的数字. [a-z] 查找任

  • 正则表达式字面量在ECMAScript5中的变化

    在<JavaScript语言精粹>的第72页有这样一段: 用正则表达式字面量创建的RegExp对象来共享同一个单实例: 复制代码 代码如下: function make_a_matcher( ) { return /a/gi; } var x = make_a_matcher( ); var y = make_a_matcher( ); // 注意:x 和 y 是同一个对象! x.lastIndex = 10; document.writeln(y.lastIndex); // 10当你在浏览

  • javascript基础知识之html5轮播图实例讲解（44）

    本文实例为大家分享了html5轮播图的具体代码,供大家参考,具体内容如下 1.轮播图的布局: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*去除默认样式*/ *{ margin: 0; padding: 0; } /*设置div*/ #out

  • js浏览器html5表单验证

    js浏览器html5表单验证

    html5表单添加了很多类型的表单,而且还自带验证的功能.在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘 但是由于不同的浏览器对不合法输入提示文案不一致,样式也不一样,并且老的浏览器不兼容(IE9及以下),导致了在生产环境中比较少见到.例如对于邮箱格式的检验,不同浏览器的效果如下: Chrome Firefox IE safari html5的表单跨浏览器有很大的问题 具体来说存在三个问题: (1) 输入框blur的时候不会触发检查,只有在点提交时才触发

  • jQuery简单实现向列表动态添加新元素的方法示例

    jQuery简单实现向列表动态添加新元素的方法示例

    本文实例讲述了jQuery简单实现向列表动态添加新元素的方法.分享给大家供大家参考,具体如下: 先看看效果图: 完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery列表添加新元素</title> <script src="jquery-

  • python正则表达式面试题解答

    三道python正则表达式面试题,具体如下 1.去除以下html文件中的标签,只显示文本信息. <div> <p>岗位职责:</p> <p>完成推荐算法.数据统计.接口.后台等服务器端相关工作</p> <p><br></p> <p>必备要求:</p> <p>良好的自我驱动力和职业素养,工作积极主动.结果导向</p> <p> <br><

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • Python正则表达式学习小例子

    正则表达式是处理字符串的强大工具.作为一个概念而言,正则表达式对于Python来说并不是独有的.但是,Python中的正则表达式在实际使用过程中还是有一些细小的差别. (1)匹配1-100之间的数 import re s = '100' # 1-100内的任意数字 ret = re.match(r'(100|[1-9]\d{0,1})$',s) print(ret.group()) (100|[1-9]\d{0,1})$ 100可以匹配100 | 或者匹配[1-9]中的一个数,然后后面\d是数字

  • 完全不用基础的HTML5入门篇教程

    目录 html5简介 新特征 HTML5的一些改进 HTML5的多媒体 注释: 基础 标题 HTML段落 HTML链接 一个简单的代码例子 html5简介 HTML5是构建Web内容的一种语言描述方式.HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一. 新特征 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比如 article.footer.hea

  • Python正则表达式re模块详解(建议收藏!)

    Python正则表达式re模块详解(建议收藏!)

    目录 前言 match 匹配字符串 单字符匹配 . 匹配任意一个字符 \d 匹配数字 \D 匹配非数字 \S 匹配非空白 \w 匹配单词.字符,如大小写字母,数字,_ 下划线 \W 匹配非单词字符 [ ] 匹配[ ]中列举的字符 表示数量 * 出现0次或无数次 + 至少出现一次 ? 1次或则0次 {m,} 至少出现m次 匹配边界 $ 匹配结尾字符 ^ 匹配开头字符 \b 匹配一个单词的边界 \B 匹配非单词边界 匹配分组 | 匹配左右任意一个表达式 (ab) 将括号中字符作为一个分组 searc

随机推荐