随堂笔记之正则与HTML5新元素-tutoriel HTML-php.cn

随堂笔记之正则与HTML5新元素

WBOY

Libérer： 2016-08-08 08:49:54

original

926 Les gens l'ont consulté

在进入主题前，先插个网站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 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 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 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></span></span></span>

Copier après la connexion

这就是个简单验证范围在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 style="color: #800000;">audio </span><span style="color: #ff0000;">controls autoplay loop </span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><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 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 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></span></span></span></span>

Copier après la connexion

效果图：

它的属性：

autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop loop 如果出现该属性，则每当音频结束时重新开始播放。

preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src url 要播放的音频的 URL。

video视频标签

<span style="color: #0000ff;"><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 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 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 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></span></span></span></span>

Copier après la connexion