33 emmet 语法生成 html标签

最新推荐文章于 2022-06-16 18:07:13 发布

hello_sunny123

最新推荐文章于 2022-06-16 18:07:13 发布

阅读量184

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/hello_sunny123/article/details/118551713

版权

前端专栏收录该内容

60 篇文章 3 订阅

订阅专栏

快速生成 HTML 结构语法

1. 生成标签直接输入标签名按 tab 键即可,比如 div 然后 tab 键,就可以生成

2. 如果想要生成多个相同标签,加上 * 就可以了,比如 div*3 就可以快速生成3个 div

3. 如果有父子级关系的标签,可以用 > 比如 ul>li 就可以了

4. 如果有兄弟关系的标签,用 + 就可以了,比如 div+p

5. 如果生成带有类名或者id名字的,直接写 .demo 或者 #two ,tab键就可以了

6. 如果生成的 div 类名是有顺序的,可以用自增符号 $

7. 如果想要在生成的标签内部写内容可以用 {} 表示

代码

<!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>emmet语法使用</title>
</head>
<body>
    <!-- 1. 生成标签直接输入标签名按 tab 键即可，比如 div 然后 tab 键,就可以生成<div> </div> -->
   <h1>标题标签</h1>
   <p>段落标签</p>   <br>
   <strong>字体加粗</strong>   <br>
   <b>字体加粗</b>     <br>
   <em>字体倾斜</em>   <br>
   <i>字体倾斜</i>     <br>
   <del>删除标签</del>    <br>
   <s>删除标签</s>        <br>
   <ins>下划线标签</ins>      <br>
   <u>下划线标签</u>          <br>
   <div>盒子1</div>            
   <div>盒子2</div>            
   <span>盒子3</span>          
   <span>盒子4</span>          
<hr>
   <img src="images/tu1.jpg" alt="女神美照">     <br>
   <a href="#">空链接</a>                          <br>
   &lt; p  &gt;  是一个段落标签                   <br>
   这是两个&nbsp;&nbsp;空格                       <br>
   <!-- 2. 如果想要生成多个相同标签加上 * 就可以了，比如 div*3 就可以快速生成3个 div -->
   <!-- div*3 然后按 Tab -->
   <div></div>
   <div></div>
   <div></div>
   <!-- 3. 如果有父子级关系的标签,可以用 > 比如 ul>li 就可以了 -->
    <!-- ul>li{又是爱女神得一天},然后按 Tab  -->
   <ul>
        <li>又是爱女神得一天</li>
    </ul>
    <form action="">
        <select name="" id="">
            <option value="">上海</option>
            <option value="">广东</option>
        </select>
    </form>
    <!-- 4. 如果有兄弟关系的标签,用 + 就可以了比如 div+p -->
    <!-- div{这是一个盒子}+p{这是一个盒子} 然后按Tab -->
    <div>这是一个盒子</div>
    <p>这是一个段落</p>
    <!-- 5. 如果生成带有类名或者 id 名字的,直接写 .demo 或者 #two tab键就可以了 -->
    <!-- .demo 按Tab; #two  按Tab; p.demo 按Tab; p#three  按Tab; -->
    <div class="demo"></div>
    <div id="two"></div>
    <p class="demo"></p>
    <p id="three"></p>
    <!-- 6. 如果生成的 div 类名是有顺序的,可以用自增符号 $ -->
    <!-- .demo$*5 按Tab; -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- .demo*5 按Tab; -->
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <!-- 7. 如果想要在生成的标签内部写内容可以用 {} 表示 -->
    <!-- .demo{女生}*3 -->
    <div class="demo">女生</div>
    <div class="demo">女生</div>
    <div class="demo">女生</div>
    <!-- .demo${女生}*3 -->
    <div class="demo1">女生</div>
    <div class="demo2">女生</div>
    <div class="demo3">女生</div>
</html>

运行结果：

在这里插入图片描述

hello_sunny123

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
33 emmet 语法生成 html标签

快速生成 HTML 结构语法1. 生成标签直接输入标签名按 tab 键即可,比如 div 然后 tab 键,就可以生成2. 如果想要生成多个相同标签,加上 * 就可以了,比如 div*3 就可以快速生成3个 div3. 如果有父子级关系的标签,可以用 > 比如 ul>li 就可以了4. 如果有兄弟关系的标签,用 + 就可以了,比如 div+p5. 如果生成带有类名或者id名字的,直接写 .demo 或者 #two ,tab键就可以了6. 如果生成的 div 类名是有顺序的,可以用自增
复制链接

扫一扫