Emmet - HTML快速开发神器

最新推荐文章于 2023-08-10 14:05:04 发布

ceynri

最新推荐文章于 2023-08-10 14:05:04 发布

阅读量252

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41596737/article/details/103128522

版权

title	date
Emmet 入门教程	2019-11-09

Emmet | HTML快速开发神器

HTML 作为一种随互联网诞生而不断发展的标记语言，其已经发展到 HTML5 版本并展示了强大的可用性。但 HTML 文档代码可不算是一种非常简洁的语言，复杂的标签记号往往使得网页编写者需要借助大量的自动补全才能在编写时不那么觉得枯燥无聊。

但今天介绍一个神器——Emmet，它的前身是 Zen coding，作为插件被广泛程序员使用。它利用了类 CSS 代码的编写方式能够快速地生成对应的 HTML 代码，进一步提升编写 HTML 的效率。

当然，生产力越高往往学习成本也越高，Emmet 类似于 Markdown，也需要你在使用前熟悉一下相关的简写语法，好消息是它的语法对于写过 CSS 的人来说非常熟悉，故门槛可以说是很低的。阅读完本篇教程，希望你能够初步上手 Emmet 并加以实践。

基本操作

注意：

一般而言使用 Emmet 往往是“输入一段简写代码”+Tab的形式，出于方便本文默认省略Tab，请自行加上~ ☺
常用的文本编辑器如 VS Code 都内置了 Emmet 无需重新安装插件，这十分方便。

::: warning

在新版本的 VS Code 中默认不启用 Emmet 自动补全，故需要在首选项配置中将emmet.triggerExpansionOnTab设置为true 。其他文本编辑器也要注意是否有类似的设置。

:::

HTML 初始化

在刚刚新建一个 HTML 文档时，面对空白的内容，只需要输入一个感叹号并进行补全，Emmet 便会自动为你补全标准的 HTML5 文档常用结构代码。

例子

效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

一个字符加上一个Tab便可以代替那么多行代码，是否体验到 Emmet 的强大之处了呢？

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Emmet - HTML快速开发神器

title date Emmet 入门教程 2019-11-09 Emmet | HTML快速开发神器HTML 作为一种随互联网诞生而不断发展的标记语言，其已经发展到 HTML5 版本并展示了强大的可用性。但 HTML 文档代码可不算是一种非常简洁的语言，复杂的标签记号往往使得网页编写者需要借助大量的...
复制链接

扫一扫