当前位置:主页 > 查看内容

九、HTML5 新增

发布时间:2021-06-25 00:00| 位朋友查看

简介:文章目录 九、HTML5 新增 9.1 HTML5 新增元素 9.2 HTML5 新增表单元素 9.3 HTML5 表单新增属性 九、HTML5 新增 9.1 HTML5 新增元素 Header:网页头部 Nav:导航 Footer:网页底部 Aside侧边主题内容以外 ------------以上标签为 H5 提供的语义标签其实就是 div-……


九、HTML5 新增

9.1 HTML5 新增元素

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

在这里插入图片描述

9.2 HTML5 新增表单元素

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

9.3 HTML5 表单新增属性

  1. Autocomplete:自动补全
    在这里插入图片描述
  2. Autofocus:自动获得焦点
    在这里插入图片描述
  3. Form:不同 form 域中的元素属于同一个 form 表单,Form 标签中必须有 id 属性,表单元素中使用 form 属性与之关联
    在这里插入图片描述
  4. Multiple:允许在 email 和 file 中输入多个值
    在这里插入图片描述
  5. Placeholder:文本中提示性为本
    在这里插入图片描述
  6. Required:设置表单必填项
    自定义提示文本:
    Oninvalid:当验证不通过时触发该事件
    Oninput:当元素内容发生改变时触发该事件
    setCustomValidity():设置默认提示信息
    在这里插入图片描述
    根据表单元素不同,我们一般会修改该提示内容
    在这里插入图片描述
    当验证表单内容为空时,自动执行 oninvalid 事件,该事件调用 setCustomValidity 函数,设置错误提示信息,并将错误信息在页面中显示;当文本框中的内容改变时自动执行 oninput 事件,该事件调用 setCustomValidity 函数重新设置错误信息为空字符串。
;原文链接:https://blog.csdn.net/qq_52916408/article/details/115638980
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!

推荐图文


随机推荐