Emmet的HTML參考

Emmet是一個非常酷的工具,可以幫助您非常快速地編寫HTML。就像魔術。 Emmet並不是什麼新鮮事物,它已經存在了很多年,並且為每個編輯器都提供了一個插件。


Emmet是一個非常酷的工具,可以幫助您非常快速地編寫HTML。

就像魔術。

Emmet並不是什麼新鮮事物,它已經存在了很多年,並且為每個編輯器都提供了一個插件。在VS代碼,Emmet集成於開箱即用,只要編輯器識別出可能的Emmet命令,它就會向您顯示一個工具提示。

Emmet in VS Code

如果您編寫的東西沒有其他解釋,並且VS Code認為它必須是Emmet表達式,它將直接在工具提示中預覽它,這非常好:

Emmet preview in VS Code

但是直到開始研究和撰寫它時,我才真正知道如何使用它的所有復雜性,因此我必須深入學習如何使用它。

我想在日常工作中使用它,所以這是我學到的東西。

從頭開始創建HTML文件

類型!您將獲得一個基本的HTML樣板,可以使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body> </html>

>和+

  • >意味著孩子
  • +意味著同級

    nav>ul>li
    

    <nav> <ul> <li></li> </ul> </nav>

    div+p+span

    <div></div> <p></p> <span></span>

您可以將它們結合起來執行更複雜的標記。 VS Code非常適合在Emmet代碼段中沒有預覽時顯示預覽

ul>li>div+p+span

<ul> <li> <div></div> <p></p> <span></span> </li> </ul>

升級

使用^您可以隨時使用來升級>創建一個孩子:

ul>li>div+p^li>span

<ul> <li> <div></div> <p></p> </li> <li><span></span></li> </ul>

您可以多次使用它來多次“向上”運行:

ul>li>div+p^^p

<ul> <li> <div></div> <p></p> </li> </ul> <p></p>

乘數

任何標籤都可以使用添加多次*

ul>li*5>p

<ul> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> </ul>

對錶達式進行分組以使其更具可讀性

隨著乘法的混合,事情開始變得更加複雜。如果您想將2個項目相乘怎麼辦?您將它們放在括號中( )

ul>li>(p+span)*2

<ul> <li> <p></p> <span></span> <p></p> <span></span> </li> </ul>

idclass屬性

idclass是HTML中最常用的屬性。

您可以使用類似於CSS的語法來創建包含它們的HTML代碼段:

ul>li>p.text#first

<ul> <li> <p class=“text” id=“first”></p> </li> </ul>

您可以添加多個類:

ul>li>p.text.paragraph#first

<ul> <li> <p class=“text paragraph” id=“first”></p> </li> </ul>

添加唯一的類或ID

id在任何時候都必須在您的頁面中唯一。

class可以重複,但是有時您想要為元素增加一個。

您可以使用$

ul>li.item$*2>p

<ul> <li class=“item1”> <p></p> </li> <li class=“item2”> <p></p> </li> </ul>

其他屬性

除class和id之外的其他屬性必須使用[]括弧:

ul>li.item$*2>p[style="color: red"]

<ul> <li class=“item1”> <p style=“color: red”></p> </li> <li class=“item2”> <p style=“color: red”></p> </li> </ul>

您可以一次添加多個屬性:

ul>li.item$*2>p[style="color: red" title="A color"]

<ul> <li class=“item1”> <p style=“color: red” title=“A color”></p> </li> <li class=“item2”> <p style=“color: red” title=“A color”></p> </li> </ul>

添加內容

當然,您也可以用內容填充HTML:

ul>li.item$*2>p{Text}

<ul> <li class=“item1”> <p>Text</p> </li> <li class=“item2”> <p>Text</p> </li> </ul>

在標記中添加增量數字

您可以在文本中添加一個增量數字:

ul>li.item$*2>p{Text $}

<ul> <li class=“item1”> <p>Text 1</p> </li> <li class=“item2”> <p>Text 2</p> </li> </ul>

該數字通常從1開始,但是您可以使它從任意數字開始:

ul>[email protected]*2>p{Text [email protected]}

<ul> <li class=“item10”> <p>Text 3</p> </li> <li class=“item11”> <p>Text 4</p> </li> </ul>

頁面中使用的標籤的參考head

縮寫 呈現的html
關聯 <link rel="stylesheet" href="" />
鏈接:css <link rel="stylesheet" href="style.css" />
鏈接:收藏夾 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
鏈接:rss <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
meta:utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
風格 <style></style>
腳本 <script></script>
腳本:src <script src=""></script>

通用標籤參考

縮寫 呈現的html
img <img src="" alt="" />
一種 <a href=""></a>
br <br />
小時 <hr />
C <!-- -->
tr + <tr><td></td></tr>
醇+ <ol>
  • ul + <ul>
  • 語義HTML標籤的參考

    縮寫 呈現的html
    mn <main></main>
    教派 <section></section>
    藝術 <article></article>
    人類發展報告 <header></header>
    ftr <footer></footer>
    腎上腺皮質激素 <address></address>
    力量 <strong></strong>

    表單元素的參考

    縮寫 呈現的html
    形式 <form action=""></form>
    形式:得到 <form action="" method="get"></form>
    形式:張貼 <form action="" method="post"></form>
    標籤 <label for=""></label>
    輸入 <input type="text" />
    輸入 <input type="text" name="" id="" />
    輸入:隱藏,輸入:h <input type="hidden" name="" />
    輸入:文本,輸入:t <input type="text" name="" id="" />
    輸入:搜索 <input type="search" name="" id="" />
    輸入:電子郵件 <input type="email" name="" id="" />
    輸入網址 <input type="url" name="" id="" />
    輸入:密碼,輸入:p <input type="password" name="" id="" />
    輸入:日期時間 <input type="datetime" name="" id="" />
    輸入:日期 <input type="date" name="" id="" />
    輸入:datetime-local <input type="datetime-local" name="" id="" />
    輸入:月 <input type="month" name="" id="" />
    輸入:週 <input type="week" name="" id="" />
    輸入時間 <input type="time" name="" id="" />
    輸入:tel <input type="tel" name="" id="" />
    輸入:數字 <input type="number" name="" id="" />
    輸入顏色 <input type="color" name="" id="" />
    輸入:複選框,輸入:c <input type="checkbox" name="" id="" />
    輸入:無線電,輸入:r <input type="radio" name="" id="" />
    輸入範圍 <input type="range" name="" id="" />
    輸入:文件,輸入:f <input type="file" name="" id="" />
    輸入:提交,輸入:s <input type="submit" value="" />
    輸入:圖像,輸入:i <input type="image" src="" alt="" />
    輸入:按鈕,輸入:b <input type="button" value="" />
    輸入:重置 <input type="reset" value="" />
    button:提交,button:s,btn:s <button type="submit"></button>
    按鈕:重置,按鈕:r,btn:r <button type="reset"></button>
    按鈕:禁用,按鈕:d,btn:d <button disabled="disabled"></button>
    btn <button></button>
    fieldset:禁用,fieldset:d,fset:d,fst:d <fieldset disabled="disabled"></fieldset>
    fst,fset <fieldset></fieldset>
    選擇 <optgroup></optgroup>
    選擇 <select name="" id=""></select>
    選擇:禁用,選擇:d <select name="" id="" disabled="disabled"></select>
    選擇+ <select name="" id=""><option value=""></option></select>
    選項,選擇 <option value=""></option>
    桌子+ <table><tr><td></td></tr></table>
    文本區域 <textarea name="" id="" cols="30" rows="10"></textarea>
    塔里亞 <textarea name="" id="" cols="30" rows="10"></textarea>

    更多devtools教程: