0

0

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

php中文网

php中文网

发布时间:2016-08-08 08:49:54

|

1016人浏览过

|

来源于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 的序列的字符串。

记得这几个可以实现简单的正则运算了。如:

<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 如果出现该属性,则视频在就绪后马上播放。

悦灵犀AI
悦灵犀AI

一个集AI绘画、问答、创作于一体的一站式AI工具平台

下载

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

loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。

muted muted 规定视频的音频输出应该被静音。

poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

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

src url 要播放的视频的 URL。

width pixels 设置视频播放器的宽度。

height pixels 设置视频播放器的高度。

 

 

 它们都有三种格式一种是mp4,一种是ogg,还有一种webm,目前在这方面支持的格式还不够完善。

 

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

32

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

23

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

16

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

6

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

268

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

195

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

170

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

85

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号