一. meta元素

1. 定义

用于定义元数据
- 在之前讲解head的时候说过，head中用于定义元数据
- 比如标题title、样式style、link外部资源等
- meta用于表示那些不能由其他HTML元相关（meta-related）元素（<base>、<link>、<script>、<style>、<title>）之一表示的任何元数据信息
meta 元素定义的元数据的类型包括以下几种：
- 如果设置了charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码
- 如果设置了http-equiv属性，meta 元素则是编译指令
- 如果设置了name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面

2. http-equiv属性

我们会发现，无论是默认创建的html页面还是王者荣耀都有如下代码：
html
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
它的作用到底是什么呢？网上众说纷纭，我们直接看官方文档的解释：
- 告知IE浏览器去模仿哪一个浏览器的行为
- IE=edge，告知IE8去使用最高有效模式来模仿
可理解为：就是适配IE 浏览器的

3. name属性

name属性为元数据条目提供名称，而content提供属性值
name属性的值非常多，具体的内容可以查看文档：
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name
常用的：
- robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则
- author：文档作者的名字
- Copyright：版权声明
- description：一段简短而精确的、对页面内容的描述
  - 一些浏览器，比如Firefox 和Opera，将其用作书签的默认描述
- keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录

4. link图标

Favicon是favorites icon的缩写，亦被称为website icon（站点图标）、page icon（页面图标）

前面我们已经学习了它的用法：

html

<link rel="icon" href="https://pvp.qq.com/favicon.ico">

事实上它还有很多兼容性的写法：
这里有一个疑惑？
- 为什么王者荣耀没有link元素也可以正常显示图标呢？
- 上述代码局限性就是它把favicon关联到了某个特定的HTML或XHTML文档上。为避免这一点，favicon.ico文件应置于根目录下。多数浏览器会自动检测并使用根目录下的favicon
下面的link使用方法表示有另一个可替换的网站供选择：
html
```
<link rel="alternate" href="https://pvp.qq.com/m/">
```

5. CSS样式的字符编码

之前我们有制定过HTML页面的编码，但是并没有制定CSS样式的编码
- 那么CSS样式的字符编码会按照什么规则来使用呢？
在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：
1. 文件的开头的 Unicode byte-order（字节顺序标记）字符值
- https://en.wikipedia.org/wiki/Byte_order_mark
1. 由Content-Type: HTTP header 中的charset 属性给出的值或用于提供样式表的协议中的等效值
2. CSS @规则 @charset
3. 使用参考文档定义的字符编码：<link>元素的charset 属性
- 该方法在HTML5 标准中已废除，无法使用
1. 如果以上都没有，浏览器会假设文档是 UTF-8
开发中推荐在CSS的开头编写@charset指定编码：
css
```
@charset "UTF-8";
```

二. HTML5新增元素

1. 新增语义化元素

在HTML5之前，我们的网站分布层级通常包括哪些部分呢？
- header、nav、main、footer
但是这样做有一个弊端：
- 我们往往过多的使用div, 通过id或class来区分元素
- 对于浏览器来说这些元素不够语义化
- 对于搜索引擎来说, 不利于SEO的优化

HTML5新增了语义化的元素：

html

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

2. 其他新增元素

Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器音频和视频变得非常容易
- 在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题
- 比如无法很好的支持HTML/CSS特性, 兼容性问题等等
HTML5增加了对媒体类型的支持：
- 音频：<audio>
- 视频：<video>
Video和Audio使用方式有两个：
- 直接通过元素使用video和autio
- 通过JavaScript的API其进行控制

三. Video、Audio元素

1. video

HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
html
```
<video src="/video/fcrs.mp4" controls></video>
```

video常见的属性：

常见属性	值的方式	属性作用
`src`	`URL`地址	视频播放的`URL`地址
`width`	`pixels`（像素）	设置`video`宽度
`height`	`pixels`（像素）	设置`video`高度
`controls`	`Boolean`类型	是否显式控制栏，包括音量、跨帧、暂停/恢复播放
`autoplay`	`Boolean`类型	是否视频自动播放（某些浏览器需要添加`muted`，比如`Chorme`）
`muted`	`Boolean`类型	是否静音播放
`preload`	`none`/ `metadata` / `auti`	是否需要预加载视频 `metadata`表示预加载元数据（比如视频时长等）
`poster`	`URL`地址	一海报帧的`URL`

2. video支持的视频格式

每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式
- 目前来说兼容性最好的是mp4格式

3. video的兼容性写法

在<video>元素中间的内容，是针对浏览器不支持此元素时候的降级处理
- 内容一：通过<source>元素指定更多视频格式的源
- 内容二：通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容
html
```
<video src="/video/fcrs.mp4" controls width="500" autoplay muted>
  <source src="./video/fcrs.webm">
  <p>你的浏览器不支持HTML5的video元素，请更好浏览器查看！</p>
</video>
```

4. audio

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

html

<audio src="/video/yhb.mp4" controls autoplay muted></audio>

常见属性	值的方式	属性作用
`src`	`URL`地址	音频播放的`URL`地址
`controls`	`Boolean`类型	是否显式控制栏，包括音量、进度、暂停/恢复播放
`autoplay`	`Boolean`类型	是否音频自动播放（某些浏览器需要添加`muted`，比如`Chorme`）
`muted`	`Boolean`类型	是否静音播放
`preload`	`none`/ `metadata` / `auti`	是否需要预加载音频 `metadata`表示预加载元数据（比如音频时长等）

5. audio支持的音频格式

每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式
具体的支持的格式可以通过下面的链接查看:
- https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs
- 目前兼容性最好的是mp3格式

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

html

<audio src="/video/yhb.mp4" controls autoplay muted>
  <source src="./video/yhb.ogg">
  <p>你的浏览器不支持HTML5的audio元素，请更好浏览器查看！</p>
</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和js数据之间的传递

html

<div class="box" title="abc" data-name="later" data-age="18">box</div>

<script>
  const boxEl = document.querySelector('.box')
  console.log(boxEl.dataset) // DOMStringMap {name: 'later', age: '18'}
</script>

在小程序中, 就是通过data-*来传递数据的

补充：

多词连接符后面第一个字符大写，其余大写转小写

html

<div class='box' data-ABC='111' data-aA='222' data-aa-Bb="a" data-aa-BC="s"></div>
<script>
  var boxEl = document.querySelector('.box')
  // ABC => abc
  // aA => aa
  // aa-Bb => aaBb
  // aa-BC => aaBc
  console.log(boxEl.dataset) // {abc: '111', aa: '222', aaBb: 'a', aaBc: 's'}
</script>

五. white-space、text-overflow

1. white-space

这里的空白指：空格、tab制表符、换行

属性值	含义
`normal`	合并所有连续的空白为一个空格，允许单词超屏时自动换行
`nowrap`	合并所有连续的空白为一个空格，不允许单词超屏时自动换行
`pre`	阻止合并所有连续的空白，不允许单词超屏时自动换行
`pre-wrap`	阻止合并所有连续的空白，允许单词超屏时自动换行
`pre-line`	合并所有连续的空白（但保留换行）为一个空格，允许单词超屏时自动换行

2. text-overflow

通常用来设置文字溢出时的行为
- clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
- ellipsis：溢出那行的结尾处用省略号表示
text-overflow生效的前提是overflow不为visible

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

css

{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

3. 文字指定显示行数，超出隐藏显示省略号

css

{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

六. CSS 常见的函数扩展

在前面我们有使用过一些 CSS 函数：比如 rgb、rgba、translate、rotate、scale 等。

CSS 函数通常可以帮助我们更加灵活的来编写样式的值，下面我们再学习几个非常好用的 CSS 函数：

CSS 函数	作用
var	使用 CSS 中自定义的变量
calc	计算 CSS 值，通常用于计算元素的大小或位置
blur	毛玻璃（高斯模糊）效果
gradient	颜色渐变函数

var()

什么是 CSS 自定义变量(属性)？

CSS 自定义属性，也被称为 CSS 变量，是 CSS 中一种强大的特性。通过自定义属性，我们可以定义一些全局或局部的值，使得样式更加灵活和可维护。自定义属性名必须以两个减号（--）开头，并且属性值只能是任何有效的 CSS 值。

css

div {
  --main-color: red;
}

如何使用自定义属性？

我们可以通过 var() 函数来引用这些自定义属性，使其应用于其他 CSS 属性。

css

span {
  color: var(--main-color);
}

默认值

如果需要为未定义的自定义属性指定默认值，可以使用 var() 函数的第二个参数：

css

span {
  color: var(--main-color, black); /* 如果 --main-color 未定义，则使用 black 作为默认值 */
}

自定义属性的作用域

自定义属性的作用域是只在定义它们的选择器的作用范围内可以访问这些自定义属性。因此，建议将全局使用的自定义属性定义在 html 或 :root 选择器中，这样它们可以在整个文档中被引用：

css

:root {
  --main-color: blue;
  --padding-size: 10px;
}

通过这种方式，--main-color 和 --padding-size 变量将在整个文档中可用。

兼容性注意事项

虽然自定义属性在现代浏览器中得到了广泛支持，但在一些老版本浏览器中（如IE）并不支持。因此，在需要兼容这些浏览器时，可能需要使用回退机制或其他解决方案。

calc

calc() 函数允许在声明CSS 属性值时执行一些计算
- 计算支持加减乘除的运算
- +和-运算符的两边必须要有空白字符
- 通常用来设置一些元素的尺寸或者位置
  css
```
.box .container {
  display: inline-block;
  width: calc(100% - 60px);
}
```

blur

blur()函数将高斯模糊应用于输出图片或者元素
- blur(radius)
- radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊
通常会和两个属性一起使用：
- filter: 将模糊或颜色偏移等图形效果应用于元素
- backdrop-filter: 为元素后面的区域添加模糊或者其他效果

gradient

<gradient> 是一种 <image> CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变

CSS的<image>数据类型描述的是2D图形
比如background-image、list-style-image、border-image、content等
<image>常见的方式是通过url来引入一个图片资源
它也可以通过CSS的<gradient> 函数来设置颜色的渐变

<gradient>常见的函数实现有下面几种：

常见的函数	作用
`linear-gradient()`	创建一个表示两种或多种颜色线性渐变的图片
`radial-gradient()`	创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成
`repeating-linear-gradient()`	创建一个由重复线性渐变组成的`<image>`
`repeating-radial-gradient()`	创建一个重复的原点触发渐变组成的`<image>`
...

linear-gradient() 函数

linear-gradient()：创建了一个图像，该图像是由两种或多种颜色的线性渐变组成的，其结果是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。

css

{
  background-image: linear-gradient(blue, red);
  background-image: linear-gradient(to right, blue, red);
  background-image: linear-gradient(to right bottom, blue, red);
  background-image: linear-gradient(45deg, blue, red);
  background-image: linear-gradient(to right, blue, red 10%, purple 40px, orange);
}

⚠️ 注意

由于 <gradient> 属于 <image> 数据类型，因此只能用在能使用 <image> 的地方。因此，linear-gradient() 在 background-color 以及其他使用 <color> 数据类型的属性上不起作用。

radial-gradient() 函数

radial-gradient()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的辐射渐变组成，其形状可以是圆形或椭圆形。其结果也是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。

⚠️ 注意

由于 <gradient> 属于 <image> 数据类型，因此只能用在能使用 <image> 的地方。因此，radial-gradient() 在 background-color 以及其他使用 <color> 数据类型的属性上不起作用。

七. 浏览器前缀

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

css

-o-transform: translater(100px);
-ms-transform: translater(100px);
-webkit-transform: translater(100px);
-moz-transform: translater(100px);

官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）
为什么需要浏览器前缀了？
- W3C在提案某个CSS属性时，该属性还并没有成为标准，但是为了让开发者提前可以使用，以及浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀
上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用
- -o-、-xv-：Opera等
- -ms-、mso-：IE等
- -moz-：Firefox等
- -webkit-：Safari、Chrome等
注意：不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀

八. 深入理解BFC

1. FC - formatting Context

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

BFC：块级元素的布局环境
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-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow 计算值不为visible 的块元素（scroll 、hidden、auto）
- 弹性元素（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作用一：解决折叠问题

官方文档：
- 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
在同一个BFC中，相邻两个box之间的垂直方向上的(上下)margin会折叠（collapse）
让两个box是不同的BFC，就可以解决折叠问题

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

网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果
- 但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明
- 他们也压根没有办法解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？
事实上，BFC解决浮动高度塌陷需要满足两个条件：
- 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）
- 浮动元素的父元素的高度是auto的
BFC的高度是auto的情况下，是如下方法计算高度的：
1. 如果只有inline-level元素，是行高的顶部和底部的距离
2. 如果有block-level元素，是由最上层的块盒子上边缘(包含margin)和最底层块盒子的下边缘(包含margin)之间的距离决定的
3. 如果有绝对定位元素，将被忽略
4. 如果有浮动元素，那么会增加浮动元素的父元素（BFC元素）的高度以包括这些浮动元素的下边缘，而不是清浮动

一. meta元素 ​

1. 定义 ​

2. http-equiv属性 ​

3. name属性 ​

4. link图标 ​

5. CSS样式的字符编码 ​

二. HTML5新增元素 ​

1. 新增语义化元素 ​

2. 其他新增元素 ​

三. Video、Audio元素 ​

1. video ​

2. video支持的视频格式 ​

3. video的兼容性写法 ​

4. audio ​

5. audio支持的音频格式 ​

四. input、全局属性data-* ​

1. input元素的扩展 ​

2. 新增data-*全局属性 ​

五. white-space、text-overflow ​

1. white-space ​

2. text-overflow ​

3. 文字指定显示行数，超出隐藏显示省略号 ​

六. CSS 常见的函数扩展 ​

var() ​

如何使用自定义属性？ ​

默认值 ​

自定义属性的作用域 ​

calc ​

blur ​

gradient ​

linear-gradient() 函数 ​

radial-gradient() 函数 ​

七. 浏览器前缀 ​

八. 深入理解BFC ​

1. FC - formatting Context ​

2. BFC - block formatting context ​

3. BFC有什么作用呢? ​

4. BFC作用一：解决折叠问题 ​

5. BFC的作用二：解决浮动高度塌陷 ​

一. meta元素

1. 定义

2. http-equiv属性

3. name属性

4. link图标

5. CSS样式的字符编码

二. HTML5新增元素

1. 新增语义化元素

2. 其他新增元素

三. Video、Audio元素

1. video

2. video支持的视频格式

3. video的兼容性写法

4. audio

5. audio支持的音频格式

四. input、全局属性data-*

1. input元素的扩展

2. 新增data-*全局属性

五. white-space、text-overflow

1. white-space

2. text-overflow

3. 文字指定显示行数，超出隐藏显示省略号

六. CSS 常见的函数扩展

var()

如何使用自定义属性？

默认值

自定义属性的作用域

calc

blur

gradient

linear-gradient() 函数

radial-gradient() 函数

七. 浏览器前缀

八. 深入理解BFC

1. FC - formatting Context

2. BFC - block formatting context

3. BFC有什么作用呢?

4. BFC作用一：解决折叠问题

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