# 1.布局相關
| 語義 | 命名 | 簡寫
| --- | --- | ---
| 盒容器 |wrap |wrap
| 盒子 |box |box
| 容器 |container |container
| 主欄 |main |main
| 側欄 |sidebar / aside |sidebar / aside
| 文檔 |doc |doc
| 頭部 |head |hd
| 主體 |body |bd
| 底部 |foot |ft
# 2.模塊相關
| 語義 | 命名 |簡寫
| --- | --- |---
| 導航 | navigation | nav
| 面包屑 | crumb | crumb
| 菜單 | menu | menu
| 選項卡 | tab | tab
| 標題 | title | title
| 內容 | content | content
| 列表 | list | list
| 表格 | table | table
| 排行榜 | rank | rank
| 登陸 | login | login
| 表單 | form | form
| 品牌標識 | logo | logo
| 廣告 | advertise | ad
| 搜索 | search | search
| 切換 | slide | slide
| 提示 | tips | tips
| 版權 | copyright | copyright
| 按鈕 | button | btn
| 輸入 | input | ipt
| 結果 | result | result
| 下載 | download | dowload
| 新聞 | news | news
| 注冊 | register | reg
| 熱點 | hot |hot
| 展|開 | collapse | collapse
| 警告 | alert | alert
| 提示 | tooltip | tooltip
| 下拉 | dropdown | dropdown
# 3.狀態相關
|語義 | 命名 |簡寫
| --- | --- |---
| 選中 | selected | selected
| 當前 | current | current
| 激活 | active | active
| 顯示 | show | show
| 隱藏 | hidden | hide
| 打開 | open | open
| 關閉 | close | close
| 出錯 | error | err
| 禁用 | disabled | disabled
| 擴展 | extend | extend
# 4.命名規則
## 4.1駝峰命名
```
<p class="navWrap"></p>
```
## 4.2 劃線命名
```
<p class="nav-wrap"></p>
```
或
```
<p class="nav_wrap"></p>
```
