html emmet输入法_Emmet HTML参考

html emmet输入法

Create an HTML file from scratch

从头开始创建HTML文件
> and +

>和+
Level up

升级
Multipliers

乘数
Group an expression to make it more readable

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

id和class属性
Adding an unique class or id

添加唯一的类或ID
Other attributes

其他属性
Adding content

添加内容
Adding an incremental number in your markup

在标记中添加增量数字
A reference for tags used in the page head

一种标签参考页面中使用的head
A reference for common tags

通用标签参考
A reference for semantic HTML tags

语义HTML标签的参考
A reference for form elements

表单元素的参考

Emmet is a pretty cool tool that helps you write HTML very very fast.

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

It’s like magic.

就像魔术。

Emmet is not something new, it’s been around for years and there is a plugin for every editor out there. On VS Code, Emmet is integrated out of the box, and whenever the editor recognizes a possible Emmet command, it will show you a tooltip.

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

If the thing you write has no other interpretations, and VS Code thinks it must be an Emmet expression, it will preview it directly in the tooltip, nicely enough:

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

Yet I didn’t really know how to use it in all its intricacies until I set out to research and write about it, so I had to learn how to use it in depth.

然而，直到我着手研究和撰写它时，我才真正知道如何使用它的所有复杂性，因此我不得不学习如何深入地使用它。

I want to use it in my day to day work, so here’s what I learned about it.

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

从头开始创建HTML文件 (Create an HTML file from scratch)

Type ! and you will get a basic HTML boilerplate to work with:

输入! 您将获得一个基本HTML样板，可以使用：

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

>和+ (> and +)

> means child

>表示孩子

+ means sibling

+表示同级

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

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

You can combine those to perform more complex markups. VS Code is so nice to show a preview when the Emmet snippet has no

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

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

升级 (Level up)

Using ^ you can level up from any time you used > to create a children:

使用^可以随时使用>创建孩子来升级：

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

You can use it multiple times to “up” more than once:

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

ul>li>div+p^^p<ul><li><div></div><p></p></li>
</ul>
<p></p>

乘数 (Multipliers)

Any tag can be added multiple times using *:

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

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>

对表达式进行分组以使其更具可读性 (Group an expression to make it more readable)

With multiplication in the mix, things start to get a bit more complex. What if you want to multiply 2 items? You group them in parentheses ( ):

随着乘法的混合，事情开始变得更加复杂。如果要乘以2怎么办？您将它们分组在括号( ) ：

ul>li>(p+span)*2<ul><li><p></p><span></span><p></p><span></span></li>
</ul>

`id`和`class`属性 (`id` and `class` attributes)

id and class are probably the most used attributes in HTML.

id和class可能是HTML中最常用的属性。

You can create an HTML snippet that includes them by using a CSS-like syntax:

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

ul>li>p.text#first<ul><li><p class="text" id="first"></p></li>
</ul>

You can add multiple classes:

您可以添加多个类：

ul>li>p.text.paragraph#first<ul><li><p class="text paragraph" id="first"></p></li>
</ul>

添加唯一的类或ID (Adding an unique class or id)

id must be unique in your page, at any time.

id在您的页面中随时都必须是唯一的。

class can be repeated, but sometimes you want an incremental one for your elements.

可以重复一class ，但有时您想要为元素添加一个增量类。

You can do that using $:

您可以使用$ ：

ul>li.item$*2>p<ul><li class="item1"><p></p></li><li class="item2"><p></p></li>
</ul>

其他属性 (Other attributes)

Attributes other than class and id must be added using [] parentheses:

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

You can add multiple attribute at once:

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

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>

添加内容 (Adding content)

Of course you can also fill the HTML with content:

当然，您也可以用内容填充HTML：

ul>li.item$*2>p{Text}<ul><li class="item1"><p>Text</p></li><li class="item2"><p>Text</p></li>
</ul>

在标记中添加增量编号 (Adding an incremental number in your markup)

You can add an incremental number in the text:

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

ul>li.item$*2>p{Text $}<ul><li class="item1"><p>Text 1</p></li><li class="item2"><p>Text 2</p></li>
</ul>

That number normally starts at 1, but you can make it start at an arbitrary number:

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

ul>li.item$@10*2>p{Text $@3}<ul><li class="item10"><p>Text 3</p></li><li class="item11"><p>Text 4</p></li>
</ul>

一种标签参考页面中使用的`head` (A reference for tags used in the page `head`)

Abbreviation	Rendered html
link	`<link rel="stylesheet" href="" />`
link:css	`<link rel="stylesheet" href="style.css" />`
link:favicon	`<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />`
link: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></style>`
script	`<script></script>`
script:src	`<script src=""></script>`

缩写	呈现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>`

通用标签参考 (A reference for common tags)

Abbreviation	Rendered html
img	`<img src="" alt="" />`
a	`<a href=""></a>`
br	`<br />`
hr	`<hr />`
c	`<!-- -->`
tr+	`<tr><td></td></tr>`
ol+	`<ol><li></li></ol>`
ul+	`<ul><li></li></ul>`

缩写	呈现HTML
img	`<img src="" alt="" />`
一个	`<a href=""></a>`
br	`<br />`
小时	`<hr />`
C	`<!-- -->`
tr +	`<tr><td></td></tr>`
醇+	`<ol><li></li></ol>`
ul +	`<ul><li></li></ul>`

语义HTML标签的参考 (A reference for semantic HTML tags)

Abbreviation	Rendered html
mn	`<main></main>`
sect	`<section></section>`
art	`<article></article>`
hdr	`<header></header>`
ftr	`<footer></footer>`
adr	`<address></address>`
str	`<strong></strong>`

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

表单元素的参考 (A reference for form elements)

Abbreviation	Rendered html
form	`<form action=""></form>`
form:get	`<form action="" method="get"></form>`
form:post	`<form action="" method="post"></form>`
label	`<label for=""></label>`
input	`<input type="text" />`
inp	`<input type="text" name="" id="" />`
input:hidden, input:h	`<input type="hidden" name="" />`
input:text, input:t	`<input type="text" name="" id="" />`
input:search	`<input type="search" name="" id="" />`
input:email	`<input type="email" name="" id="" />`
input:url	`<input type="url" name="" id="" />`
input:password, input:p	`<input type="password" name="" id="" />`
input:datetime	`<input type="datetime" name="" id="" />`
input:date	`<input type="date" name="" id="" />`
input:datetime-local	`<input type="datetime-local" name="" id="" />`
input:month	`<input type="month" name="" id="" />`
input:week	`<input type="week" name="" id="" />`
input:time	`<input type="time" name="" id="" />`
input:tel	`<input type="tel" name="" id="" />`
input:number	`<input type="number" name="" id="" />`
input:color	`<input type="color" name="" id="" />`
input:checkbox, input:c	`<input type="checkbox" name="" id="" />`
input:radio, input:r	`<input type="radio" name="" id="" />`
input:range	`<input type="range" name="" id="" />`
input:file, input:f	`<input type="file" name="" id="" />`
input:submit, input:s	`<input type="submit" value="" />`
input:image, input:i	`<input type="image" src="" alt="" />`
input:button, input:b	`<input type="button" value="" />`
input:reset	`<input type="reset" value="" />`
button:submit, button:s, btn:s	`<button type="submit"></button>`
button:reset, button:r, btn:r	`<button type="reset"></button>`
button:disabled, button:d, btn:d	`<button disabled="disabled"></button>`
btn	`<button></button>`
fieldset:disabled, fieldset:d, fset:d, fst:d	`<fieldset disabled="disabled"></fieldset>`
fst, fset	`<fieldset></fieldset>`
optg	`<optgroup></optgroup>`
select	`<select name="" id=""></select>`
select:disabled, select:d	`<select name="" id="" disabled="disabled"></select>`
select+	`<select name="" id=""><option value=""></option></select>`
option, opt	`<option value=""></option>`
table+	`<table><tr><td></td></tr></table>`
textarea	`<textarea name="" id="" cols="30" rows="10"></textarea>`
tarea	`<textarea name="" id="" cols="30" rows="10"></textarea>`

缩写	呈现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>`

翻译自: https://flaviocopes.com/emmet/

html emmet输入法