H5 基本标签使用 浅析 (含video标签、input表单等)
1. 音频标签<audio>
<audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio>
controls :在页面中显示音乐播放控件 autoplay :页面加载自动播放
loop :设置循环播放次数
·浏览器音乐格式兼容 浏览器默认按顺序查找兼容格式
<audio controls>
<source src = “./music/Alone.mp3”>
<source src = “./music/Alone.wav”>
<source src = “./music/Alone.ogg”>
浏览器不支持HTML5音频播放 (页面提示)
</audio>
2. 视频标签<video>
<video src = “./video/movie.mp4” controls autoplay>
controls :在页面中显示视频播放控件 autoplay :页面加载自动播放
<video>标签类似<img>可以设置宽高位置等属性
·浏览器视频格式兼容 浏览器默认按顺序查找兼容格式
<video controls>
<source src = “./video/movie.mp4”>
<source src = “./video/movie.ogg”>
浏览器不支持HTML5视频播放 (页面提示)
</video>
3. 表单构造标签<input>
① (<label>的for属性与<input>的id相关联,点击label中的email:可以使input获取焦点)
<label for = “demo”>
email: <input type = “email” id = “demo”>
</label>
这样可使获取焦点的范围扩大,在移动端触屏具有便利优势。
② <input>标签构造表单基本类型归纳
|
<input type="email"> |
输入邮箱格式 |
tel |
<input type="tel"> |
输入手机号码格式 |
url |
<input type="url"> |
输入url格式 |
number |
<input type="number"> |
输入数字格式 |
search |
<input type="search"> |
搜索框(体现语义化) |
range |
<input type="range"> |
自由拖动滑块 |
color |
<input type="color"> |
拾色器 |
time |
<input type="time"> |
|
date |
<input type="date"> |
|
datetime |
<input type="datetime"> |
|
month |
<input type="month"> |
|
week |
<input type="week"> |
|
reset |
<input type="reset" value="重置"> |
重置form表单中输入的内容 |
其中color,month,week等标签都具备兼容性问题,尤其以color突出。
③ <input>标签,基本表单属性归纳
placeholder |
<input type="text" placeholder="请输入用户名"> |
占位符 |
autofocus |
<input type="text" autofocus> |
自动获得焦点 |
multiple |
<input type="file" multiple> |
多文件上传 |
autocomplete |
<input type="text" autocomplete="off"> |
自动完成 |
form |
<input type="text" form="某表单ID"> |
与其他<form>表单关联,一同提交 |
novalidate |
<form novalidate></form> |
关闭验证 |
required |
<input type="text" required> |
必填项 |
pattern |
<input type="text" pattern="\d"> |
自定义验证,可定义正则验证 |
直接在input标签中添加属性如:<input required placeholder="请输入用户名">
④ <input>标签,list属性使用
<input list = “index”>
<datalist id = “index”>
<option value = “php”></option>
<option value = “python”></option>
<option value = “photoshop”></option>
<option value = “java”></option>
</datalist>
4. 表单list关联标签<datalist>:数据列表
<label for = “program”>
课程:<input list = “index” id = “program”>
</label>
<datalist id = “index”>
<option value = “php”></option>
<option value = “python”></option>
<option value = “photoshop”></option>
<option value = “java”></option>
</datalist>
5. 生成加密字符串标签<keygen>
生成提交给服务器的加密处理的内容。
6. 输出结果标签<output> 语义化作用
与<input>输入相对,使用方法类似一个<span>标签,在页面上展现一个字符串。
7. 度量器标签<meter>
<label for = “”>
度量器:<meter min=”0” max=”100”low=”60”high=”80”value=”50”></meter>
</label>
8. 一个基本表单(<form>,<fieldset>,<legend>,<label>,<input>)
<form> (创建一个表单,便于统一提交所有填写内容,以form为单位提交内容,
可与input的form属性关联)
<fieldset> (将表单元素进行分组,默认创建一个边框)
<legend>这是一个表单</legend> (为fieldset标签定义标题)
<label for = “”> (使用for关联一个input)
email: <input type = “email” >
</label>
<label for = “”> (使用for关联一个input)
tel: <input type = “tel” >
</label>
</fieldset>
</form>
H5 基本标签使用 浅析 (含video标签、input表单等)的更多相关文章
- jQuery同一标签多个相同事件 return语句 表单提交实例
如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click(); 则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...
- [转]SpringMVC<from:form>表单标签和<input>表单标签简介
原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...
- 一个表单里,如果有<button>标签存在,它会自动提交表单
可以用button代替input type=”submit”吗? 在ie下,<button>标记恐怕还存在几个不大不小的问题. 在一个表单里,如果有一个以上"submit&quo ...
- a标签、img图片、iframe、表单元素、div
1.<a href="http://www.baidu.com" target=''_blank">百度</a> 超链接标签 2.<img ...
- SpringMVC from 表单标签和 input 表单标签
刚学习很懵 不知道还有springmvc 自己的表单 于是乎就上网查了一下 这个真的好用多啦 刚学习很懵 不知道还有springmvc 自己的表单 于是乎就上网查了一下 这个真的好用多啦 ...
- H5新增input表单、表单属性
新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...
- 前端与后台可能需要使用交互的表单form,input标签
前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
随机推荐
- shell脚本,awk结合正则来打印文件里面的内容。
文件内容如下:key1abc d key2 1.想得到如下结果: abc d 2.想得到如下结果: key1key2
- MyISAM 和 InnoDB 的区别与优化
MyISAM 和 InnoDB 的基本区别 1.InnoDB不支持FULLTEXT类型的索引. 2.InnoDB 中不保存表的具体行数,也就是说,执行select count(*) from tabl ...
- SpringBoot之YAML
SpringBoot的配置文件有两种,一种是properties结尾的,一种是以yaml或yml文件结尾的 我们讨论一下yml文件结尾的文件: 基本语法: 其实yml文件就是键值对的形式,不过就是键( ...
- Java - 网络
要事为先,你如果想要在这个行业发展下去的话,实际上三角形的三个点在支撑着你发展,一个是技术.一个是管理(不是说管理别人,是管理你自己的时间,管理你自己的精力).还有一个就是沟通,注重这三点均衡的发展. ...
- python 实现简单语音聊天机器人
'''思路:使用百度的文本转音频API,将结果保存成mp3格式,并用mp3play库播放该文件.''' 1 # -*- coding:utf-8 -*- import sys import reque ...
- Linux 下PHP获取服务器状态CPU、MEM使用率、磁盘使用率、IP地址获取、MAC地址获取等信息记录
获取服务器状态记录使用的是SHELL命令方式进行获取输出结果 然后进行字符串拆分处理等方式进行获取到自己有用信息 贴出获取方式以及常用处理方式 <?PHP $fp = popen('执行SHE ...
- 实验一 查看CPU和内存,用机器指令和汇编指令编程
(1):使用debug,将下面的程序段写入内存,逐条执行,观察每条指令执行后,CPU中相关寄存器中内存的变化. 机器码 汇编指令 b8 20 4e mov ax,4E20H 05 ...
- Eclipse主题更换方法
1.打开Eclipse的Help->Eclipse Marketplace 2.在Find里搜索Eclipse Color Theme,点击Install按钮 3.打开Window->Pr ...
- Python虚拟机类机制之对象模型(一)
Python对象模型 在Python2.2之前,Python中存在着一个巨大的裂缝,就是Python的内置类type,比如:int和dict,这些内置类与程序员在Python中自定义的类并不是同一级别 ...
- vrpie在Visio Studio 中无法调试的问题
最近这这几天一直在研究vrpie,之前不能调试,一调试就出问题,打开那个生成的htm文件是没问题的,最初的解决方法是不通过调试来打可那个htm页面,但是这样比较麻烦,因为经常需要和服务器交互,就只能用 ...