Emmet的学习记录

最新推荐文章于 2024-04-26 01:26:41 发布

残墨海颜

最新推荐文章于 2024-04-26 01:26:41 发布

阅读量242

点赞数

分类专栏：前端 css 文章标签：前端 html5

本文链接：https://blog.csdn.net/CanMoHaiYan/article/details/95625655

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

Emmet的学习记录

前端开发中，我们都知道写html结构是必须的，但过程却是费时且无聊的。这是因为往往需要写大量的html标签来表现网页文档。很多时候就一小小段的内容，只为了表现段落结构、文档层次或者页面语义化，就需要书写大量的标签来包裹相应部分内容。有没有一种效率既高又能按预想的那样实现html结构呢？有！当然有！用起来贼~~~酸爽。

来！请出咱们这一期的主角emmet

这本来是一个插件，由于用它人群实在是太多了，很多编辑器都默认配置了emmet。它通过一些预先规定的语法可以快速构建想要的html结构，而且这些语法大多都是与css一样的，对于前端开发者实在是友好到爆有木有！！！！
本文就用vscode给大家讲解。

生成html5基本模板

语句：输入html:5后按Tab
效果：

<!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>

生成带id或者带class的div

id语句：输入#id名后按Tab，语法与css里一样
class语句：输入.class名后按Tab，语法与css里一样

效果：

<!-- 输入#container按Tab -->
<div id="container"></div>

<!-- 输入.content按Tab -->
<div class="content"></div>

生成带id或者带class的其他标签

在上述写法前加上标签名即可，不加默认生成div

id语句：输入标签名#id名后按Tab
class语句：输入标签名.class名后按Tab

效果：

<!-- 输入nav#container按Tab -->
<nav id="navigation"></nav>

<!-- 输入p.content按Tab -->
<p class="content"></p>

生成多个重复标签

语法：在上述语句后加上*标签个数，然后按Tab。
如生成8个<p class=“content”></p>

<!-- 输入p.content*8 -->
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>

很方便吧，一口气就给你写了8！！！行（hhhhhh）

子节点（>），兄弟节点（+），父节点（^）

语法：当上述的书写形式存在多个，可以在这些书写语块间夹带子节点符号（>），兄弟节点符号（+），父节点符号（^），以生成各种复杂的文档结构，如

<!-- 子节点符号应用样例 -->
<!-- 输入#container>img*3，按Tab -->
<div id="container">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
</div>

<!-- 兄弟节点应用样例 -->
<!-- 输入.content+#box+p.text+img#logo，按Tab -->
<div class="content"></div>
<div id="box"></div>
<p class="text"></p>
<img src="" alt="" id="logo">

<!-- 父节点应用样例 -->
<!-- 输入div>img+p>span*5^input，按Tab -->
<div>
    <img src="" alt="">
    <p>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
    <input type="text">
</div>

整体标签集

如果某部分标签是一个整体，那么可以使用英文小括号对其视为一个整体。如上面的父节点应用样例还可以这样子写：

<!-- 输入div>img+(p>span*5)+input，按Tab -->
<div>
    <img src="" alt="">
    <p>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
    <input type="text">
</div>

这样，(p>span*5)就是一个整体，这个整体与下面的input是兄弟关系，所以他们之间用+号。

标签内容

如果标签内还夹带内容的话，可以使用大括号{}将内容括住，如：

<!-- 输入p{哈哈哈}*6，按Tab -->
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>

带属性的标签

如果需要生成带属性的标签，可以使用中括号[]，然后在中括号内像往常一样写上html键值对即可，如：

<!-- 输入input[type='button' value='我是按钮']，按Tab -->
<input type="button" value="我是按钮">

<!-- 输入img[alt='我是一张图片']，按Tab -->
<img src="" alt="我是一张图片">

自动编号

如果有一系列标签的内容、属性、id或者class名存在有规律的递增序号，那么可以在emmet语句中夹带符号$，此时的$相当与序号的占位符，生成后序号列会自动替换该占位符。注意该功能必须和重复标签符号 * 一起使用，以此生成一系列相同标签。示例如下：

<!-- 生成带序号的内容 -->
<!-- 输入p{我是第$个段落}*6，按Tab -->
<p>我是第1个段落</p>
<p>我是第2个段落</p>
<p>我是第3个段落</p>
<p>我是第4个段落</p>
<p>我是第5个段落</p>
<p>我是第6个段落</p>

<!-- 生成带序号的属性值 -->
<!-- 输入input[type='button' value='按钮$']*6，按Tab -->
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<input type="button" value="按钮4">
<input type="button" value="按钮5">
<input type="button" value="按钮6">

<!-- 生成带序号的id名 -->
<!-- 输入ul>li.#list$*6,按Tab -->
<ul>
    <li class="" id="list1"></li>
    <li class="" id="list2"></li>
    <li class="" id="list3"></li>
    <li class="" id="list4"></li>
    <li class="" id="list5"></li>
    <li class="" id="list6"></li>
</ul>

<!-- 生成带序号的class名 -->
<!-- 输入ol>li.order$*6,按Tab -->
<ol>
    <li class="order1"></li>
    <li class="order2"></li>
    <li class="order3"></li>
    <li class="order4"></li>
    <li class="order5"></li>
    <li class="order6"></li>
</ol>

讲完，下课！
前端道阻且长，希望本文对大家有所帮助