快速理解HTML5中新增的标签属性——表单，音频和视频

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

---

 

1.基础

 HTML5于09年出草案，14年定稿，是新一代开发 Web 富客户端（具有很强的交互性和体验的客户端程序，如一个在线听歌的网站、即时聊天网站）应用程序整体解决方案。包括：HTML5，CSS3，Javascript API在内的一套技术组合。

 

常用的语义化标签：

• <nav> 表示导航

• <header> 表示页眉

• <footer> 表示页脚

• <section> 表示区块

• <article> 表示文章。如文章、评论、帖子、博客

• <aside> 表示侧边栏 如文章的侧栏

• <figure> 表示媒介内容分组。

• <mark> 表示标记 (用得少)

• <progress> 表示进度 (用得少)

• <time> 表示日期

2.表单

- HTML5中一个显著的改进属性就是表单，增加可读性和丰富其内容，方便操作。

2.1 类型

• 最外层标签：<form action="">包裹所有input，内容为提交的地址,下述input则必须有name值

• 次外层:<fieldset>,对表单中的相关元素进行分组

• 内层：<legend>表单标题</legend>

• 内层：<label for="">,浏览器就会自动将焦点转到和标签相关的表单控件上。 

• 以下都包含在<label for="">内为最内层标签：

标签	含义
email: <input type="email" name="email" required><!-- required必填 -->	邮件
color: <input type="color" name="color"></label>	拾色器
url: <input type="url" name='url'>	网址
number: <input type="number" step="3" name="number">	变化框
range: <input type="range" name="range" value="100">	滑动条
search: <input type="search" name="search">	搜索框
tel: <input type="tel" name="tel">	电话
time: <input type="time" name="time">	时间（有选项）
date: <input type="date" name="date">	日期（有选项）
datetime: <input type="datetime">	日期时间 （手输）
week: <input type="week" name="week">	星期
month: <input type="month" name="month">	月份
datetime-local: <input type="datetime-local" name="datetime-local">	本地具体时间（有选项）

效果如下：

                                      

2.2 标签datalist

<input type="text" list="Data">
<datalist id="Data"><!-- input里的list和datalist绑定，同时，代码有提示功能 -->
        <option>本科</option>
        <option>研究生</option>
        <option>博士生</option>
</datalist>

效果如下：

                      

2.3 属性

• 提示文字和自动获取焦点

<input type="text" placeholder="例如：hyo" autofocus name="userName" autocomplete="on" required/>

placeholder 占位符（提示文字）

autofocus 自动获取焦点

autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)

• 自定义正则，验证表单

<input type="tel" pattern="1\d{10}"/>

上述代码一般用于手机号码验证，1表示要求首位必须为1，d{10}可填10个数

• 上传文件

 <input type="file" name="file" multiple/>

效果如下：

补充：

• input不是盒子，设置css时需要设置为block；

• label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

• <label> 标签的 for 属性应当与相关元素的 id 属性相同。

2.4 事件

    var txt1 = document.getElementById('txt1');
    var txt2 = document.getElementById('txt2');
    var num = 0;

    txt1.oninput = function () {  //用户输入时触发

        num++;  //用户每输入一次，num自动加 1
        //将统计数显示在txt2中
        txt2.value = num;
    }
    txt1.oninvalid = function () {  //验证不通过时触发
        this.setCustomValidity('亲，请输入正确哦');  //设置验证不通过时的提示文字
    }

效果如下：

---

3.多媒体

3.1 音频

• autoplay 自动播放  controls 控制条 loop 循环播放。

• preload 预加载 同时设置 autoplay 时，此属性将失效。

• 常规操作：

  <audio src="../music/恋爱循环.mp3" autoplay controls loop> </audio>

效果如下：

• 兼容方法

<audio controls loop>
        <source src="music/yinyue.mp3"/>
        <source src="music/yinyue.ogg"/>
        <source src="music/yinyue.wav"/>
        抱歉，你的浏览器暂不支持此音频格式
</audio>

---

3.2 视频

• 基本操作和音频操作相同

• width：设置播放窗口宽度。height：设置播放窗口的高度。

<video src="../video/恋爱循环.mp4" controls autoplay loop width="500px" height="300px"></video>