Day12

01、H5新标签

details 展示详情标签，自带折叠效果

summary 标签 是 details的 标题

<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 class="所创建的类名" src=“音频文件的地址”></audio>

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

<audio controls>
	<source src="音频文件的地址.mp3">
	<source src="音频文件的地址.ogg">
	<source src="音频文件的地址.wav">
</dudio>

video 视频播放标签

	支持 mp4、ogg、webm格式
		属性：
			controls：控制是否出现播放的控制条
			autoplay：控制自动播放
			loop：循环播放
			muted：设置静音
			width：视频播放区域的宽度
			height：视频播放区域的高度
			poster：视频的封面

<video controls poster="视频封面图片的路径">
	<source src="视频路径.mp4">
	<source src="视频路径.ogg">
	<source src="视频路径.webm">
<video>

figure 注释标签

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

<figure>
	<figcaption>注释的内容</figcaption>
	<img width="300px" src="路径">
<figure>

02、input标签

普通的input的type类型

	text、passwor、hidden、submit、reset、radio、checkbox、
	file、number、button

input 属性

		autofocus 自动获取光标（自动聚焦）

<form action="">
	<!-- email 约束输入的内容为邮箱 -->
	邮箱：<input type="email" value=""> <br />
	<!-- url 约束输入的内容为网址 -->
    网址：<input type="url" value=""> <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="33"> <br />
        
     <!-- date 显示日期 -->
     日期：<input type="date" value=""> <br />
        
     <!-- month 显示日期到月 -->
     月份：<input type="month" value=""> <br />

     <!-- month 显示日期到周 -->
     周：<input type="week" value=""> <br />

     <!-- time 显示日期到周 -->
     时间：<input type="time" value=""> <br />

      <!-- time 显示日期到周 -->
     设置当地时间：<input type="datetime-local" value=""
     autofocus> <br />
     
     <!-- image 图片提交按钮 -->
     <input type="image" src="/Day03/src/p4.png" width="100"> <br />
     <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 常用于移动开发

/*
设置在html标签上的font-size
在css中设置
*/
html {
	font-size:10px;
}

vh/vw

	vh是view-height 视窗的高度
		1vh = 视窗的高度 * 1%
		100vh = 一个视窗的高度
		vw是view = width 视窗的高度
		1vw = 视窗的宽度 * 1%

css的最大最小属性

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

05、viewport-视窗

view-port

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

通过 meta 标签设置

	<meta name="viewport" content="width=device-width,intial-scale=1.0">
	 width:值是正整数，定义视窗的宽度，单位是px，也可以设置他的值是
	 device-width 表示视窗的宽度为设备的宽度
    height:值是正整数，定义视窗的宽度，单位是px，也可以设置他的值是
    device-height 表示视窗的宽度为设备的宽度

    initial-scale=1.0：范围是在[0.1] ,用来定义初始时候的缩放值

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

    maximum-scale:范围是在[0，1]定义最大缩放比例

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