-
根据项目名称创建项目文件夹。如:ushop
-
html、css、img、js 文件均归档至项目名称目录中
-
HTML 文件、根据页面内容以英文命名,首页或只有一个页面通常命名为index.html
-
css 文件以英文命名
-
公用样式通常命名为reset.css(常用的浏览器样式)
-
public.css(多个页面时的公共模块的样式,或多次重复使用字体、字号、间距等样式)
-
首页通常命名为index.css, 其他页面依实际模块或功能需求命名
-
-
图片文件命名尽量与其模块样式名称保持关联,尽量使用小写命名
-
(如登录框的背景与图片:login_bg.jpg、login_user_ico.gif 等)
-
常用图片格式 gif 、png 、jpg
-
目录结构参考
---/html/ |---- /user/ 与用户相关的页面 |---- /user/login.html 登录页 ---/css/ |---- /reset.css 重置浏览器样式 |---- /page 其他页面的css |---- /page/pagename.css 单独某个页面的css |---- /common.css css通用样式库 ---/js/ |---- /lib 公用组件 |---- /lib/jquery.2.2.3.min.js 调用jq库文件 |---- /page 其他页面的js |---- /page/pagename.js 单独书写的js |---- /common.js 公用方法 ---/img/ |---- /page 其他页面对应的图片 |---- /page/wap 手机端图片夹 |---- /page/wap/wap_icon.png 手机端图标 |---- /logo.png 公用图片
2、HTML 书写规范
2.1 文档类型声明及编码
-
统一为 html5 声明类型
-
编码统一为 utf-8
2.2 书写规范
-
书写时根据页面结构实现层次分明的缩进
-
标签必合
-
属性值必须用双引号包括
-
通常小写字母
2.3 语义化 HTML
-
根据页面结构选择合适的标签
-
如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p,结构简章重复的部分用 ul、li标签
-
页面中重要的图片内容要添加 alt=“”替换文本,以便图片丢失时,用户可以根据替换文本了解页面内容
-
-
根据模块内容定义class和id名称
-
如包含logo和搜索框等在内的头部标签用.header,包含联系信息,版权等的模块用footer或copyright
-
2.4 合理嵌套HTML标签
-
合理嵌套HTML标签,
-
ul和li是固定嵌套,ul直接子元素必须是li;
-
dl和dt,dd是固定嵌套,dl的直接子元素必须是dl和dd;
-
p标签不允许嵌套p标签;a标签不允许嵌套
-
a标签和其他交互性元素比如button
-
-
尽可能的控制元素嵌套层级,不合理的嵌套会影响页面性能
2.5 保证结构与表现相分离
-
CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。
-
在页面中尽量避免使用行内样式即 style=“”或行间属性,尽量使用 class 或者 id
3、css 书写规范
3.1 编码