6.Emmet 语法与快速格式化代码

Emmet语法可以让我们在写网页的时候速度更快，我当前写网页的工具是pycharm，在pycharm中使用Emmet，我们需要点击File,然后点击Setting

搜索emmet，保证这里是勾选状态

安装后如果不进行其他设置，emmet自动被勾选

目录

1  Emmet在html中的使用

1.1  创建骨架

1.2  快速创建标签

1.3  快速创建多个标签

1.4  快速生成层级标签

1.5  一起创建多个同级标签

1.6  快速生成某类的标签

1.7  快速生成指定id的标签

1.8  快速按顺序创建类与标签

1.9  快速生成有内容的标签

1.10  混合使用

2  Emmet在css中的使用

3  快速格式化代码

---

1  Emmet在html中的使用

1.1  创建骨架

在创建html的时候，pycharm已经自动生成了html的骨架，如果我们不想用这个骨架，我们输入!然后按下tab，那么它就会生成一个骨架

1.2  快速创建标签

我们在body中输入div

然后按下tab，它就会变成这样

使用其他标签也是一样

1.3  快速创建多个标签

我们现在想创建10个p标签，那么我们可以这样写

然后按下tab

它就会生成10个p标签，使用其他标签也是一样

1.4  快速生成层级标签

比如我们想要创建一个ul，然后里面放一个li，那么我们这样写

之后按下tab

他就会生成一个ul套一个li，用ol(li),div(span)等其他父子关系标签也是一样

1.5  一起创建多个同级标签

我们使用加号把想创建的标签加起来

然后按下tab

1.6  快速生成某类的标签

我们输入点和类名

然后按下tab

它就会变成指定类名的div标签，默认是div标签，我们也可以生成别的标签，比如我们现在写p.class_name

之后按下tab

它就变成了类名为class_name的p标签

1.7  快速生成指定id的标签

我们输入井号和id名称

然后按下tab

它就会变成指定id名称的div标签，默认是div标签，如果我们想创建id名为id_name的h1标签，那么我们输入h1#id_name

然后按下tab

1.8  快速按顺序创建类与标签

我们输入.hello$*5

然后按tab

别的标签也是一样

按下tab

1.9  快速生成有内容的标签

我们输入 p{hello world}

然后按tab

别的标签也是一样

1.10  混合使用

上面提到的所有emmet语法都可以混合使用，比如

按下tab后就是这样的

2  Emmet在css中的使用

pycharm中用不了，vscode中可以使用，使用的时候输入css样式的第一个字符，比如 text-align:center，我们输入tac然后按tab就可以看到text-align:center了

用vscode的时候可以看一下这个 P95黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

3  快速格式化代码

我们写代码的时候总会出现这样的问题

这两个div是平级的，但是它没有对齐，这个时候我们按下ctrl+Alt+L，可以快速格式化代码，按下之后就变成这个样子了

但在pycharm中对css不使用，写完style后，再对html部分进行格式化则不会生效

如果使用vscode的话，右键然后点击格式化代码，无论是对html部分或是css部分，都可以生效

用vscode的话可以看一下这个 P96黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili