H5笔记01
支持
IE9以及以上支持H5，其以下不支持
增加的和丢弃
video audio canvas
新特性：
语义
本地存储
多媒体
二维三维
特效
结构更简单
常用标签
header
article
nav
footer
main
aside
行级元素在设置高度时候会失效
兼容设置处理方式 1
document.createElement('header')
行级元素转块级元素
兼容处理方式 2
引用插件 htm5shiv.min.js
新增加type属性
color
date
datetime 大多数都不支持
datetime-local
email
tel 移动端打开数字键盘
url
number 可以指定范围 max=100 min=1 默认值 value=100
search 提示 和删除
range max min value默认值是中间值
month
week
form 属性
placeholder:提示语
autofoucus：自动获取焦点
autocomplete="on" 自动完成 必须成功提交过，必须有name属性 才可以自动填写
required:必须填写
pattern:正则验证 '^(\+86)?1\d{10}$'
file:multiple 可以选择多个文件
多邮箱输入 multiple 使用逗号分割
<input type='email' name='email' multiple>
多form提交，在form外的input同时提交 ，在form外的input加入form 指定一下form的id值即可
<input type='text' name='address' form='myform'>
select 可以选择也可以输入 --- 支持不好 尽量少使用
option 可以是单标签也可以当成双标签
当type是url,必须对datalist中的value值添加http://， 也就是说必须时合法的值才可以
<input text='text' list='datalist_id'>
<datalist id='datalist_id'>
<option value="前端开发" label='前端技术好'>
</datalist>
keygen 密钥对生成 很少使用，支持不好
<keygen></keygen>
生成公钥和私钥
信息+私钥 --> 二次加密 --发送至服务器
output 知识显示
<output></output> 提高语义
进度条
<progress max='100' value=100></progress>
度量器,带进度的不同显示
<meter max="100" min='0' high=80 low=40></meter>
添加的事件
1.oninput:监听指定元素的内容改变
2.oninvalid:验证码不通过触发验证，通过事件函数中使用this
this.setCustomValidity('请输入正确的手机号')
fieldset边框上添加文字
视频播放
embed：调用本机已经安装的程序软件
flash插件：安装flash插件，需要学习flash,苹果设备不支持flash
下面是h5新添加的
audio:音频，必须添加controls才能看见、
autoplay：自动播放
loop:循环
video:视频
controls
autoplay
loop
width:
height
poster:还没下载，或者没有播放显示的画面设置，可以设置默认的图片
设置宽高的时候只会生效其中一个，因为必须要符合等比缩放的原则
flv格式不支持，这个是不同浏览器格式的支持不同
提出了一个新的解决方案：多个格式都提供，自动选择支持的，如果都不支持就提示
<video>
<source src="xxx.flv" type ='video/flv'>
<source src="xxx.mp4" type ='video/mp4'>
您的浏览器不支持
</video>
dom操作的新模式
document.querySelector() 选择器 --单元素获取
//传入标签：获取单个元素，只会返回第一个符合条件的元素
//类选择器：使用.
//id选择器：使用#
var li=document.querySelector('li')
document.querySelectorAll() 获取所有的符合条件标签
新添加类样式操作
添加样式 classList：获取当前y样式使用add 添加,一次只能添加一个样式
document.querySelector('li').classList.add("red")
删除样式 remove，一次只能移除一个
document.querySelector('.blue').classList.remove("blue")
样式切换 tollge,没有就添加，有就删除
document.querySelector('li').classList.toggle("green")
contains 判断是否包含指定样式，有就true,否者false
document.querySelector('li').classList.contains("green")
className= 重新复制会覆盖原先的样式
item()样式获取
document.querySelector('li').classList.item(0)
获取值的新方式
1. data-开头
2. data-后必须至少有一个字符，多个单词使用-链接
建议：
1. 名称应该使用小写--不包含任何的大写字母
2. 名称中不要有任何的特殊字符
3. 名称不要有副作用数字-->
<p data-school-name='itcast'>school</p>
<script>
window.onload=function(){
var p=document.querySeletor('p');
// 驼峰命名法获取值 school-name --> schoolName
p.dataset['schoolName'];
}
</script>
