HTML / CSS 基础

HTML

HTML 学习指南（2025 版）

什么是 HTML？

HTML（超文本标记语言，HyperText Markup Language）是网页的骨架，用来定义页面结构。大白话讲，它就是告诉你浏览器“放个标题在这儿”“这儿来张图片”“那块儿弄个按钮”。无论你是手写网页，还是用 React、Vue 这样的前端框架，最终都得靠 HTML 来渲染页面。

为什么要学 HTML？

它是前端开发的起点，网页开发绕不开。
框架里的 JSX（React）或 template（Vue）本质上都会转成 HTML。
想做 SEO（搜索引擎优化）、无障碍访问，或者只是写个简单的页面，HTML 都是基础。

HTML 基础

HTML 是什么样子的？

HTML 由元素（elements）和标签（tags）组成。标签通常成对出现，比如 <p>内容</p>，也有自闭合标签，比如 <img src="图片地址" />。一个简单的 HTML 文件长这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎体验 HTML</h1>
  <p>这是一个段落，简单吧？</p>
</body>
</html>

<!DOCTYPE html>：告诉浏览器这是 HTML5 文档。
<html>：页面根元素。
<head>：放元数据，比如标题、字符编码。
<body>：放实际显示的内容。

谁在管 HTML？

HTML 标准由 WHATWG（网页超文本应用技术工作小组）维护，2004 年由 Apple、Mozilla 和 Opera 发起，负责制定 HTML 的规范（也叫 HTML Living Standard）。想看最权威的文档，可以直接去 WHATWG 官网。

怎么学 HTML？

学习 HTML 不难，主要是记住常用标签、理解它们的作用，然后多动手写。以下是推荐的学习路径：

1. 快速上手（1-6 小时）

目标：了解 HTML 的基本结构和常见元素。
方法：
- 浏览 MDN HTML 元素参考，看看每个标签长啥样、干啥用。
- 打开浏览器（推荐 Chrome），用开发者工具（F12）查看网页的 HTML 结构。
- 在 VS Code 里写点简单的 HTML，装上插件：
  - Emmet：输入 div>p 按 Tab，自动生成 <div><p></p></div>，超省力。
  - Auto Close Tag：自动补全闭合标签。
  - Auto Rename Tag：改开始标签，结束标签自动同步。
动手练习：试试 <input> 标签的各种类型（文本、复选框、按钮等），感受浏览器内置的功能。

2. 实战进阶

目标：能独立写一个简单的网页。
方法：
- 写个小项目，比如个人主页，包含标题、导航、图片、表单。
- 用 <div> 和 <span> 组织结构，试试嵌套标签。
- 查文档解决问题，比如 MDN 或 W3Schools。
推荐练习：
- 做一个博客页面，包含文章标题、正文和评论表单。
- 用 <form> 做一个登录框，包含用户名、密码和提交按钮。

3. 深入学习

SEO 优化：用 <meta> 标签设置关键词、描述，优化搜索引擎排名。
语义化：用 <article>、<section>、<nav> 等语义标签，让代码更清晰，方便机器（比如搜索引擎、读屏软件）理解。
无障碍访问：学习 ARIA，给 <img> 加 alt 属性，提升网页对残障人士的友好度。
Web Components：了解 <template>、<slot>，体验自定义 HTML 元素（目前用得不多，但挺酷）。

HTML 核心知识点

1. 常见元素分类

HTML 元素按功能和显示方式可以分为几大类：

结构元素：组织页面布局
- <div>：万能容器，块级元素。
- <span>：行内容器，常用来加样式。
- <article>、<section>、<header>、<footer>：语义化标签，清晰表达内容结构。
文本元素：处理文字样式
- <h1> 到 <h6>：标题，从大到小。
- <p>：段落。
- <strong>、<em>：加粗和斜体，带语义。
- <code>、<pre>：展示代码。
多媒体元素：嵌入图片、音视频
- <img>：图片，记得加 alt 属性。
- <video>、<audio>：视频和音频，支持多种格式。
表单元素：收集用户输入
- <form>：表单容器，支持提交功能。
- <input>：输入框，类型丰富（text、checkbox、radio 等）。
- <select>、<textarea>：下拉菜单和多行文本框。
互动元素：
- <a>：超链接，跳转页面。
- <button>：按钮，常用于触发事件。
- <details>、<summary>：折叠内容，点击可展开。

2. 元素显示类型

HTML 元素按默认显示方式分三种：

块级元素（block）：
- 独占一行，可设置宽高。
- 比如：<div>、<p>、<h1>、<ul>。
行内元素（inline）：
- 不独占一行，宽高由内容决定。
- 比如：<span>、<a>、<strong>。
行内块元素（inline-block）：
- 不独占一行，但可设置宽高。
- 比如：<img>、<input>、<button>。

提示：可以用 CSS 的 display 属性自由切换，比如让 <div> 变成行内元素（display: inline）。

3. 全局属性

这些属性几乎所有元素都能用：

id：唯一标识符，全页面不能重复。
class：分类名，方便 CSS 和 JS 批量操作。
style：内联 CSS，少用为妙。
data-*：自定义数据，JS 常用。
aria-*：无障碍属性，提升可访问性。

4. HTML5 新特性

HTML5（<DOCTYPE html>）比老版本更强大：

新语义标签：<article>、<section>、<nav>、<footer> 等。
增强表单：新输入类型（email、date、range 等），省去很多 JS 验证。
多媒体：<video>、<audio> 原生支持，不用 Flash。
新 API：
- canvas：画图、做动画。
- localStorage、sessionStorage：本地存储数据。
- 离线缓存、实时通信等。

页面结构与语义化

为什么要做语义化？

对人：代码清晰，团队协作和维护更方便。
对机器：搜索引擎、读屏软件能更好理解页面，提升 SEO 和无障碍性。

注意事项

少用 <div> 和 <span>：能用语义标签的地方尽量用，比如用 <nav> 替代 <div class="nav">。
嵌套规则：行内元素不能直接包块级元素（比如 <a> 里不能直接放 <div>）。
标准结构：
- <head> 里放元数据（<title>、<meta>）。
- <body> 里放内容，保持层级清晰。

CSS 相关概念（简单了解）

HTML 离不开 CSS，这里稍微提几个跟 HTML 强相关的概念：

1. 盒模型

每个 HTML 元素都是一个“盒子”，从内到外包括：

content：内容。
padding：内边距。
border：边框。
margin：外边距。

盒模型有两种计算方式：

标准模型（box-sizing: content-box）：宽高只算内容。
IE 模型（box-sizing: border-box）：宽高包含内容 + padding + border（更常用）。

2. 边距重叠

相邻的垂直外边距（margin）会合并，取较大的值。解决办法：

用 padding 替代。
加透明边框（border: 1px solid transparent）。
触发 BFC（块级格式化上下文）。

3. BFC（块级格式化上下文）

BFC 是一个独立的布局环境，特点：

内部元素垂直排列。
不会与浮动元素重叠。
外边距可能合并。

触发 BFC 的方法：

overflow: hidden。
display: flex 或 inline-block。
float: left/right。
position: absolute/fixed。

用处：

清除浮动。
防止边距重叠。
实现自适应布局。

4. 浮动（float）

浮动原本用于文字环绕图片，但常被“误用”于布局。特点：

元素脱离文档流，靠左/右排列。
可能导致父元素高度塌陷。

清除浮动 的方法：

加 clear: both 的空标签。
父元素用 overflow: hidden。
用伪元素（.clearfix）：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

现代替代：用 Flexbox 或 Grid 布局，灵活又省心。

5. 定位（position）

static：默认，无定位。
relative：相对自身偏移，不影响别人。
absolute：脱离文档流，相对最近的定位祖先移动。
fixed：固定在窗口位置，滚动不影响。

其他实用知识

1. `<form>` 的作用

表单是用户交互的核心，<form> 的好处：

支持直接提交数据。
浏览器可保存表单历史。
配合 JS 库，能轻松验证和提取数据。

常用元素：

<input>：多种类型（text、password、file 等）。
<select>、<option>：下拉菜单。
<textarea>：多行文本。

2. 单位：px、em、rem

px：像素，固定单位，适合精确控制。
em：相对父元素字体大小，动态调整。
rem：相对根元素（<html>）字体大小，统一管理。

兼容性：px 全面支持，em/rem 除 IE6-8 外都支持。推荐：用 rem 做响应式，px 做固定尺寸。

3. src vs href

src：指向资源地址，替换元素内容（比如 <img src="图片.jpg">）。
href：建立跳转链接（比如 <a href="页面.html">）。

4. link vs @import

<link>：HTML 标签，加载 CSS，同时支持其他功能（RSS、rel 属性）。
@import：CSS 语法，页面加载完才加载 CSS，可能导致闪烁。
建议：优先用 <link>，兼容性更好。

学习资源

文档

视频

HTML Crash Course：60 分钟入门，英文，带字幕。
国内平台（如 B 站）搜索“HTML 入门”，很多免费教程。

工具

浏览器：Chrome（开发者工具超好用）。
编辑器：VS Code + Emmet。
在线练习：CodePen、JSFiddle，边写边看效果。

常见问题

HTML 和 HTML5 有什么区别？
- HTML 是广义的超文本标记语言，HTML5 是最新版本，新增了语义标签、多媒体支持和 API。
- HTML5 更简单（Doctype 只要 <!DOCTYPE html>），功能更强。
XHTML 是什么？
- XHTML 是 HTML 的 XML 化版本，要求更严格（标签必须闭合、小写等），现在用得少。
怎么保证页面兼容老浏览器？
- 用 HTML5 的新标签时，IE9 以下需要引入 html5shiv.js。
- 测试时用 BrowserStack 或老版本虚拟机。
学 HTML 要多久？
- 基础：1-2 天能上手。
- 熟练：1-2 周，多写项目。
- 精通：结合 CSS、JS，1-3 个月。

下一步

学完 HTML，建议：

CSS：学布局（Flexbox、Grid）、响应式设计。
JavaScript：让页面动起来，操作 DOM、处理事件。
框架：试试 React 或 Vue，体验现代开发。

CSS 常用

link @import导入css

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

雪碧图

css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点：

减少Http请求数量（因为浏览器同一时间能够加载的资源数是一定的，IE 8是6个，Chrome是6个，Firefox是8），提高加载性能 2、有些情况下可以减少图片的大小（字节总和）

缺点：

高清屏会失真
雪碧图不方便变化，提高了网页开发和维护成本

字体图标

字体图标就是利用字体来显示网页中的的纯色图标，或者是特殊字体

原理：

计算机里面每个字符都有一个unicode编码,比如「我」的unicode是\u6211（16进制），而字体文件的作用是规定某个字符应该用什么形状来显示，利用@font-face原理载入图标字体库，然后调用图标

优点：

灵活性：可以任意地缩放，改变颜色，产生阴影，透明效果，可以快速转化形态（：hover）
轻量性：本身体积更小，但携带的信息并没有削减。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
兼容性：网页字体支持所有现代浏览器，包括IE低版本。

缺点：

图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。
制作用于生成icon font的svg比较麻烦

base64

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息

优点：

减少了HTTP请求
某些文件可以避免跨域的问题
没有图片更新要重新上传，还要清理缓存的问题

缺点：

用于小图，体积约为原图的4/3
兼容性：IE6/IE7浏览器是不支持

伪类与伪元素

两者都不存在于HTML文档树中，伪类与伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同
伪类单冒号，伪元素双冒号

水平居中

inline 元素用text-align: center;即可，如下:```css .container { text-align: center; }


2. 固定宽度块状元素，可以设置左右margin值为auto来使用，如下：```css
.item {
  width: 1000px;
  margin: auto;
}

不定宽度块状元素``` 1.在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto 2、给该元素设置 displa:inine 方法 3、父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%


## 垂直居中

1. inline 元素可设置line-height的值等于height值，如单行文字垂直居中：```css
<div class="outerBox">
  center text
</div>

.outerBox{
  width:200px;
  height:100px;
  border: 1px solid #000;
  text-align:center; /* 水平居中 */
  line-height: 100px; /* line-height=height */
}

vertical-align实现文本的垂直居中可以使用vertical-align实现垂直居中，不过vertical-align仅适用于内联元素和table-cell元素，因此之前需要转化```css .outerBox{ width:200px; height:100px; border: 1px solid #000; text-align:center; /_ 水平居中 _/ display:table-cell; /转化成table-cell元素/ vertical-align:middle; /垂直居中对齐，vertical-align适用于内联及table-cell元素/ }


3. 绝对定位元素，可结合left和margin实现，但是必须知道尺寸```css
.container {
  position: relative;
  height: 200px;
}
.item {
  width: 80px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -40px;
}

绝对定位可结合transform实现居中。优点：不需要提前知道尺寸.缺点：兼容性不好```css .container { position: relative; height: 200px; } .item { width: 80px; height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: blue; }


5. 绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好```css
.container {
  position: relative;
  height: 300px;
}
.item {
  width: 100px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

适配移动端页面meta viewport

更多请查看 meat-viewport

<meta name="viewport" content="width=device-width" />

meta viewport 中有6个通用属性：

width 设置layout viewport的宽度正整数或字符串 'width-device'
initial-scale 设置页面的初始缩放值，数字或小数
minimum-scale 允许用户的最小缩放值数字或小数
maximum-scale 允许用户的最大缩放值数字或小数
user-scaleabel 是否允许用户进行缩放 'no'或‘yes’ 还有2个需要特别注意的两个属性
target-densitydpi 在andriod 4.0一下的设备中，不支持设置viewport的width，android 自带浏览器支持设置 target-densitydpi来达到目的

效果属性（box-shadow、border-radius、background、clip-path）

box-shadow

营造层次感（立体感）
充当没有宽度的边框
特殊效果

background

纹理/图案
渐变
雪碧图动画
背景图尺寸适应

clip-path

对容器进行裁剪
常见几何图形
自定义路径

Canvas和svg

Canvas

Canvas是基于位图的，它不能够改变大小，只能缩放显示，放大或缩小时图形质量会有所损失
依赖分辨率，逐像素进行渲染的
Canvas 通过 JavaScript 来绘制2D图形（动态生成）
不支持事件处理器。Canvas输出的是一整幅画布，能够以 .png 或 .jpg 格式保存结果图像
适合像素处理，动态渲染和大数据量绘制，最适合图像密集型的游戏（频繁重绘对象）
如果图形位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象

svg

SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言
不依赖分辨率,逐元素（DOM元素）进行渲染,能够很好的处理图形大小的改变, 放大或缩小时图形质量不会有所损失
基于XML，用文本格式的描述性语言来描述图像内容
支持事件处理器。SVG绘制出的每个图形元素都是独立的DOM节点，能够方便的绑定事件
适合静态图片展示，高保真文档查看和打印的应用场景，不适合游戏应用）
如果对象属性发生变化，浏览器能自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素即可

浏览器内核

Trident内核(IE内核) 代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，存在很多的兼容性问题
Gecko(Firefox内核) 代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主要操作系统中使用
Webkit内核(Safari内核,Chrome内核原型,开源) 它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核
Presto内核表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto
Blink内核由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

css动画

动画类型

transition补间动画``` 1、位置-平移（left/right/margin/transform） 2、方位-旋转（transform） 3、大小-缩放（transform） 4、透明度（opacity） 5、其他线性变换（transform）


2. keyframe关键帧动画```css
@keyframes testAnimation
{
  0%   {background: red; left:0; top:0;}
  25%  {background: yellow; left:200px; top:0;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0; top:200px;}
  100% {background: red; left:0; top:0;}
}
div {
  width: 100px;
  height: 50px;
  position: absolute;

  animation-name: myfirst;
  animation-duration: 5s;
}

animation逐帧动画```css .fadeIn{ animation: fadeIn .5s ease 1s both; } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1 } }


## IOS手机容器滚动条滑动不流畅
```css
overflow: auto;
-webkit-overflow-scrolling: touch;

Flex 布局

flex 布局指南

<https://ddcase.pages.dev/flex>

基本布局

横排布局

display: flex;
flex-direction: row;
margin: 0;

竖排布局

display: flex;
flex-direction: column;

对齐方式

上下左右居中

display: flex;
justify-content: center;
align-items: center;

垂直居中

display: flex;
align-items: center;

水平居中

display: flex;
justify-content: center;

间距分布

两端对齐

display: flex;
justify-content: space-between;

均匀间隔

display: flex;
justify-content: space-around;

文本溢出处理

两行文本溢出

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

单行文本溢出

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

使用建议

根据具体布局需求选择合适的 flex 属性
注意浏览器兼容性，特别是文本溢出相关属性

SASS

注释

标准的CSS注释 /_ xxx _/ ，会保留到编译后的文件。
单行注释 // xxx，只保留在SASS源文件中，编译后被省略。

变量

scss认为中划线和下划线是完全相等的 $primary-color === $primary_color

$primary-color: #cf449c;

作用域

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global

// 编译前
#main {
  $width: 5px !global;
  width: $width;
}

#sidebar {
  width: $width;
}

// 编译后
#main {
  width: 5px;
}

#sidebar {
  width: 5px;
}

默认值

变量已赋值

// 编译前
$primary-color: #000;
$primary-color: #cf449c !default;

#main {
  color: $primary-color;
}

// 编译后
#main {
  color: #000;
}

变量未赋值

// 编译前
$primary-color: null;
$primary-color: #cf449c !default;

#main {
  color: $primary-color;
}

// 编译后
#main {
  color: #cf449c;
}

嵌套

// 编译前
.popupBody {
  padding: 0 24px 70px 24px;
  .popupBody-lib {
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f2f2f2;
    margin-bottom: 25px;
  }

  .popupBody-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody .popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody .popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

父选择器：&

同级

// 编译前
.popupBody {
  padding: 0 24px 70px 24px;
  &-lib {
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f2f2f2;
    margin-bottom: 25px;
  }

  &-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

子级

// 编译前
.popupBody {
  padding: 0 24px 70px 24px;
  #{&}-lib {
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f2f2f2;
    margin-bottom: 25px;
  }

  #{&}-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody .popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody .popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

属性嵌套

// 编译前
.wrap {
  font: {
    family: fantasy;
    size: 30px;
    weight: bold;
  }
}

// 编译后
.wrap {
  font-family: fantasy;
  font-size: 30px;
  font-weight: bold;
}

嵌套 @import

// 编译前

// example.scss
.popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}

// index.scss
.popupBody {
  padding: 0 24px 70px 24px;
  @import './example';
  .popupBody-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody .popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody .popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

占位符选择器：%

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中；方便定义样式的重复使用

// 编译前
.wrap {
  background: #fff;
  %title {
    font: {
      family: fantasy;
      size: 30px;
      weight: bold;
    }
  }
}
.wrap-title {
  @extend %title;
}

// 编译后
.wrap {
  background: #fff;
}
.wrap .wrap-title {
  font-family: fantasy;
  font-size: 30px;
  font-weight: bold;
}

@mixin

// 编译前
@mixin font {
  font: {
    family: fantasy;
    size: 30px;
    weight: bold;
  }
}

.wrap {
  background: #fff;
  @include font;
}

// 编译后
.wrap {
  background: #fff;
  font-family: fantasy;
  font-size: 30px;
  font-weight: bold;
}

传参

单个

// 编译前
@mixin ellipsis($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
.wrap {
  @include ellipsis(2);
}

// 编译后
.wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

多个

// 编译前
@mixin hue($color, $background, $border) {
  color: $color;
  border: 1px solid $border;
  background-color: $background;
}
.wrap {
  @include hue($background: #fff, $color: red, $border: red);
}

// 编译后
.wrap {
  color: red;
  border: 1px solid red;
  background-color: #fff;
}

// 编译前
@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}
.wrap {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// 编译后
.wrap {
  box-shadow:
    0px 4px 5px #666,
    2px 6px 10px #999;
}

案例-换肤

以前写的一个换肤，但是这种不推荐，自定义程度太低，需要大量重新设计。推荐：

css in js

写一套css，然后传值给后台，由后台生成整套的css进行替换（ant，element）

@import './skin-variable.scss';

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;
    [data-theme='#{$theme-name}'] & {
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin background_color($color) {
  @include themeify {
    background: themed($color) or rgba($color: #ffffff, $alpha: 0.2) !important;
  }
}

@mixin btnStyle($bg, $color) {
  @include themeify {
    background: themed($bg) !important;
    color: themed($color) !important;
  }
}

@mixin colorm($color) {
  @include themeify {
    color: themed($color) or #ffffff !important;
  }
}

@mixin border($color) {
  @include themeify {
    border: 1px solid themed($color) or #ffffff !important;
  }
}

Viewport

<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

<!-- 设置页面不缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0″>

CSS 学习指南 (2025)

CSS 学习指南（2025 版）

CSS简介

什么是CSS？

CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML文档的呈现方式，控制网页在屏幕、打印或其他媒体上的视觉效果。

关键点：

CSS定义样式规则，渲染由浏览器引擎完成。
它不是图灵完备的编程语言，功能有限。
复杂效果可能需要JavaScript或其他工具辅助。

为什么学习CSS？

CSS对前端开发至关重要：

美化HTML页面，打造吸引人的用户界面。
定制化框架和组件样式。
理解UI框架实现，确保设计稿的高保真还原。

什么是W3C？

万维网联盟（W3C）是制定网页标准的国际组织，CSS是其维护的标准之一，确保浏览器间的兼容性和一致性。

CSS学习路线

前置知识

计算机科学基础概念。
熟悉HTML和浏览器开发者工具（如Chrome DevTools）。

学习阶段

基础（10-30小时）
- 掌握CSS语法、选择器和基本属性。
- 阅读W3C标准和MDN文档。
- 练习基础样式（颜色、字体、边距等）。
进阶（20-60小时）
- 精通布局（Flexbox、Grid、多列布局）。
- 学习CSS预处理器（Sass、Less、PostCSS）。
- 使用媒体查询实现响应式设计。
高级（持续学习）
- 处理浏览器兼容性问题。
- 实现复杂动画和效果（如曲线、过渡、3D变换）。
- 探索CSS Houdini进行程序化样式开发。
- 优化性能和编写可维护的代码。

工具

浏览器：Chrome DevTools用于调试和测试。
编辑器：VS Code，支持Sass、Less、PostCSS扩展。
资源：MDN、W3C标准、CanIUse（兼容性查询）。

CSS知识体系

核心概念

语法与数据类型
- CSS规则由选择器和声明组成。
- 支持注释、浏览器前缀和多种单位（如px、em、vh）。
- 示例：
```
/* 基本CSS规则 */
.example {
  color: #333;
  font-size: 16px;
}
```
选择器
- 类型：元素、类、ID、伪类、伪元素、组合选择器。
- 优先级：ID > 类/伪类 > 元素。
- 示例：
```
#header .nav > li:hover {
  background-color: #f0f0f0;
}
```
层叠与继承
- 层叠根据优先级和来源（浏览器、用户、开发者）决定样式应用。
- !important提升优先级。
- 示例：
```
@import 'styles.css';
p {
  color: blue !important;
}
```

盒模型

包含内容、内边距、边框和外边距。
box-sizing: border-box将内边距和边框计入宽高。

示例：

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 2px solid #000;
  margin: 15px;
}

布局

Flexbox：一维布局，适合行或列。

.container {
  display: flex;
  justify-content: space-between;
}

Grid：二维布局，适合复杂设计。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

多列布局：适合杂志风格布局。

.columns {
  column-count: 3;
  column-gap: 20px;
}

定位

类型：static、relative、absolute、fixed、sticky。

示例：

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

媒体查询

根据设备特性应用样式，实现响应式设计。

示例：

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

变换与动画

变换：旋转、缩放、平移等。

.element {
  transform: rotate(45deg) scale(1.2);
}

过渡：平滑属性变化。

.element {
  transition: all 0.3s ease;
}

关键帧动画：自定义动画序列。

@keyframes slidein {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
.animated {
  animation: slidein 1s infinite alternate;
}

典型代码示例

元素样式

#demo-element {
  background-color: #1766aa;
  margin: 20px;
  border: 5px solid #333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

Flexbox布局

.parent {
  display: flex;
  height: 100%;
}
.child:nth-child(3) {
  flex-grow: 1;
}

Sass示例

$brandColor: #f60;
$size: 1em;
.selector {
  margin: $size;
  background-color: $brandColor;
  .nested {
    margin: $size / 2;
  }
}

PostCSS处理

/* 输入 */
.example {
  display: grid;
  transition: all 0.5s;
  user-select: none;
}
/* 输出（自动添加前缀） */
.example {
  display: -ms-grid;
  display: grid;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

高级CSS技术

CSS预处理器

Sass/Less：支持变量、嵌套和函数，提高代码可维护性。
PostCSS：增强CSS兼容性，自动添加浏览器前缀。

示例（Sass）：

$primary: #007bff;
.button {
  background: $primary;
  &:hover {
    background: darken($primary, 10%);
  }
}

CSS方法论

BEM：规范类命名，增强可读性。
SMACSS/ITCSS：模块化CSS架构，提升可维护性。
Atomic CSS：通过组合基础样式减少代码量。

CSS-in-JS

用于React等框架，通过JS生成样式。
常见库：styled-components、css-modules。

示例（styled-components）：

import styled from 'styled-components';
const Button = styled.button`
  background: #007bff;
  padding: 10px;
`;

框架与库

Bootstrap：经典CSS框架，支持响应式布局。
Bulma：基于Flexbox的纯CSS框架。
Animate.css：提供开箱即用的动画效果。
Font Awesome：矢量图标库。

实用技巧与优化

居中布局

水平居中
- 内联元素：text-align: center;
- 固定宽度块元素：margin: auto;
- 不定宽度块元素：display: inline-block; 或 position: relative; left: 50%; transform: translateX(-50%);
垂直居中
- 单行文本：line-height等于height。
- 表单元：display: table-cell; vertical-align: middle;
- 绝对定位：top: 50%; transform: translateY(-50%); 或 margin: auto; 结合top: 0; bottom: 0;

伪类与伪元素

伪类：筛选元素状态（如:hover、:first-child），单冒号。
伪元素：创建虚拟元素（如::before、::after），双冒号。

示例：

.item:hover::after {
  content: 'Hovered!';
  color: #f00;
}

雪碧图

优点：减少HTTP请求，提升加载性能。
缺点：高清屏失真，维护成本高。

字体图标

优点：轻量、可缩放、支持动态效果。
缺点：仅限单色或渐变色，制作复杂。

Base64编码

优点：减少HTTP请求，避免跨域问题。
缺点：体积约为原图4/3，IE6/7不支持。

移动端适配

Viewport设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

滚动优化（解决iOS滚动不流畅）：

.container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

动画性能优化

优先使用transform和opacity，避免触发重排。
利用硬件加速（will-change）。

示例：

.animated {
  will-change: transform;
  transition: transform 0.3s ease;
}

浏览器兼容性

使用CanIUse查询属性支持情况。
PostCSS自动添加前缀，增强兼容性。
注意浏览器默认样式差异（如输入框、进度条）。

总结

通过系统学习CSS的语法、布局、动画和优化技巧，结合预处理器和框架，您可以高效地开发美观、可维护的网页。本指南提供了清晰的学习路径和实用资源，助您从基础到高级逐步掌握CSS。立即动手实践，打造令人惊艳的网页吧！

JavaScript 学习指南 (2025)

JavaScript 学习指南（2025 版）

写在前面

新语法速览

以下是ECMAScript最新标准（截至2025年），快速了解以便查阅：

避免使用的语法

以下是历史遗留或不推荐的语法，建议使用现代替代方案：

var：使用let或const以避免作用域问题。
eval/new Function：安全性和性能问题，推荐静态代码。
with：易导致代码混乱，推荐显式属性访问。
label：复杂且不必要，推荐结构化控制流。
==：非严格相等可能导致意外行为，推荐===。

教材与资源

视频

JavaScript in 2025: What's New?（假设2025年新视频，15min）：介绍最新ES特性。
JavaScript Full Course 2025（3h）：从基础到高级，覆盖ES6+、异步和模块化。
Node.js for Beginners（16min）：Node.js运行环境和包管理。
JavaScript Performance Tips（20min）：优化技巧和常见陷阱。

教程

现代JavaScript教程：全面的JS学习资源。
ES2025速览：最新ECMAScript提案和标准。
MDN Web Docs：

书籍

《JavaScript权威指南（第8版）》（2024）：全面深入，涵盖ES2023+。
《JavaScript高级程序设计（第5版）》（2025）：实用开发指南，注重现代实践。
《你不知道的JavaScript（更新版）》（2023）：深入语言底层机制。

扩展阅读

JavaScript生态报告2024：最新工具和趋势。
ECMAScript提案：跟踪ESNext特性。
JavaScript历史：语言演变背景。

JavaScript生态

运行环境

Node.js：JavaScript的服务器端运行时，支持命令行和Web开发。
- 版本管理：nvm或fnm（更轻量）。
- 源管理：nrm切换npm镜像。

包管理

npm：默认包管理工具。
pnpm：高效、节省磁盘空间，推荐使用。
Bun：2025年新兴运行时和包管理器，性能优异。
常用工具：
- 格式化：Prettier | Biome
- 静态检查：ESLint
- 测试：Vitest（取代Jest，速度更快）

开发工具

VS Code插件：
兼容性检查：
- Can I Use
- ES Compatibility Table
包分析：
- BundlePhobia：检查包体积。
- npm trends：比较包流行度。

术语表

JavaScript (JS)：ECMAScript的具体实现，运行于浏览器和Node.js。
ECMAScript (ES)：JavaScript的标准规范。
- ES6/ES2015：引入箭头函数、类、模块等。
- ES2023+：新增记录/元组、管道操作符等（部分为提案）。
- ESNext：最新提案和实验性特性。
Web API：浏览器提供的接口，如DOM、Fetch。
JSON：基于JS语法的轻量数据格式。
TypeScript (TS)：带类型的JS超集。
JSX/TSX：React的模板语法。
Vanilla JS：原生JavaScript，无框架。
ECMA-262：ECMAScript标准文档。
TC39：负责ECMAScript标准的委员会。

Node.js安装与运行（Mac）

# 安装Node.js（推荐使用fnm）
brew install fnm
fnm install 20  # 安装Node.js v20（2025年LTS版本）

# 安装pnpm
npm install -g pnpm

# 检查版本
node -v
pnpm -v

# 运行JS代码
node
> 1 + 1
> .exit

node script.js

# 切换Node版本
fnm use 18
fnm use 20

# 管理npm源
npm install -g nrm
nrm use taobao

JavaScript语言基础知识体系

语言特性

动态类型、弱类型。
基于原型的继承。
函数是一等公民，支持高阶函数。
单线程，基于事件循环（EventLoop）实现非阻塞。
高级语言，采用即时编译（JIT）。

基本语法

语法结构
- 分号（;）可选，推荐省略（依赖ASI机制）。
- 注释：//（单行），/* */（多行），支持JSDoc。
- 变量：let（块级作用域），const（常量），避免var。
- 严格模式："use strict";（强制规范代码）。
- 示例：
```
// JSDoc示例
/** @param {number} a */
function add(a, b) {
  return a + b;
}
```
表达式与运算符
- 算术：+, -, *, /, %, **。
- 逻辑：&&, ||, !, ??（空值合并）。
- 比较：===, !==, <, >, <=, >=。
- 赋值：=, +=, ||=, &&=, ??=。
- 其他：?.（可选链），typeof, instanceof, in, delete。
- 示例：
```
let x = 5;
x ??= 10; // x保持5
console.log(x?.toString()); // "5"
```
控制流
- 条件：if, else, switch。
- 循环：for, while, do while, for...of, for...in。
- 示例：
```
for (const item of [1, 2, 3]) {
  console.log(item); // 1, 2, 3
}
```

错误处理

使用try, catch, finally, throw。

示例：

try {
  throw new Error("Something went wrong");
} catch (e) {
  console.error(e.message);
}

运行时

变量提升：仅var和函数声明提升，let/const有暂时性死区。
短路求值：&&和||在必要时停止执行。
垃圾回收：基于标记清除算法。

原始数据类型

number：42, 3.14, NaN, Infinity。
BigInt：123n。
string："hello", 支持模板字符串`x = ${x}`。
boolean：true, false。
symbol：Symbol('id')。
null/undefined。

示例：

const str = `Hello ${42}`; // "Hello 42"
const sym = Symbol('unique');

引用类型

对象
- 创建：{ a: 1 }。
- 访问：obj.a, obj['a']。
- API：Object.keys(), Object.assign(), Object.defineProperty()。
- 示例：
```
const obj = { get x() { return 42; } };
console.log(obj.x); // 42
```
数组
- 创建：[1, 2, 3]。
- API：.map(), .filter(), .reduce(), .flat()。
- 示例：
```
const arr = [1, 2, 3].map(x => x * 2); // [2, 4, 6]
```

函数

声明：function fn() {}, 表达式：const fn = () => {}。
箭头函数：无this和arguments绑定。
参数：支持默认值、解构、剩余参数。

示例：

const sum = (a, b = 0, ...rest) => a + b + rest.reduce((s, x) => s + x, 0);
console.log(sum(1, 2, 3, 4)); // 10

类

定义：class MyClass { constructor() {} }。
继承：extends, super。
私有字段：#field。

示例：

class Counter {
  #count = 0;
  increment() { return ++this.#count; }
}
const c = new Counter();
console.log(c.increment()); // 1

异步编程

Promise
- 创建：new Promise((resolve, reject) => {})。
- API：.then(), .catch(), Promise.all(), Promise.any()。
- 示例：
```
Promise.resolve(42).then(v => console.log(v)); // 42
```

async/await

简化Promise使用，支持顶层await（模块中）。

示例：

async function fetchData() {
  return await Promise.resolve("data");
}

Generator

定义：function* fn() { yield 1; }。

示例：

function* gen() { yield* [1, 2, 3]; }
for (const v of gen()) console.log(v); // 1, 2, 3

事件循环
- 微任务：Promise、async/await。
- 宏任务：setTimeout, setInterval。

模块化

ES模块：import, export。
动态导入：import()。

示例：

export const add = (a, b) => a + b;
import("./module.js").then(m => console.log(m.add(1, 2)));

JavaScript代码片段

ES5基础

// 变量与类型
var x = 42; // 避免使用var
console.log(typeof x); // "number"

// 字符串操作
const str = "hello " + "world";
console.log(str.split(" ")); // ["hello", "world"]

// 数组与对象
const arr = [1, 2, 3];
const obj = { a: 1, b: function() { return this.a; } };
console.log(arr.length, obj.b()); // 3, 1

// 函数与上下文
function greet(name) { return `Hi, ${name}`; }
console.log(greet.call(null, "Alice")); // "Hi, Alice"

ES6+特性

// 块级作用域与解构
{
  const [a, ...rest] = [1, 2, 3];
  console.log(a, rest); // 1, [2, 3]
}

// 箭头函数与模板字符串
const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet()); // "Hello, Guest!"

// 类与私有字段
class User {
  #id = 0;
  constructor(name) { this.name = name; }
  getId() { return this.#id; }
}
const user = new User("Bob");
console.log(user.getId()); // 0

ES2023+与实验性特性

// 空值合并与可选链
const data = { user: null };
console.log(data.user?.name ?? "Unknown"); // "Unknown"

// 逻辑赋值
let flag = false;
flag &&= true; // flag保持false
console.log(flag); // false

// BigInt
const big = 123456789n * 2n;
console.log(big); // 246913578n

// 记录与元组（实验性）
const tuple = #[1, 2, 3]; // 不可变
console.log(tuple[0]); // 1

<!-- 字符编码：确保正确显示中文等字符 -->
<meta charset="UTF-8">

<!-- 页面基本信息 -->
<meta name="description" content="页面描述，建议150字符以内，优化SEO">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="author" content="姓名, email@example.com">
<meta name="publisher" content="发布者名称">
<meta name="copyright" content="© 2025 Company Name">
<meta name="contact" content="contact@example.com">

<!-- 搜索引擎优化 -->
<meta name="robots" content="index,follow"> <!-- 允许搜索引擎索引和跟踪链接 -->
<meta name="googlebot" content="index,follow"> <!-- Google爬虫专用 -->
<meta name="bingbot" content="index,follow"> <!-- Bing爬虫专用 -->

<!-- 浏览器兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 优先使用最新IE和Chrome内核 -->
<meta name="renderer" content="webkit"> <!-- 启用360浏览器webkit内核 -->

<!-- 安全策略 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="strict-origin-when-cross-origin">

<!-- 移动端优化 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <!-- 响应式布局，支持刘海屏 -->
<meta name="HandheldFriendly" content="true"> <!-- 优化老式移动浏览器 -->
<meta name="MobileOptimized" content="320"> <!-- 微软老式浏览器优化 -->

<!-- iOS设备优化 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 启用WebApp全屏模式 -->
<meta name="apple-mobile-web-app-title" content="应用标题"> <!-- 主屏应用标题 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 状态栏样式 -->
<meta name="apple-itunes-app" content="app-id=yourAppID, app-argument=yourURL"> <!-- 智能App广告条 -->
<meta name="apple-touch-fullscreen" content="yes"> <!-- iOS全屏支持 -->

<!-- 禁止自动检测 -->
<meta name="format-detection" content="telephone=no, email=no, address=no"> <!-- 禁用电话、邮箱、地址自动链接 -->

<!-- 国内浏览器优化 -->
<meta name="screen-orientation" content="portrait"> <!-- UC/QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 -->
<meta name="full-screen" content="yes"> <!-- UC强制全屏 -->
<meta name="x5-fullscreen" content="true"> <!-- QQ强制全屏 -->
<meta name="browsermode" content="application"> <!-- UC应用模式 -->
<meta name="x5-page-mode" content="app"> <!-- QQ应用模式 -->
<meta http-equiv="Cache-Control" content="no-siteapp"> <!-- 禁止百度转码 -->

<!-- Windows Phone优化 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- 禁用点击高光 -->
<meta name="msapplication-TileColor" content="#000000"> <!-- 磁贴颜色 -->
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> <!-- 磁贴图标 -->

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="网站名称">
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:url" content="https://example.com">
<meta property="og:image" content="/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="图片描述">
<meta property="og:locale" content="zh_CN">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@username">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="/twitter-card.png">
<meta name="twitter:image:alt" content="图片描述">

<!-- 社交媒体链接 -->
<meta property="og:see_also" content="https://www.facebook.com/yourpage">
<meta property="og:see_also" content="https://www.instagram.com/youraccount">
<meta property="og:see_also" content="https://www.youtube.com/@yourchannel">
<meta property="og:see_also" content="https://github.com/yourusername">

<!-- 性能优化 -->
<meta name="theme-color" content="#000000"> <!-- 浏览器主题色 -->
<meta name="color-scheme" content="light dark"> <!-- 支持深色模式 -->

<!-- 缓存控制 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <!-- 禁用缓存 -->
<meta http-equiv="Pragma" content="no-cache"> <!-- 兼容旧浏览器 -->
<meta http-equiv="Expires" content="0"> <!-- 立即过期 -->

<!-- 其他实用标签 -->
<meta name="application-name" content="应用名称">
<meta name="msapplication-tooltip" content="应用工具提示">
<meta name="msapplication-starturl" content="/">
<meta name="generator" content="编辑器名称">
<meta name="rating" content="general"> <!-- 内容分级 -->
<meta name="distribution" content="global"> <!-- 发布范围 -->
<meta name="revisit-after" content="7 days"> <!-- 重新访问间隔 -->