第二章：HTML5基础---新增的语义化标签、电量、磁盘容量、新增下拉列表:模拟搜素功能、新增多媒体标签、新增表单type、新增表单属性、响应式页面

<1..h5新增的语义化(看到该标签就知道板块相关的内容)标签 >

    header 头部

    nav 导航

    main 主要内容区

    section 板块

    article 段落

    figure>figcaption 类似于自定义列表

    footer 底部

    time 时间  内联元素

    mark 标记 内联元素

<2..电量、磁盘容量>

    <meter min="电量低值" max="电量高值" low="最低值" higt="最高值" value="当前值"></meter>

            - 当前值如果低于low值或者高于high值会变警告色

    进度条

            <progress min="最低进度" max="最高进度" value="当前进度值"></progress>  

<3..h5新增下拉列表:模拟搜素功能>

<input type="text" list="myData">

<datalist id="myData">

    <option value="a1"></option>

    <option value="a2"></option>

</datalist>

点击展开的

<details>

    <summary>标题</summary>

    <p>

        内容

    </p>

</details>

<4..h5新增多媒体标签>

    1. 音频标签  audio 内联块

        controls 显示控件

        loop 循环

        muted 静音

        autoplay 自动播放 谷歌和火狐禁止 ie可以

    2. 视频标签 video 内联块

        controls 显示控件

        loop 循环

        muted 静音

        autoplay 自动播放 静音状态下可以自动播放

<5..新增表单type>

    1. 表单type

        type="url" 地址

        type="email" 邮箱

        type="search" 搜索

        type="number" 数值 min="最小值" max="最大值"

    2. 颜色

        type="color"

    3. 范围

        type="range"

    4. 日期

        type="date" 年月日

        type="month" 月份

        type="week" 周

        type="time" 时和分

        type="datetime-local" 年月日时分

<6..新增表单属性>

    1. 提示信息 placeholder

    2. 自动聚焦 autofocus

    3. 必填 required

    4. 显示历史记录 autocomplete="on" 需要结合name和value点击提交

    5. 多文件上传 multiple

    6. 正则 pattern="正则表达式" 专门限制用户输入内容的一种规则

补充：

1. 四大内核及代表浏览器

    Trident --代表ie浏览器

    Gecko --代表 Mozilla 火狐

    WebKit --苹果 & 谷歌旧版本

    Blink --代表浏览器 谷歌 & 欧鹏

2. 各大浏览器的私有前缀(浏览器在解析c3属性的时候,可以给该属性添加自己浏览器的私有前缀,更好的解析出来)

    谷歌 -webkit-box-shadow

    欧鹏 -o-box-shadow

    火狐 -moz-box-shadow

    ie   -ms-box-shadow

3. 移动端页面准备工作

<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

    viewport:视口 移动端

        1. 布局视口: css所作用的区域,默认980

        2. 可视视口: 能够看得到区域，设备宽的区域

        3. width=device-width将布局视口的宽度和可视视口宽度设置为一样,实现一个完美视口

        initial-scale=1.0 初始缩放

        minimum-scale=1.0 最小缩放值

        maximum-scale=1.0 最大缩放值

        user-scalable="yes/no" 用户是否缩放

4. 权重值

    !important 无限大  color:red !important

    行内 1000

    id 100

    class/伪类/属性选择器 10

    标签/伪元素 1

    通用 0

    继承 最小

5. 可以变化的单位

    - px 固定像素

    - % 百分比单位

    - em  默认情况 1em=16px(字体大小) 如果font-size:20px; 1em=20px; 2em就是当前字体大小的倍数

    - rem 默认情况 1rem=16px(字体大小) rem看的是根元素(html)的字体大小

    - vw(viewport-width)/vh(viewport-height)

        1vw = 1%视口宽

        10vw = 10%视口宽

        100vw=100%视口宽

        vh是等同的,拿的是当前视口的高度

<7..响应式页面: 根据浏览器窗口大小的改变,然后显示不同的页面效果>

媒体查询

    @media 媒体类型 and (媒体特性){

        选择器{

            声明

        }

    }

    媒体类型

        1. all 所有设备

        2. screen 显示器

        3. print 打印机

    媒体特性

        1. 宽度 width 浏览器是当前该宽度的时候

        2. 最大宽 max-width 浏览器宽度低于该值的时候

        3. 最小宽 min-width 浏览器宽度高于该值的时候

    注意：如果min-width和max-width同时存在的话，需要放在两括号中 用and连接

max-width:宽度可以跟随父元素不断变大，但是不超过该值

min-width:宽度可以跟随父元素不断变小，但是不低于该值

max-height:高度可以无限由内容撑大，但是不超过该值，依然会存在溢出

min-height:内容较少的时候,高度不能低于该值