検索

ホームページ  >  記事  >  ウェブフロントエンド  >  【02】emmet seriesのHTML構文_html/css_WEB-ITnose

【02】emmet seriesのHTML構文_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:34:081276ブラウズ

初始化 ：快速编写HTML代码 


HTML文档需要包含一些固定的标签，比如、、等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： 



  • html:5 或!：用于HTML5文档类型
  • html:xt：用于XHTML过渡文档类型
  • html:4s：用于HTML4严格文档类型

    •  

    子元素嵌套 “>”

     

    1. div>ul>li

    输出：

     

    兄弟元素 “+”

    1. div+p+bq

    输出：

     

    向上一级:“^”

     

    1. div+div>p>span+em

    输出：

     

    用了"^"后

    1. div+div>p>span+em^bq

    输出：

     

    多用几个"^"

     

    1. div+div>p>span+em^^^bq

    输出：

    •  

     

    乘法：“*”

     

    * 运算符可以定义多少次元素应该被输出：

    1. ul>li*5

     

    输出：

     

    分组：“（）”

     

    1. div>(header>ul>li*2>a)+footer>p

    输出：

     

    或是

    1. (div>dl>(dt+dd)*3)+footer>p

    输出：

     

      结合CSS的HTML

     

    ID和Class

     

    1. div#header+div.page+div#footer.class1.class2.class3

    输出：

     

     

     隐式标签 


    声明一个带类的标签，只需输入div.item，就会生成
    。 

    在过去版本中，可以省略掉div，即输入.item即可生成
    。 .item のみを入力すると、Emmet は親タグに基づいて判断します。たとえば、
    • item3 から item7
    • ul> li.item$@3*5

    出力:

    4. item7 から item3

      1. ul>li.item$@-3*5

      出所：

      文本：“{}”

      1. a {クリックしてください}

      出:

      1. クリックしてください

      2. クリックここ
      5. ここをクリックここ

      さらに詳しく

      1. p>{続行するには、}+a{ここ}+{ をクリックしてください}
      2. ...プロデュース

      4. クリックここ続ける

      1. p{クリック}+a{ここ}+{ 続けてください}

      出題：

      1. クリック< /p>

      2. こちら続行します

      注意: 当{}作として单個別の操作符を使用する場合、a{click}和a>{click} は同じ标签を生成しますが、複数の操作を使用するか、其它操作符時将会生成異なる标签：

      2. click ここをクリック
      5. ここをクリック

      生成Lorem ipsum文本

      デモ

      Lorem ipsum指一篇常用排版设専門分野のラプチン文章、主な目的は文章または文字ですEmmet を使用すると、lorem または lipsum を入力するだけで、これらの文字を即座に生成できます。 また、lorem10 などの文字の数を指定して、次のように生成することもできます。

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.Libero delectus.

      如果必生成标题呢，只必要减少单词的量，比如：lorem4将生成下面的标题：

      Lorem ipsum dolor sit.

      无效的写法：

      当你熟悉了emmet的缩写语法，你可能需要使用一些格式（比如加空格），使您的缩写更具可读性。 例如：

       

      1. (header > ul.nav > li*5)+ footer

      But it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.（但是这不会有用，因为空格是表示emmet停止解析的一个停止标志）

       

      按Tab键生成HTML/CSS代码时需要光标停靠在Emmet代码的后面，不能有空格，Emmet代码之前也不能有空格，不然只会生成一个tab制表符。如果光标在Emmet代码内部任意位置，按Tab键只会生成光标前面的代码，而后面的Emmet代码还是原样，跟随在生成的HTML/CSS代码后面。

       

      技巧篇

      1、扩展缩写（Wrap with Abbreviation）Demo

          一个非常强大的功能，在当前HTML代码的基础上添加缩写，将向外扩展代码，比如这段代码，光标在p标签上或者外部：

      2. Hello world

       

      再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

      1. .wrapper>h1{Title}+.content

       

      将得到：

      3. Title

      5. Hello world

       

           2、把文本转换成HTML标签

          当客户给我们提供了一个文本文档，把标题复制过来，比如：

      1. 首页
      2. 公司简介
      3. 公司动态
      4. 关于我们
      5. 联系我们

       

      转换成导航，选择文本，再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

      1. nav>ul.nav>li.nav-item$*>a

       

      将得到：

       

      注意，导航中有5个菜单，这里不需要在li标签后面使用*5，只需使用单独的操作符*就可以。

      3、删除文本中的列表标记

      word文档中的文本很多都是列表块，比如：

      1. 1.首页
      2. 2.公司简介
      3. 3.公司动态
      4. 4.关于我们
      5. 5.联系我们

       

       

      在编写HTML代码又不需要，Emmet让我们可以删除文本中的标记，在上一功能的缩写的基础代码的后面添加|t就可以删除文本中的标记:

      1. nav>ul.nav>li.nav-item$*>a|t

       

      最终得到的HTML代码与上面的效果是一样的，你可以试试！

      4、控制文本的输出位置

      默认情况下，用Emmet把文本转换为HTML代码时，使用$#操作符Emmet可以将文本输出到多个元素中，而$#平上Emmet缩写语法中的一部分，所以得将$#放在属性值[]或文本{}操作符中。

      以上面的导航文本为例，在Enter Wrap Abbreviation中输入：

      1. ul>li[title=$#]*>{$#}+img[alt=$#]

       

      将得到：

        • 首页首页
        • 公司简介公司简介
        • 公司动态公司动态
        • 关于我们关于我们
        • 联系我们联系我们

       

      5、分解与添加标签（Split/Join Tag）Demo

      光标在标签上时，按ctrl+j，可以将标签：

      は

      タグに変換され、その逆も同様です。 div内に内容がある場合、この関数を使用すると前のタグに変換されてしまい、その中の内容も削除されてしまうので、使用する際にも注意が必要です。

      6. マッチ タグ ペアのデモ

      HTML コードを作成するときは、開始タグから終了タグまでのコードを選択する必要がありますが、そうではありません。しかし、Emmet は選択肢を拡張したり削減したりするための、より便利で高速な機能を提供します。

      マウスカーソルでショートカットキーctrl+dを押すと、カーソルのラベル範囲内のすべてのコンテンツが選択され、複数回実行すると選択範囲が拡大されます。拡大すると縮小します。 ショートカットキー: crtl+shift+d を複数回実行すると選択範囲が狭くなります。

      7. マッチング ペアのデモに移動します

      開始タグと終了タグの間を移動します。ショートカット キー: ctrl+t。大きな HTML ファイルを作成する場合、一致する終了タグが常に見つかります。Emmet が提供するこの機能を使用すると、開始タグと終了タグの間を簡単に移動できます。

      8. 編集ポイントのデモに移動します

      この関数は、title、a、li、href、src などのタグ、空の属性、空の記事タグの間を上下に移動するのに適しています。コンテンツのタイトルに入力します。前と次の編集ポイントのショートカット キーは、それぞれ ctrl+alt+left と ctrl+alt+right です。

      9. コメントの追加と削除 (Toggle Comment) デモ

      以前は、コメントを追加するときに、一度に 1 つの記号を入力する必要があり、少し難しくて面倒でした。 Emmet が提供するコメント切り替え機能は、ctrl+/ ショートカット キーを使用するだけで済みますが、コメントの範囲は行単位であり、HTML コードと CSS コードの両方で使用できます。

      10. タグの削除デモ

      一部の大規模な HTML コードでは、Emmet タグの削除機能を使用して、重複する開始タグと終了タグをすばやく削除します:

      ctrl。 +k。

      11. 画像サイズの更新デモ

      画像のタイトルを HTML コードで記述し、背景画像を CSS スタイルで記述する場合、画像の幅と高さを常に知る必要があることがよくあります。コンピュータでサイズを確認するのは時間の無駄であり、非常に不快です。 Emmet はこの機能を提供します。img または background-image タグにカーソルを移動して

      ctrl+shift+u を押すだけで、Emmet は自動的に画像のサイズを読み取って追加します。

      前提として、参照される画像アドレスが正しく存在しており、パスに中国語の文字を含めることはできません。英語の文字でなければなりません。そうでない場合は、キーボードが壊れていても応答がありません。

      12. 数値の増分/減分 (数値の増分/減分) デモ

      数値の増分/減分は、0.1、1、10 の 3 つの値で実行できます。ショートカット キーは:

      ctrl+up /down 、alt+上/下とctrl+alt+上/下。

      13. 数式の評価デモ

      Emmet を使用すると、HTML および CSS ファイルで単純な数値演算を実行でき、Ctrl+Shift+Y を押すと、最終的な結果が得られます。

      14. 画像をデータにエンコード/デコード:URL モード (画像をデータにエンコード/デコード:URL)

      デモ

      data:URL モードは、画像データを標準の ASCII 文字に直接変換するために使用します。画像をサーバーからロードするのではなく、ローカルで描画することで HTTP リクエストが減り、Web ページのロード速度が向上します。

      画像を data:URL モードに変換します。Emmet は、img または background-image タグを使用して画像上にカーソルを置き、ctrl+shift+b

      という完璧な変換を行う方法を提供します。 。

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

    関連記事

    続きを見る