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