IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 6.Emmet 语法与快速格式化代码 -> 正文阅读

[开发工具]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

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-02-24 15:30:20  更:2022-02-24 15:32:31 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 8:44:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码