masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Jadual Kandungan
摘要：
生成标签
1.快速生成文档结构
2.生成带 id 的元素
class 的元素" >3.生成带 class 的元素
4.生成后代元素：>
5.生成兄弟元素：+
6.生成上级元素：^
属性：[attr]" >8.生成带自定义属性：[attr]
9.生成带文本内容：{}
10.加编号：$
分组：()" >11.分组：()
生成css
快捷键
生成测试文本
Rumah hujung hadapan web html tutorial 详解Sublime Text 插件Emmet的使用

详解Sublime Text 插件Emmet的使用

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

摘要：

安装请看上一篇Sublime Text—安装，和sublime自带快捷键一起用，写html简直快的飞起。

下面整理的是常用的，完整的可看emmet官方文档。

生成标签

1.快速生成文档结构

  • !或html:5，快速生成 HTML5 结构(都需要再按tab键)

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

  • html:xt 生成 HTML4 过渡型

  • html:4s 生成 HTML4 严格型

2.生成带 id 的元素

标签 # ID名，如：p#header

<p id="header"></p>
Salin selepas log masuk

3.生成带 class 的元素

标签 . 类名，如：p.title

<p class="title"></p>
Salin selepas log masuk

4.生成后代元素：>

如：nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>
Salin selepas log masuk

5.生成兄弟元素：+

如：p+p+p

<p></p>
<p></p>
<p></p>
Salin selepas log masuk

6.生成上级元素：^

如：p^p

<p></p>
<p></p>
Salin selepas log masuk

7.重复生成多个元素：*
如：ul>li*5 

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Salin selepas log masuk

8.生成带自定义属性：[attr]

如：p[value=1]

<p value="1"></p>
Salin selepas log masuk

9.生成带文本内容：{}

如：a{Click me}

<a href="">Click me</a>
Salin selepas log masuk

10.加编号：$

  • 从1开始：加$

如：p.item${$$}*3

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>
Salin selepas log masuk

  • 倒序： $ 后面增加 @-

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

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>
Salin selepas log masuk

  • 指定序号：可以使用 @N

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

<p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p>
Salin selepas log masuk

11.分组：()

如：(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
Salin selepas log masuk

来个综合案例

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>
Salin selepas log masuk

生成css

css样式多，缩写自然也很多，列举常用的举一反三即可。

其中css缩写是采用模糊搜索匹配的，比如ov:h == ov-h == ovh == oh。

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

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

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

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

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

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

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

  • mt <a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>: ; mb <a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</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

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

首页
简介
动态
Salin selepas log masuk

选中文本按快捷键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>
Salin selepas log masuk

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

1首页
2简介
3动态
Salin selepas log masuk

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

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

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />
Salin selepas log masuk

  • 删除标签：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!
Salin selepas log masuk
Lorem ipsum dolor sit amet.
Salin selepas log masuk

Atas ialah kandungan terperinci 详解Sublime Text 插件Emmet的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Penyelesaian Riddle Seashell
2 minggu yang lalu By DDD
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7517
15
Tutorial CakePHP
1378
52
Apakah format nama akaun stim
79
11
kunci pengaktifan win11 kekal
53
19
Sambungan NYT menunjukkan dan jawapan
21
66
Tunjukkan Lagi
Related knowledge
Apakah yang perlu saya lakukan jika fail notepad terlalu besar untuk dibuka? Apakah yang perlu saya lakukan jika fail notepad terlalu besar untuk dibuka? Apr 08, 2024 am 03:15 AM

Apabila fail Notepad menjadi terlalu besar, berikut ialah beberapa penyelesaian yang boleh anda cuba: Gunakan editor teks lain seperti Teks Sublime kerana ia tidak mempunyai had saiz fail. Pisahkan fail kepada bahagian yang lebih kecil. Dayakan sokongan fail besar melalui Editor Pendaftaran. Cuba gunakan kaedah alternatif seperti Notepad++, WordPad atau Microsoft Word untuk membuka fail. Zip fail dan buka dengan alat arkib.

Cara menjajarkan lajur teks dalam notepad Cara menjajarkan lajur teks dalam notepad Apr 08, 2024 am 01:00 AM

Terdapat tiga kaedah untuk mencapai penjajaran lajur teks dalam Notepad: 1. Gunakan tab 2. Gunakan ruang dan laraskan secara manual 3. Gunakan alat pihak ketiga (seperti Notepad++, Teks Sublime) untuk menyediakan penjajaran automatik.

Apakah yang perlu saya gunakan untuk membuka html? Apakah yang perlu saya gunakan untuk membuka html? Apr 21, 2024 am 11:33 AM

Untuk membuka fail HTML anda perlu menggunakan penyemak imbas seperti Google Chrome atau Mozilla Firefox. Untuk membuka fail HTML menggunakan penyemak imbas, ikuti langkah berikut: 1. Buka penyemak imbas anda. 2. Seret dan lepaskan fail HTML ke dalam tetingkap penyemak imbas, atau klik menu Fail dan pilih Buka.

Apakah perisian yang baik untuk pengaturcaraan python? Apakah perisian yang baik untuk pengaturcaraan python? Apr 20, 2024 pm 08:11 PM

IDLE dan Jupyter Notebook disyorkan untuk pemula, dan PyCharm, Visual Studio Code dan Sublime Text disyorkan untuk pelajar pertengahan/lanjutan. Cloud IDEs Google Colab dan Binder menyediakan persekitaran Python interaktif. Cadangan lain termasuk Anaconda Navigator, Spyder dan Wing IDE. Kriteria pemilihan termasuk tahap kemahiran, saiz projek dan keutamaan peribadi.

Bagaimana untuk membuka fail tempatan dalam html Bagaimana untuk membuka fail tempatan dalam html Apr 22, 2024 am 09:39 AM

HTML boleh digunakan untuk membuka fail tempatan seperti berikut: Cipta fail .html dan import pustaka jQuery. Cipta medan input yang membolehkan pengguna memilih fail. Dengar acara pemilihan fail dan gunakan objek FileReader() untuk membaca kandungan fail. Paparkan kandungan fail yang dibaca pada halaman web.

Bagaimana untuk menggunakan kod yang disalin dalam python Bagaimana untuk menggunakan kod yang disalin dalam python Apr 20, 2024 pm 06:26 PM

Berikut ialah langkah-langkah untuk menggunakan kod yang disalin dalam Python: Salin dan tampal kod ke dalam penyunting teks. Buat fail Python. Jalankan kod dari baris arahan. Fahami untuk tujuan apa kod tersebut dan cara ia berfungsi. Ubah suai kod seperti yang diperlukan dan jalankannya semula.

Bagaimana untuk membuat fail py dalam python Bagaimana untuk membuat fail py dalam python May 05, 2024 pm 07:57 PM

Langkah-langkah untuk mencipta fail .py dalam Python: Buka editor teks (seperti Notepad, TextMate atau Teks Sublime). Buat fail baharu dan masukkan kod Python, memberi perhatian kepada lekukan dan sintaks. Apabila menyimpan fail, gunakan sambungan .py (contohnya, my_script.py).

Bagaimana untuk membuka fail html pada telefon bimbit Bagaimana untuk membuka fail html pada telefon bimbit Apr 05, 2024 am 08:06 AM

Anda boleh membuka fail HTML pada telefon anda dengan menggunakan penyemak imbas lalai anda dan memasukkan laluan fail atau URL dalam bar alamat. Menggunakan pengurus fail anda, navigasi ke lokasi fail dan klik fail HTML. Muat turun editor teks, navigasi ke lokasi fail dan klik dua kali pada fail HTML. Muat turun HTML Viewer dari App Store, navigasi ke lokasi fail dan ketik pada fail HTML.

See all articles