11h5新标签，input标签下，布局标签，单位，viewport

11h5新标签，input标签下，布局标签，单位，viewport

01H5新标签

details 展示详情标签，自带折叠效果
summary 标签是 details 的标题

audio 标签，用来播放音频文件，支持 mp3 ogg wav 类型的文件

属性

controls：控制是否出现播放的控制条
    autoplay：控制自动播放
    loop：循环播放
    muted：设置静音
    preload：设置预加载

值：

auto：默认值，在整个网页加载之后立即加载音频文件
metadata：只加载音乐的源文件
none：不加载，可以用他来减少服务器压力

如果设置了 autoplay，则可以不设置preload，默认即可

 <audio
     src="./src/1.mp3"
     controls
     autoplay
     loop
     muted
     preload="auto"
     ></audio>

audio 结合 source 标签 做音频播放兼容效果
source 专门用来解决不同浏览器对不同资源的支持问题，做兼容

<audio controls>
        <source src="./src/1.mp3" />
        <source src="./src/1.ogg" />
        <source src="./src/1.wav" />
     </audio>

video 视频播放标签，支持 mp4,ogg,webm 格式

    controls
    loop
    muted
    autoplay
    width: 视频播放区域的宽度
    poster 视频的封面

<video
     src="./"
     controls
     loop
     muted
     autoplay
     width="400"
     poster="./src/acaaaaq.jpg"
     class="man"
     ></video>
<!-- 视频播放的兼容写法 -->
     <video controls>
        <source src="./.mp4">
        <source src="./.ogg">
        <source src="./.webm">
     </video>

figure注释标签，一般包裹一段文字、图片、代码、图标等

    注释的内容写在figcaption 标签中

<figure>
        <figcaption>游戏内容</figcaption>
        <img width="300" src="./src/b3333.jpg" alt="">
    </figure>

02input新标签

<!-- 
        普通input的type类型
        text,password,botton,submit,reset,radio,checkbox,hidden,file,number

        input属性
            autofocus 自动获取光标，自动聚焦
     -->
    <form action="###" method="get">
        <!-- emall 约束输入内容为邮箱 -->
        邮箱：<input type="email" value="" autofocus/><br/>

        <!-- url 约束输入内容为网址 -->
        网址：<input type="url" value="" autofocus/><br/>

        <!-- number 约束输入内容为数字
                step属性为，每一次的步长
        -->
        年龄：<input type="number" value="" step="10"/><br/>

        <!-- color 取色器 -->
        取色器：<input type="color" value=""/><br/>

        <!-- range 滑竿
            min 最小值
            max 最大值
            value 当前值
        -->
        滑竿：<input type="range" min="0" max="100" value="10" /><br/>
        
        <!-- date 显示日期 -->
        日期：<input type="date" value="" /><br/>

        <!-- month 显示日期到月 -->
        月份：<input type="month" value="" /><br/>
        <!-- week 显示当前周 -->
        周：<input type="week" value=""><br/>
        <!-- time 设置时间 -->
        时间：<input type="time" value=""><br/>

        设置当地时间：<input type="datetime-local" value=""><br/>

        <br/>
        <!-- image 图片提交按钮= submit的作用 -->
        <input type="image" src="./src/acaaaaq.jpg" width="100">

        <input type="submit" value="提交"/>
    </form>

03布局标签

<!-- 
        H5新增关于布局的标签

        header ：页面的头部区域，要和head标签做区分
        footer ：页面的底部区域
        nav ：导航区域
        aside ：侧边栏区域
        section ：一个独立的区域，类似div
        article ：他一般包含再 section中，使用article包裹独立的模块
     -->
     <header>头部内容</header>
     <nav>导航部分</nav>
     <section>
        <aside>侧边栏</aside>
        <article>主要内容</article>
     </section>
     <footer>底部内容</footer>

04单位

em 相对单位，他是父级font-size的倍数

        可以理解为 子级设置长度单位或者尺寸的时候可以使用em作为单位，1em = 父级的font-size，如果当前元素设置了font-size则按照 1em = 当前元素的font-size

rem 相对单位，在html标签上设置一个font-size 作为整个页面的root，在设置所有标签尺寸的时候，可以直接以html设置的字号大小为根字号，即为 1rem

    rem常用于移动端开发

vh/vw : vh是 view-height 视窗的高度

            1vh = 视窗的高度 * 1%

            vw是 view-width 视窗的宽度
            1vw = 宽度 * 1%

css的最大最小属性：

    min-height：最小高度
    max-height：最大高度
    min-width：最小宽度
    max-width：最大宽度

05viewport

viewport-视窗

    用户通过视窗可以看到浏览器渲染的内容
    常用于 移动端的布局

通过 meta 标签设置

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

width：

    值是正整数，定义视窗的宽度，单位是px，也可以设置它的值是 device-width ， 表示视窗的宽度为设备宽度

height：

    值是正整数，定义视窗的高度，单位是px，也可以设置它的值是 device-height ， 表示视窗的高度为设备高度

initial-scale：

范围是在[0,1] ,用来定义初始时候的缩放值

mininum-scale：

    范围是在[0,1] 定义最小缩放比例，他的值必须小于或等于 initial-scale的值

maxinum-scale：

    范围是在[0,1] 定义最大缩放比例，他的值必须大于或等于 initial-scale的值

user-scalable

    设置用户是否能够手动缩放，他的值是 yes/no，默认是yes