Html+Div+Css页面及命名规范.docx
- 文档编号：23538664
- 上传时间：2023-05-18
- 格式：DOCX
- 页数：13
- 大小：21.39KB
Html+Div+Css页面及命名规范.docx
《Html+Div+Css页面及命名规范.docx》由会员分享，可在线阅读，更多相关《Html+Div+Css页面及命名规范.docx（13页珍藏版）》请在冰豆网上搜索。
Html+Div+Css页面及命名规范
HTML页面设计规范
一、HTML规范
1．页面制作完成后需检查是否与设计效果一致。
2．页面中严禁出现其他客户的名称、标志及联系方式等信息。
3．页面制作必须要保证在多分辨率下的显示效果。
4．页面制作必须要保证在多浏览器下的现实效果。
至少保证在IE6.0，IE7.0，IE8.0，IE9.0，FireFox等常用浏览器下的显示效果。
5.图片文件、flash文件统一放置在images文件夹内，css样式表文件放在css文件夹内，js放在js文件夹内。
普通网站原则上不再分设子文件夹；对于复杂的门户型网站，根据需要将图片放在images文件夹的不同子文件夹内。
所有测试图片均放于uploads文件夹。
二、图片文件
1.图片文件的命名应清晰、明了，有明确含义。
2.严禁使用中文字符、纯数字序列、汉语拼音、单个字母、含义不明确的缩写等命名图片。
3.在保证图片质量的前提下，尽量减小图片的文件大小,以减少加载时间。
依据实际情况灵活使用jpg，gif，png格式，透明图片可以使用png
4.尽量避免使用半透明的png图片。
5.图片命名要有规律，避免后来增补的图片直接更新会覆盖原有图片的情况。
6.图片命名的一般原则，【位置单词_功能单词_文件单词_数字.扩展名】
常用单词有head、top、left、right、bottom、footer、banner、nav、title、menu、logo、pic、bg、btn、ico等等；
对网页中后台可维护的图片，可以简单取用p1、p2、p3等名称。
对不同文件中相同位置、相同功能的图片，名称应保持一致性，如：
left_menu_about.jpg、left_menu_news.jpg、left_menu_contact.jpg；banner_about.jpg、banner_news.jpg；
三、页面文件
1.页面文件统一使用UTF-8编码保存，请在软件工具中做好设置。
2.页面文件依据其内容和功能，尽量使用标准文件名。
没有标准文件名的，可取用含义贴切的英文单词，或取用页面效果的文件名。
严禁使用中文或拼音命名文件。
注意除news外，其他英文单词结尾一般不加s，如使用product.html，不使用products.html。
3.页面文件使用html为后缀名。
4.首页：
index.html
5.关于我们、公司介绍：
about.html
6.新闻列表：
news.html
7.新闻内容：
news_content.html
8.产品列表：
product.html
9.产品内容：
product_content.html
10.联系部门：
contact.html
11.留言本：
message.html
12.招聘职位：
hr.html
13.搜索结果：
search.html
14.客户案例：
case.html
15.所有网站中需要用到的功能性页面都必须制作，不得缺漏。
如搜索结果页、网站地图页等。
四、样式表文件
1.样式表文件统一使用UTF-8编码保存。
2.样式表文件第一行声明如下：
@charset"utf-8";
3.样式表文件统一命名为style.css，并存放于css文件夹内。
对大型网站和有换肤功能的网站，要根据实际情况灵活处理。
4.网站使用比较复杂的特效时所用的css，可以独立成一个css文件。
五、代码规范--样式表
1.样式表中中文字体名,请务必使用英文表示法，或者转码成unicode码,以避免编码错误时乱码，如宋体可以使用SimSun。
2.如果出现页面调整，需将新增的样式放在样式表末位，并做注释（标明修改的日期），防止程序员改过样式。
注意和程序员积极沟通，保持双方样式表文件内容的一致性。
3.样式表中禁止统一设置table{margin-left:
auto;margin-right:
auto;}，这将导致后台设置的图片居左、居右没有效果。
可在需要的样式中单独设置。
4.导航、页码等链接的当前状态统一使用class="current"，不得命名为position等其他名字。
5.样式禁止使用id选择符，可能会和js程序冲突，也不方便复制使用。
6.样式表注释；样式表应适当加注释，不同模块之间要适当换行，方便日后修改。
7.对于样式的书写，横排竖排均可，但建议使用横排。
8.书写代码前,考虑并提高样式重复使用率。
六、HTML代码
1.文档类型声明及编码:
统一为html5声明类型
DOCTYPEhtml>;编码统一为
2.非特殊情况下样式文件、JavaScript文件必须外链至
之间，为了兼容低版本ie浏览器的JavaScript文件可以页面底部。3.语义化html,如标题根据重要性用h*（同一页面只能有一个h1）,段落标记用p,列表用ul,内联元素中不可嵌套块级元素。
4.尽可能减少div嵌套,如
欢迎访问XXX,您的用户名是用户名
5.重要图片必须加上alt属性，给重要的元素和截断的元素加上title。
6.特殊符号使用:
尽可能使用代码替代:
比如<（<）>（>）空格（ ）等等;
7.能做成文字的尽量做成文字，不要做成图片。
8.避免在Dreamware中自动生成垃圾代码。
9.应使用尽可能少的代码达成页面效果，不得有无用的和无效的代码。
避免在代码中产生多余的空行和空格。
10.除标准代码外，其他html标签及其属性值一律使用小写字母。
11.html标签应拼写正确，属性值应使用双引号括起来，不得出现错误。
12.html标签应完整成对，正确闭合。
独立标签使用/闭合时，/前要留一个空格。
13.复制其他网站的代码时需仔细检查，不得出现多余代码、多余样式、标签未闭合、标签错误、多余的JS函数调用等情况。
14.代码缩进，缩进大小为1个制表位，制表位大小为4个空格。
提前在Dreamweaver中的：
“首选参数”→“代码格式”中做好设置，制作完页面后，在代码视图下格式化代码。
七、页面布局
1.页面各个模块之间可以根据需要进行class命名，具体命名法则见附录一。
2.尽量减少Table的嵌套层数，一般不要超过3层。
头部和底部内容应和中间主体部分代码分开，方便做成包含。
尤其要尽量避免将整个页面放在一个Table中的情况，特别是首页，应尽量按其效果切成多行，而不是多列。
3.避免对同一级别的对象分别使用百分比和象素值控制宽度。
4.严禁使用rowspan合并表格。
（仅限用table做页面布局）
5.排版应使用 留空，严禁使用中文全角空格。
较多的空格，或内容与边界之间无意义的空格，应使用样式定义。
6.间距尽量使用margin和padding控制，不要使用table占位。
亦不得使用如 10px;”>
《酒店人力资源管理》教案.docx
