Emmet的HTML参考

Emmet是一个非常酷的工具,可以帮助您非常快速地编写HTML。就像魔术。 Emmet并不是什么新鲜事物,它已经存在了很多年,并且为每个编辑器都提供了一个插件。


Emmet是一个非常酷的工具,可以帮助您非常快速地编写HTML。

就像魔术。

Emmet并不是什么新鲜事物,它已经存在了很多年,并且为每个编辑器都提供了一个插件。在VS代码,Emmet集成于开箱即用,只要编辑器识别出可能的Emmet命令,它就会向您显示一个工具提示。

Emmet in VS Code

如果您编写的东西没有其他解释,并且VS Code认为它必须是Emmet表达式,它将直接在工具提示中预览它,这非常好:

Emmet preview in VS Code

但是直到开始研究和撰写它时,我才真正知道如何使用它的所有复杂性,因此我必须深入学习如何使用它。

我想在日常工作中使用它,所以这是我学到的东西。

从头开始创建HTML文件

类型!您将获得一个基本的HTML样板,可以使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body> </html>

>和+

  • >意味着孩子
  • +意味着同级

    nav>ul>li
    

    <nav> <ul> <li></li> </ul> </nav>

    div+p+span

    <div></div> <p></p> <span></span>

您可以将它们结合起来执行更复杂的标记。 VS Code非常适合在Emmet代码段中没有预览时显示预览

ul>li>div+p+span

<ul> <li> <div></div> <p></p> <span></span> </li> </ul>

升级

使用^您可以随时使用来升级>创建一个孩子:

ul>li>div+p^li>span

<ul> <li> <div></div> <p></p> </li> <li><span></span></li> </ul>

您可以多次使用它来多次“向上”运行:

ul>li>div+p^^p

<ul> <li> <div></div> <p></p> </li> </ul> <p></p>

乘数

任何标签都可以使用添加多次*

ul>li*5>p

<ul> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> </ul>

对表达式进行分组以使其更具可读性

随着乘法的混合,事情开始变得更加复杂。如果您想将2个项目相乘怎么办?您将它们放在括号中( )

ul>li>(p+span)*2

<ul> <li> <p></p> <span></span> <p></p> <span></span> </li> </ul>

idclass属性

idclass是HTML中最常用的属性。

您可以使用类似于CSS的语法来创建包含它们的HTML代码段:

ul>li>p.text#first

<ul> <li> <p class=“text” id=“first”></p> </li> </ul>

您可以添加多个类:

ul>li>p.text.paragraph#first

<ul> <li> <p class=“text paragraph” id=“first”></p> </li> </ul>

添加唯一的类或ID

id在任何时候都必须在您的页面中唯一。

class可以重复,但是有时您想要为元素增加一个。

您可以使用$

ul>li.item$*2>p

<ul> <li class=“item1”> <p></p> </li> <li class=“item2”> <p></p> </li> </ul>

其他属性

除class和id之外的其他属性必须使用[]括弧:

ul>li.item$*2>p[style="color: red"]

<ul> <li class=“item1”> <p style=“color: red”></p> </li> <li class=“item2”> <p style=“color: red”></p> </li> </ul>

您可以一次添加多个属性:

ul>li.item$*2>p[style="color: red" title="A color"]

<ul> <li class=“item1”> <p style=“color: red” title=“A color”></p> </li> <li class=“item2”> <p style=“color: red” title=“A color”></p> </li> </ul>

添加内容

当然,您也可以用内容填充HTML:

ul>li.item$*2>p{Text}

<ul> <li class=“item1”> <p>Text</p> </li> <li class=“item2”> <p>Text</p> </li> </ul>

在标记中添加增量编号

您可以在文本中添加一个增量数字:

ul>li.item$*2>p{Text $}

<ul> <li class=“item1”> <p>Text 1</p> </li> <li class=“item2”> <p>Text 2</p> </li> </ul>

该数字通常从1开始,但是您可以使它从任意数字开始:

ul>[email protected]*2>p{Text [email protected]}

<ul> <li class=“item10”> <p>Text 3</p> </li> <li class=“item11”> <p>Text 4</p> </li> </ul>

页面中使用的标签的参考head

缩写 呈现的html
关联 <link rel="stylesheet" href="" />
链接:css <link rel="stylesheet" href="style.css" />
链接:收藏夹 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
链接:rss <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
meta:utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
风格 <style></style>
脚本 <script></script>
脚本:src <script src=""></script>

通用标签参考

缩写 呈现的html
img <img src="" alt="" />
一种 <a href=""></a>
br <br />
小时 <hr />
C <!-- -->
tr + <tr><td></td></tr>
醇+ <ol>
  • ul + <ul>
  • 语义HTML标签的参考

    缩写 呈现的html
    mn <main></main>
    教派 <section></section>
    艺术 <article></article>
    人类发展报告 <header></header>
    ftr <footer></footer>
    ADR <address></address>
    力量 <strong></strong>

    表单元素的参考

    缩写 呈现的html
    形式 <form action=""></form>
    形式:得到 <form action="" method="get"></form>
    形式:张贴 <form action="" method="post"></form>
    标签 <label for=""></label>
    输入 <input type="text" />
    输入 <input type="text" name="" id="" />
    输入:隐藏,输入:h <input type="hidden" name="" />
    输入:文本,输入:t <input type="text" name="" id="" />
    输入:搜索 <input type="search" name="" id="" />
    输入:电子邮件 <input type="email" name="" id="" />
    输入网址 <input type="url" name="" id="" />
    输入:密码,输入:p <input type="password" name="" id="" />
    输入:日期时间 <input type="datetime" name="" id="" />
    输入:日期 <input type="date" name="" id="" />
    输入:datetime-local <input type="datetime-local" name="" id="" />
    输入:月 <input type="month" name="" id="" />
    输入:周 <input type="week" name="" id="" />
    输入时间 <input type="time" name="" id="" />
    输入:tel <input type="tel" name="" id="" />
    输入:数字 <input type="number" name="" id="" />
    输入颜色 <input type="color" name="" id="" />
    输入:复选框,输入:c <input type="checkbox" name="" id="" />
    输入:无线电,输入:r <input type="radio" name="" id="" />
    输入范围 <input type="range" name="" id="" />
    输入:文件,输入:f <input type="file" name="" id="" />
    输入:提交,输入:s <input type="submit" value="" />
    输入:图像,输入:i <input type="image" src="" alt="" />
    输入:按钮,输入:b <input type="button" value="" />
    输入:重置 <input type="reset" value="" />
    button:提交,button:s,btn:s <button type="submit"></button>
    按钮:重置,按钮:r,btn:r <button type="reset"></button>
    按钮:禁用,按钮:d,btn:d <button disabled="disabled"></button>
    btn <button></button>
    fieldset:禁用,fieldset:d,fset:d,fst:d <fieldset disabled="disabled"></fieldset>
    fst,fset <fieldset></fieldset>
    选择 <optgroup></optgroup>
    选择 <select name="" id=""></select>
    选择:禁用,选择:d <select name="" id="" disabled="disabled"></select>
    选择+ <select name="" id=""><option value=""></option></select>
    选项,选择 <option value=""></option>
    桌子+ <table><tr><td></td></tr></table>
    文本区域 <textarea name="" id="" cols="30" rows="10"></textarea>
    塔里亚 <textarea name="" id="" cols="30" rows="10"></textarea>

    更多devtools教程: