Tham chiếu Emmet cho HTML

Emmet là một công cụ khá hay giúp bạn viết HTML cực nhanh. Nó giống như phép thuật. Emmet không phải là một cái gì đó mới, nó đã xuất hiện trong nhiều năm và có một plugin cho mọi trình soạn thảo trên mạng.


Emmet là một công cụ khá hay giúp bạn viết HTML cực nhanh.

Nó giống như phép thuật.

Emmet không phải là một cái gì đó mới, nó đã xuất hiện trong nhiều năm và có một plugin cho mọi trình soạn thảo trên mạng. TrênMã VS, Emmet được tích hợp bên ngoài và bất cứ khi nào trình soạn thảo nhận ra một lệnh Emmet khả thi, nó sẽ hiển thị cho bạn một chú giải công cụ.

Emmet in VS Code

Nếu thứ bạn viết không có cách diễn giải nào khác và VS Code cho rằng nó phải là một biểu thức Emmet, nó sẽ xem trước nó trực tiếp trong chú giải công cụ, đủ đẹp:

Emmet preview in VS Code

Tuy nhiên, tôi không thực sự biết cách sử dụng nó trong tất cả những phức tạp của nó cho đến khi tôi bắt đầu nghiên cứu và viết về nó, vì vậy tôi phải học cách sử dụng nó một cách chuyên sâu.

Tôi muốn sử dụng nó trong công việc hàng ngày, vì vậy đây là những gì tôi đã học được về nó.

Tạo một tệp HTML từ đầu

Kiểu!và bạn sẽ nhận được một bản soạn thảo HTML cơ bản để làm việc với:

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

</body> </html>

> và +

  • >có nghĩa là trẻ em
  • +có nghĩa là anh chị em

    nav>ul>li
    

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

    div+p+span

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

Bạn có thể kết hợp chúng để thực hiện các đánh dấu phức tạp hơn. VS Code rất tuyệt khi hiển thị bản xem trước khi đoạn mã Emmet không có

ul>li>div+p+span

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

Thăng cấp

Sử dụng^bạn có thể lên cấp bất kỳ lúc nào bạn đã sử dụng>để tạo ra một đứa trẻ:

ul>li>div+p^li>span

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

Bạn có thể sử dụng nó nhiều lần để “up” nhiều lần:

ul>li>div+p^^p

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

Cấp số nhân

Bất kỳ thẻ nào cũng có thể được thêm nhiều lần bằng cách sử dụng*:

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>

Nhóm một biểu thức để làm cho nó dễ đọc hơn

Với phép nhân trong hỗn hợp, mọi thứ bắt đầu phức tạp hơn một chút. Nếu bạn muốn nhân 2 mục thì sao? Bạn nhóm chúng trong ngoặc đơn( ):

ul>li>(p+span)*2

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

idclassthuộc tính

idclasscó lẽ là các thuộc tính được sử dụng nhiều nhất trong HTML.

Bạn có thể tạo một đoạn mã HTML bao gồm chúng bằng cách sử dụng cú pháp giống CSS:

ul>li>p.text#first

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

Bạn có thể thêm nhiều lớp:

ul>li>p.text.paragraph#first

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

Thêm một lớp hoặc id duy nhất

idphải là duy nhất trong trang của bạn, bất cứ lúc nào.

classcó thể được lặp lại, nhưng đôi khi bạn muốn một số tăng dần cho các phần tử của mình.

Bạn có thể làm điều đó bằng cách sử dụng$:

ul>li.item$*2>p

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

Các thuộc tính khác

Các thuộc tính khác với lớp và id phải được thêm vào bằng cách sử dụng[]dấu ngoặc đơn:

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>

Bạn có thể thêm nhiều thuộc tính cùng một lúc:

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>

Thêm nội dung

Tất nhiên, bạn cũng có thể điền nội dung vào HTML:

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

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

Thêm một số gia tăng trong đánh dấu của bạn

Bạn có thể thêm một số tăng dần vào văn bản:

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

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

Con số đó thường bắt đầu từ 1, nhưng bạn có thể đặt nó bắt đầu từ một số tùy ý:

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>

Tham chiếu cho các thẻ được sử dụng trong tranghead

Viết tắt Html được kết xuất
liên kết <link rel="stylesheet" href="" />
liên kết: css <link rel="stylesheet" href="style.css" />
liên kết: favicon <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
liên kết: 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" />
Phong cách <style></style>
kịch bản <script></script>
script: src <script src=""></script>

Tham chiếu cho các thẻ phổ biến

Viết tắt Html được kết xuất
img <img src="" alt="" />
a <a href=""></a>
br <br />
giờ <hr />
c <!-- -->
tr + <tr><td></td></tr>
ol + <ol>
  • ul + <ul>
  • Tham chiếu cho các thẻ HTML ngữ nghĩa

    Viết tắt Html được kết xuất
    mn <main></main>
    giáo phái <section></section>
    nghệ thuật <article></article>
    hdr <header></header>
    ftr <footer></footer>
    adr <address></address>
    str <strong></strong>

    Tham chiếu cho các phần tử biểu mẫu

    Viết tắt Html được kết xuất
    hình thức <form action=""></form>
    hình thức: lấy <form action="" method="get"></form>
    hình thức: bài <form action="" method="post"></form>
    nhãn <label for=""></label>
    đầu vào <input type="text" />
    inp <input type="text" name="" id="" />
    đầu vào: ẩn, đầu vào: h <input type="hidden" name="" />
    đầu vào: văn bản, đầu vào: t <input type="text" name="" id="" />
    đầu vào: tìm kiếm <input type="search" name="" id="" />
    đầu vào: email <input type="email" name="" id="" />
    đầu vào: url <input type="url" name="" id="" />
    input: mật khẩu, input: p <input type="password" name="" id="" />
    đầu vào: datetime <input type="datetime" name="" id="" />
    Ngày nhập <input type="date" name="" id="" />
    đầu vào: datetime-local <input type="datetime-local" name="" id="" />
    đầu vào: tháng <input type="month" name="" id="" />
    đầu vào: tuần <input type="week" name="" id="" />
    đầu vào: thời gian <input type="time" name="" id="" />
    đầu vào: tel <input type="tel" name="" id="" />
    đầu vào: số <input type="number" name="" id="" />
    đầu vào: màu sắc <input type="color" name="" id="" />
    input: hộp kiểm, input: c <input type="checkbox" name="" id="" />
    đầu vào: radio, đầu vào: r <input type="radio" name="" id="" />
    đầu vào: phạm vi <input type="range" name="" id="" />
    đầu vào: tệp, đầu vào: f <input type="file" name="" id="" />
    input: đệ trình, input: s <input type="submit" value="" />
    đầu vào: hình ảnh, đầu vào: i <input type="image" src="" alt="" />
    đầu vào: nút, đầu vào: b <input type="button" value="" />
    đầu vào: đặt lại <input type="reset" value="" />
    button: đệ trình, button: s, btn: s <button type="submit"></button>
    button: đặt lại, button: r, btn: r <button type="reset"></button>
    button: bị vô hiệu hóa, button: d, btn: d <button disabled="disabled"></button>
    btn <button></button>
    tập trường: bị vô hiệu hóa, tập trường: d, fset: d, fst: d <fieldset disabled="disabled"></fieldset>
    fst, fset <fieldset></fieldset>
    optg <optgroup></optgroup>
    lựa chọn <select name="" id=""></select>
    select: vô hiệu hoá, chọn: d <select name="" id="" disabled="disabled"></select>
    chọn + <select name="" id=""><option value=""></option></select>
    tùy chọn, chọn <option value=""></option>
    bảng + <table><tr><td></td></tr></table>
    textarea <textarea name="" id="" cols="30" rows="10"></textarea>
    tarea <textarea name="" id="" cols="30" rows="10"></textarea>

    Các hướng dẫn khác dành cho devtools: