前端代码的结构组织和文件的命名

前端代码的结构组织

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
www
 │ 
 |   index.html                       | 文件  | 项目入口
 |                                    |
 +---css                              | 目录  | 放置 CSS 样式的代码
 |   |   custom.css                   | 文件  | 业务相关样式文件
 |   |   rest.css                     | 文件  | 统一元素默认样式的样式文件
 |   |                                |
 |   +---images                       | 目录  | 放置用于样式中的背景图
 |   \---lib                          | 目录  | 放置框架 CSS 文件
 +---js                               | 目录  | 放置 JavaScript 代码
 |   |   custom.js                    | 文件  | 业务相关 js 代码
 |   |                                |
 |   \---lib                          | 目录  | 放置框架 JavaScript 文件
 \---resorce                          | 目录  | 放置页面图片文件以及其他类型资源文件

前端代码文件的命名

  • 代码文件命名的原则主要是：名称需要表明文件对应的模块内容、对应的版本号和文件的格式等；
  • 如jQuery的文件命名为jquery-1.8.2.min.js,其中，jquery 表明文件的内容，1.8.2 表明文件的版本号, min表明此文件为文件的压缩格式版本；
  • 如果文件为子模块文件，则在文件名中用点号或短横线来表明父子关系，如Bootstrap框架中响应式设计模块对应的CSS文件的命名为: bootstrap-responsive.css。

CSS 部分

CSS padding 属性多值简写

MDN web Docs 参考

1. padding: 10px;                         上 右 下 左 值为： 10px
2. padding: 5px 10px;                     上下为 5px 左右10px
3. padding: 5px 10px 15px;                上5px 左右10px 下15px
4. padding: 5px 10px 15px 20px;           上5px 右10px 下15px 左20px (从上开始顺时针方向)

HTML5 中自动闭合标签

所谓自动闭合标签就是不用显示输入闭合的标签。比如：<img> HTML5 中有以下闭合标签：

标签 说明
<meta> 定义网页的信息（供搜索引擎查看）
<br> 换行标签
<img> 图片标签
<input> 表单标签
<link> 引入“外部CSS文件”
<hr> 水平线标签
<video> 视频标签
<audio> 音频标签