2017/7/16 学习心得 html5

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")
}