HTML5+CSS3 笔记1

一：什么是html5
    1、H5是html语音的第五"大版本"。
    2、目前主流浏览器支持H5(chrome,firefox,safari等)，IE9及以上支持H5，ie8以下不支持H5。
    3、改变用户与文档的交互方式：多媒体、video、audio、canvas
    4、新特性：语义特性，本地存储特性，网页多媒体，二维三维，特效(过渡，动画)
    5、和H4区别
        抛弃了不合理的标签和属性
        新增了一些标签和属性(表单)
        从代码的角度而言，H5的网页结构代码更简洁

二：H5中的语义标签
    1、H5新语义标签：和div没啥区别，只是给与了语义，让块见名知义
        nav 表示导航
        header 表示页眉，不是单指网页的头部，也可以是一块内容的头部，是结构块的名称，可以多处使用
        footer 表示页脚，也可以是一块内容的尾部，和header一样可以多出使用
        main 文档主要内容
        article[ˈɑːtɪkl] 文章
        aside 主题内容之外

三：H5中语义标签的兼容性
    1、在ie9中语义标签为行级元素，需要display:block转换为块元素，ie10则将语义标签视为块元素。
    2、在ie8及以下版本是不支持H5，当然也包括H5的语义标签，无法解析也就意味着所写的样式无效。
        解决方案：1、手动创建标签
                    <script>
                        document.createElement('header');
                    </script>
                 2、引入第三方插件：html5shiv.js

四：表单input标签新增type属性
    1、email：默认电子邮箱完整验证，类似于js的email格式验证
    2、tel：并不是用来实现验证的，主要常用于移动端弹出数字键盘
    3、url：只能输入合法网址"http://",类似email做了一些格式验证操作
    4、number：只能输入数字，包含小数点
        value：默认值
        max：最大值
        min：最小值（限制商品数量上下限）
    5、search：提供更人性化的输入体验
    6、range：音量
        value：默认值
        max：最大值
        min：最小值
    7、color：颜色拾取
    8、time：时分
    9、date：年月日
    10、datetime：大多数浏览器不支持，只有苹果下面的Safari支持
    11、datetime-local：年月日时分，大多数浏览器支持
    12、month月份、week星期

五：表单中新增的其他属性
    1、placeholder：提示文本
    2、autofocus：自动获取焦点
    3、autocomplete：自动提示，属性值有on：打开 off：关闭
        ▪属性值设置on
        ▪必须成功提交过
        ▪当前添加autocomplate属性的元素必须有name属性
        满足以上三点时才会出现自动提示效果
    4、required：必须输入，如果没有输入会阻止数据提交
    5、pattern：正则表达式验证
    6、multiple：选择多个文件|email中填写多个邮箱地址，以逗号分隔
    7、form：指定表单id。当该id的表单进行数据提交的时候，指定这个id的其他表单元素也会一起提交数据
    
六：新增的表单元素
    1、datalist：选择列表，在firefox中不支持datalist，真的很少用
        <input type='url' list='urls'/>
        <datalist id='urls'>
            <option value='http://www.baidu.com' label='百度'></option>
            <option value='http://www.sohu.com' label='搜狐'></option>
            <option value='http://www.163.com' label='网易'></option>
        </datalist>
        注意：
        ▪两者用list，id属性关联起来
        ▪如果input输入框type类型为url，option中value值必须是合法的网址'http://'
    2、keygen：加密，了解即可。
    3、output：显示输出信息。了解即可。
    
七：新增的表单事件
    1、oninput：监听当前指定元素内容的改变。
        和onkeyup的区别：鼠标右键粘贴onkeyup不触发，ctrl+c，ctrl+v复制粘贴onkeyup触发两次。而oninput只会触发一次。
    2、oninvalid：当验证不通过时触发。
        this.setCustomValidity("修改验证不通过时弹出框提示内容")
        
八、新增进度条标签
    1、progress
        属性：max，value
        <progress max='100' value='50'></progress>
    2、meter：度量器
        high：较高的值
        low：较低的值
        max：最大值
        min：最小值
        value：当前度量值

九：多媒体
    embed直接插入视频文件，调用本机上已安装的多媒体软件，存在兼容性性问题
    flash需要安装flash，学习成本高，iOS设备不支持
    1、audio：音频，video：视频
        src播放音频文件路径 
        controls是否显示控制条
        autoplay循环播放
        loop循环播放
        width宽度
        height高度
        poster当视频还没有加载完，或用户还未开始播放，则显示当前视频文件的第一帧或者指定一个图片为封面
        source不同浏览器支持的视频文件格式不一致，我们可以多准备些格式的视频文件，让浏览器自动选择自己支持格式的文件
            <video>
                <source src='./mp3/a.flv' type='video/flv'/>
                <source src='./mp3/a.mp4' type='video/mp4'/>
                您的浏览器不支持当前视频播放
            </video>
        
        
十、DOM元素
    1、query：查询
    2、selector：选择器
    3、querySelector：获取单个元素，如果获取的元素不止一样，则返回满足条件的第一个元素
    4、querySelectorAll：获取满足条件的所有元素——Array
        
        
十一、类样式操作
    1、add：给元素添加指定样式
        document.querySelector('li').classList.add('red');
    2、remove：删除元素指定样式
        document.querySelector('.red').classList.remove('red');
    3、toggle：切换元素样式，如果没有找到指定名称的样式则添加，否则删除
    4、contains：判断元素是否包含指定名称的样式，返回true|false
    
        
十二、自定义属性
    1、如何定义
        ▪data-开头
        ▪data-后面必须至少有一个字符，多个单词使用-连接
        ▪名称都用小写，不含特殊字符，不要用纯数字构成
    2、如何取值
        <p data-good-name='kuzi'>裤子</p>
        <script>
            window.onload = function(){
                var p = document.querySelector('p');
                //获取自定义属性值，data-后面的单词使用camel(骆峰)命名法连接，必须用camel命名法获取值，不然有可能无法获取值
                var value = p.dataset['goodName'];
            }
        </script>