WEB前端第六课——HTML5主要更新

2020-07-18 14:48发布

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及其选项不会在页面显示,它仅是一个合法的输入值列表

  

原文: https://www.cnblogs.com/husa/p/13335616.html
标签: