7.28知识点总结

一、h5的语法总结

1.不允许写结束标记的元素：br、col、embed、hr、img、input、link、met

2.可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

3.可以省略全部标记的元素：html、head、body、colgroup、tbody

二、h5常用标记

1.头部：<header></header>

2.尾部：<footer></footer>

3.导航：<nav></nav>

4.内容块：<section></section>

5.辅助信息：<aside></aside>

6.文章：<article></article>

7.独立内容块：

  <figure>

       <figcaption>图片介绍</figcaption>

       <img src="图片路径">

  </figure>

8.高亮显示文字：<mark></mark>

9.标题组：<hgroup></hgroup>

10.对话框：<dialog open>窗口内显示内容</dialog>（dialog需与open连用）

三、video视频文件

1.<video  src="视频路径"  controls  autoplay  poster="视频第一帧图片地址">

    autoplay：“autoplay”，视频频就绪后自动播放

    controls：“controls”，视频可显示操作控件

    loop：“loop”，循环播放

2.video视频支持格式：Ogg、MPEG4、WebM

<video  controls  autoplay>

      <source  src="视频地址1"></source>

      <source  src="视频地址2"></source>

      <source  src="视频地址3"></source>

</video>

按顺序选择source视频文件，浏览器自动播放第一个可识别的视频

3.audio音频文件

<audio  src="音频地址">中间可放置内容</audio>

四、文字阴影和盒子阴影

1.文字阴影   text-shadow

div{

     text-shadow：水平   垂直    模糊程度   阴影颜色；

}

div{

      text-shadow：10px   10px    5px   red，12px  12px  6px  blue；（多个阴影之间可以用逗号隔开）

}

2.盒子阴影   box-shadow

div{

    box-shadow：水平   垂直   模糊程度   延申半径   阴影颜色   内阴影；

}

div{

    box-shadow：10px    10px      10px      10px      red       inset,10px 10px 10px 10px red inset ；

（多个阴影之间可以用逗号隔开）

}

五、BFC

1.BFC触发条件：overflow，float，定位，display

2.应用场景：

       a.自适应两栏：两个div，第一个div浮动且具有固定宽度，另外一个div不设置宽度，overflow：hidden；触发bfc，实现自适应两栏。

       b.双飞翼：要在页面实现左、中、右的排布，三个div在body中按左，右，中顺序书写，左边div布局左浮动，右边div布局右浮动，中间div不设置宽度，overflow：hidden；触发bfc，实现双飞翼。