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

前端代码的结构组织

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> 音频标签