cari
Rumahhujung hadapan webhtml 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>

  • html:xt 生成 HTML4 过渡型

  • html:4s 生成 HTML4 严格型

2.生成带 id 的元素

标签 # ID名，如：p#header

<p id="header"></p>

3.生成带 class 的元素

标签 . 类名，如：p.title

<p class="title"></p>

4.生成后代元素：>

如：nav>ul>li

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

5.生成兄弟元素：+

如：p+p+p

<p></p>
<p></p>
<p></p>

6.生成上级元素：^

如：p^p

<p></p>
<p></p>

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

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

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

如：p[value=1]

<p value="1"></p>

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

如：a{Click me}

<a href="">Click me</a>

10.加编号：$

  • 从1开始：加$

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

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>

  • 倒序： $ 后面增加 @-

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

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>

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

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

<p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p>

11.分组：()

如：(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>

来个综合案例

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>

生成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

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

首页
简介
动态

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

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

1首页
2简介
3动态

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

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

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

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

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

Kenyataan
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
Artikel Berkaitan
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebMasa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webHTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLDari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahHTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

See all articles

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)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Penyelesaian Riddle Seashell
2 minggu yang laluByDDD
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Tunjukkan Lagi

Alat panas

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7530
15
Tutorial CakePHP
1379
52
Apakah format nama akaun stim
82
11
kunci pengaktifan win11 kekal
54
19
Sambungan NYT menunjukkan dan jawapan
21
76
Tunjukkan Lagi