1、

标签是 HTML 语法的一部分，用于在 HTML 文件中内联定义 CSS 样式，控制网页的布局、颜色、字体等外观方面，它通常放在 HTML 文件的 部分。

示例：

  
  
  
  


  
Hello, World!

在这个例子中，

标签定义了网页的样式，背景颜色是浅蓝色，标题 h1 的颜色是深蓝色，并且居中对齐。

2、Vue3 中的

在 Vue.js 这种现代框架中，虽然你也会看到

标签，但它的作用还是用来定义 CSS 样式。Vue 组件的文件结构一般包含 、 和

三部分：

• 用来定义 HTML 模板。

• 用来定义 Vue 组件的逻辑。

• 依然是用来定义组件的 CSS 样式。

Vue 会扩展

3、Vue3 中

在 Vue 3 中，

标签可以使用的属性有以下几种，主要用于控制样式的作用范围和加载方式。

（1）scoped 属性

scoped 属性限制样式只在 当前组件 中生效，避免污染全局样式。

当前组件指什么？

“当前组件”在 Vue 里指的是单个 Vue 组件，也就是由 、 和

三个部分组成的单文件组件（SFC, Single File Component）。每个这样的文件通常就是一个 Vue 组件。在 Vue 中，组件通常是单独的、可复用的模块，每个组件都对应一个 .vue 文件。而 scoped 样式就是为了让这个 .vue 文件里的样式只对该组件生效。

当在 Vue 组件中使用 scoped 属性时，Vue 会通过添加特定的属性选择器（编译器完成的）来确保样式只应用于当前组件的 DOM 元素。

示例：

在这里，.container 类的样式只会应用于当前组件中的 .container 元素。

（2）lang 属性

lang 属性可以指定使用不同的预处理器来编写样式代码。

Vue 支持使用 CSS 预处理器，例如 Sass、SCSS、Less、Stylus 等。通过 lang 属性，可以指定预处理器来编写样式。

示例：

在这个例子中，使用了 scss 预处理器，可以使用变量等高级功能。