HTML5的相关知识学习笔记（三）

从HTML原有基础过渡到如今的HTML5，HTML5新增了一些表单元素及属性，和一些其他元素。HTML5以下是对此情况进行的一些相关的简单概括和举例，用以巩固对HTML5的学习。

表单元素

• progress表示任务的完成情况，常用于进度条

<progress max="100" value="20"></progress>

• output 表示用户动作产生的结果

<output for="">内容</output>

• meter元素表示规定范围内的数量值。

<meter min="0" max="100" low="40" high="60" optimum="50"></meter>

• datalist表示其他控件可用的值，其值通过<option>作为datalist的子元素存在。

<datalist id="one">
  <!-- option中不用内容只用写value -->
  <option value="1"></option>
  <option value="2"></option>
</datalist>

【注意】details与select的option的对比:

1. 如果在option标签内部写了内容的话，点击option之后，datalist显示的是option的value，select那边显示的是option的元素内容。
2. 数据提交都提交的是option的value值。
3. datalist在火狐和谷歌上显示的区别，火狐上只显示内容，谷歌上显示value跟内容。

表单属性

• 在H5中，新增了一些表单属性。

form属性，值为一个form标签的id值 。

formaction属性，指定提交按钮提交数据的地址。

formaction属性一般用于提交按钮和图片按钮上，用于指定处理表单提交的后台程序，可以重写form中的action属性。

formenctype 一般用于提交按钮和图片按钮上，用于指定处理表单的内容类型。

formmethod属性，指定表单提交的方式。

formnovalidate属性，指定表单是否验证，布尔属性，写上就代表不验证 。

formtarget属性，指定响应打开的方式。

autofocus当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性，值为boolean类型。

list取值为元素的id，用于显示提示内容。

max/min表单组件能够接受到的最大值/最小值。

placeholder对用户的输入进行提示，常用于搜索框，不要出现回车换行。

pattern取值为正则表达式，用于表单验证。

required表示在表单提交之前必须表单组件中必须输入值。

其他元素

• 高亮、引用、缩略词

<mark></mark>高亮黄底

<cite></cite>引用，倾斜

<abbr title="">缩略词

• 媒体元素

音频：<audio src=“” controls autoplay loop muted></audio>

视频：<video src=“” controls autoplay loop muted></video>
controls 控制条
loop 循环播放
muted 静音播放
autoplay 自动播放