2021-06-13 Emmet语法

最新推荐文章于 2024-09-05 16:15:02 发布

青木kkq

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量90

点赞数

分类专栏：学习记录文章标签：前端

本文链接：https://blog.csdn.net/qq_36141958/article/details/117857630

版权

学习记录专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Emmet语法
用于快速输入html标签和css样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 快速生成css */
      .one {
        /* 在类名中直接输入 */
        text-align: center;
        /* tac 文本居中 */
        text-indent: 2em;
        /* ti2em 首行缩进2单元 */
        width: 100px;
        /* w100 100像素宽度 */
        height: 200px;
        /* h200 200像素高度 */
        line-height: 26px;
        /* lh26px 行高26像素 */
        text-decoration: none;
        /* tdn 使文本无修饰，如取消超链接文本的下划线 */
      }
    </style>
  </head>
  <body>
    <!-- 快速生成html标签 -->
    <div></div>
    <!-- div -->
    <!-- 快速生成标签，输入标签名后直接tab -->

    <div></div>
    <div></div>
    <div></div>
    <!-- div*3 -->
    <!-- 快速生成多个标签，输入标签名后*需要的个数 -->

    <ul>
      <li></li>
    </ul>
    <div><span></span></div>
    <!-- ul>li -->
    <!-- div>span -->
    <!-- 快速生成父子级关系的标签，输入父标签名后>子标签名 -->

    <div></div>
    <span></span>
    <!-- div+span -->
    <!-- 快速生成兄弟关系标签，输入一个标签后+另一个标签名 -->

    <div class="demo"></div>
    <div id="demo"></div>
    <span class="test"></span>
    <ul>
      <li id="demo1"></li>
      <li id="demo2"></li>
    </ul>
    <!-- .demo -->
    <!-- #demo -->
    <!-- span.test -->
    <!-- ul>li#demo$*2 -->
    <!-- 快速生成带有类名或者id名的标签，直接.或#加类名或者id名，默认div -->

    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <!-- .demo$*3 -->
    <!-- 快速生成有顺序的类名，使用自增符号$*需要生成的个数，默认从1开始 -->

    <div>测试测试1</div>
    <div>测试测试2</div>
    <div>测试测试3</div>
    <!-- div{测试测试$}*3 -->
    <!-- 快速生成有内容的标签，使用标签名加{}，在{}内直接填写内容tab即可 -->
  </body>
</html>

青木kkq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-13 Emmet语法

Emmet语法用于快速输入html标签和css样式<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫