---
url: /notes/前端/前端项目注意事项/index.md
---
## 体验盒子模型

### 盒子模型box-sizing

```css
格式：box-sizing: border-box|content-box;
```

### 清除元素默认的内外边距

```css
body,div,p,a {
    margin: 0;
    padding:0;
     box-sizing: border-box;
 }
```

## 定位

![image-20220420172656079](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201726131.png)

## 项目搭建

### 项目结构搭建

![image-20220420172827649](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201728690.png)

### 外部样式表创建

```css
引入外部样式表
<link rel="stylesheet" href="css/index.html">
```

### css初始化代码

```css
/* 清除元素的内外边距 */
body,div,a,p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 取消链接默认下划线 */
a {
    text-decoration: none;
}
body {
    background-color: #010001;
}
```

### 背景图片设置

![image-20220420173028179](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201730212.png)

### 定位盒子叠加层级z-index

![image-20220420173050593](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201730635.png)

### HTML 规范

**DOCTYPE 声明**

```html
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
 <!DOCTYPE html>
```

**HTML5标准模版**

```html
<!DOCTYPE html>
   <html lang="zh-CN">
   <head>
   <meta charset="UTF-8">
   <title>HTML5标准模版</title>
   </head>
   <body>
 ​
   </body>
 </html>
```

**页面语言lang**

推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

` <html lang="zh-CN">`

更多地区语言参考：

zh-SG 中文 (简体, 新加坡)  对应 cmn-Hans-SG 普通话 (简体, 新加坡)

zh-HK 中文 (繁体, 香港)   对应 cmn-Hant-HK 普通话 (繁体, 香港)

zh-MO 中文 (繁体, 澳门)   对应 cmn-Hant-MO 普通话 (繁体, 澳门)

zh-TW 中文 (繁体, 台湾)   对应 cmn-Hant-TW 普通话 (繁体, 台湾)

**charset 字符集合**

一般情况下统一使用 “UTF-8” 编码

```html
<meta charset="UTF-8">
```

由于历史原因，有些业务可能会使用 “GBK” 编码

```html
 <meta charset="GBK">
```

请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 [IETF对UTF-8的定义](http://www.ietf.org/rfc/rfc3629)，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。

**书写风格**

**HTML代码大小写**

```html
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
 <div class="demo"></div>
不推荐：
 <div class="DEMO"></div>
     
 <DIV CLASS="DEMO"></DIV>
```

**类型属性**

```html
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：
 <link rel="stylesheet" href="" >
 <script src=""></script>
不推荐：
 <link rel="stylesheet" type="text/css" href="" >
 <script type="text/javascript" src="" ></script>
```

**元素属性**

```html
• 元素属性值使用双引号语法
• 元素属性值可以写上的都写上
推荐：
 <input type="text">
 <input type="radio" name="name" checked="checked" >
不推荐：
 <input type=text>   
 <input type='text'>
 <input type="radio" name="name" checked >
```

**特殊字符引用**

```html
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
推荐：
 <a href="#">more&gt;&gt;</a>
不推荐：
 <a href="#">more>></a>
```

**代码缩进**

```html
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
 <div class="jdc">
     <a href="#"></a>
 </div>
```

**代码嵌套**

```html
元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：
 <div>
     <h1></h1>
     <p></p>
 </div>  
 <p><span></span><span></span></p>
不推荐：
 <div>
     <h1></h1><p></p>
 </div>  
 <p> 
     <span></span>
     <span></span>
 </p>
```

**段落元素与标题元素只能嵌套内联元素**

```html
推荐：
 <h1><span></span></h1>
 <p><span></span><span></span></p>
不推荐：
 <h1><div></div></h1>
 <p><div></div><div></div></p>
```

**图片规范**

内容图

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

* 优先考虑 **JPEG** 格式，条件允许的话优先考虑 WebP 格式
* 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
* **PC平台单张的图片的大小不应大于 200KB。**

**背景图**

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

* PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
* 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
* 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
* 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
* 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

### CSS规范

```html
代码格式化
样式书写一般有两种：一种是紧凑格式 (Compact)
 .jdc{ display: block;width: 50px;}
一种是展开格式（Expanded）
 .jdc {
     display: block;
     width: 50px;
 }

团队约定
统一使用展开格式书写样式

代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
 /* 推荐 */
 .jdc{
     display:block;
 }
     
 /* 不推荐 */
 .JDC{
     DISPLAY:BLOCK;
 }

选择器
• 尽量少用通用选择器 *
• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器
 /* 推荐 */
 .jdc {}
 .jdc li {}
 .jdc li p{}
 ​
 /* 不推荐 */
 *{}
 #jdc {}
 .jdc div{}

代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
 .jdc {
     width: 100%;
     height: 100%;
 }

分号
每个属性声明末尾都要加分号；
 .jdc {
     width: 100%;
     height: 100%;
 }

代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格
推荐：
 .jdc { 
     width: 100%; 
 }
不推荐：
 .jdc{ 
     width:100%;
 }
逗号分隔的取值，逗号之后一个空格
推荐：
 .jdc {
     box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
 }
不推荐：
 .jdc {
     box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
 }
为单个css选择器或新申明开启新行
推荐：
 .jdc, 
 .jdc_logo, 
 .jdc_hd {
     color: #ff0;
 }
 .nav{
     color: #fff;
 }
不推荐：
 .jdc,jdc_logo,.jdc_hd {
     color: #ff0;
 }.nav{
     color: #fff;
 }
颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0
推荐：
 .jdc {
     color: rgba(255,255,255,.5);
 }
不推荐：
 .jdc {
     color: rgba( 255, 255, 255, 0.5 );
 }

属性值十六进制数值能用简写的尽量用简写
推荐：
 .jdc {
     color: #fff;
 }
不推荐：
 .jdc {
     color: #ffffff;
 }
不要为 0 指明单位
推荐：
 .jdc {
     margin: 0 10px;
 }
不推荐：
 .jdc {
     margin: 0px 10px;
 }

属性值引号
css属性值需要用到引号时，统一使用单引号
 /* 推荐 */
 .jdc { 
     font-family: 'Hiragino Sans GB';
 }
 ​
 /* 不推荐 */
 .jdc { 
     font-family: "Hiragino Sans GB";
 }

属性书写顺序
建议遵循以下顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
 .jdc {
     display: block;
     position: relative;
     float: left;
     width: 100px;
     height: 100px;
     margin: 0 10px;
     padding: 20px 0;
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     color: #333;
     background: rgba(0,0,0,.5);
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     -ms-border-radius: 10px;
     border-radius: 10px;
 }
mozilla官方属性顺序推荐

命名规范
由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。

目录命名
• 项目文件夹：pinyougou
• 样式文件夹：css
• 脚本文件夹：js
• 样式类图片文件夹：img
• 产品类图片文件夹： upload
• 字体类文件夹： fonts

ClassName命名
ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
.nav_top

常用命名推荐
注意：ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此
 <div class="ad"></div>
这种广告的英文或拼音类名不应该出现
另外，敏感不和谐字眼也不应该出现，如：
 <div class="fuck"></div>
 <div class="jer"></div>
 <div class="sm"></div>
 <div class="gcd"></div> 
 <div class="ass"></div> 
 <div class="KMT"></div> 
 ...
```

| **ClassName**          | **含义**                                 |
| ---------------------- | ---------------------------------------- |
| about                  | 关于                                     |
| account                | 账户                                     |
| arrow                  | 箭头图标                                 |
| article                | 文章                                     |
| aside                  | 边栏                                     |
| audio                  | 音频                                     |
| avatar                 | 头像                                     |
| bg,background          | 背景                                     |
| bar                    | 栏（工具类）                             |
| branding               | 品牌化                                   |
| crumb,breadcrumbs      | 面包屑                                   |
| btn,button             | 按钮                                     |
| caption                | 标题，说明                               |
| category               | 分类                                     |
| chart                  | 图表                                     |
| clearfix               | 清除浮动                                 |
| close                  | 关闭                                     |
| col,column             | 列                                       |
| comment                | 评论                                     |
| community              | 社区                                     |
| container              | 容器                                     |
| content                | 内容                                     |
| copyright              | 版权                                     |
| current                | 当前态，选中态                           |
| default                | 默认                                     |
| description            | 描述                                     |
| details                | 细节                                     |
| disabled               | 不可用                                   |
| entry                  | 文章，博文                               |
| error                  | 错误                                     |
| even                   | 偶数，常用于多行列表或表格中             |
| fail                   | 失败（提示）                             |
| feature                | 专题                                     |
| fewer                  | 收起                                     |
| field                  | 用于表单的输入区域                       |
| figure                 | 图                                       |
| filter                 | 筛选                                     |
| first                  | 第一个，常用于列表中                     |
| footer                 | 页脚                                     |
| forum                  | 论坛                                     |
| gallery                | 画廊                                     |
| group                  | 模块，清除浮动                           |
| header                 | 页头                                     |
| help                   | 帮助                                     |
| hide                   | 隐藏                                     |
| hightlight             | 高亮                                     |
| home                   | 主页                                     |
| icon                   | 图标                                     |
| info,information       | 信息                                     |
| last                   | 最后一个，常用于列表中                   |
| links                  | 链接                                     |
| login                  | 登录                                     |
| logout                 | 退出                                     |
| logo                   | 标志                                     |
| main                   | 主体                                     |
| menu                   | 菜单                                     |
| meta                   | 作者、更新时间等信息栏，一般位于标题之下 |
| module                 | 模块                                     |
| more                   | 更多（展开）                             |
| msg,message            | 消息                                     |
| nav,navigation         | 导航                                     |
| next                   | 下一页                                   |
| nub                    | 小块                                     |
| odd                    | 奇数，常用于多行列表或表格中             |
| off                    | 鼠标离开                                 |
| on                     | 鼠标移过                                 |
| output                 | 输出                                     |
| pagination             | 分页                                     |
| pop,popup              | 弹窗                                     |
| preview                | 预览                                     |
| previous               | 上一页                                   |
| primary                | 主要                                     |
| progress               | 进度条                                   |
| promotion              | 促销                                     |
| rcommd,recommendations | 推荐                                     |
| reg,register           | 注册                                     |
| save                   | 保存                                     |
| search                 | 搜索                                     |
| secondary              | 次要                                     |
| section                | 区块                                     |
| selected               | 已选                                     |
| share                  | 分享                                     |
| show                   | 显示                                     |
| sidebar                | 边栏，侧栏                               |
| slide                  | 幻灯片，图片切换                         |
| sort                   | 排序                                     |
| sub                    | 次级的，子级的                           |
| submit                 | 提交                                     |
| subscribe              | 订阅                                     |
| subtitle               | 副标题                                   |
| success                | 成功（提示）                             |
| summary                | 摘要                                     |
| tab                    | 标签页                                   |
| table                  | 表格                                     |
| txt,text               | 文本                                     |
| thumbnail              | 缩略图                                   |
| time                   | 时间                                     |
| tips                   | 提示                                     |
| title                  | 标题                                     |
| video                  | 视频                                     |
| wrap                   | 容器，包，一般用于最外层                 |
| wrapper                | 容器，包，一般用于最外层                 |

### 网站ico图标

1. 使用ico图标

```html
	首先把favicon.ico 这个图标放到根目录下
	再html里面， head 之间 引入 代码
	<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
	 
	href为favicon.ico的存放地址
	<link rel="icon" href="resource/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="resource/favicon.ico" type="image/x-icon"/>
```

2. 制作ico图标

**方法步骤：**

首先把我们想要的切成图片。

要把图片转换为 ico 图标，我们借助于第三方转换网站：  http://www.bitbug.net/ 比特虫

后面的type="image/x-icon" 属性可以省略

### 网站优化三大标签

**网页title标题**

![image-20220420174906520](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201749575.png)

**建议：**

**首页标题**：网站名（产品名）- 网站的介绍

例如：

品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

**Description网站说明**

品优购网：

```html
<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,
销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.
便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
```

**注意点：**

1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击

2. 同样遵循简短原则，字符数含空格在内不要超过 **120** **个汉字**

3. 补充在 title 和 keywords 中未能充分表述的说明.

4. 用**英文逗号** 关键词1,关键词2

**Keywords** **关键字**

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许

品优购网：

```html
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"/>
```

小米网：

```html
<meta name="keywords" content="小米,小米6,红米Note4,小米MIX,小米商城" />
```

### 字体图标

**字体图标优点**

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..

但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...

本身体积更小，但携带的信息并没有削减。

几乎支持所有的浏览器

**移动端**设备必备良药...

**字体图标使用流程**

![image-20220420175157714](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201751757.png)

**设计字体图标**

![image-20220420175239353](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201752404.png)

**上传生成字体包**

当UI设计人员给我们**svg\*\*\*\*文件**的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的

推荐网站： http://icomoon.io

* icomoon字

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

* 阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

**下载兼容字体包**

![image-20220420175324862](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201753906.png)

**字体引入到HTML**

首先把 fonts文件夹放入我们 根目录下

![image-20220420175407910](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201754952.png)

![image-20220420175420031](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201754067.png)

在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

```html
	@font-face {
	    font-family: 'icomoon';
	    src:  url('fonts/icomoon.eot?7kkyc2');
	    src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
	    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
	    url('fonts/icomoon.woff?7kkyc2') format('woff'),
	    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}
```

给盒子使用字体

```html
	span {
	    font-family: 'icomoon';
	}
```

**追加字体图标**

把压缩包里面的selection.json 重新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可

![image-20220420175515582](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204201755630.png)

**常见字体格式**

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

1. TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

1. OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

1. Web     Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

1. Embedded     Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

1. SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；