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 文件目录：模版文件 XHTML代码规范 PC端页面结构示例 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 多媒体终端页面结构示例 !doctype html html class=no-js head meta charset=utf-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=description content= meta name=keywords content= meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no titleHello hao hao zhangxiu/title !-- Set render engine for 360 browser -- meta name=renderer content=webkit !-- No Baidu Siteapp-- meta http-equiv=Cache-Control content=no-siteapp/ link rel=icon type=image/png href=assets/i/favicon.png !-- Add to homescreen for Chrome on Android -- meta name=mobile-web-app-capable content=yes link rel=icon sizes=192x192 href=assets/i/app-icon72x72@2x.png !-- Add to homescreen for Safari on iOS -- meta name=apple-mo