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

系统管理员 2021-12-16 04:48 295阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][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="">内为最内层标签：

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

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70][]

## 2.2 标签datalist ##

效果如下：

![20190704212154548.png][]                      ![20190704212216946.png][]

## 2.3 属性 ##

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

placeholder 占位符（提示文字）

autofocus 自动获取焦点

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

*  自定义正则，验证表单

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

*  上传文件

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70 1][]

补充：

*  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('亲，请输入正确哦');  //设置验证不通过时的提示文字
        }

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70 2][]

--------------------

# 3.多媒体 #

## 3.1 音频 ##

*  autoplay 自动播放  controls 控制条 loop 循环播放。
 *  preload 预加载 同时设置 autoplay 时，此属性将失效。
 *  常规操作：

效果如下：

![20190705093621130.png][]

*  兼容方法

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

--------------------

## 3.2 视频 ##

*  基本操作和音频操作相同
 *  width：设置播放窗口宽度。height：设置播放窗口的高度。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70 3][]

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]: /images/20211214/a5318ba190c6488f8b248a129299b42a.png
[20190704212154548.png]: https://img-blog.csdnimg.cn/20190704212154548.png
[20190704212216946.png]: /images/20211214/2fcda8615fde4474821a0ae76d624887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70 1]: /images/20211214/944a2057b56c4e2a96e6daa463252683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70 2]: /images/20211214/0d9b4af49fcc4acc9a6b914f24cfcc2f.png
[20190705093621130.png]: /images/20211214/f51de437fda6423d8091cd885d222cb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70 3]: /images/20211214/27643728c9b647559ff72ee70eb54537.png