Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
Summary:
Generate tags
1. Quickly generate document structure
快捷键
生成测试文本
Home Web Front-end HTML Tutorial Detailed explanation of the use of Sublime Text plug-in Emmet

Detailed explanation of the use of Sublime Text plug-in Emmet

高洛峰
高洛峰
Mar 26, 2017 am 10:14 AM
sublime

Summary:

Installation Please read the previous article Sublime Text-Installation, use it with sublime’s own shortcut keys, and write HTML quickly.

The following are commonly used. For complete information, please see the emmet official documentation.

Generate tags

1. Quickly generate document structure

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

  • html:xt Generate HTML4 transitional type

  • html:4s Generate HTML4 strict type

2. Generate elements with id

Tag # ID name, such as:

p#header

<p id="header"></p>
Copy after login
3. Generate elements with

class

tag. Class name, such as:

p.title

<p class="title"></p>
Copy after login
4. Generate descendant elements:>

Such as:

nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>
Copy after login
5 .Generate sibling elements: +

such as:

p+p+p

<p></p>
<p></p>
<p></p>
Copy after login
6. Generate superior elements: ^

such as:

p^p

<p></p>
<p></p>
Copy after login
7. Repeatedly generate multiple elements: *

Such as:
ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Copy after login

8. Generate from Definition

Attribute: [attr]

For example:

p[value=1]

<p value="1"></p>
Copy after login
9. Generate text content: {}

For example:

a{Click me}

<a href="">Click me</a>
Copy after login
10. Add number: $

  • Start from 1: add $

For example:

p.item${$$}*3

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>
Copy after login
  • Reverse order: $ followed by @-

For example:

p.item$@-{$$@-}*3

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>
Copy after login
  • Specify the serial number: you can use @N

For example:

p.item$@4{$$@4}*3

<p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p>
Copy after login
11.

Group: ()

For example:

(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
Copy after login
Let’s take a

comprehensive case

table#tab[value=1].a>tr*3>(td{$$}>span)*3

<table id="tab" value="1" class="a">
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
</table>
Copy after login
Generate css

Many css styles , there are naturally many abbreviations, just list the commonly used ones and draw inferences.

The css abbreviation is matched using fuzzy search, such as ov:h == ov-h == ovh == oh.

  • w10

    width<a href="http://www.php.cn/wiki/835.html" target="_blank">: 10px;</a> w10p width: 10%; w10e width: 10em; w10x width: 10xe;

  • h10

    height<a href="http://www.php.cn/wiki/836.html" target="_blank">: 10px;</a>

  • por

    position<a href="http://www.php.cn/wiki/902.html" target="_blank">: relative;</a> poa position: absolute;

  • fll

    float<a href="http://www.php.cn/wiki/919.html" target="_blank">: left;</a> fr float: right<a href="http://www.php.cn/wiki/905.html" target="_blank">;</a>

  • dt

    display<a href="http://www.php.cn/wiki/927.html" target="_blank">: table;</a> db display: block; dib display: inline-block;

    • ##ovy

  • overflow-y: hidden;<a href="http://www.php.cn/wiki/926.html" target="_blank"></a>

    • cb

  • clear: both;<a href="http://www.php.cn/wiki/917.html" target="_blank"></a>

    ##mt
  • margin-top

    : ; mb <a href="http://www.php.cn/wiki/933.html" target="_blank"></a>margin-bottom: ;<a href="http://www.php.cn/wiki/935.html" target="_blank"></a>

  • pt <a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a>: ; pb <a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a>: ;

  • tac <a href="http://www.php.cn/wiki/870.html" target="_blank">text-align</a>: center;

  • lh <a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>:;

  • tsn <a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a>: none;

  • tja <a href="http://www.php.cn/wiki/881.html" target="_blank">text-justify</a>: auto;

  • c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);

  • op opacity: ;

  • cnt content: '';

  • ol <a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>: ;

  • bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;

  • bd2px#333s border: 2px #333 solid;

快捷键

如果没作用请检查快捷键是否冲突

  • 快速生成包裹标签：Ctrl+Shift+G

只有文本没有结构时，如下

首页
简介
动态
Copy after login

选中文本按快捷键Ctrl+Shift+G，再弹出的：Enter Wrap Abbreviation（输入扩展缩写）中输入nav>ul>li.item$*>a就会生成

<nav>
    <ul>
        <li class="item1"><a href="">首页</a></li>
        <li class="item2"><a href="">简介</a></li>
        <li class="item3"><a href="">动态</a></li>
    </ul>
</nav>
Copy after login

如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。

1首页
2简介
3动态
Copy after login

  • 自动添加/更新图片尺寸：ctrl+U

光标移到标签上的任意位置，按下快捷键ctrl+U即可。

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />
Copy after login

  • 删除标签：shift+ctrl+;

  • 定位到上个编辑点：ctrl+alt+left

  • 定位到下个编辑点：ctrl+alt+right

  • 选中下一项：shift+ctrl+.

  • 加/减1：ctrl+up/ctrl+down

  • 加/减10：shift+alt+up/shift+alt+down

  • 展开缩写：ctrl+e（和tab键作用相同）

  • 重命名标签(rename_tag)：ctrl+shift+'

  • 更换标签(update_as_you_type)：ctrl+Shift+U

  • 匹配标签对：ctrl+alt+j

生成测试文本

输入lorem再按tab会随机生成一段英文,默认是生成30个单词，可以加上数字控制单词数量，如lorem5。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!
Copy after login
Lorem ipsum dolor sit amet.
Copy after login

The above is the detailed content of Detailed explanation of the use of Sublime Text plug-in Emmet. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
1 weeks ago By DDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Where to find the Crane Control Keycard in Atomfall
1 weeks ago By DDD
Show More

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?
7442
15
CakePHP Tutorial
1371
52
What is the format of the account name of steam
76
11
win11 activation key permanent
36
19
nyt connections hints and answers
8
6
Show More
Related knowledge
What should I do if the notepad file is too large to open? What should I do if the notepad file is too large to open? Apr 08, 2024 am 03:15 AM

When Notepad files get too large, here are some solutions you can try: Use another text editor like Sublime Text as they don’t have file size limits. Split the file into smaller parts. Enable large file support via Registry Editor. Try using an alternative method such as Notepad++, WordPad, or Microsoft Word to open the file. Zip the file and open it with an archive tool.

How to align text columns in notepad How to align text columns in notepad Apr 08, 2024 am 01:00 AM

There are three methods to achieve text column alignment in Notepad: 1. Use tabs; 2. Use spaces and adjust manually; 3. Use third-party tools (such as Notepad++, Sublime Text) to provide automatic alignment.

What should I use to open html? What should I use to open html? Apr 21, 2024 am 11:33 AM

To open HTML files you need to use a browser such as Google Chrome or Mozilla Firefox. To open an HTML file using a browser, follow these steps: 1. Open your browser. 2. Drag and drop the HTML file into the browser window, or click the File menu and select Open.

What software is good for python programming? What software is good for python programming? Apr 20, 2024 pm 08:11 PM

IDLE and Jupyter Notebook are recommended for beginners, and PyCharm, Visual Studio Code and Sublime Text are recommended for intermediate/advanced students. Cloud IDEs Google Colab and Binder provide interactive Python environments. Other recommendations include Anaconda Navigator, Spyder, and Wing IDE. Selection criteria include skill level, project size and personal preference.

How to open local file in html How to open local file in html Apr 22, 2024 am 09:39 AM

HTML can be used to open local files as follows: Create a .html file and import the jQuery library. Create an input field that allows the user to select a file. Listen to the file selection event and use a FileReader() object to read the file contents. Display the read file contents on the web page.

How to create py file in python How to create py file in python May 05, 2024 pm 07:57 PM

Steps to create a .py file in Python: Open a text editor (such as Notepad, TextMate, or Sublime Text). Create a new file and enter the Python code, paying attention to indentation and syntax. When saving the file, use a .py extension (for example, my_script.py).

How to use the copied code in python How to use the copied code in python Apr 20, 2024 pm 06:26 PM

Here are the steps to use copied code in Python: Copy and paste the code into a text editor. Create a Python file. Run the code from the command line. Understand what the code is for and how it works. Modify the code as needed and rerun it.

How to open html files on mobile phone How to open html files on mobile phone Apr 05, 2024 am 08:06 AM

You can open HTML files on your phone by using your default browser and entering the file path or URL in the address bar. Using your file manager, navigate to the file location and click the HTML file. Download the text editor, navigate to the file location and double-click the HTML file. Download HTML Viewer from the App Store, navigate to the file location and tap on the HTML file.

See all articles