web常用命名规范

目录

• 网页结构常用命名
• 常用 CSS/ID 命名参考
• 电子贸易相关命名
• 常用文件命名
• JS 函数注释规范
• 常用注释标签说明

---

网页结构常用命名

常用于网页主要结构部分的 CSS 类名：

英文名	中文含义	说明
wrap	外套	用于最外层
header	头部	用于头部
main	主要内容	主体内容（中部）
main-left	左侧	左侧布局
main-right	右侧	右侧布局
nav	导航条	菜单导航条
content	内容	网页中部主体
footer	底部	用于底部

---

常用 CSS/ID 命名参考

常见的页面结构、功能区块命名：

名称	中文含义
#wrapper	页面外围整体布局宽度
#container / #content	容器，最外层
#layout	布局
#head / #header	页头部分
#foot / #footer	页脚部分
#nav	主导航
#subnav	二级导航
#menu	菜单
#submenu	子菜单
#sideBar	侧栏
#sidebar_a / #sidebar_b	左/右边栏
#main	页面主体
#tag	标签
#msg / #message	提示信息
#tips	小技巧
#vote	投票
#friendlink	友情链接
#title	标题
#summary	摘要
#loginbar	登录条
#searchInput	搜索输入框
#hot	热门热点
#search	搜索
#search_output	搜索输出/结果
#searchBar	搜索条
#search_results	搜索结果
#copyright	版权信息
#branding	商标
#logo	网站 LOGO
#siteinfo	网站信息
#siteinfoLegal	法律声明
#siteinfoCredits	信誉
#joinus	加入我们
#partner	合作伙伴
#service	服务
#regsiter	注册
arr / arrow	箭头
#guild	指南
#sitemap	网站地图
#list	列表
#homepage	首页
#subpage	子页面
#tool / #toolbar	工具条
#drop	下拉
#dorpmenu	下拉菜单
#status	状态
#scroll	滚动
.tab	标签页
.left / .right / .center	居左/中/右
.news	新闻
.download	下载
.banner	广告条（顶部广告）

---

电子贸易相关命名

名称	中文含义
.products	产品
.products_prices	产品价格
.products_description	产品描述
.products_review	产品评论
.editor_review	编辑评论
.news_release	最新产品
.publisher	生产商
.screenshot	缩略图
.faqs	常见问题
.keyword	关键词
.blog	博客
.forum	论坛

---

常用文件命名

文件名	中文含义
master.css / style.css	主要样式
module.css	模块
base.css	基本共用
layout.css	布局/版面
themes.css	主题
columns.css	专栏
font.css	字体
forms.css	表单
mend.css	补丁
print.css	打印

---

JS 函数注释规范

建议使用 JSDoc 风格注释，示例：

/**
 * 测试
 * @param {number} num - 输入数字
 * @return {void}
 */
function test(num) {
  console.log(num);
}

---

常用注释标签说明

标签	说明
@api	提供给第三方的接口
@author	作者
@param	参数
@return	返回值
@todo	待办
@version	版本号
@inheritdoc	文档继承
@property	类属性
@property-read	只读属性
@property-write	只写属性
@const	常量
@deprecated	过期方法
@example	示例
@final	终态类，禁止派生
@global	全局变量
@static	静态
@ignore	忽略
@internal	内部使用
@license	协议
@link	链接/引用文档
@see	访问内部方法或类
@method	方法
@package	命名空间
@since	版本变动
@throws	抛出异常
@uses	使用
@var	变量
@copyright	版权声明

---