Html编写基本规范
1文件相关规范：
1、 文件名必须由小写字母、数字、下划线-组成。
2、文件编码默认使用UTF-8。
3、CSS文件引入通过外联方式引入。
3.1 外联方式：<link rel=”stylesheet” href=”” />（类型声明type=”text/css”可以忽略）。
4、原则上，不允许在html上直接写样式。
5、link都应该放入head中。
2区块命名规范：
大体的来说，一个网站主要区块命名规范分为：
1：头部header
2：尾部footer
3：页面主体 main
4：导航nav
5：子导航subnav
6：广告banner
7：菜单menu
8：子菜单submenu
9：搜索search
10：内容content
11：滚动 scroll
12：登陆条 loginbar
13：标志logo
15：侧栏 sidebar
16：标签页tab
17：列表list
18：分页pagelist
19：提示信息：msg
20：栏目标题title
21：指南guild
22：服务service
23：热点hot
24：新闻news
25：下载download
26：注册register
css文件怎么写28：状态status
29：上一页prepage
30：下一页nextpage
31：版权copyright
32：友情链接friendlink
33：外套wrap
34：左导航：leftsidebar
35：右导航：rightsidebar
36：图标icon
37：文本txt
大体情况是这样，其他细节方面视情况而定，务必用英文组合简单命名，不能用数字，及中文字母命名，建议命名简短而有意义。
3注释规范
1、 CSS文件顶部多行注释
/*
*@description：中文说明
*@author:jiangliqiong
*@update:jiangliqiong(2012-11-11)
*/
2、CSS文件内部单行注释
/*注释是哪个模块的样式*/
3、HTML内部注释结构
<!—头部开始-->
<div class=”header”></div>
<!—头部结束---> 
4排版规范
1、 规则写成单行，整个文件内的规则排版必须统一。
1.1多个selectod公用一个样式集，则多个selector必须写成单行形式。
1.2 每一个属性值后必须添加分号; 后面不要空格。
1.3一个样式值写完以后换行开始新的样式。
1.4｛｝大括号开始前留空格，结束后不要空格。
5规则书写规范
除16进制颜和字体设置外，CSS文件中的所有的代码都应该小写。
1、规则命名中，一律采用小写加下划线的方式，不允许使用大写字母或-。
2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。
3、命名注意缩写，但是不能盲目缩写，要能代表意思，又可以让开发人员认识。
4、不允许通过1、2、3等序号进行命名 。
5、避免class与id重名。
6、id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
7、class用于标识某一个类型的对象，命名必须言简意赅。
8、尽可能提高代码模块的复
用，样式尽量用组合的方式。
9、规则名称中不应该包含颜（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。例如：.red { color: red }（错误）
.important-news { color : red }（正确），属性值里面颜值请用16进制表示，不能用颜和RGB来表示。
6属性编写顺序
1、显示属性 display/list-style-type/position/float/clear
2、自身属性（盒模型） width/height/margin/padding/border
3、背景 background 
4、行高 line-height 
5、文本属性 color/font/text-decoration/text-align/text-indent/vertical-align
/white-space/content
6、其他 cursor/zoom/z-index
7、样式连接顺序 a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
7图片的命名规则
按钮：*_btn[*代表按钮是做什么的，如登陆:logo_btn ,register_btn。
标题：*_title 。
导航：*_navbg。
背景图片：*_bg  按钮背景：btn_bg。
8样式文件命名规则
整个网站给一个主要的样式文件，命名main.css， 里面的样式是整个网站公共部分。
然后其他的样式要是东西不多，可以整理成一个文件。但是要在样式开始之前给出注释，
例如  /***分页开始***/。
9切片背景图片保存规则
背景图片的文件类型，请按照以下原则来保存：                                               
2、 如果背景图片有动画，则保存为GIF格式。
3、 如果没有动画，也没有半透明效果，则保存成png8。
4、 背景图片有半透明，则保存为png-24。
10性能优化
1、合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
2、选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
3、禁止在css中使用*选择符。
4、除非必须，否则，一般有class或id的，不需要再写上元素对应的tag，例如div#main{width:100px;height:100px;}可直接写成#main｛width:100px;height:100px;｝
5、0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px 。
6、如果是16进制表示颜，则颜取值应该大写。
7、如果可以，颜尽量用三位字符表示，例如#AABBCC写成#ABC。
8、如果没有边框时，不要写成border:0，应该写成border:none。
9、建议把用CSS背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。
10、给图片加上alt标签，利于搜索引擎的查询。
11、给<a></a>；标签加上title属性。
12、避免过小的背景图片平铺。
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definition
s */ table.MsoNormalTable {mso-style-name：普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0
; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.5pt; mso-bidi-font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-font-kerning:1.0pt;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。