第 30 章 Emmet プラグインの使用_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

第 30 章 Emmet プラグインの使用_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:19 AM

学習ポイント:

1. インストール方法

2. カスタマイズ!

を生成する

を素早く生成する

講師: Li Yanhui

この章では主に、Sublime Text3 用の HTML5 コードプロンプトプラグインについて説明します: Emmet よりもはるかに強力です。ネイティブのもの。

1 つ。インストール方法

Emmet プラグインのインストールには、通常、1. コマンドによるインストール 2. ダウンロードしてオフラインでインストールする 2 つの方法が採用されます。ここで直接使用するのは、ダウンロードとオフラインインストールの方法です。具体的な手順:

1. ダウンロードした Emmet プラグインパッケージを解凍します

2. Emmet フォルダーと PyV8 フォルダーを左下に表示します。インストール後、Sublime Text3 を再起動します。 4. エディターで英語モードで「!」を入力し、Ctrl+E を押すと、HTML5 コードライブラリが表示され、インストールは成功します。

注: インストールが失敗したり、その他のエラーが発生した場合は、Baidu を使用して他のインストール方法を選択するか、インストールエラーの問題を解決してください。

Ⅱ。カスタマイズ！ Generate

We 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>

すべてのコード生成ではコードを生成するために Tab キーが必要ですが、これについては後で説明しません。

//タグコードを素早く生成 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

を生成します

<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 /チートシート/

声明

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

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 中国語版

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

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。