前端其他相关资料

1. 常用参考文档

• W3C：http://www.w3school.com.cn/

• MDN：https://developer.mozilla.org/zh-CN/

  2. emmet 语法

  2.1. 简介

• Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。

• 快速生成HTML结构语法
• 快速生成CSS样式语法

  2.2. 快速生成HTML结构语法

  2.2.1. html 初始结构

  输入!，再按tab键。这样可以快速生成基础的结构

  2.2.2. 生成元素

  生成标签，直接输入标签名，按tab/enter键即可。比如输入div然后按tab键，就可以生成<div></div>

  2.2.3. 带 id 属性的元素

  id的指令：#。输入元素名#id名，再按tab/enther键。 ```

#### 2.2.4. 带 class 属性的元素
class的指令：`.`。输入`元素名.class名`，再按tab/enther键。

#### 2.2.5. 父子节点元素
生成父子节点关系元素的指令：`>`。输入`父元素名>子元素名`，再按tab/enther键。比如`ul > li`即可

#### 2.2.6. 兄弟节点元素
生成带兄弟节点元素的指令：`+`。输入`元素名+兄弟元素名`，再按tab/enther键。比如`div+p`

#### 2.2.8. 重复元素
生成重复元素的指令：`*`。输入`元素名*个数`，再按tab/enther键。

#### 2.2.9. 分组元素
生成多个相同标签的指令：`()`。输入`元素名>(分组元素..)>元素名`，再按tab/enther键。比如输入`div*3`就可以快速生成3个div

#### 2.2.10. 带属性元素
生成带属性元素的指令：`[attr=xxx]`。输入`元素名[属性1=xxx ... 属性n=xxx]`，再按tab/enther键。

> 注：中括号内填写属性键值对的形式，并且空格隔开

#### 2.2.11. 属性名自增编号
如果生成的元素类名是有顺序的，可以用自增符号`$`，如输入`.demo$*5`再按tab键，生成5个div，类名分别叫demo1，demo2，...demo5

值得注意：一个`$`代表一位数。如果需要自定义从某个数值开始递增的话可以：`元素名$@数字*元素个数`。例如：`ul>li.test$@3*3`

#### 2.2.12. 带文本的元素
生成带文本元素指令：`{}`，输入`元素名{标签体文本内容}`，再按tab/enther键。

• 测试1
• 测试2
• 测试3

#### 2.2.13. 隐式标签
这个标签没有指令，而是部分标签可以不使用输入标签，默认生成`<div>`标签 例如：`.test`。直接输入指令，即可识别父类标签。如下

- 可在 ul 和 ol 中使用
- 可在select中使用
- tr：可在 table、tbody、thead 和 tfoot 中使用
- td：可在 tr 中使用

### 2.3. 快速生成CSS样式语法
CSS 基本采取简写形式即可

- 比如`w200`按tab可以生成`width: 200px;`
- 比如`lh26px`按tab可以生成`line-height: 26px;`
### 2.4. 快速格式化代码（vsCode）
VSCode 快速格式化代码：`shift+alt+f`<br />也可以设置保存页面的时候自动格式化代码:

1. 【文件】-->【首选项】-->【设置】
1. 搜索emmet.include
1. 在settings.json下的【工作区设置】中添加以下语句：

“editor.formatOnType”: true, “editor.formatOnSave”: true

```