| |
|
开发:
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??创建骨架在创建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 |
|
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
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- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |