html5 1

nav 导航
header 页眉
footer 页脚
main 文档主要内容
article 文章
aside 主题内容之外
footer 文档 页脚

main > article main标签 下的 article 标签

ie8 引入第三方插件
html5shiv.min.js

html5 新增的表单属性

需要@符号 包含域名
邮箱<input type="email" >

tel不能实现验证 目的是移动端打开数字键盘
电话<input type="tel" >

必须输入合法的网址 必须包含http
网址<input type="url" >

数量<input type="num" value="" 默认值 min=""最小值 max=""最大值>

搜索<input type="search" />

范围
<input type="range" max="" min="" value=""> 默认50 最大100 最小0

颜色
<input type="color" >选择颜色

时间
<input type="date" > 年月日
time 一天的时间 时分秒
datetime 总时间 年月日时分秒 大多数浏览器不支持 苹果支持
datetime-local 大多数浏览器支持
month 月份
week 周

新属性
placeholder 提示文本
autofocus 自动焦点
autocomplete on off 自动完成 必须成功提交过 提交才会有记录
必须要name属性

required 必须输入
pattern 正则匹配

file input
multiple 多个提交

email multiple 多个提交以逗号分隔

超出form的元素 就没法提交
这时候就可以使用

<input type="text" name="address" form="form的ID" >

<select>
<option></option>
<select>

不仅可以选择 还应该可以输入 不常用datalist firefox不支持
datalist
value 具体值 label提示信息
<input type="text" list="subjects">
<datalist id="subjects">
<option value="a" label="提示信息">a</option>
</datalist>

网址 type url urls 必须添加http://
<input type="url" list="urls">
<datalist id="urls">
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sohu.com" label="搜狐"></option>
</datalist>

keygen元素 密钥对生成器
非对称加密 支持率较低
<keygen></keygen>

显示输出信息 显示 无法修改
<output></output>

新事件
oninput 监听当前制定元素内容的改变 只要内容改变 添加内容 删除内容 触发

onkeyup 每一个键弹起触发一次 粘贴keyup 没有监听

oninvalid 验证不通过触发
document.getElementByid("userphone").oninvalid(=>{
this.setCustomValidity("设置提示信息")
})

进度条
<progress max="100" value="50"></progress>

度量器 衡量当前进度值
high规定的较高的值
low 规定的较低的值
max 最大值
min 最小值
value 当前度量值
<meter></meter>

<fieldset>
<legend>档案</legend>
</fieldset>

box-sizing:border-box width 内容+ padding+border

border-radius 4px 圆角