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

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

可与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>