コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
要約:
タグを生成する
1. ドキュメント構造を迅速に生成します
2.生成带 id 的元素
class 的元素" >3.生成带 class 的元素
4.生成后代元素：>
5.生成兄弟元素：+
6.生成上级元素：^
属性：[attr]" >8.生成带自定义属性：[attr]
9.生成带文本内容：{}
10.加编号：$
分组：()" >11.分组：()
生成css
快捷键
生成测试文本
ホームページ ウェブフロントエンド htmlチュートリアル Sublime TextプラグインEmmetの使い方を詳しく解説

Sublime TextプラグインEmmetの使い方を詳しく解説

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

要約:

インストール前回の記事Sublime Text-インストールを読んで、Sublime独自のショートカットキーと組み合わせて使用​​し、HTMLを素早く書いてください。

以下は一般的に使用されます。完全な情報については、emmet の公式ドキュメントを参照してください。

タグを生成する

1. ドキュメント構造を迅速に生成します

<!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>: ; 構造 (もう一度 Tab キーを押す必要があります)

首页
简介
动态
ログイン後にコピー
ログイン後にコピー
🎜🎜🎜html:xt HTML4 遷移型を生成します🎜🎜🎜html:4s HTML4 厳密型を生成します🎜🎜2. id🎜🎜tag # ID 名を持つ要素を生成します例: p#header🎜
<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>
ログイン後にコピー
ログイン後にコピー
🎜3. クラスを使用して要素を生成します🎜🎜 🎜 タグ: p.title🎜
1首页
2简介
3动态
ログイン後にコピー
ログイン後にコピー
🎜 などのクラス名: nav>ul>li🎜
<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />
ログイン後にコピー
ログイン後にコピー
🎜 などの子孫要素を生成します。 5. 兄弟要素の生成: +🎜🎜 など: p+p+p🎜
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!
ログイン後にコピー
ログイン後にコピー
🎜 6. 上位要素の生成: ^🎜🎜 など: p^p🎜 
Lorem ipsum dolor sit amet.
ログイン後にコピー
ログイン後にコピー
🎜7. 複数の要素を繰り返し生成します: *
例: ul>li*5🎜rrreee🎜8. カスタマイズされた 属性🎜: [attr]🎜🎜 例: p[value=1]🎜rrreee🎜9. テキスト コンテンツの生成: {}🎜🎜例: a{Click me}🎜rrreee🎜10。番号を追加します: $🎜🎜🎜🎜 1 から開始: $🎜🎜 例: p.item${ $$}*3🎜rrreee🎜🎜🎜 逆の順序: $ の後に @-🎜 が続く🎜 例: p.item$@-{ $$@-}*3 🎜rrreee🎜🎜🎜シリアル番号を指定します。@N🎜を使用できます。🎜例: p.item$@4{$ $@4}*3🎜 rrreee🎜11.グループ🎜: ()🎜🎜そのような例: (ul>ol)*3 🎜rrreee🎜包括的な内容を見てみましょうcase🎜🎜🎜table#tab[value= 1].a>tr*3>(td{$$}>span)*3🎜rrreee🎜css生成🎜🎜css スタイルはたくさんあります, そして当然多くの略語がありますが、よく使われる略語を列挙して推測してみましょう。 🎜🎜CSS の略語は、ov:h == ov-h == ovh == oh などのあいまい検索を使用して照合されます。 🎜🎜🎜🎜w10 <a href="http://www.php.cn/wiki/835.html" target="_blank">width🎜: 10px;</a> w10p width: 10%; w10e width: 10em; w10x width: 10xe;🎜🎜🎜h10 <a href="http:/%20/www.php.cn/wiki/836.html" target="_blank">高さ🎜: 10px;</a>🎜🎜🎜por <a href="http://www.%20php.cn/wiki/902.html" target="_blank">位置🎜: 相対;</a> poa 位置: 絶対;🎜🎜🎜fll <a href="http://www.php.cn/wiki/919.html" target="_blank">float🎜: left;</a> fr float: <a href="http://www%20.php.cn/wiki/905.html" target="_blank">正しいです🎜;</a>🎜🎜🎜dt <a href="http://www.php.cn/%20wiki/927.html" target="_blank">display🎜: table;</a> db display: block; dib display: inline-block;🎜 li>🎜🎜ovy <a href="http://www.php.cn/wiki/926.html" target="_blank">overflow-y🎜: hidden;</a>🎜🎜🎜cb <a href="http://www.php.cn/wiki/917.html" target="_blank">クリア🎜: 両方;</a>🎜🎜🎜 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.
    ログイン後にコピー
    ログイン後にコピー

    以上がSublime TextプラグインEmmetの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    もっと見る

    人気の記事

    R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最高のグラフィック設定
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    アサシンのクリードシャドウズ：シーシェルリドルソリューション
    3週間前 By DDD
    Windows11 KB5054979の新しいものと更新の問題を修正する方法
    2週間前 By DDD
    Will R.E.P.O.クロスプレイがありますか？
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    もっと見る

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト（SublimeText3）

    もっと見る

    ホットトピック

    Gmailメールのログイン入り口はどこですか？
    7549
    15
    CakePHP チュートリアル
    1382
    52
    Steamのアカウント名の形式は何ですか
    83
    11
    Win11 Activation Key Permanent
    58
    19
    NYTの接続はヒントと回答です
    22
    90
    もっと見る
    Related knowledge
    htmlを開くには何を使用すればよいですか? htmlを開くには何を使用すればよいですか? Apr 21, 2024 am 11:33 AM

    HTML ファイルを開くには、Google Chrome や Mozilla Firefox などのブラウザを使用する必要があります。ブラウザを使用して HTML ファイルを開くには、次の手順に従います。 1. ブラウザを開きます。 2. HTML ファイルをブラウザ ウィンドウにドラッグ アンド ドロップするか、[ファイル] メニューをクリックして [開く] を選択します。

    Pythonプログラミングに適したソフトウェアは何ですか? Pythonプログラミングに適したソフトウェアは何ですか? Apr 20, 2024 pm 08:11 PM

    初心者には IDLE と Jupyter Notebook が、中・上級者には PyCharm、Visual Studio Code、Sublime Text が推奨されます。クラウド IDE Google Colab と Binder は、インタラクティブな Python 環境を提供します。その他の推奨事項には、Anaconda Navigator、Spyder、Wing IDE などがあります。選択基準には、スキル レベル、プロジェクトの規模、個人的な好みが含まれます。

    ローカルファイルをHTMLで開く方法 ローカルファイルをHTMLで開く方法 Apr 22, 2024 am 09:39 AM

    次のように、HTML を使用してローカル ファイルを開くことができます。 .html ファイルを作成し、jQuery ライブラリをインポートします。ユーザーがファイルを選択できるようにする入力フィールドを作成します。ファイル選択イベントをリッスンし、FileReader() オブジェクトを使用してファイルの内容を読み取ります。読み込んだファイルの内容をWebページ上に表示します。

    Pythonでpyファイルを作成する方法 Pythonでpyファイルを作成する方法 May 05, 2024 pm 07:57 PM

    Python で .py ファイルを作成する手順: テキスト エディター (メモ帳、TextMate、Sublime Text など) を開きます。新しいファイルを作成し、インデントと構文に注意して Python コードを入力します。ファイルを保存するときは、.py 拡張子を使用します (例: my_script.py)。

    コピーしたコードをPythonで使用する方法 コピーしたコードをPythonで使用する方法 Apr 20, 2024 pm 06:26 PM

    コピーしたコードを Python で使用する手順は次のとおりです。 コードをコピーしてテキスト エディターに貼り付けます。 Python ファイルを作成します。コマンドラインからコードを実行します。コードの目的とその動作方法を理解します。必要に応じてコードを変更し、再実行します。

    htmlを開くには何を使えばよいでしょうか? htmlを開くには何を使えばよいでしょうか? Apr 21, 2024 am 11:36 AM

    HTML ファイルはブラウザ (Chrome、Firefox、Edge、Safari、Opera など) を使用して開くことができます。HTML ファイル (.html または .htm 拡張子) を見つけて、ファイルを右クリックまたは長押しして「開く」を選択します。 ; ブラウザで使用するファイルを選択します。

    空の HTML ドキュメントを作成して開く 空の HTML ドキュメントを作成して開く Apr 09, 2024 pm 12:06 PM

    HTML ドキュメントを作成する: テキスト エディターを使用して HTML 構造を入力し、.html ファイルとして保存します。 HTML ドキュメントを開く: ファイルをダブルクリックするか、ブラウザで [ファイル] > [開く] オプションを使用します。実際のケース: 新しい HTML ファイルを作成し、タイトル、スタイル シート、コンテンツを追加して、.html ファイルとして保存します。

    どのHTML編集ソフトが使いやすいでしょうか？ どのHTML編集ソフトが使いやすいでしょうか？ Apr 17, 2024 am 04:54 AM

    要約すると、次の HTML エディターが高く評価されています。 Visual Studio Code: クロスプラットフォーム、機能豊富、無料のオープン ソース。 Sublime Text: 高性能、高度にカスタマイズ可能な有料ソフトウェア。 Atom: クロスプラットフォーム、スケーラブル、オープンソース、無料。ブラケット: フロントエンド開発専用、直感的なインターフェイス、オープンソース、無料。 Notepad++: 軽量、高速、強力、オープンソース、無料。 HTML エディタを選択するときは、プラットフォームの互換性、機能、拡張性、価格、使いやすさなどの要素を考慮してください。

    See all articles