# 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>
~~~
- 第一章 git
- 1-1 git基本命令
- 1-2 ssh的配置
- 1-3 版本回退
- 第二章 markdown的基本語法
- 第三章 HTML-CSS
- 1-1 HTML基本概念
- 1-2 CSS常見樣式
- 第四章
- 1-1 HTML-02am
- 1-2 HTML-02pm
- 命名規范
- 待整理小要點
- 第五章
- 盒子模型(詳細)
- HTML-03
- HTML-定位
- 第六章 JS,DOM,jQuery
- 初識JS
- github-netlify-阿里云配置
- jQuery實例
- 初識Vue
- TOP250電影demo
- HTML-04
- HTML-05
- DOM
- 第七章
- node.js
- css(day07)
- css(day06)
- bootstrap
- vue/cli
- 小程序
- 入門第一天
- java