Emmet を使用して HTML_html/css_WEB-ITnose を生成するための詳細な構文
HTML ドキュメントの初期構造を生成します
HTML ドキュメントの初期構造には、doctype、html、head、body、meta、およびその他のコンテンツが含まれます。 「!」を入力するだけで、HTML5 標準ドキュメントの初期構造が生成されます。感嘆符 (もちろん英語の記号) を入力して、次の構造になっていることがわかります。生成:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body></body></html>
これは HTML5 の標準構造であり、デフォルトの HTML 構造です。 HTML4 の移行構造を生成したい場合は、コマンド html:xt を入力して次の構造を生成します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title></head><body></body></html>
Emmet が自動的に doctype を完成させます。 この機能はどうでしょうか?一般的に使用される HTML 構造命令の簡単な要約:
html:5 or! HTML5 構造を生成する html:xt HTML4 トランジショナル html:4s を生成するID とクラスを含む HTML タグを生成する
Emmet の構文は CSS 構文に似ています。 ID aaa の div タグを生成するには、次の命令を記述するだけです:
#aaa
Emmet タグ名を指定しない場合、デフォルトで div タグが生成されます。クラス bbb で Span タグを記述する場合、次の命令を記述する必要があります:
span.bbb
その後、対応する構造が生成されます。同様に、ccc の ID と ddd のクラスを持つ ul タグを書きたい場合は、次のように書くことができます:
ul#ccc.ddd
とても簡単ですよね? ID とクラスを手動で記述するよりもはるかに便利です
子孫を生成: >
不等号は、後で生成されるコンテンツが現在のタグの子孫であることを示します。たとえば、順序なしリストを生成する必要があり、それがクラス aaa の div でラップされている場合、次のコマンドを使用できます:
div.aaa>ul>li
次の構造を生成できます:
<div class="aaa"> <ul> <li></li> </ul></div>
兄弟を生成: +
The上記は下位要素を生成するためのものです。水平要素を作成するには、+ 記号を使用する必要があります。たとえば、次のコマンド:
div+p+bq
は、次の HTML 構造を生成できます:
$cursor$
<p></p><blockquote></blockquote>
上位要素を生成します: ^
上部 (Climb-up) 要素は何を意味しますか?従属要素を生成する記号「>」を使用していると前述しましたが、div>ul>liコマンドを使用して書き続けると、その後の内容はli以下になります。 ulと同じレベルのspanタグを書きたい場合は、まず「^」を使ってレベルを上げる必要があります。例:
div>ul>li^span
は次の構造を生成します:
<div> <ul> <li></li> </ul> <span></span></div>
div に対して水平方向の要素を生成したい場合は、別のレベルに移動して追加の "^" 記号を使用します:
div>ul>li^^span
複数の要素を生成するには繰り返します。コピー: *
特に順序なしリストの場合、ul の下に複数の li が存在する必要があり、通常は多数の li タグが生成されます。次に、li の後に直接数字を追加します。
ul>li*5
これにより、5 つの項目の順序なしリストが直接生成されます。他の構造のコピーを複数生成する場合も、方法は同様です。
グループ化を生成します: ()
括弧を使用してグループ化すると、生成される構造、特に階層関係がより明確になります。例:
div>(header>ul>li*2>a)+footer>p
このようにして、階層関係と並列性が明確になります。関係が確認でき、次の構造を生成できます:
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer></div>
さらに、グループ化を上記の「*」記号と簡単に組み合わせて繰り返し構造を生成することもできます:
(div>dl>(dt+dd)*3)+footer>p
構造の生成:
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl></div><footer> <p></p></footer>
カスタムの生成属性: [attr]
a タグには、多くの場合、href 属性と、href を「http://blog.wpjam.com」、タイトルを「」とする a タグを生成する場合は、title 属性を付ける必要があります。煮魚が大好きです」という場合は、次のように書くことができます:
a[href="http://blog.wpjam.com" title="我爱水煮鱼"]
他のタグと属性も同様です。
生成されたコンテンツに番号を付けます: $
たとえば、順序なしリストで、クラス属性値 item1 を 5 li に追加し、その後 1 から 5 まで順番に増加させたい場合は、$ 記号を使用する必要があります。
ul>li.item$*5
生成方法は以下の通りです。
$ は 1 桁の場合は 1 から始まります。複数ある場合は0から始めます。 3 桁のシリアル番号を生成したい場合は、$ を 3 つ書かなければなりません:
ul>li.item$$$*5
出力:
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li></ul>
この方法でシリアル番号を単調に生成できますか?強力な Emmet の場合、これは絶対に起こりません。 $ の後に @- を追加して、逆の順序を実現することもできます:
ul>li.item$@-*5
次の構造を生成します:
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li></ul>
同様に、@N を使用して開始シーケンス番号を指定することもできます。
ul>li.item$@3*5
このように、ソートは 3 から開始され、次のコードが生成されます:
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li></ul>
上記の逆順出力では、次のように書くことができます:
ul>li.item$@-3*5
生成されるのは、base を使用した逆順です3:
テキスト コンテンツを生成する: { }
上記では HTML タグを生成する方法を説明しましたが、その中のコンテンツはどうなるのでしょうか?もちろん、次のように生成することもできます:
a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼}これにより、I Love Boiled Fish へのハイパーリンクが生成されます。コンテンツを生成するときは、前後のシンボリック関係に特に注意してください。a>{Click me} と a{Click me} によって生成される構造は同じですが、他のコンテンツを追加する場合は必ずしも当てはまりません。
すごいこれにより、まったく異なる構造が生成されます。これらの細かい点に注意してください。
不要有空格
在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句：
(header > ul.nav > li*5) + footer
而去掉空格之后，就可以正常执行生成结构了
转自我爱水煮鱼博客
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7530
15
1378
52
82
11
21
76
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
