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>标签构造表单基本类型归纳

email

<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为单位提交内容,

可与inputform属性关联)

<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表单等)的更多相关文章

  1. jQuery同一标签多个相同事件 return语句 表单提交实例

    如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click();   则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...

  2. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  3. 一个表单里,如果有<button>标签存在,它会自动提交表单

    可以用button代替input type=”submit”吗? 在ie下,<button>标记恐怕还存在几个不大不小的问题. 在一个表单里,如果有一个以上"submit&quo ...

  4. a标签、img图片、iframe、表单元素、div

    1.<a href="http://www.baidu.com" target=''_blank">百度</a>  超链接标签 2.<img ...

  5. SpringMVC from 表单标签和 input 表单标签

    刚学习很懵  不知道还有springmvc 自己的表单  于是乎就上网查了一下  这个真的好用多啦 刚学习很懵  不知道还有springmvc 自己的表单  于是乎就上网查了一下  这个真的好用多啦 ...

  6. H5新增input表单、表单属性

    新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...

  7. 前端与后台可能需要使用交互的表单form,input标签

    前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...

  8. HTML5 audio与video标签实现视频播放,音频播放

    随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...

  9. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

随机推荐

  1. shell脚本,awk结合正则来打印文件里面的内容。

    文件内容如下:key1abc d key2 1.想得到如下结果: abc d 2.想得到如下结果: key1key2

  2. MyISAM 和 InnoDB 的区别与优化

    MyISAM 和 InnoDB 的基本区别 1.InnoDB不支持FULLTEXT类型的索引. 2.InnoDB 中不保存表的具体行数,也就是说,执行select count(*) from tabl ...

  3. SpringBoot之YAML

    SpringBoot的配置文件有两种,一种是properties结尾的,一种是以yaml或yml文件结尾的 我们讨论一下yml文件结尾的文件: 基本语法: 其实yml文件就是键值对的形式,不过就是键( ...

  4. Java - 网络

    要事为先,你如果想要在这个行业发展下去的话,实际上三角形的三个点在支撑着你发展,一个是技术.一个是管理(不是说管理别人,是管理你自己的时间,管理你自己的精力).还有一个就是沟通,注重这三点均衡的发展. ...

  5. python 实现简单语音聊天机器人

    '''思路:使用百度的文本转音频API,将结果保存成mp3格式,并用mp3play库播放该文件.''' 1 # -*- coding:utf-8 -*- import sys import reque ...

  6. Linux 下PHP获取服务器状态CPU、MEM使用率、磁盘使用率、IP地址获取、MAC地址获取等信息记录

    获取服务器状态记录使用的是SHELL命令方式进行获取输出结果  然后进行字符串拆分处理等方式进行获取到自己有用信息 贴出获取方式以及常用处理方式 <?PHP $fp = popen('执行SHE ...

  7. 实验一 查看CPU和内存,用机器指令和汇编指令编程

    (1):使用debug,将下面的程序段写入内存,逐条执行,观察每条指令执行后,CPU中相关寄存器中内存的变化. 机器码        汇编指令 b8 20 4e     mov ax,4E20H 05 ...

  8. Eclipse主题更换方法

    1.打开Eclipse的Help->Eclipse Marketplace 2.在Find里搜索Eclipse Color Theme,点击Install按钮 3.打开Window->Pr ...

  9. Python虚拟机类机制之对象模型(一)

    Python对象模型 在Python2.2之前,Python中存在着一个巨大的裂缝,就是Python的内置类type,比如:int和dict,这些内置类与程序员在Python中自定义的类并不是同一级别 ...

  10. vrpie在Visio Studio 中无法调试的问题

    最近这这几天一直在研究vrpie,之前不能调试,一调试就出问题,打开那个生成的htm文件是没问题的,最初的解决方法是不通过调试来打可那个htm页面,但是这样比较麻烦,因为经常需要和服务器交互,就只能用 ...