Emmet——帮助速写Html与CSS

最新推荐文章于 2023-09-20 13:23:34 发布

梦起孟心

最新推荐文章于 2023-09-20 13:23:34 发布

阅读量269

点赞数 1

分类专栏： Html基础 CSS 文章标签： css html html5 css3 Emmet

本文链接：https://blog.csdn.net/qq_41890177/article/details/107444000

版权

CSS 同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

Html基础

5 篇文章 1 订阅

订阅专栏

在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码，这里推荐一个Emmet语法规则，可以大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面会介绍我所遇见的一些语法，会持续更新。

前提，我所使用的编译软件是WebStorm

注意以下所有语法写完后必须摁下tab方能执行

1、生成html结构

如果新建一个html文件后没有生成结构，自己又不想写可以选择以下两种方式，都可以自动生成文档结构

Emmet语法为：

1、！+tab

2、html:5+tab

效果为：

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

</body>
</html>

暂时不用在意生成后出现的meta下的那些属性，因为是移动端的开发设置