HTML5新增相关内容
![](https://img-home.csdnimg.cn/images/20240711042549.png)
HTML5相关内容
HTML5的相关内容
HTL5新增的语义化标签
视频和音频
智能表单
智能表单中的标签属性
1、HTL5新增的语义化标签
- section元素表示页面中的一个内容区块(有了section就不要写main)
- article元素表示一块与上下文无关的独立的内容
- aside:元素在article之外的,与article内容相关的辅助信息
- header元素表示页面中一个内容区块或整个页面的标题
- footer:元素表示页面中一个内容区块或整个页面的脚注
- nav元素表示页面中导航链接部分
- figure元素表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
- main元素表示页面中的主要的内容(ie不兼容)
2、视频和音频
video:元素定义视频
<video src="movie.ogg"controls="controls">Video</video>
属性:
- controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
- autoplay:属性:如果出现该属性,则视频在就绪后马上播放。
- loop属性:重复播放属性。
- muted,属性:静音属性。
- poster:属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。(视频出现的照片,自己设置)
source 备份文件
src=“文件地址”
视频格式
type=“video/webm” type=“video/ogg” type=“video/mp4”
<!-- <video src="video/3theA.mp4" controls autoplay loop muted poster="../img/image-20230807114610259.png"></video> -->
<video controls>
<source src="video/mov_bbb.mp4" type="video/mp4">
<source src="video/movie.mp4" type="video/mp4">
</source>
<source src="video/movie.webm" type="video/webm">
</source>
</video>
audio元素定义音频
<audio src="someaduio.wav">Audio</audio>
属性:
- controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
- autoplay:属性:如果出现该属性,则视频在就绪后马上播放。
- loop属性:重复播放属性。
- muted,属性:静音属性。
音频格式
type=“audio/mpeg” type=“audio/ogg”
<audio src="video/a.mp3" controls></audio>
<audio controls>
<source src="video/movie.ogg" type="audio/ogg">
<source src="video/movie.webm" type="audio/ogg">
</audio>
3、智能表单-新增输入类型
Type="color'"生成一个颜色选择的表单
Type="tel”唤起拨号盘表单
Type="search”产生一个搜索意义的表单
Type="range'”产生一个滑动条表单
Type="number"产生一个数值表单
Type="emai”限制用户必须输入email类型
Type="ur限制用户必须输入url类型
Type="date”限制用户必须输入日期
Type="onth”限制用户必须输入月类型
Type="week”限制用户必须输入周类型
Type="time”限制用户必须输入时间类型
Type="datetime-local”选取本地时间
input类型设置
email:
专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查mai地址是否存在。提交时可以为空,除非加上了required属性。
具有multiple,属性,它允许在该文本框中输入一串以(逗号)分隔的email地址。
url类型:
专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。mail地址。
<input name='url1'type='url'value="http://www.baidu.com">
Number类型
专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字,兵有min、max、step的属性。
<input name="number1"type="number"value="25"min="10"max="100"step="5"/>
range类型
是用来只允许输入一段范围内数值的文本框,它具有min属性与max属性,及step属性,可以指定每次拖动的步幅。
<input name="range1"type="range"value="25"min="O"max="100 step="5"/>
min最小值
max最大值
step数字间隔
(date,month,week,time,datetime,datetime-local)
拥有多个可供选取日期和时间的新输入类型。
date-选取日、月、年
month-选取月、年
week-选取周和年
time-选取时间(小时和分钟)
datetime-选取时间、日、月、年(UTC时间)
datetime-local-选取时间、日、月、年(本地时间)
例:<input type:="month" &gr;
Search·输入的是搜索的关键字,与type=“"tet”基本上一样。
4.表单新属性
1)、Datalist:选项列表
input的list属性值要与datalist的id值相同
<input type="url"list="url_list"name="link"/>
<datalist id="url list">
<option label="W3School"value="http://www.W3School.com.cn"/>
<option label="Google"value="http://www.google.com"/>
<option label="Microsoft"value="http://www.microsoft.com"/>
</datalist>
提示:option元素永远都要设置value属性。
2.属性
placeholder属性:
文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性:
给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得光标焦点,一个页面只能有一个
required属性
验证输入不能为空
list属性:
结合datalist元素使用
autocomplete属性:
输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。只有三种:
on/off/“”。**on,空,**可是显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示:<iput
type="text"name=“greeting” autoconplete=“on” list =greeting’>
3.自动验证
1)、required
可以应用在大多数输入元素上(除了隐藏元素和图片),在提交时如果元素内容为空白,
2)、pattern正则表达式
将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例:
<input pattern="[0-9][A-Z]{3}" title="输入内容:一个数与三个大写字母">