第 30 章 Emmet プラグインの使用_html/css_WEB-ITnose
学習ポイント:
1. インストール方法
2. カスタマイズ!
を生成する3.
を素早く生成する
講師: Li Yanhui
この章では主に、Sublime Text3 用の HTML5 コード プロンプト プラグインについて説明します: Emmet よりもはるかに強力です。ネイティブのもの。
1 つ。インストール方法
Emmet プラグインのインストールには、通常、1. コマンドによるインストール 2. ダウンロードしてオフラインでインストールする 2 つの方法が採用されます。ここで直接使用するのは、ダウンロードとオフライン インストールの方法です。具体的な手順:
1. ダウンロードした Emmet プラグイン パッケージを解凍します
2. Emmet フォルダーと PyV8 フォルダーを左下に表示します。インストール後、Sublime Text3 を再起動します。 4. エディターで英語モードで「!」を入力し、Ctrl+E を押すと、HTML5 コード ライブラリが表示され、インストールは成功します。
注: インストールが失敗したり、その他のエラーが発生した場合は、Baidu を使用して他のインストール方法を選択するか、インストール エラーの問題を解決してください。
Ⅱ。カスタマイズ！ GenerateWe enter!, then ctrl+e, the 次のコードがデフォルトで表示されます: //Default code
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body></html>
ここには、前に生成したコードと異なる 2 つの場所があります。 : doctype は大文字ではありません。2 番目: lang は en です。実際、この2つが変わらなければあまり関係ありませんが、強迫性障害の人にとっては不快に感じるかもしれません。具体的な変更方法は次のとおりです:
1. まず、プログラム パッケージのパッケージに入ります。
2. 次に、emmet フォルダーに入り、snippets.json ファイルを見つけます。最後に、このファイルを開き、対応する場所を見つけて変更します。
三．高速生成
Emmet は、HTML および CSS コードの非常に豊富な高速生成機能を提供しており、コードの高速生成を使用することで、開発速度が大幅に向上します。ただし、Emmet が提供する生成方法は二次的な学習が必要であり、最初は手入力ほど速くない可能性があります。したがって、学習と調整にはある程度の時間がかかります。
//HTML5 コード構造をすばやく生成します
! + (ctrl + e または tab キー) または html:5 + tab キー <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body></html>
//タグコードを素早く生成 a
<a href=""></a>
//対応する属性値を素早く生成 a:link, a:mail
<a href="http://"></a> <br /><a href="mailto:"></a>
//タグ内に値 a{hyperlink} を生成
<a href="">超链接</a>
//CSSリンクリンクリンクを生成
<link rel="stylesheet" href="">
//フォームコントロール入力を生成、input:hidden
<input type="text"><input type="hidden" name="">
//ラベルのセットを生成、ol+、dl+、table+サブラベル付き
re re // ネイティブラベルを生成します nav & gt; li
// 隣接する兄弟タグ DIV+P+H1
を生成します
*5
<ul> <li></li></ul><ol> <li></li></ol><dl> <dt></dt> <dd></dd></dl><table> <tr> <td></td> </tr></table>
//ID div#header でタグを作成する
<nav> <ul> <li></li> </ul></nav>
//クラス div.head でタグを作成えー、div.header.sidebar
うわー
上記は HTML コード生成機能の一部です。CSS のクイック生成機能を見てみましょう:
//Generateposition:relative pos
pos を入力すると、position:relative CSS スタイルが表示されます。相対値は選択された状態であり、属性値を変更するときに役立ちます。
しかし、Sublime を Emmet プラグインの CSS プロンプトと組み合わせて使用することは非常に柔軟であり、厳密な pos の入力を必要としないことがわかりました。次の入力は、対応する値を取得できます:
po = 位置: 相対
po または po より大きい値を入力する限り、位置: 相対を取得できます。もちろん、単に p と入力した場合、優先順位を考慮して、表示されるのはパディング: | です。
入力を間違えた場合は、次のようにエラーを自動的に修正します:
pod = Position:relative
先頭の絶対属性値を取得したい場合は、直接入力してください:
poa =position:absolute;
もちろん、戸別訪問の標準的な書き方はこうです:
pos:a =position:Absolute;
背景の属性を入力したい場合は、 bg を直接使用してください:
bg = background : |;
bg+ を使用して背景属性の完全な形式を展開します: bg+ = background: #fff url() 0 0 no-repeat;
bg:n を使用して設定します背景属性値を none に設定します: bg:n = background: none;
注: HTML および CSS の他のほとんどのコード生成ソリューションについては、次の URL を参照してください:
http://docs.emmet.io /チートシート/
ホット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）
ホットトピック
7318
9
1625
14
1349
46
1261
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆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＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
