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

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

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的定义,应遵循从大到小

文档评论(0)

1亿VIP精品文档

相关文档