2017/7/16 学习心得 html5

时间:2022-04-02 16:54:25

1、

lang=“en” //所用语言是英语

2、语义化

<header> <nav> <section>等

ie8以下不支持h5标签

解决方法:引入html5shiv.js文件

新增语义化标签

    header 头部

    nav  导航

    section  区域

    aside  侧边栏

    article 文章

    footer 底部

   progress  进度条

3、表单类型

   表单类型:type="text"

   email

   tel:默认没有验证

   number

   url :网址,带有http协议

   search

   number  step:步长

   color

   range  value  max min

   time 以下四个都有选择器

   date

   month

   week

4、表单元素 (标签)

1)智能下拉菜单

数据列表标签

既有下拉栏,又有输入框,可以自动匹配

<input list="car"  type="text">

<datalist  id="car">

<option>宝马</option>

</datalist>

2)

<output>向外展示内容,不当作内容提交

 <keygen/>   生成密钥的 用于表单安全传输
  <meter></meter> 度量器  max   min  value(所在的位置)  low(低于low颜色改变)  high(高于high颜色改变)
  <progress></progress> 进度条  max   min  value

5、表单属性

<input type="text" >

 placeholder="123" 提示文字,占位符

autofocus 自动获取焦点

autocomplete="on/off" 默认是on 记录用户输入提示

required 必填的


上传文件:

<input tyoe="file">

multiple 多选,上传多个文件


关闭表单验证:

<form action="" novalidate>  只能加给form、


添加验证:

<input type="tel" pattern="1/d{10}"/>   pattern自定义正则验证


6、表单事件

oninput 用户输入内容触发

oninvalid  验证不通过时触发。用于设置验证不通过时的提示文字

tet.oninvalid=function(){

this.setCustomValidity("abc")

}