一、HTML5新增元素

1.HTML5语义化元素

在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？

header、nav、main、footer

◼ 但是这样做有一个弊端：

我们往往过多的使用div, 通过id或class来区分元素；
对于浏览器来说这些元素不够语义化；
对于搜索引擎来说, 不利于SEO的优化；

◼ HTML5新增了语义化的元素：

<header>：头部元素
<nav>：导航元素
<section>：定义文档某个区域的元素
<article> ：内容元素
<aside>：侧边栏元素
<footer>：尾部元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- <div class="header"></div> -->
  <header></header>

  <!-- div.nav -->
  <nav></nav>

  <!-- section -->
  <section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
  </section>

  <!-- aside -->
  <aside></aside>

  <!-- footer -->
  <footer></footer>

</body>
</html>

二、video、audio元素

Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.

在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;
比如无法很好的支持HTML/CSS特性, 兼容性问题等等;

HTML5增加了对媒体类型的支持：

音频：<audio>
视频：<video>

Video和Audio使用方式有两个：

一方面我们可以直接通过元素使用video和autio；
另一方面我们可以通过JavaScript的API对其进行控制；

1.HTML5新增元素 - video

HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

在这里插入图片描述

video常见的属性:

在这里插入图片描述

2.video支持的视频格式

每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式

在这里插入图片描述

3.video的兼容性写法

在<video>元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

内容一：通过<source>元素指定更多视频格式的源;
内容二：通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- <img src="" alt=""> -->
  <!-- 基本使用 -->
  <!-- <video src="./assets/fcrs.mp4" width="600" controls muted></video> -->

  <!-- 兼容性写法 -->
  <video src="./assets/fcrs.mp4" width="600" controls muted>
    <source src="./asset/fcrs.ogg">
    <source src="./asset/fcrs.webm">

    <p>当前您的浏览不支持视频的播放, 请更换更好用的浏览器!</p>

  </video>

</body>
</html>

4.HTML5新增元素 - audio

HTML <audio> 元素用于在文档中嵌入音频内容, 和video的用法非常类似

常见属性:

在这里插入图片描述

5.audio支持的音频格式

每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式

具体的支持的格式可以通过下面的链接查看:

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

在<audio>元素中间的内容，是针对浏览器不支持此元素时候的降级处理

在这里插入图片描述

三、input、全局data-*元素

1.input元素的扩展内容

◼ HTML5 对 input 元素也进行了扩展，在之前我们已经学习过的其中几个属性也是HTML5的特性：

placeholder：输入框的占位文字
multiple：多个值
autofocus：最多输入的内容

◼ 另外对于 input 的 type 值也有很多扩展：

date
time
number
tel
color
email
等等…

◼ 查看MDN文档:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

2.新增全局属性 data-*

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:

data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
通常用于HTML和JavaScript数据之间的传递；

在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {}
  </style>
</head>
<body>
  
  <div class="box" age="18" data-name="why" data-age="18" data-height="1.88"></div>

  <h1 class="title"></h1>

  <script>
    const boxEl = document.querySelector(".box")
    console.log(boxEl.dataset)
  </script>

</body>
</html>

四、white-space、text-overflow

1.CSS属性 - white-space

white-space用于设置空白处理和换行规则

normal：合并所有连续的空白，允许单词超屏时自动换行
nowrap：合并所有连续的空白，不允许单词超屏时自动换行
pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      background: orange;

      /* white-space */
      /* nowrap不换行, 合并: 会合并 */
      /* pre: 不换行, 合并: 不合并 */
      /* pre-wrap: 换行, 合并: 不合并 */
      /* pre-line: 换行, 合并: 合并连续的空白, 但保留换行符 */
      white-space: pre-line;
    }
  </style>
</head>
<body>
  
  <div class="box">
    我是box       kobe boxboxbox
    哈哈哈哈哈       呵呵呵呵和 my name is why
  </div>

</body>
</html>

2.CSS属性 - text-overflow

text-overflow 通常用来设置文字溢出时的行为

clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
ellipsis：溢出那行的结尾处用省略号表示

text-overflow 生效的前提是 overflow 不为 visible

常见的是将white-space、text-overflow、overflow一起使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 150px;
      background-color: #f00;

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  
  <div class="box">
    my name is why, nickname is box, age is 18
  </div>

</body>
</html>

在这里插入图片描述

五、CSS 常见函数扩展

在前面我们有使用过很多个CSS函数:

比如rgb/rgba/translate/rotate/scale等;
CSS函数通常可以帮助我们更加灵活的来编写样式的值；

下面我们再学习几个非常好用的CSS函数:

var: 使用CSS定义的变量;
calc: 计算CSS值, 通常用于计算元素的大小或位置;
blur: 毛玻璃(高斯模糊)效果;
gradient：颜色渐变函数；

1.CSS函数 - var

CSS中可以自定义属性

属性名需要以两个减号（–）开始;
属性值则可以是任何有效的CSS值;

在这里插入图片描述

我们可以通过var函数来使用:

在这里插入图片描述

规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)

所以推荐将自定义属性定义在html中，也可以使用 :root 选择器;

2.CSS函数 -calc

calc() 函数允许在声明 CSS 属性值时执行一些计算。

计算支持加减乘除的运算；
- + 和 -运算符的两边必须要有空白字符。
通常用来设置一些元素的尺寸或者位置；

在这里插入图片描述

3.CSS函数 - blur

blur() 函数将高斯模糊应用于输出图片或者元素;

blur(radius)
radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;

通常会和两个属性一起使用：

filter: 将模糊或颜色偏移等图形效果应用于元素;
backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

在这里插入图片描述

4.linear-gradient的使用

linear-gradient：创建一个表示两种或多种颜色线性渐变的图片；

在这里插入图片描述

radial-gradient：创建了一个图像，径向渐变，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；

在这里插入图片描述

六、理解浏览器前缀

有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-

官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）

为什么需要浏览器前缀了？

CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀；

上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用

-o-、-xv-：Opera等
-ms-、mso-：IE等
-moz-：Firefox等
-webkit-：Safari、Chrome等

注意：不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀

七、深入理解BFC

1.FC – Formatting Context

什么是FC呢？

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；

在这里插入图片描述

块级元素的布局属于Block Formatting Context（BFC）

也就是 block level box 都是在BFC中布局的；

行内级元素的布局属于Inline Formatting Context（IFC）

而inline level box都是在IFC中布局的；

2.BFC – Block Formatting Context

block level box都是在BFC中布局的，那么这个BFC在哪里呢？拿出来给我看看。

在这里插入图片描述

MDN上有整理出在哪些具体的情况下会创建BFC：

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
display 值为 flow-root 的元素

3.BFC有什么作用呢？

◼ 我们来看一下官方文档对BFC作用的描述：

在这里插入图片描述

简单概况如下：

在BFC中，box会在垂直方向上一个挨着一个的排布；
垂直方向的间距由margin属性决定；
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

那么这个东西有什么用呢？

解决margin的折叠问题；
解决浮动高度塌陷问题；

4.BFC的作用一：解决折叠问题（权威）

在同一个BFC中，相邻两个box之间的margin会折叠（collapse）

官方文档明确的有说

The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* .box {
      overflow: auto;
    } */

    .container {
      overflow: auto;
    }

    .box1 {
      height: 200px;
      width: 400px;
      background-color: orange;

      margin-bottom: 30px;
    }

    .box2 {
      height: 150px;
      background-color: purple;

      margin-top: 50px;
    }

  </style>
</head>
<body>
  
  <div class="container">
    <div class="box1"></div>
  </div>
  <div class="box2"></div>

  <p>
    <a href=""></a>
    <span></span>
  </p>

</body>
</html>

5.BFC的作用二：解决浮动高度塌陷（权威）

网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果。

但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；
他们也压根没有办法解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？

事实上，BFC解决高度塌陷需要满足两个条件：

浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
浮动元素的父元素的高度是auto的；

BFC的高度是auto的情况下，是如下方法计算高度的

如果只有 inline-level，是行高的顶部和底部的距离；
如果有 block-level，是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
如果有绝对定位元素，将被忽略；
如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      overflow: auto;
      background-color: #ccc;
    }

    span {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: #aaa;
    }

    .box1 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #666;
    }

    .box2 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #999;
    }
  </style>
</head>
<body>
  <div class="container">
    <span>我是span内容</span>
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>