标签:拖动 title 宽度 value 搜索结果 rom 最小 添加 图片
mark
高亮显示文字,典型应用搜索结果中高亮显示搜素关键字。
写法: <mark></mark>
source 标签
标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
video
定义视频,比如电影片段或其他视频流;
写法: <video src=”” ></video>
ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
当前, <video> 元素支持三种视频格式: .MP4, .WebM, 和 .ogg:
可设置属性:
src :视频的路径
Width: 视频播放器的宽度
height: 视频播放器的高度
autoplay:autoplay ; 表示立刻播放
controls:controls;显示播放控制组键
loop:loop; 反复播放;布尔值,如果设置了就会重复播放否则不会;
muted:muted ; 处于静音状态
poster; 指定视频数据载入时显示的图片
preload: auto / metadata / none ;表示预先载入视频
取值none不预先载入;auto一旦页面加载就会开始加载视频,默认值;
metadata 页面加载后仅加载元数据,和默认有点类似;
(主流浏览器都不支持,除了IE;)
兼容浏览器的写法:
<video width=”200”height=”200”controls=”controls”>
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.ogg" type="video/ogg"></source>
(还可以加载其他格式)
您的浏览器不支持 video 标签。
</video>
注:<source> 定义多种媒体类型,例如<video>、<audio>中的文件类型
audio
定义音频,比如音乐或其他音频流
写法:
<audio src=“ ”> </audio>
Safari 浏览器,音频文件必须是 MP3 或 Wav 类型 mpeg。
兼容浏览器写法:
<audio controls=”controls”> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
Html表单一直都是web的核心技术之一,html5为表单添加了新的js功能和结构上更加自由的写法,极大的提高了开发效率,xhtml中需要放在form中,而html5中表单元素可以放在页面任何位置;
新增表单类型元素:
email 邮箱
url 网址
number 数值
range 范围数值
date 日期
search 搜索
color 颜色
1、 email: 邮箱类型的文本框验证
应用:
<input name=”email1” type=”email” required />
2、 url : 输入URL地址的文本框
应用:
<input name=”url1” type="url" required />
3、 color : 用来选取颜色。
应用:
<input name=”color1” type="color" required />
4、 number: 用来输入数字的文本框。
属性:min :允许的最小值
max: 允许的最大值
step: 规定的间隔值
value:默认值
应用:
<input name=”number1” type="number" value="20" minn="10" max="100" step="5" required />
5、 range: 用来只允话输入一段范围内数值的文本框
属性: min 最小值
max 最大值
step 拖动的步幅间隔值
value:默认值
应用:
<input name="range1" type="range" value="25" min="0" max="100" step="5" />
6、 search : 用于搜索域,显示为常规的文本框,除了火狐浏览器其他都会在输入框里显示一个取消搜索的符号
应用:
<input name=”search1” type="search" />
7、 date : 提供多个选取日期和时间的新输入类型
属性:
·date - 选取日、月、年
·month - 选取月、年
·week - 选取周和年
·time - 选取时间(小时和分钟)
.datetime - 选取时间、日、月、年(UTC世界标准时间)
·datetime-local - 选取时间、日、月、年(本地时间)
8、 output :用于不同类型的输出,比如计算或脚本输出,显 示计算结果
注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。
应用:
第一种: <form oninput="out.value=parseInt(a.value)+parseInt(b.value)"> "0" <input type="range" id="a" value="50" > "100" <input type="number" id="b" value="50" > "=" <output name="out" for="a b"> "120" </output> </form> 第二种: <form oninput="cun.value=num1.valueAsNumber + num2.valueAsNumber"> <input type="number" value="30" id="num1"> + <input type="number" value="20" id="num2"/> = <output name="cun" for="num1 num2"> 50 </output> </form>
对新元素样式的使用:
注意,跟 input 标签设置样式一样,但是要设置标签中局部的样式不能实现。如改变日历的背景色,颜色框的按钮效果,等,这些都不可以实现。
9、 form :可以通过id 匹配所属表单,可以实现表单元素放在表单之外;
应用:
<form id=”myform”></form> <input type=”text” form=”myform” />
HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能。
自动验证
1) required
可以应用在大多数输入元素上(除了隐藏元素和图片),在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。
2) pattern
将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例:
<input pattern = “[0-9][A-Z]{3}” title="输入内容:一个数与三个大写字母" placeholder=‘输入内容:一个数与三个大写字母’>
1:用户名验证规则 : 用户名长度为6~12并且由字母组成
pattern="[A-z]{6,12}"
2:密码验证规则 : 密码必须是数组与字母组合
pattern="[A-Za-z].*[0-9]|[0-9].*[A-Za-z]"
3) placeholder属性:
文本框处于未输入状态时文本框中显示的输入提示。
4) autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得焦点,一个页面只能有一个。
5) autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。只有三种:on/off/""。on可显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中显示:
<input type="text" name="greeting" autocomplete="on" list ="greeting">
6)Novalidate属性 取消验证 可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证
在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。
标签:拖动 title 宽度 value 搜索结果 rom 最小 添加 图片
原文地址:https://www.cnblogs.com/hudunyu/p/11937019.html