Explication détaillée de l'utilisation du plug-in Sublime Text Emmet-tutoriel HTML-php.cn

Installation Veuillez lire l'article précédent Sublime Text—Installation Utilisez-le avec les touches de raccourci intégrées de sublime. L'écriture de code HTML est si rapide.

Les éléments suivants sont couramment utilisés. Pour des informations complètes, veuillez vous référer à la documentation officielle d'emmet.

Générer des balises

1. Générez rapidement la structure du document

! ou html:5, générez rapidement la structure HTML5 (Vous devez appuyer à nouveau sur la touche de tabulation)

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

Copier après la connexion

html:xt Générer le type de transition HTML4
html:4s Générer du HTML4 strict

2. Générer un élément avec l'identifiant

tag # ID name, tel que : p#header

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

Copier après la connexion

3. Générez la balise de l'élément avec

class

. Nom de la classe, tel que : p.title

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

Copier après la connexion

4. Générez les éléments descendants : >

Par exemple : nav>ul>li

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

Copier après la connexion

5. Générer des éléments frères et sœurs : +

Par exemple : p+p+p

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

Copier après la connexion

6. : ^

Par exemple : p^p

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

Copier après la connexion

7 Générer plusieurs éléments à plusieurs reprises : *
Par exemple : `ul>li*5`

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

Copier après la connexion

8. . Générez à partir de l'attribut Define : [attr]

tel que : p[value=1]

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

Copier après la connexion

9. Générez du contenu avec du texte : {}

tels que :

a{Click me}

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

Copier après la connexion

10. Ajouter un numéro : $

À partir de 1 : ajouter $

Par exemple :

p.item${$$}*3

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

Copier après la connexion

Ordre inversé : $ suivi de @-

tel que :

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

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

Copier après la connexion

Précisez le numéro de série : Vous pouvez utiliser @N

tel que :

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

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

Copier après la connexion

11.

Groupe : ( )

Par exemple :

(ul>ol)*3

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

Copier après la connexion

cas global

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>

Copier après la connexion

est généré en CSS

Il existe de nombreux styles CSS, et naturellement il existe de nombreuses abréviations. Il suffit de lister celles couramment utilisées et de tirer des conclusions.

L'abréviation CSS est mise en correspondance à l'aide d'une recherche floue, telle que ov:h == ov-h == ovh == oh.

w10 <a href="http://www.php.cn/wiki/835.html" target="_blank">largeur : 10px ; </a> w10p <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 10px; w10e width: 10%; w10x width: 10em;width: 10xe;
h10 <a href="http://www.php.cn/wiki/836%20.html" target="_blank">hauteur : 10px;</a><a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>: 10px;
pour <a href="http://www.php.cn%20/wiki/902.html" target="_blank">position : relative;</a> poa <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative;position: absolute;
fll <a href="http%20://www.php.cn/wiki/919.html" target="_blank">float : gauche;</a> fr float : <a href="http://www.php%20.cn/wiki/905.html" target="_blank">droit<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>: left;;float: <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>;
dt <a href="http://www%20.php.cn/wiki/927.html" target="_blank">display: table;</a> db <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: table; dib display: block;display: inline-block;
ovy overflow-y
: caché ;<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 : les deux ;</a><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">marge-haut : ;</a> mb <a href="http://www.php.cn/wiki/935.html" target="_blank">marge-bas<code><a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>: ; : ;<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

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

首页
简介
动态

Copier après la connexion

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

Copier après la connexion

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

1首页
2简介
3动态

Copier après la connexion

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

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

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

Copier après la connexion

删除标签：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!

Copier après la connexion

Lorem ipsum dolor sit amet.

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Will R.E.P.O. Vous avez un jeu croisé?

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7549

Tutoriel CakePHP

1382

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Que dois-je utiliser pour ouvrir le HTML ? Apr 21, 2024 am 11:33 AM

Pour ouvrir des fichiers HTML, vous devez utiliser un navigateur tel que Google Chrome ou Mozilla Firefox. Pour ouvrir un fichier HTML à l'aide d'un navigateur, procédez comme suit : 1. Ouvrez votre navigateur. 2. Faites glisser et déposez le fichier HTML dans la fenêtre du navigateur, ou cliquez sur le menu Fichier et sélectionnez Ouvrir.

Quel logiciel est bon pour la programmation Python ? Apr 20, 2024 pm 08:11 PM

IDLE et Jupyter Notebook sont recommandés pour les débutants, et PyCharm, Visual Studio Code et Sublime Text sont recommandés pour les étudiants intermédiaires/avancés. Les IDE cloud Google Colab et Binder fournissent des environnements Python interactifs. D'autres recommandations incluent Anaconda Navigator, Spyder et Wing IDE. Les critères de sélection comprennent le niveau de compétence, la taille du projet et les préférences personnelles.

Comment ouvrir un fichier local en HTML Apr 22, 2024 am 09:39 AM

HTML peut être utilisé pour ouvrir des fichiers locaux comme suit : Créez un fichier .html et importez la bibliothèque jQuery. Créez un champ de saisie qui permet à l'utilisateur de sélectionner un fichier. Écoutez l'événement de sélection de fichier et utilisez un objet FileReader() pour lire le contenu du fichier. Affichez le contenu du fichier lu sur la page Web.

Comment créer un fichier py en python May 05, 2024 pm 07:57 PM

Étapes pour créer un fichier .py en Python : ouvrez un éditeur de texte (tel que Notepad, TextMate ou Sublime Text). Créez un nouveau fichier et entrez le code Python en faisant attention à l'indentation et à la syntaxe. Lors de l'enregistrement du fichier, utilisez une extension .py (par exemple, my_script.py).

Comment utiliser le code copié en python Apr 20, 2024 pm 06:26 PM

Voici les étapes pour utiliser le code copié en Python : Copiez et collez le code dans un éditeur de texte. Créez un fichier Python. Exécutez le code à partir de la ligne de commande. Comprenez à quoi sert le code et comment il fonctionne. Modifiez le code si nécessaire et réexécutez-le.

Que puis-je utiliser pour ouvrir du HTML ? Apr 21, 2024 am 11:36 AM

Les fichiers HTML peuvent être ouverts à l'aide d'un navigateur (tel que Chrome, Firefox, Edge, Safari, Opera) : recherchez le fichier HTML (extension .html ou .htm) faites un clic droit/appuyez longuement sur le fichier ; ; sélectionnez le fichier que vous souhaitez utiliser le navigateur.

Créer et ouvrir des documents HTML vides Apr 09, 2024 pm 12:06 PM

Créez un document HTML : utilisez un éditeur de texte pour saisir la structure HTML et enregistrez-la sous forme de fichier .html. Ouvrez un document HTML : double-cliquez sur le fichier ou utilisez l'option Fichier > Ouvrir de votre navigateur. Cas pratique : Créez un nouveau fichier HTML, ajoutez un titre, une feuille de style et un contenu, puis enregistrez-le sous forme de fichier .html.

Quel logiciel d'édition HTML est facile à utiliser ? Apr 17, 2024 am 04:54 AM

Pour résumer, les éditeurs HTML suivants sont très appréciés : Visual Studio Code : multiplateforme, riche en fonctionnalités, gratuit et open source. Sublime Text : logiciel payant hautes performances, hautement personnalisable. Atom : multiplateforme, évolutif, open source et gratuit. Brackets : dédiés au développement front-end, interface intuitive, open source et gratuit. Notepad++ : léger, rapide, puissant, open source et gratuit. Lorsque vous choisissez un éditeur HTML, tenez compte de facteurs tels que la compatibilité de la plateforme, la fonctionnalité, l'extensibilité, le prix et la convivialité.

See all articles

Explication détaillée de l'utilisation du plug-in Sublime Text Emmet

Résumé :

Générer des balises

1. Générez rapidement la structure du document

2. Générer un élément avec l'identifiant

3. Générez la balise de l'élément avec

4. Générez les éléments descendants : >

5. Générer des éléments frères et sœurs : +

6. : ^

7 Générer plusieurs éléments à plusieurs reprises : *Par exemple : ul>li*5

8. . Générez à partir de l'attribut Define : [attr]

9. Générez du contenu avec du texte : {}

Groupe : ( )

cas global

快捷键

生成测试文本

Outils d'IA chauds

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Article chaud

Outils chauds

Bloc-notes++7.3.1

SublimeText3 version chinoise

Envoyer Studio 13.0.1

Dreamweaver CS6

SublimeText3 version Mac

Sujets chauds

7 Générer plusieurs éléments à plusieurs reprises : *
Par exemple : `ul>li*5`