web前端开发规范-好好装修概要.doc

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 head 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 title页面标题/title link href=style.css rel=stylesheet script src=jquery.min.js/script /head body /body /html 如果使用img或 br、hr、input这样的单体标签，那么必须使用空格加正斜线作为结束，例如： 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要求有严谨的结构，因此所有的标记都必须按合理顺序嵌套。 合理的嵌套格式：divulli/li/ul/div 不合理嵌套格式：divpdiv/p h1到h5的定义，应遵循从大到小