项目目录结构常见如下：
├── images/ # 图片目录
│ ├── demo/ # 测试用图片
│ ├── logo.png # 网站logo
│ └── .... # 其他图片
├── css/ # 样式目录
│ ├── u-reset.css # 重置样式
│ ├── common.css # 公共样式
│ ├── font.css # 字体样式
│ ├── index.css # 首页样式
│ ├── login.css # 登录样式
│ └── ....css # 其他样式
│
├── js/ # JavaScript目录
│ ├── jquery.js # 库文件
│ ├── index.js # 首页js文件
│ ├── login.js # 登录页js
│ ├── regsiter.js # 注册页js
│ ├── category.js # 栏目页js
│ └── .....js # 其他js
│
├── font/ # 字体目录
│ ├── font.ttf
│ ├── font.svg
│ └── font....
│
├── index.html # 首页
├── login.html # 登录页
├── regsiter.html # 注册页
├── category.html # 栏目页
├── list.html # 列表页
├── show.html # 详情页
└── README.md
文件名称统一用英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符
关于我们 \ aboutus
信息反馈 \ feedback
产 品 \ product
图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
比如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif
logo_police.gif logo_national.gif pic_people.jpg
head区是指 html 代码的<head>和</head>之间的内容。
必须加入的标签
<head> <meta charset=utf-8"> <!-- 网页显示字符集 --> <title> xxx </title> <!-- 网页标题 --> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /> <meta content="webkit" name="renderer" /> <meta name="keywords" content="xxx,xxx,xxx,..."> <!-- 关键字 --> <meta name="description" content="xxxxxxxxxxxxxxxxxxxxxxxxxx"> <!-- 网页描述 --> </head>
可以选择加入的标签
| 标签 | 描述 |
|---|---|
<meta http-equiv="window-target" content="_top"> |
用来防止别人在框架里调用你的页面。 |
<meta name="robots" content="none"> |
网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all。 |
<link rel="shortcut icon" href="favicon.ico"> |
站标、收藏夹图标 |
<script src="script/xxxxx.js"></script> |
所有的 javascript 的调用尽量采取外部调用 |
| 名称 | 版本 | 描述 | 下载 | 大小 | 压缩大小 |
|---|---|---|---|---|---|
| u-reset.css |  |
一个简洁的重置样式库 | 点击下载 |  |
属性列举: 布局定位属性主要包括: margin、padding、float（包括clear）、position（相应的top,right,bottom,left）、display、visibility、overflow 等；自身属性主要包括: width& height & background & border; 文本属性主要包括：font、color、text-align、text-decoration、text-indent等；其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom 等.所列出的这些属性只是最常用到的.
| 命名部分 | 命名 | 命名部分 | 命名 |
|---|---|---|---|
| 头 | header | 内容 | content/container |
| 尾 | footer | 导航 | nav |
| 侧栏 | sidebar | 栏目 | column |
| 页面外围控制整体布局宽度 | wrapper | 左右中 | left right center |
| 登陆条 | loginbar | 标志 | logo |
| 广告 | banner | 页面主体 | main |
| 热点 | hot | 新闻 | news |
| 下载 | download | 子导航 | subnav |
| 菜单 | menu | 子菜单 | submenu |
| 搜索 | search | 友情链接 | friendlink |
| 页脚 | footer | 版权 | copyright |
| 滚动 | scroll | 内容 | content |
| 标签页 | tab | 文章列表 | list |
| 提示信息 | msg | 小技巧 | tips |
| 栏目标题 | title | 加入 | joinus |
| 指南 | guild | 服务 | service |
| 注册 | regsiter | 状态 | status |
| 投票 | vote | 合作伙伴 | partner |
对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
中文字体/英文字体/数字 进行统一
body{ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; }
微软雅黑 字体苹方 字体<!--这儿是注释-->;/*这儿是注释*/;
index.html <!-- #轮播图模块开始 --> ... <!-- #轮播图模块结束 --> <!-- #最新推荐模块开始 --> ... <!-- #最新推荐模块结束 -->
index.css /* 开发者：张三 时间：2019-7-29 描述：网站首页样式 */ /* 轮播图模块开始 */ ... /* 轮播图模块结束 */ /* 最新推荐模块开始 */ ... /* 最新推荐块结束 */
原文：https://www.cnblogs.com/janewh/p/13896625.html