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>