html5 常用标签和属性

亦凉 2022-08-21 05:51 231阅读 0赞

html5出现了很多让人兴奋的标签和属性，以前一些功能我们自己需要写组件或者去找组件，现在html5原生的就直接帮我们集成了，这当中就表单组件的一些常用功能。

html5 input 组件

1.  时间日期类型

month     <input type = "month" /><br><br>  
      week     <input type = "week" /><br><br>  
     date     <input type = "date" /><br><br>   
    time     <input type = "time" /><br><br>   
    datetime-local  <input type = "datetime-local" /><br><br>

1.  校验类型,当点提交按钮的时候，能看到具体的效果

<form>
      tel     <input type = "tel" /><br><br>  
      url     <input type = "url" /><br><br>  
     email     <input type = "email" /><br><br>   
       <input type = "submit" value = "提交"/>
      </form>

1.  其他input类型

<form>
      number     <input type = "number" /><br><br>  
      range      <input type = "range" /><br><br>  
      color      <input type = "color" /><br><br>   
      image      <input type = "image" src = "color.png" alt = "图片数据"/><br><br>   
       <input type = "submit" value = "提交"/>
      </form>

type=image和type=submit都可以相应回车，并且都能提交。不过唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去

html5 input 属性

1.  maxlength 和 minlength 表示输入框能输入字符串的长度

1.  size 输入框最多只能显示5个字符，你可以输入无数个

1.  required 必填字段

1.  multiple multiple 表示多输入框选择多个内容输入，注意用逗号分割

1.  pattern 自定义正则表达式规则，校验输入框字符

1.  min and max 允许输入框最大和最小值，通常用于type是日期，number，range类型

1.  step 通常用于日期，number和range类型，用来表示单步的值

<input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">`

1.  list 用于指定下拉表单的对象数据

1.  placeholder 在表单中显示提示信息

10.Autocomplete 是否打开自动匹配输入功能，它通过cookie把上次填写submit的表单value存了下来，作为自动匹配的项，autocomplete = “on||off”，可以在form直接autocomplete = “off”把整个表单自动匹配输入功能去掉

html5 一些常用标签

1.  label 常用用来包裹input和提示文字，如下面，当你点击男或女的文字时，自动会触发radio的点击，不用直接点击radiao才会触发点击事件

1.  optgroup 可以对下拉菜单选项进行分组

<select name="c">
       <optgroup label="8.01 Physics I: Classical Mechanics">
        <option value="8.01.1">Lecture 01: Powers of Ten
        <option value="8.01.2">Lecture 02: 1D Kinematics
        <option value="8.01.3">Lecture 03: Vectors
       <optgroup label="8.02 Electricity and Magnestism">
        <option value="8.02.1">Lecture 01: What holds our world together?
        <option value="8.02.2">Lecture 02: Electric Field
        <option value="8.02.3">Lecture 03: Electric Flux
       <optgroup label="8.03 Physics III: Vibrations and Waves">
        <option value="8.03.1">Lecture 01: Periodic Phenomenon
        <option value="8.03.2">Lecture 02: Beats
        <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
      </select>

1.  datalist 数据列表，常用用来和input的list属性一起用，可以输入自动匹配，类似autocomplete

1.  progress 进度条标签设置value可以显示当前进度

<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

html5 语义化文档结构标签

1.  header 结构的头部
2.  menu 菜单标签
3.  aside 理解为结构左边栏，通常放一些目录
4.  nav 导航标签，例如面包屑导航
5.  section 模块标签，和div差不多，但是比div语义化重一些，一般我做web app开发，一个tab页处理作为一个section
6.  article 文章标签，一般是有明确标题，内容，底部作者等等的语义
7.  sumary 摘要标签
8.  main 一个article里面的主要内容
9.  details 详细标签
10. address 表示地址标签
11. time 表示时间标签
12. footer 结构的底部

自己理解分析的一个图：

![这里写图片描述][20160318011052468]

换衣有错指出，一起交流

博客参考：

[https://dev.w3.org/html5/html-author/][https_dev.w3.org_html5_html-author]

[20160318011052468]: /images/20220731/14042891f46e492aaeb24be898b9655c.png
[https_dev.w3.org_html5_html-author]: https://dev.w3.org/html5/html-author/