[资料]HTML命名规则
- 格式：doc
- 大小：30.00 KB
- 文档页数：2
HTML命名规则
(一)注释的写法:
/*Footer*/ 内容区 /*End Footer*/
(二)class的命名:
内容：content/container 导航：Nav 侧栏：sideBar 栏目：column 标志：logo
页面主体：main 广告：banner 热点：hot 新闻：news 下载：download
子导航：subNav 菜单：menu 搜索：search 页脚：footer 滚动：scroll
版权：copyright 友情链接：friendLink 子菜单：submenu 内容：content
标签页：tab 文章列表：list 注册：regsiter 提示信息：msg 小技巧：tips
加入：joinus 栏目标题：title 指南：guild 服务：service 状态：status
投票：vote 页脚：footer 合作伙伴：partner 登录条：loginBar
页面外围控制整体布局宽度：wrapper 左右中：left right center
(三)id的命名:
(1)页面结构
容器：container 页头：header 内容：content/container 页面主体：main 页尾：footer
导航：nav 侧栏：sidebar 栏目：column 左右中：left right center
页面外围控制整体布局宽度：wrapper
(2)导航
导航：nav
主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar
左导航：leftsidebar 右导航：rightsidebar
菜单：menu 子菜单：submenu 标题:title 摘要:summary
(3)功能
标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter
搜索：search 功能区：shop 标题：title 加入：joinus 状态：status
按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg
当前的:current 小技巧：tips 图标:icon 注释：note 指南：guild
服务：service 热点：hot 新闻：news 下载：download 投票：vote
合作伙伴：partner 友情链接：link 版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如 .red{color:red;};.ff8600{color:#ff8600;};
(2)字体大小,直接使用"font+字体大小"作为名称,如 .font12px{font-size:12px;};.font9pt{font-size:9pt;};
(3)对齐样式,使用对齐目标的英文名称,如 .left{float:left;};.bottom{float:bottom;};
(4)标题栏样式,使用"类别+功能"的方式命名,如 .barnews{};.barproduct{};
(五)模块或文档命名规则
规则：[页面-]模块-具体内容，中间用短横线区分
如1： college.css(未缩写)命名规则：
college-lt(专家答疑左侧) college-md(专家答疑中间) college-rt(专家答疑右侧)
如2：info.css（缩写） 命名规则：info-left、info-left-list1、info-title
如3：info-left-list1（资讯页面的左侧的第一个列表）
(六)色彩、字体、字号等命名规则
red、bull……用颜色名称直接定义
cn、en 一般就区别中英文字体 （一般也不怎么用到，按规定好的字体就可以了）
f14px、f16px、f18px 字体为14px、16px、18px （一般默认字体12px可在规定所有样式里面定义）
fB：字体加粗 fL：斜体
注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;（我倒是经常加）
4.尽量不缩写，除非一看就明白的单词.（偷懒经常缩写）
主要的：master.css 模块：module.css 基本共用：base.css 主题：themes.css 专栏：columns.css
打印：print.css 文字：font.css 表单：forms.css 补丁：mend.css 布局，版面：layout.css
DIV+CSS是网站标准中常用术语之一，DIV+CSS是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了W3C内容与表现相分离。
DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。下面为你介绍几点注意事项，希望对你有帮助。
1、不要使用过小的图片做背景平铺。
这就是为何很多人都不用1px的原因，这才知晓。宽高1px的图片平铺出一个宽高200px的区域，需要200*200=40,000次，占用资源。
2、无边框。
推荐的写法是border:none;，哈哈，我一直在用这个。border:0;只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
3、慎用*通配符。
所谓通配符，就是将CSS中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
4、CSS的十六进制颜色代码缩写。
习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
5、样式放头上，脚本放脚下，不内嵌，只外链。
6、坚决不用CSS表达式。
7、使用引用样式表，而不是通过@import导入。
8、一般来说，PNG比GIF要小，小得多。再者，GIF中有多少颜色是被浪费的，很值得优化。
9、千万不要在HTML中缩放图片，一者不好看，二者占资源。
10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
11、block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
12、段落之间，至少要有一倍行距。
13、强行指定某些元素的line-height，正文1.6倍于文字大小，标题1.3倍。
14、中文标点用全角。英文夹杂在中文中，左右空格，半角。
15、中文字体的粗体和斜体，远离较好，利民利己。
![建计[2002]71号《铁路工程命名规则》](https://imgs-1438308264.cos.ap-hongkong.myqcloud.com/08fa4bd0b9f3f90f77c61b05.webp)
