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

}