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)?1d{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
    
    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>