H5新标签（音频 视频 播放器 日历 布局 视窗）

H5新标签

• details 展示详情标签，自带折叠效果
  summary 标签是 datails 的标题
  效果如下：
  

   <details>
        <summary>四大名著</summary>
        <p>西游记1</p>
        <p>西游记2</p>
        <p>西游记3</p>
        <p>西游记4</p>
    </details>

audio 标签

用来播放音频文件，支持MP3 ogg wav 类型的文件
属性有：
controls: 控制是否出现播放效果
autoplay: 控制自动播放
loop : 循环播放
muted: 静音

• preload: 设置预加载
  值：
  auto 默认值，在整个网页加载之后立即加载音频文件
  metadata 只加载音乐的源文件
  none 不加载，可以用它来减少服务器压力
  如果设置了 autoplay,则可以不设置 preload，默认即可

<audio src="./src/起风了.mp3" controls loop preload="auto"></audio>

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

<audio controls>
   <source src="./src/起风了.mp3">
   <source src="./src/起风了.ogg">
   <source src="./src/起风了.wav">
</audio>

• video 视频播放标签，支持 MP4，ogg webm 格式
  controls: 控制是否出现播放效果
  autoplay: 控制自动播放
  loop : 循环播放
  muted: 静音
  width : 视频播放区域的宽度
  poster ： 视频的封面

<video src="./src/5.mp4" controls width="400px" poster="./src/d.png" class="man"></video>

• 视频播放的兼容写法

<video controls>
   <source src="./src/5.mp4">
   <source src="./src/5.ogg">
   <source src="./src/5.webm">
</video>

• figure 注释标签,注释一般包裹一段文字、图片、代码、图表等
  注释的内容写在 figcaption 标签中

<figure>
  <figcaption>二次元的内容</figcaption>
  <img width="300px" src="./src/d.png" alt="">
</figure>

input 新标签

普通input 的type类型

    text password hidden submit reset rasio checkbox file number button

input 属性

• autofocus 自动获取光标，也叫自动聚焦

<!-- email 约束输入内容为邮箱 -->
    邮箱：<input type="email" value="" autofocus><br>
    <!-- url 约束的内容是网址 -->
    网址：<input type="url" value="" autofocus><br>
    <!-- number 约束的内容是数字
           step 属性为 每次步长(就是点一次加多少)-->
    年龄：<input type="number" value="" step="10"><br>
    <!-- 取色器 -->
    取色器：<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><br>
    <!-- image 图片提交按钮 -->
    图片：<input type="image" src="./src/a.png" width="100px"><br><br><br>
    <input type="submit" value="提交">

布局标签

H5新增关于布局的标签
header : 页面的头部区域，要和head标签区分开
footer ： 页面的底部区域
nav ： 导航区域
asdide ：侧边栏区域
section : 一个独立的区域，类似 div
article : 他一般包含在 section 中，使用 article 包裹一段独立的模块

<header>头部内容</header>
<nav>导航部分</nav>
<section>
   <aside>侧边栏</aside>
   <article>主要内容</article>
</section>
<footer>底部内容</footer>

单位

/* 设置在html标签上的font-size
    这样 1rem = 10px */
html{
   font-size: 10px;
}

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 视窗的高度
1 vh = 视窗的高度 * 1%
vw 指的是view-width 视窗的宽度
1 vw = 视窗的宽度 * 1%
css 的最大最小属性
min-height: 最小高度
max-height: 最大高度
min-widht: 最小宽度
max-widht: 最大宽度

viewort-视窗

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