web前端开发规范-好好装修介绍.docVIP

Web前端开发规范 1.文件目录命名规范 2.XHTML文件命名规范 3.XHTML代码规范 4.图片制作规范 5.CSS编写规范 文件目录命名规范 文件目录命名原则 以最少的层级提供最清晰简便的访问结构，并能够使所有项目参与者清晰理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。 文件目录名称统一用小写的英文单词，长度不超过20个字符。如果需要加数字以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。 文件目录名称的命名要与所定义的内容语义接近或结构对应，字母要小写，需要两个以上单词表达时，单词之间用”_”连接，不要超过四个单词，如果单词过长，取其前三个字母。 根目录一般只存放index.htm或default.htm 可以根据需要更改扩展名 以及其他必须的系统文件；每个主要栏目开设一个相应的独立目录；以栏目名称英文单词或单词缩写命名；例如：根目录下的images目录用于存放各页面都要使用的所有图片（单独的图片多的要在images下建子目录并根据语义命名）；根目录的javascript目录存放所有JS脚本文件；所有CSS文件存放在根目录下css目录；等等。 目录结构命名规范 文件目录命名原则 清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也有着重要的影响。 以下为站点文件目录内容参考： include文件目录：存放公共结构 eg：头部 底部 static表现层和行为层（样式， 字体，图片，动画，视频 ，js等） templates 文件目录：文件 DOCTYPE文档声明标准代码 !DOCTYPE html html lang zh-CN meta charset utf-8 meta http-equiv X-UA-Compatible content IE edge, chrome 1 meta name viewport content width device-width, initial-scale 1.0 !— 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ — meta name “description” content “网页描述内容 meta name “keywords” content “关键字1,关键字2,关键字3, 关键字4, link rel icon href /favicon.ico mce_href /favicon.ico type image/x-icon 页面标题 link href style.css rel stylesheet script src jquery.min.js 如果使用img或 br、hr、input这样的单体标签，那么必须使用空格加正斜线作为结束，例如： 必须设置图片的alt属性 alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对使用不同页面的浏览器的用户来说非常有帮助，而且对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。另外，设置alt属性有利于提高网站的搜索频率。值得注意的是我们要添加有意义的alt属性而不是添加毫无意义的注释。 正确的写法： img src logo.gif alt / 错误的写法： img src logo.gif alt logo.gif / 所有的特殊符号编码化 ，不是标签的一部分，必须被编码为lt; ，不是标签的一部分，必须被编码为gt; ，不是实体的一部分的，必须被编码为amp; 空格，必须被编码为nbsp; 主要的区域要加上注释 例如网站的内容区需要加上如下注释： !--网页内容区部分-- 尽量减少注释的内容 不要在注释内容中使用“--” 。 “--” 只能使用在 XHTML 注释的开头和结束，不能出现在注释的内容中。下面的写法都是不允许的： !--Invalid--and so is the classic separator below -- ! 由于浏览器的兼容性对XHTML页面的解析不同，过多的注释会造成一些页面错乱的问题；因此尽可能的缩写或减少页面代码中的注释内容；例如，XHTML标准注释代码如下： !--网页导航部分-- 标签必须合理嵌套 因为XHTML要求有严谨的结构，因此所有的标记都必须按合理顺序嵌套。 合理的嵌套格式： 不合理嵌套格式： 到 的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 内联元素标签内不可以嵌套块元素标签，例如： 必须使用统一的后缀 为了统一管理，静态页面必须使用统一的页面后缀.html,例如