前端学习打卡Day07

1.h5新增的特性
        1）增强型表   2）canvas svg    3）音频视频   4）本地存储与缓存   
        5）语义化标签  header,section,footer   nav,main,aside  article/header,footer

2.音视频（属性值与名相同，可省略赋值）
        音频audio  视频video  src后写音视频文件地址
        1）controls  控制栏，必须写的属性
        2）loop 循环播放
        3）muted 静音播放
        4）autoplay 自动播放 Edge浏览器支持，部分浏览器禁用
        视频特有属性：poster 海报    width和height 播放界面宽高，比例缩放，多的部分留白   

3.表单增强
 

    <form action="">
        <div>
            颜色选择<input type="color" name="color"><br>
            邮箱选择<input type="email" name="email"><br>
            url地址(完整地址):<input type="url" name="url"> <br>
            电话号码（手机上显示小键盘）<input type="tel"><br>
            滑块效果<input type="range" name="range" min="100" max="200" 
                    value="100" step="10"><br>
            数字类型<input type="number" min="0" max="10" value="2" step="4"><br>
            搜索<input type="search"><br>
            日期选择<input type="date" name="" id=""><br>
            月份选择<input type="month" name="" id=""><br>
            周数选择<input type="week" name="" id=""><br>
            本地时间选择<input type="datetime-local" name="datetime-local" id="">
        </div>
        <input type="submit">
    </form>

 4.选项列表
        datalist+option 实现模糊搜获，datalist的id值设置为input标签的list属性值

    <input type="text" list="mylist" name="" id="">
    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手镯"></option>
    </datalist>

5.其他重要属性（属性值与名相同，可省略赋值）
        1）autofocus 自动获取焦点
        2）pattern 正则表达式
        3）required 表示必填项，不能为空
        4）multiple 支持多个选项，输入的内容用逗号隔开

6.渐进增强和优雅降级
        1）渐进增强 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行改进和增强，从而实现更好的用户体验
        2）优雅降级 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

7.后代兄弟选择器
        1）空格表示后代选择器
        2）>表示亲儿子选择器
        3）~表示当前元素之后的所有兄弟选择器
        4）+表示当前元素之后的第一个兄弟选择器

8.属性选择器[class=,input=,]
        1）=属性值完全匹配
        2）~=属性值包含匹配
        3）模糊匹配   ^=b表示以b开头    $=b表示以b结尾     *=b表示包含b 

9.结构性伪类选择器 
        1）：first-child 匹配子集的第一个元素
        2）：last-child 匹配子集的最后一个元素
        3）：nth-child(n) 匹配索引值为n的子元素， 偶数选择器2n或even，奇数2n+1或odd
        4）：only-child 独生子选择器
        5）：empty 空子类选择器，必须什么都没有，空格换行都不行
        6）：root 根选择器，指向HTML
        7）：target 选中的当前目标选择器，一般与锚点同用（#id）
        8）：not（其他选择器结构）表示非指定选择的选择

11.UI状态类选择器       
        1）：enabled 匹配表单中处于可用状态的元素
        2）：disabled 匹配表单中处于不可用状态的元素
        3）：checked 匹配表单中处于选中状态的元素
        4）：：selection 匹配元素中被选中或处于高亮状态的部分，字体和背景

12.动态伪类选择器，常用于链接锚点上
        1）：link 定义了超链接且未被访问过
        2）：visited 定义了超链接且已被访问过
        3）：active 已经被激活
        4）：hover 鼠标停留在元素上