第 3 節

教學

0瀏覽次數0訪問次數--跳出率--平均停留

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

標題

用法

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

重要注意事項:

標題寫法

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

# 正确写法
#错误写法

標題的嵌套結構

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

推薦的層次結構:

# 主题:人工智能概述

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

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

避免的錯誤結構:

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

標題編號的最佳實踐

自動編號 vs 手動編號:

許多 Markdown 處理器和編輯器支持自動生成標題編號,因此在源碼中通常不需要手動添加編號:

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

標題錨點:

大多數 Markdown 處理器會自動為標題創建錨點(anchor),便於頁面內跳轉:

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

標題長度建議:

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

文本格式

換行用法

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

字體用法

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

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

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

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

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

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

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

***粗斜体文本***

列表

無序列表

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

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

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


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

選擇建議:

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

有序列表

用法

有序列表用於展示有順序要求的步驟或項目。 有序列表使用數字並加上 .來表示,如:

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

注意事項

數字可以不連續:

Markdown 會自動修正數字順序:

1. 第一项
3. 第二项(实际显示为2)
7. 第三项(实际显示为3)

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

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

列表嵌套

嵌套規則:

  • 子列表需要縮進 2-4 個空格(推薦 4 個,即 1 個TAB
  • 保持一致的縮進長度
  • 可以無限層嵌套,但實際使用中建議不超過 3 層

列表嵌套技巧

列表可以嵌套使用,創建多層次的結構:

無序列表嵌套:

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

有序列表嵌套:

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

混合嵌套:

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

列表混合嵌套只需在子列表中的選項前面添加兩個或**四個空格(一個tab)**即可

任務列表(複選框列表)

任務列表是 GitHub 風格 Markdown 的擴展功能,現在被廣泛支持:

基本語法:

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

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

實際應用示例:

## 项目待办清单

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

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

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

使用技巧:

  • 方括號內的空格和 x 很重要:x
  • 可以與嵌套列表結合使用
  • 在項目管理、學習計劃、生活清單中特別有用
  • 某些編輯器支持點擊複選框來切換狀態

高級列表技巧

列表項中包含多段內容:

1. 第一项

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

2. 第二项

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

列表項中的換行:

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

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

引用塊

引用塊用於突出顯示重要信息、引用他人觀點或創建視覺層次。

單級引用的使用

基本語法:

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

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

多行引用:

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

簡化寫法(不推薦):

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

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

多級嵌套引用

另外區塊是可以嵌套的,一個 > 符號是最外層,兩個 > 符號是第一層嵌套,以此類推:

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

實際應用示例:

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

引用塊內的其他元素

區塊中使用列表

區塊中使用列表實例如下:

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

列表中使用區塊

如果要在列表項目內放進區塊,那麼就需要在 > 前添加四個空格的縮進。

列表中使用區塊實例如下:

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

其他元素

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

包含標題:

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

包含代碼:

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

包含鏈接和圖片:

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

引用的最佳實踐

名言警句引用

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

重要信息提示

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


> ⚠️ **警告**
> 
> 此操作不可逆转,请确保已备份重要数据。


> ❌ **错误**
> 
> 连接数据库失败,请检查网络连接或联系系统管理员。


> ℹ️ **提示**
> 
> 首次使用需要进行账户验证,验证邮件已发送到您的邮箱。

文檔結構中的引用

章節摘要:

# 第一章:项目概述

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

版本更新説明:

## v2.1.0 更新内容

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

代碼

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

行內代碼

如果是段落上的一個函數或片段的代碼可以用反引號把它包起來(`),例如:

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

常見用法示例:

  • 函數名:使用 console.log() 輸出信息
  • 變量名:將值賦給 userName 變量
  • 命令行:運行 npm install 安裝依賴
  • 鍵盤按鍵:按 Ctrl+C 複製內容
  • 文件名:編輯 index.html 文件

特殊字符轉義

當需要在行內代碼中顯示反引號或其他特殊字符時,需要進行轉義處理。

  1. 顯示反引號的方法:
    使用雙反引號包圍單反引號
    ``使用 `反引号` 包围代码``
    

  2. 其他特殊字符處理:
    • HTML 標籤:
      元素
    • 數學符號:計算 x + y = z
    • 特殊符號:使用   表示空格

代碼區塊

縮進式代碼塊(幾乎不用)

代碼區塊使用 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;
    }

三反引號代碼塊(常用)

你也可以用 ``` 包裹一段代碼,並指定一種語言(也可以不指定):

不指定語言

多行代碼內容 可以包含空行 保持原有縮進

注意事項:

  • 縮進式代碼塊前後需要空行分隔
  • 所有代碼行必須保持一致的縮進
  • 不支持語法高亮
  • 在列表中使用時需要8個空格縮進
語言標識和語法高亮

在三反引號後添加語言標識符可以啓用語法高亮功能。

例如C++:

#include <print>

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

常用編程語言

語言 / 類型推薦標識符常用標識符 / 別名示例
CcC```c
C++cppc++, cc, cxx```cpp
C#csharpcs, c#```csharp
Objective-Cobjective-cobjc```objective-c
Javajava```java
Kotlinkotlinkt```kotlin
Pythonpythonpy```python
JavaScriptjavascriptjs```javascript
TypeScripttypescriptts```typescript
JSXjsx```jsx
TSXtsx```tsx
Gogogolang```go
Rustrustrs```rust
Swiftswift```swift
Dartdart```dart
PHPphp```php
Rubyrubyrb```ruby
Lualua```lua
Perlperlpl```perl
Scalascala```scala
Groovygroovy```groovy
Haskellhaskellhs```haskell
Elixirelixirex```elixir
Erlangerlangerl```erlang
Juliajuliajl```julia
Rr```r
MATLABmatlab```matlab
Fortranfortranf90, f95```fortran
Assemblyasmassembly```asm
x86 Assemblyx86asmx86```x86asm
WebAssemblywasmwat```wasm
Soliditysoliditysol```solidity
Verilogverilogv```verilog
SystemVerilogsystemverilogsv```systemverilog
VHDLvhdl```vhdl

Web / 數據格式

語言 / 類型推薦標識符常用標識符 / 別名示例
HTMLhtml```html
CSScss```css
SCSSscss```scss
Sasssass```sass
Lessless```less
Vuevue```vue
Sveltesvelte```svelte
JSONjson```json
JSON5json5```json5
YAMLyamlyml```yaml
XMLxml```xml
TOMLtoml```toml
INIini```ini
CSVcsv```csv
GraphQLgraphqlgql```graphql
Protocol Buffersprotobufproto```protobuf
Markdownmarkdownmd```markdown
reStructuredTextrst```rst
LaTeXlatextex```latex
SVGsvgxml```svg

Shell / 命令行

語言 / 類型推薦標識符常用標識符 / 別名示例
Bashbashsh, shell```bash
POSIX Shellshshell```sh
Zshzsh```zsh
Fishfish```fish
PowerShellpowershellps1```powershell
Windows Batchbatchbat, cmd```batch
Console / 終端會話consoleshell-session```console
純文本textplaintext, txt```text

構建 / DevOps / 配置

語言 / 類型推薦標識符常用標識符 / 別名示例
CMakecmake```cmake
Makefilemakefilemake```makefile
Dockerfiledockerfiledocker```dockerfile
Nginxnginx```nginx
Apacheapacheapacheconf```apache
Git Configgitconfig```gitconfig
Git Ignoregitignore```gitignore
Diffdiffpatch```diff
Terraformterraformtf, hcl```terraform
HCLhcl```hcl
Ansibleyamlyml, ansible```yaml
GitHub Actionsyamlyml```yaml
Kubernetesyamlyml```yaml
ROS 2 參數yamlyml```yaml
ROS Launch XMLxml```xml
ROS Launch Pythonpythonpy```python

數據庫 / 查詢語言

語言 / 類型推薦標識符常用標識符 / 別名示例
SQLsql```sql
MySQLsqlmysql```sql
PostgreSQLsqlpostgresql, pgsql```sql
SQLitesqlsqlite```sql
PL/SQLplsql```plsql
T-SQLtsql```tsql
Cyphercypher```cypher
MongoDB Shelljavascriptjs```javascript

機器人 / 嵌入式常用

語言 / 類型推薦標識符常用標識符 / 別名示例
STM32 Cc```c
STM32 C++cppc++, cxx```cpp
ROS 2 C++cppc++, cxx```cpp
ROS 2 Pythonpythonpy```python
CMakeLists.txtcmake```cmake
package.xmlxml```xml
ROS 2 參數文件yamlyml```yaml
URDFxml```xml
Xacroxmlxacro```xml
SDFxmlsdf```xml
Gazebo Worldxml```xml
Linux 命令bashsh, shell```bash
終端命令 + 輸出consoleshell-session```console
Dockerfiledockerfiledocker```dockerfile
Docker Composeyamlyml```yaml
JSONjson```json
TOMLtoml```toml
INI / Confini```ini
Makefilemakefilemake```makefile
Git Diffdiffpatch```diff
日誌 / 普通輸出textplaintext, txt```text
代碼塊的高級特性

行號顯示

某些 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; 模板字符串
}

鏈接

鏈接是使 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)

頁面頂部返回鏈接:

[回到顶部](#)

圖片

用法

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

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 的穩定性和可訪問性
  • 注意圖片的版權問題
  • 考慮加載速度和網絡環境
  • 建議本地備份重要圖片

圖片 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 文本
  • 考慮上下文,提供有意義的信息

圖片尺寸控制(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;">

圖片居中和對齊(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)
  • 使用適當的圖片尺寸,避免在網頁中縮放大圖
  • 考慮使用圖片壓縮工具
  • 為不同設備準備不同尺寸的圖片

鏈接和圖片的高級用法

圖片鏈接組合 將圖片作為鏈接的可點擊元素。

基本語法:

[![图片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)

表格

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

表格能夠清晰地展示結構化數據,而引用則用於突出重要信息或引用他人觀點。

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

用法

語法格式如下:

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

以上代碼顯示結果如下:

語法要點:

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

對齊方式

我們可以設置表格的對齊方式:

  • ---: 設置內容和標題欄居右對齊。
  • :--- 設置內容和標題欄居左對齊。
  • :---: 設置內容和標題欄居中對齊。
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

複雜表格的處理技巧

元格內容格式化

表格單元格內可以使用大部分 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; | 需要注意 |

分割線

分割線用於在視覺上分隔文檔的不同部分,創建清晰的內容層次。

水平分割線的三種寫法

Markdown 支持三種方式創建水平分割線:

  1. 使用至少三個連字符(常用)
---
  1. 使用至少三個星號:
***
  1. 使用至少三個下劃線:
___

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

- - - - -

音乐页