***H5新增知识

Vedio
<video src="" controls【播放进度条 可以控制】 autoplay【第一次加载时不兼容谷歌了】 loop【循环播放】 muted【静音】poster=“...jpg”【播放前出现的界面[图片的路径]】>

audio
 <audio src="...mp3" controls autoplay  loop[循环播放] muted >

***HTML5新增语义化标签****
<header></header>
<footer></footer>【底部】
<nav></nav>【导航】
<main></main>【表示页面中的主要内容】
<figure>【类似于dl dt dd】
  <figcaption>不是所有的人都像杨狗那么坏</figcaption>
   <img src="...jpg">
</figure>

<article></>【aside对article起到解释说明的作用】
<aside></>
<section></>【可以全权替代div】

****html语法****

内容类型 .html

声明      doctyp

字符集编码  utf-8

可省略标记的元素
不允许写结束标志的：br img link meta col hr input
可省略的标签 ：p li 

***p标签里不能嵌套div 【一般不用p标签嵌套 只能嵌套不能实现换行的换行的元素】
可嵌套：span标签 input 

******BFC*****【块级格式化上下文】
*1.在HTML中为啥元素在垂直方向上排布以及为啥有的元素在水平方向上排布
    html 本身就是一个bfc 

*2.【margin重叠的解决方案 】
  overflow：hidden 触发了一个新的BFC

 *3. flaot为啥那样排布
      
      *&&  利用BFC制作两栏布局
       overflow：hidden；

       *&&  双飞翼布局
                1.div left    宽200px 高百分百 做浮动
                2.   right    宽200px 高百分百 右浮动
                3.  center   高百分百 加overflow：hidden 【跑中间去了重叠部分隐藏了】

*4.解决高度塌陷的方法解释
  bfc会把浮动高度计算进去 
*5. 对于父亲和孩子为啥挨着
   BFC中：子元素的margin始终与父元素的border紧挨着
*6.BFC之间互不影响

***BFC触发条件***
     1.HTML
     2.脱离标准文档流的也可以 float的值不为 none ponstion的值为fixed、  absolute
     3. overflow的值不为默认
     4. display：inline-block、table-caption、table-caption、table-cell/flex/inline-flex

*****伪类选择器******【应用在奇偶数行的样式不一致 】
   X：first-child{  }【选择第一个 同类型使用 】
   X：last-child{  }
  
   X：nth-child（2）{ }【后面跟数字的时候他会把不同类型的也计算在内】
   X：nth-child（2n-1）{ }【偶的倍数变色】
   X：nth-child（3n）{ }【3的倍数变色】

   X：nth-child（even/odd）{color=“” }【偶数/奇数的都变色】
   X：nth-last-child（2n）{ }【从后往前数 倒数】
***************************************************************
   X：first-of-type{ color=“” }【针对同一类型的】
   X：nth-of-type{ color=“” }
   X：nth-of-type（even/odd）{ color=“” }【】
   X：nth-last-of-type{ }
****************************************************************
 
    X：only-child{ }【唯一一个子元素】
    X：only-of-type{ }【同类型的只有一个】
****************************************************************
    ：root【匹配根元素 HTML里面加样式】
****************************************************************
    ：empty  【空元素操作样式】

  **** *******
  p:not（.no_color）{ } 【不想让谁变样式 就用它  】

记录2021.10.12学习的一天。~~