# 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>
~~~
