zoukankan      html  css  js  c++  java
  • WEB前端第六课——HTML5主要更新

    1.新增类型

      电子邮件类型,语法<input type="email"/>,input中输入的内容必须包含“@”,并且“@”后面必须有内容

      搜索类型,语法<input type="search"/>,输入搜索关键字的文本框

      URL类型,语法<input type="url"/>,输入web站点的文本框,要求输入内容必须包含“http://”,且后面必须有内容

      颜色类型,语法<input type="color"/>,预定义的颜色拾取空间,调用系统取色板

      数字类型,语法<input type="number" min="-100" max="100" step="5"/>,定义只能输入数字的文本框,

           包含3种属性:min(规定输入域的最小值)、max(规定输入域的最大值)、step(规定合法的数字步长间隔,默认为1)、value(规定输入域的默认值)

      范围类型,语法<input type="range" min="0" max="100" value="50"/>,允许用户选择一个范围内的值,属性:min(下限值)、max(上限值)、step(步长)、value(初始值)

      日期类型,语法<input type="date"/>,创建一个日期输入域

      周类型,语法<input type="week"/>,与日期类型相似,但只能选择周

      月类型,语法<input type="month"/>,与date类型相似,但只能选择月份

    2.新增属性

      placeholder,显示默认提示内容,语法<input type="text" placeholder="请输入用户名"/>

      multiple,支持一个域中输入多个值,用逗号隔开,一般配合邮箱、URL使用,语法<input type="email" multiple/>

      autofocus,自动获取光标焦点,语法<input type="text" autofocus/>

      required,定义输入域不能为空,语法<input type="text" required/>

      minlength 和 maxlength,规定元素允许的最小字符数和最大字符数,语法<input type="password" minlength="6" maxlength="16"/>

      min 和 max,规定元素允许的最小数字和最大数字,语法<input type="number" min="0" max="100"/>

    3.新增语义化标签

      header,页面头部

      footer,页脚

      article,定义页面独立的内容区域,可独立于页面其他内容

      aside,定义页面侧边栏内容

      section,定义文档中的节

      details,文档某个部分的细节(内容可折叠收起)

      summary,是details中的标题注释

      figure,规定独立的流内容

      figcaption,是figure的标题注释

      mark,标记

      nav,导航连接

      meter,用来表示范围已知且可度量的内容,对超出阀值的情况进行提示,语法<meter min="0" max="100" value="50" low="20" high="80"></meter>

      progress,定义运行中的进度(进程),语法<progress max="100" value="20"></progress>,value定义当前值,max定义完成值

      datalist,定义选项列表,与input配合使用来规定input可能的值,通过input的list属性值与datalist的id属性值相同进行绑定,否则datalist及其选项不会在页面显示,它仅是一个合法的输入值列表

      

  • 相关阅读:
    玩个JAVA爬虫,没想玩大
    利用 Ruoyi 开发自己的业务管理系统__测试结构完成
    Vmware 和 VisualSVN-Server端口冲突
    Ruoyi的确不错,不知后续能否坚持 允许商用
    张勇:海底捞店长最高年薪600万!
    自己安装windows版本的Flink
    windows平台上运行Flink_转载于CSDN
    洛谷P3980 [NOI2008]志愿者招募
    线段树优化连边
    [HNOI2013]题解
  • 原文地址:https://www.cnblogs.com/husa/p/13335616.html
Copyright © 2011-2022 走看看