Wiki

教學

更新於 2025-12-25約 25 分鐘閱讀

本文由簡體中文內容確定性轉換，並受版本化術語表保護。

只講最常用的辦法來實現某種寫法,像一些非常冷門的方法本文不講,基本都會被另一種常用的寫法實現.

1.標題

1.1.用法

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

1.2.重要注意事項：

1.2.1.標題寫法

符號與文字間的空格：# 號和標題文字之間必須有一個空格。這是標準的 Markdown 語法要求。

# 正确写法
#错误写法

1.2.2.標題的巢狀結構

標題的層次結構應該遵循邏輯順序，不應該跳級使用。良好的標題結構就像一本書的目錄：

推薦的層次結構：

# 主题：人工智能概述

## 第一部分：基础概念
### 什么是人工智能
### 发展历史
#### 早期发展（1950-1980）
#### 现代发展（1980至今）

## 第二部分：应用领域
### 自然语言处理
### 计算机视觉
### 机器学习
#### 监督学习
#### 无监督学习
#### 强化学习

避免的錯誤結構：

# 主标题
### 直接跳到三级标题（不推荐）
## 然后才是二级标题

1.2.3.標題編號的最佳實踐

自動編號 vs 手動編號：

許多 Markdown 處理器和編輯器支援自動生成標題編號，因此在原始碼中通常不需要手動新增編號：

# 引言
## 背景
## 目标
# 方法论
## 数据收集
## 分析方法

標題錨點：

大多數 Markdown 處理器會自動為標題建立錨點（anchor），便於頁面內跳轉：

[跳转到方法论部分](#方法论)

標題長度建議：

保持標題簡潔明瞭，一般不超過 10 個漢字或 20 個英文字元
使用描述性詞語，避免模糊的標題如"其他"、"雜項"
可以使用冒號來分隔主題和副主題

2.文本格式

2.1.換行用法

Markdown 段落沒有特殊的格式，直接編寫文字就好，段落的換行是使用兩個以上空格或者回車(常用)。

2.2.字型用法

文本強調是寫作中的重要技巧，Markdown 提供了簡潔的方式來實現粗體和斜體效果。

Markdown 可以使用以下幾種字型：粗體和斜體。

**粗體語法：**使用兩個星號 ** (常用) 或兩個下劃線 __ 包圍文字：

这是**粗体文字**使用星号

**斜體語法：**使用一個星號 * (常用) 或一個下劃線 _ 包圍文字：

这是*斜体文字*使用星号

**粗斜體組合：**使用三個星號 *** (常用) 或三個下劃線 ___。

***粗斜体文本***

3.列表

3.1.無序列表

無序列表使用星號(*)、加號(+)或是**減號(-)**作為列表標記，這些標記後面要新增一個空格，然後再填寫內容：

* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项


- 第一项
- 第二项
- 第三项

選擇建議：

建議統一使用減號 -，因為它在視覺上更清晰
在同一文件中保持一致的標記方式
標記符號後必須有一個空格

3.2.有序列表

3.2.1.用法

有序列表用於展示有順序要求的步驟或專案。有序列表使用數字並加上 . 號來表示，如：

1. 第一项
2. 第二项
3. 第三项

3.2.2.注意事項

數字可以不連續:

Markdown 會自動修正數字順序：

1. 第一项
3. 第二项（实际显示为2）
7. 第三项（实际显示为3）

從指定數字開始：(但必須連續)

5. 第五项
6. 第六项
7. 第七项

3.3.列表巢狀

巢狀規則：

子列表需要縮排 2-4 個空格（推薦 4 個,即 1 個TAB）
保持一致的縮排長度
可以無限層巢狀，但實際使用中建議不超過 3 層

3.3.1.列表巢狀技巧

列表可以巢狀使用，建立多層次的結構：

無序列表巢狀：

- 水果
  - 苹果
    - 红苹果
    - 绿苹果
  - 香蕉
  - 橙子
- 蔬菜
  - 胡萝卜
  - 白菜

有序列表巢狀：

1. 准备阶段
   1. 收集资料
   2. 制定计划
2. 执行阶段
   1. 开始实施
   2. 监控进度
3. 总结阶段

混合巢狀：

1. 主要任务
   - 子任务A
   - 子任务B
     1. 详细步骤1
     2. 详细步骤2
   - 子任务C
2. 次要任务

列表混合巢狀只需在子列表中的選項前面新增兩個或**四個空格(一個tab)**即可

3.4.任務列表（核取方塊列表）

任務列表是 GitHub 風格 Markdown 的擴充套件功能，現在被廣泛支援：

基本語法：

- [ ] 未完成的任务
- [x] 已完成的任务
- [ ] 另一个未完成的任务

-,[,]以及后面的文字之間都有一個空格.

實際應用示例：

## 项目待办清单

### 设计阶段
- [x] 需求分析
- [x] 原型设计
- [ ] UI 设计

### 开发阶段
- [ ] 前端开发
  - [x] 页面布局
  - [ ] 交互功能
  - [ ] 响应式适配
- [ ] 后端开发
  - [ ] 数据库设计
  - [ ] API 开发
  - [ ] 性能优化

### 测试阶段
- [ ] 单元测试
- [ ] 集成测试
- [ ] 用户验收测试

使用技巧：

方括號內的空格和 x 很重要：[ ] 和 [x]
可以與巢狀列表結合使用
在專案管理、學習計劃、生活清單中特別有用
某些編輯器支援點選核取方塊來切換狀態

3.5.高階列表技巧

列表項中包含多段內容：

1. 第一项

   这是第一项的详细说明，需要与列表项对齐缩进。
   
   还可以包含第二段内容。

2. 第二项

   > 可以在列表项中使用引用

列表項中的換行：

- 这是一个很长的列表项，
  需要换行显示，注意第二行需要与第一行对齐
- 另一个列表项

通過掌握這些基礎語法，你已經能夠建立結構清晰、格式規範的 Markdown 文件了。這些語法是日常寫作中最常用的，熟練掌握它們將大大提高你的文件編寫效率。

4.引用塊

引用塊用於突出顯示重要資訊、引用他人觀點或建立視覺層次。

4.1.單級引用的使用

基本語法：

Markdown 區塊引用是在段落開頭使用 > 符號，然後後面緊跟一個空格符號：

> 区块引用1
> 区块引用2

多行引用：

> 这是引用的第一行。
> 这是引用的第二行。
> 
> 这是引用的第二段。

簡化寫法(不推薦)：

只在第一行使用 > ，其餘行會自動包含在引用中：

> 这是一个长引用，
包含多行内容，
只需要在第一行使用 > 符号。

4.2.多級巢狀引用

另外區塊是可以巢狀的，一個 > 符號是最外層，兩個 > 符號是第一層巢狀，以此類推：

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

實際應用示例：

> **用户反馈**：这个功能很有用！
> 
> > **开发团队回复**：感谢您的反馈，我们会继续优化。
> > 
> > > **项目经理补充**：预计下个版本会有更多改进。

4.3.引用塊內的其他元素

4.3.1.區塊中使用列表

區塊中使用列表例項如下：

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> - 第一项
> - 第二项
> - 第三项

4.3.2.列表中使用區塊

如果要在列表專案內放進區塊，那麼就需要在 > 前新增四個空格的縮排。

列表中使用區塊例項如下：

- 第一项
    > 区块引用1
    > 区块引用2
- 第二项

4.3.3.其他元素

引用塊內可以包含幾乎所有其他 Markdown 元素。

包含標題：

> ## 重要提醒
> 
> 请在操作前仔细阅读文档，避免数据丢失。

包含程式碼：

> 要运行这个脚本，请使用以下命令：
> 
> ```bash
> npm install
> npm start
> ```
> 
> 执行后会在 `http://localhost:3000` 看到结果。

包含連結和圖片：

> &#x1f4da; **推荐阅读**
> 
> 详细信息请参考 [官方文档](https://example.com)
> 
> ![示例图片](./images/example.png)

4.4.引用的最佳實踐

名言警句引用

> "在软件开发中，最昂贵的错误就是构建正确的系统错误的方式，或者构建错误的系统正确的方式。"
> 
> — Barry Boehm，软件工程专家

重要資訊提示

> &#x2705; **成功**
> 
> 配置已保存并生效。系统将在下次重启时应用新设置。


> &#x26a0;&#xfe0f; **警告**
> 
> 此操作不可逆转，请确保已备份重要数据。


> &#x274c; **错误**
> 
> 连接数据库失败，请检查网络连接或联系系统管理员。


> &#x2139;&#xfe0f; **提示**
> 
> 首次使用需要进行账户验证，验证邮件已发送到您的邮箱。

文件結構中的引用

章節摘要：

# 第一章：项目概述

> **本章要点**
> 
> - 了解项目背景和目标
> - 掌握核心功能特性
> - 熟悉技术架构设计

版本更新說明：

## v2.1.0 更新内容

> **重大变更**
> 
> &#x26a0;&#xfe0f; API 接口路径已调整，旧版本客户端需要更新
> 
> 详见 [迁移指南](./migration-guide.md)

5.程式碼

Markdown 提供了多種方式來展示程式碼，從簡單的行內程式碼到複雜的程式碼塊，滿足不同場景下的程式碼展示需求。

5.1.行內程式碼

如果是段落上的一個函式或片段的程式碼可以用反引號把它包起來（`），例如：

C++23打印使用`std::print()` 函数

常見用法示例：

函式名：使用 console.log() 輸出資訊
變數名：將值賦給 userName 變數
命令列：執行 npm install 安裝依賴
鍵盤按鍵：按 Ctrl+C 複製內容
檔名：編輯 index.html 檔案

特殊字元轉義

當需要在行內程式碼中顯示反引號或其他特殊字元時，需要進行轉義處理。

顯示反引號的方法：

使用雙反引號包圍單反引號：
```
``使用 `反引号` 包围代码``
```
其他特殊字元處理：
- HTML 標籤：元素
- 數學符號：計算 x + y = z
- 特殊符號：使用表示空格

5.2.程式碼區塊

5.2.1.縮排式程式碼塊(幾乎不用)

程式碼區塊使用 4 個空格或者一個製表符（Tab 鍵）。

語法格式：

正常文本段落

    这是缩进式代码块
    每行前面有四个空格
    保持代码的原始格式
    
继续正常文本

    #include <print>

    int main(int argc,char ** argv)
    {
        (void)argc;
        (void)argv;
        
        std::print("Hello World!\n");
        std::println("Hello World!");
        return 0;
    }

5.2.2.三反引號程式碼塊(常用)

你也可以用 ``` 包裹一段程式碼，並指定一種語言（也可以不指定）：

5.2.2.1.不指定語言

多行程式碼內容可以包含空行保持原有縮排

注意事項：

縮排式程式碼塊前後需要空行分隔
所有程式碼行必須保持一致的縮排
不支援語法高亮
在列表中使用時需要8個空格縮排

5.2.2.2.語言標識和語法高亮

在三反引號後新增語言識別符號可以啟用語法高亮功能。

例如C++:

#include <print>

int main(int argc,char ** argv)
{
    (void)argc;
    (void)argv;
        
    std::print("Hello World!\n");
    std::println("Hello World!");
    return 0;
}

常用程式語言

語言 / 型別	推薦識別符號	常用識別符號 / 別名	示例
C	`c`	`C`	```c
C++	`cpp`	`c++`, `cc`, `cxx`	```cpp
C#	`csharp`	`cs`, `c#`	```csharp
Objective-C	`objective-c`	`objc`	```objective-c
Java	`java`	—	```java
Kotlin	`kotlin`	`kt`	```kotlin
Python	`python`	`py`	```python
JavaScript	`javascript`	`js`	```javascript
TypeScript	`typescript`	`ts`	```typescript
JSX	`jsx`	—	```jsx
TSX	`tsx`	—	```tsx
Go	`go`	`golang`	```go
Rust	`rust`	`rs`	```rust
Swift	`swift`	—	```swift
Dart	`dart`	—	```dart
PHP	`php`	—	```php
Ruby	`ruby`	`rb`	```ruby
Lua	`lua`	—	```lua
Perl	`perl`	`pl`	```perl
Scala	`scala`	—	```scala
Groovy	`groovy`	—	```groovy
Haskell	`haskell`	`hs`	```haskell
Elixir	`elixir`	`ex`	```elixir
Erlang	`erlang`	`erl`	```erlang
Julia	`julia`	`jl`	```julia
R	`r`	—	```r
MATLAB	`matlab`	—	```matlab
Fortran	`fortran`	`f90`, `f95`	```fortran
Assembly	`asm`	`assembly`	```asm
x86 Assembly	`x86asm`	`x86`	```x86asm
WebAssembly	`wasm`	`wat`	```wasm
Solidity	`solidity`	`sol`	```solidity
Verilog	`verilog`	`v`	```verilog
SystemVerilog	`systemverilog`	`sv`	```systemverilog
VHDL	`vhdl`	—	```vhdl

Web / 資料格式

語言 / 型別	推薦識別符號	常用識別符號 / 別名	示例
HTML	`html`	—	```html
CSS	`css`	—	```css
SCSS	`scss`	—	```scss
Sass	`sass`	—	```sass
Less	`less`	—	```less
Vue	`vue`	—	```vue
Svelte	`svelte`	—	```svelte
JSON	`json`	—	```json
JSON5	`json5`	—	```json5
YAML	`yaml`	`yml`	```yaml
XML	`xml`	—	```xml
TOML	`toml`	—	```toml
INI	`ini`	—	```ini
CSV	`csv`	—	```csv
GraphQL	`graphql`	`gql`	```graphql
Protocol Buffers	`protobuf`	`proto`	```protobuf
Markdown	`markdown`	`md`	```markdown
reStructuredText	`rst`	—	```rst
LaTeX	`latex`	`tex`	```latex
SVG	`svg`	`xml`	```svg

Shell / 命令列

語言 / 型別	推薦識別符號	常用識別符號 / 別名	示例
Bash	`bash`	`sh`, `shell`	```bash
POSIX Shell	`sh`	`shell`	```sh
Zsh	`zsh`	—	```zsh
Fish	`fish`	—	```fish
PowerShell	`powershell`	`ps1`	```powershell
Windows Batch	`batch`	`bat`, `cmd`	```batch
Console / 終端會話	`console`	`shell-session`	```console
純文本	`text`	`plaintext`, `txt`	```text

構建 / DevOps / 配置

語言 / 型別	推薦識別符號	常用識別符號 / 別名	示例
CMake	`cmake`	—	```cmake
Makefile	`makefile`	`make`	```makefile
Dockerfile	`dockerfile`	`docker`	```dockerfile
Nginx	`nginx`	—	```nginx
Apache	`apache`	`apacheconf`	```apache
Git Config	`gitconfig`	—	```gitconfig
Git Ignore	`gitignore`	—	```gitignore
Diff	`diff`	`patch`	```diff
Terraform	`terraform`	`tf`, `hcl`	```terraform
HCL	`hcl`	—	```hcl
Ansible	`yaml`	`yml`, `ansible`	```yaml
GitHub Actions	`yaml`	`yml`	```yaml
Kubernetes	`yaml`	`yml`	```yaml
ROS 2 引數	`yaml`	`yml`	```yaml
ROS Launch XML	`xml`	—	```xml
ROS Launch Python	`python`	`py`	```python

資料庫 / 查詢語言

語言 / 型別	推薦識別符號	常用識別符號 / 別名	示例
SQL	`sql`	—	```sql
MySQL	`sql`	`mysql`	```sql
PostgreSQL	`sql`	`postgresql`, `pgsql`	```sql
SQLite	`sql`	`sqlite`	```sql
PL/SQL	`plsql`	—	```plsql
T-SQL	`tsql`	—	```tsql
Cypher	`cypher`	—	```cypher
MongoDB Shell	`javascript`	`js`	```javascript

機器人 / 嵌入式常用

語言 / 型別	推薦識別符號	常用識別符號 / 別名	示例
STM32 C	`c`	—	```c
STM32 C++	`cpp`	`c++`, `cxx`	```cpp
ROS 2 C++	`cpp`	`c++`, `cxx`	```cpp
ROS 2 Python	`python`	`py`	```python
CMakeLists.txt	`cmake`	—	```cmake
package.xml	`xml`	—	```xml
ROS 2 引數檔案	`yaml`	`yml`	```yaml
URDF	`xml`	—	```xml
Xacro	`xml`	`xacro`	```xml
SDF	`xml`	`sdf`	```xml
Gazebo World	`xml`	—	```xml
Linux 命令	`bash`	`sh`, `shell`	```bash
終端命令 + 輸出	`console`	`shell-session`	```console
Dockerfile	`dockerfile`	`docker`	```dockerfile
Docker Compose	`yaml`	`yml`	```yaml
JSON	`json`	—	```json
TOML	`toml`	—	```toml
INI / Conf	`ini`	—	```ini
Makefile	`makefile`	`make`	```makefile
Git Diff	`diff`	`patch`	```diff
日誌 / 普通輸出	`text`	`plaintext`, `txt`	```text

5.2.2.3.程式碼塊的高階特性

行號顯示

某些 Markdown 渲染器支援顯示行號，通過特定的語法或配置實現。

語法示例（部分支援）：

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));

或者使用：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const sum = doubled.reduce((a, b) => a + b, 0);
console.log(`总和: ${sum}`);

程式碼差異對比

主流方式:

function calculateTotal(items) {
-   let total = 0;
+   let total = 0.0;
    
    for (let item of items) {
-       total += item.price;
+       total += parseFloat(item.price);
    }
    
+   // 保留两位小数
+   total = Math.round(total * 100) / 100;
    return total;
}

Git 風格的差異顯示：

@@ -1,5 +1,8 @@
 function greetUser(name) {
-    console.log("Hello " + name);
+    if (!name) {
+        throw new Error("Name is required");
+    }
+    console.log(`Hello, ${name}!`);
 }

語言特定的差異對比：

// 之前的代码
const oldFunction = () => {
    var x = 10;  // &#x274c; 使用 var
    console.log("Value: " + x);  // &#x274c; 字符串拼接
}

// 改进后的代码  
const newFunction = () => {
    const x = 10;  // &#x2705; 使用 const
    console.log(`Value: ${x}`);  // &#x2705; 模板字符串
}

6.連結

連結是使 Markdown 文件具有互動性的關鍵元素。

掌握連結語法能讓你建立內容豐富、易於導航的文件。

連結使用方法如下：

[链接名称](链接地址)
[链接文字](链接地址 "可选的标题")

或者:

<链接地址>

比如一個簡單的連結：

这是一个链接 [个人网站](https://www.tungchiahui.cn)

直接使用連結地址：

<https://www.tungchiahui.com>

設定可選標題：

这是一个链接 [个人网站](https://tungchiahui.com)
欢迎访问 [GitHub](https://github.com) 官网
这是 [百度搜索](https://baidu.com "百度一下，你就知道")

連結標題的作用：

當滑鼠懸停在連結上時顯示提示資訊
對搜尋引擎最佳化和無障礙訪問有幫助
標題文字放在雙引號、單引號或括號中都可以

郵箱與電話連結：

markdown联系我：[发送邮件](mailto:tungchiahui@gmail.com)
电话联系：[拨打电话](tel:+86-188-8888-8888)

自動連結識別

現代 Markdown 解析器通常支援自動識別 URL 和郵箱地址：

URL 自動識別：

markdown直接输入网址：https://www.tungchiahui.com
用尖括号包围：<https://www.tungchiahui.com>

郵箱自動識別(但建議郵箱還是要加mailto:)：

markdown联系邮箱：tungchiahui@gmail.com
或者：<tungchiahui@gmail.com>

注意事項：

自動識別功能依賴於具體的 Markdown 解析器
為了確保相容性，建議使用標準的連結語法
某些特殊字元可能影響自動識別

錨點連結的使用(常用)

錨點連結用於在同一文件內跳轉，特別適合長文件的導航：

跳轉到標題：

## 目录
- [第一章：介绍](#第一章介绍)
- [第二章：安装](#第二章安装)
- [第三章：使用方法](#第三章使用方法)

# 第一章：介绍
这里是介绍内容...

# 第二章：安装
这里是安装说明...

# 第三章：使用方法
这里是使用说明...

錨點規則：

標題會自動生成錨點
錨點名稱通常是標題的小寫形式
空格替換為連字元
移除特殊字元

手動建立錨點：

<a id="custom-anchor"></a>
## 自定义锚点位置

[跳转到自定义位置](#custom-anchor)

頁面頂部返回連結：

[回到顶部](#)

7.圖片

7.1.用法

圖片能讓文件更加生動和易於理解。

Markdown 的圖片語法簡潔而靈活。

Markdown 圖片語法格式如下：

![替代文字](图片路径)
![替代文字](图片路径 "图片标题")

開頭一個感嘆號 !
接著一個方括號，裡面放上圖片的替代文字
接著一個普通括號，裡面放上圖片的網址，最後還可以用引號包住並加上選擇性的 'title' 屬性的文字。

相對路徑示例：

![项目截图](./images/screenshot.png)
![用户界面](../assets/ui-demo.jpg "用户界面演示")
![图标](images/icon.svg "应用图标")

絕對路徑示例：

![本地图片](/home/username/Documents/image.png)
![系统截图](/home/username/Pictures/screenshot.png)

路徑使用建議：

推薦使用相對路徑，便於專案移植
建議建立專門的圖片資料夾（如 images/、assets/）
使用有意義的檔名，便於管理
注意路徑分隔符在不同作業系統中的差異

直接引用網路圖片：

![Tung Chia-hui 个人图标](https://cdn.tungchiahui.cn/tungwebsite/assets/images/logo.png)

![ROBOCON 图标](https://ccdn.tungchiahui.cn/site-assets/images/sponsors/robocon-logo.webp "CURC ROBOCON")

網路圖片注意事項：

確保圖片 URL 的穩定性和可訪問性
注意圖片的版權問題
考慮載入速度和網路環境
建議本地備份重要圖片

7.2.圖片 alt 文本的重要性

Alt 文本（替代文字）在圖片無法顯示時提供替代資訊，同時對無障礙訪問和 SEO 很重要：

好的 alt 文本示例：

![苹果公司总部大楼外观，现代玻璃幕墙建筑](./images/apple-headquarters.jpg)
![网站流量统计图表，显示过去六个月的访问量呈上升趋势](./charts/traffic-stats.png)
![用户登录界面，包含用户名和密码输入框](./screenshots/login-page.png)

避免的 alt 文本：

![图片](image.jpg)  // 太简单，没有描述性
![](image.jpg)      // 完全没有 alt 文本
![点击这里](image.jpg)  // 不描述图片内容

alt 文本最佳實踐：

簡潔但有描述性
描述圖片的主要內容和用途
避免使用"圖片"、"照片"等冗餘詞彙
對於裝飾性圖片，可以使用空的 alt 文本
考慮上下文，提供有意義的資訊

7.3.圖片尺寸控制（HTML方式）

標準 Markdown 不支援直接控制圖片尺寸，但可以使用 HTML 標籤。

使用 HTML img 標籤：

<img src="image.jpg" alt="描述文字" width="300" height="200">
<img src="image.jpg" alt="描述文字" width="50%">
<img src="image.jpg" alt="描述文字" style="width: 300px; height: auto;">

Markdown 還沒有辦法指定圖片的高度與寬度，如果你需要的話，你可以使用普通的標籤。

<img src="https://cdn.tungchiahui.cn/tungwebsite/assets/images/logo.png" width="50%">

響應式圖片：

<img src="image.jpg" alt="描述文字" style="max-width: 100%; height: auto;">

圖片對齊：

<!-- 居中对齐 -->
<div align="center">
  <img src="image.jpg" alt="居中图片" width="400">
</div>

<!-- 左对齐（默认） -->
<img src="image.jpg" alt="左对齐图片" style="float: left; margin-right: 20px;">

<!-- 右对齐 -->
<img src="image.jpg" alt="右对齐图片" style="float: right; margin-left: 20px;">

7.4.圖片居中和對齊(HTML方式)

方法一：HTML + CSS

<div style="text-align: center;">
  <img src="image.jpg" alt="居中图片" style="max-width: 100%;">
</div>

方法二：使用 HTML 對齊屬性

<p align="center">
  <img src="image.jpg" alt="居中图片" width="400">
</p>

方法三：建立圖片畫廊

<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
  <img src="image1.jpg" alt="图片1" style="width: 30%; margin: 10px;">
  <img src="image2.jpg" alt="图片2" style="width: 30%; margin: 10px;">
  <img src="image3.jpg" alt="图片3" style="width: 30%; margin: 10px;">
</div>

效能最佳化建議：

最佳化圖片大小和格式（WebP > PNG > JPEG）
使用適當的圖片尺寸，避免在網頁中縮放大圖
考慮使用圖片壓縮工具
為不同裝置準備不同尺寸的圖片

7.5.連結和圖片的高階用法

圖片連結組合 將圖片作為連結的可點選元素。

基本語法：

[![图片alt文本](图片URL)](链接URL)

實際示例：

[![GitHub项目截图](./images/project-screenshot.png)](https://github.com/username/project)
[![访问官网](https://cdn.tungchiahui.cn/tungwebsite/assets/images/logo.png)](https://tungchiahui.cn "点击访问官网")

常見應用場景：

<!-- 项目徽章 -->
[![Build Status](https://travis-ci.org/user/repo.svg?branch=master)](https://travis-ci.org/user/repo)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

<!-- 应用商店下载 -->
[![App Store](./images/app-store-badge.png)](https://apps.apple.com/app/your-app)
[![Google Play](./images/google-play-badge.png)](https://play.google.com/store/apps/details?id=com.yourapp)

8.表格

表格和引用是 Markdown 中重要的內容組織工具。

表格能夠清晰地展示結構化資料，而引用則用於突出重要資訊或引用他人觀點。

Markdown 製作表格使用 | 來分隔不同的單元格，使用 - 來分隔表頭和其他行。

8.1.用法

語法格式如下：

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

以上程式碼顯示結果如下：

語法要點：

表頭和資料行之間必須有分隔線
分隔線至少需要三個連字元 ---
兩端的豎線 | 是可選的，但建議保留以提高可讀性
不需要嚴格對齊，但對齊後更美觀

對齊方式

我們可以設定表格的對齊方式：

---: 設定內容和標題欄居右對齊。
:--- 設定內容和標題欄居左對齊。
:---: 設定內容和標題欄居中對齊。

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

8.2.複雜表格的處理技巧

元格內容格式化

表格單元格內可以使用大部分 Markdown 語法：

| 功能 | 描述 | 状态 |
|------|------|:----:|
| **用户登录** | 支持邮箱和手机号登录 | &#x2705; |
| *密码重置* | 通过邮箱重置密码 | &#x26a0;&#xfe0f; |
| `API接口` | RESTful API 设计 | &#x2705; |
| [文档链接](https://example.com) | 查看详细文档 | &#x1f4d6; |

處理長文本

當單元格內容較長時，可以使用以下技巧：

換行處理：

| 项目 | 详细说明 |
|------|----------|
| 需求分析 | 1. 收集用户需求<br>2. 分析业务场景<br>3. 确定功能范围 |
| 技术选型 | 前端：React + TypeScript<br>后端：Node.js + Express<br>数据库：MongoDB |

縮寫和連結：

| 技术栈 | 说明 | 官网 |
|--------|------|------|
| React | 用户界面库 | [链接](https://reactjs.org) |
| Vue.js | 渐进式框架 | [链接](https://vuejs.org) |
| Angular | 完整的框架 | [链接](https://angular.io) |

表格中的特殊字元

某些字元在表格中有特殊含義，需要轉義：

| 字符 | 转义方法 | 示例 |
|------|----------|------|
| 竖线 | `\|` | 显示 \| 符号 |
| 反斜杠 | `\\` | 显示 \\ 符号 |
| HTML | 直接使用 | <code>&lt;div&gt;</code> |

表格美化建議

使用 Emoji 和符號

| 状态 | 图标 | 说明 |
|:----:|:----:|------|
| 完成 | &#x2705; | 任务已完成 |
| 进行中 | &#x1f504; | 正在处理 |
| 待处理 | &#x23f3; | 等待开始 |
| 错误 | &#x274c; | 出现问题 |
| 警告 | &#x26a0;&#xfe0f; | 需要注意 |

9.分割線

分割線用於在視覺上分隔文件的不同部分，建立清晰的內容層次。

9.1.水平分割線的三種寫法

Markdown 支援三種方式建立水平分割線：

使用至少三個連字元(常用)：

---

使用至少三個星號：

***

使用至少三個下劃線：

___

可以使用更多的符號，但三個是最小要求：空格的影響：符號之間可以有空格。

- - - - -