九、HTML5 新增

偏执的太偏执、 2022-11-18 05:40 181阅读 0赞

### 文章目录 ###

*  九、HTML5 新增
 *   *  9.1 HTML5 新增元素
     *  9.2 HTML5 新增表单元素
     *  9.3 HTML5 表单新增属性

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

# 九、HTML5 新增 #

## 9.1 HTML5 新增元素 ##

1.  Header:网页头部
2.  Nav:导航
3.  Footer:网页底部
4.  Aside：侧边，主题内容以外  
    \------------以上标签为 H5 提供的语义标签，其实就是 div------------
5.  fieldset:可以将表单内的相关元素分组fieldset 和 legend 搭配使用，legend 用于设置分组标题  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]
6.  datalist：列表标签，该列表标签与 input 标签搭配使用,用于实现自动补全功能

<input type=”text” list=”itcourse”/>
    <datalist id=”itcourse”>
    <option>Java</option>
    <option>javaScript</option>
    <option>SQL</option>
    </datalist>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]

## 9.2 HTML5 新增表单元素 ##

1.  tel:
2.  email:
3.  url
4.  number
5.  range
6.  date
7.  search
8.  color

## 9.3 HTML5 表单新增属性 ##

1.  Autocomplete:自动补全  
    ![在这里插入图片描述][20210412203410964.png]
2.  Autofocus:自动获得焦点  
    ![在这里插入图片描述][20210412203438255.png]
3.  Form:不同 form 域中的元素属于同一个 form 表单，Form 标签中必须有 id 属性，表单元素中使用 form 属性与之关联  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]
4.  Multiple:允许在 email 和 file 中输入多个值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]
5.  Placeholder:文本中提示性为本  
    ![在这里插入图片描述][20210412210053947.png]
6.  Required:设置表单必填项  
    自定义提示文本:  
    Oninvalid:当验证不通过时触发该事件  
    Oninput:当元素内容发生改变时触发该事件  
    setCustomValidity():设置默认提示信息  
    ![在这里插入图片描述][20210412210115986.png]  
    根据表单元素不同，我们一般会修改该提示内容  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 4]  
    当验证表单内容为空时，自动执行 oninvalid 事件，该事件调用 setCustomValidity 函数，设置错误提示信息，并将错误信息在页面中显示;当文本框中的内容改变时自动执行 oninput 事件,该事件调用 setCustomValidity 函数重新设置错误信息为空字符串。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: /images/20221022/f58edf75832e4c6e8caa304260a1f0be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]: /images/20221022/64cafa0165ed4ae4b0a8ce9771a317a2.png
[20210412203410964.png]: /images/20221022/0aa977fef8bf4e738c237365a3adaf5d.png
[20210412203438255.png]: /images/20221022/c7080c8da9ea4556b40777d115ca11f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]: /images/20221022/bdc8b0fb14fa4a71afd19019e5640c29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]: /images/20221022/360470fe386444c5af41646d637a17dd.png
[20210412210053947.png]: /images/20221022/827cd211f21c43bf96bc35c13751df1b.png
[20210412210115986.png]: /images/20221022/51a2b30d611d4fd98c36b628cb9599e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 4]: /images/20221022/4f3fb45875cb4fbe97fa82e5a08f46ac.png