Hướng dẫn what is emmet abbreviation in html - emmet viết tắt trong html là gì

Chữ viết tắt là trung tâm của bộ công cụ Emmet: các biểu thức đặc biệt này được phân tích cú pháp trong thời gian chạy và được chuyển thành khối mã có cấu trúc, ví dụ HTML. Cú pháp viết tắt có vẻ như các bộ chọn CSS với một vài phần mở rộng cụ thể để tạo mã. Vì vậy, mọi nhà phát triển web đã biết cách sử dụng nó.

Đây là một ví dụ: Viết tắt này

#page>div.logo+ul#navigation>li*5>a{Item $}

... có thể biến thành

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

... chỉ với một cú đánh chính. Trong nhiều trình chỉnh sửa (như Eclipse, Sublime Text 2, Espresso, v.v.) cũng sẽ tạo ra các dấu hiệu tabstop thích hợp để bạn có thể nhanh chóng đi qua giữa các vị trí quan trọng của mã được tạo với phím Tab.

Chữ viết tắt được tối ưu hóa, nhưng không giới hạn ở thế hệ HTML và XML và làm cho việc viết mã đánh dấu tẻ nhạt trở nên dễ dàng. Bạn có thể bắt đầu học cú pháp để giải phóng toàn bộ sức mạnh của các chữ viết tắt Emmet.

Emmet sử dụng cú pháp tương tự như các bộ chọn CSS để mô tả các vị trí của các phần tử bên trong các thuộc tính của cây và phần tử được tạo ra.

Các yếu tố

Bạn có thể sử dụng các phần tử tên của các phần tử như

div+p+bq

div+p+bq

div+p+bq

div+p+bq

div+p+bq

div+p+bq

Các nhà khai thác làm tổ

Các toán tử làm tổ được sử dụng để định vị các phần tử viết tắt bên trong cây được tạo: cho dù nó nên được đặt bên trong hay gần phần tử bối cảnh.

Trẻ em: div+p+bq 6

Bạn có thể sử dụng toán tử

div+p+bq

div>ul>li

...sẽ sản xuất

<div>
    <ul>
        <li>li>
    ul>
div>

Lưu ý rằng

8 được sử dụng và phân tích cú pháp như một yếu tố riêng biệt (như, div+p+bq 0, div+p+bq 1, v.v.) nhưng có một ý nghĩa đặc biệt khi được viết ngay sau phần tử. Ví dụ: div+div>p>span+em^bq 1 và div+div>p>span+em^bq 2 sẽ tạo ra cùng một đầu ra, nhưng div+div>p>span+em^bq 3 và div+div>p>span+em^bq 4 won

Trong ví dụ thứ hai, phần tử

div+div>p>span+em^bq

div+div>p>span+em^bq

<div>div>
<div>
    <p><span>span><em>em>p>
div>

div+p+bq

Trong ví dụ này, để viết

div+div>p>span+em^bq

div+div>p>span+em^bq

div+p+bq

div+p+bq

<div>div>
<div>
    <p><span>span><em>em>p>
    <blockquote>blockquote>
div>

<div>div>
<p>p>
<blockquote>blockquote>

Để so sánh, ở đây, cùng một chữ viết tắt được viết mà không có nhà điều hành trẻ em div+p+bq 6:

Ghi chú về định dạng viết tắt

div+div>p>span+em 

Khi bạn quen thuộc với cú pháp viết tắt Emmet, bạn có thể muốn sử dụng một số định dạng để làm cho chữ viết tắt của bạn dễ đọc hơn. Ví dụ: sử dụng khoảng trắng giữa các phần tử và toán tử, như thế này:

<div>div>
<div>
    <p><span>span><em>em>p>
div>

Nhưng nó đã giành được công việc của người Viking, bởi vì không gian là một biểu tượng dừng trong đó Emmet dừng phân tích chữ viết tắt.

div+div>p>span+em^bq

Nhiều người dùng đã nhầm lẫn rằng mỗi chữ viết tắt nên được viết trong một dòng mới, nhưng họ đã sai: bạn có thể gõ và mở rộng viết tắt ở bất cứ đâu trong văn bản:

<div>div>
<div>
    <p><span>span><em>em>p>
    <blockquote>blockquote>
div>

Đây là lý do tại sao Emmet cần một số chỉ số (như không gian) trong đó nó nên dừng phân tích cú pháp để không mở rộng bất cứ thứ gì mà bạn không cần. Nếu bạn vẫn nghĩ rằng định dạng như vậy là cần thiết cho các chữ viết tắt phức tạp để làm cho chúng dễ đọc hơn:

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

Chữ viết tắt không phải là một ngôn ngữ mẫu, họ không phải là người có thể đọc được, họ phải là người nhanh chóng có thể mở rộng và có thể tháo rời.

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

Bạn không thực sự cần phải viết các chữ viết tắt phức tạp. Ngừng nghĩ rằng, gõ gõ là một quá trình chậm nhất trong phát triển web. Bạn sẽ nhanh chóng phát hiện ra rằng việc xây dựng một chữ viết tắt phức tạp duy nhất chậm hơn và dễ bị lỗi hơn nhiều so với việc xây dựng và gõ một vài cái ngắn.

Nhận xét được cung cấp bởi

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

Nhiều người dùng đã nhầm lẫn rằng mỗi chữ viết tắt nên được viết trong một dòng mới, nhưng họ đã sai: bạn có thể gõ và mở rộng viết tắt ở bất cứ đâu trong văn bản:

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

Đây là lý do tại sao Emmet cần một số chỉ số (như không gian) trong đó nó nên dừng phân tích cú pháp để không mở rộng bất cứ thứ gì mà bạn không cần. Nếu bạn vẫn nghĩ rằng định dạng như vậy là cần thiết cho các chữ viết tắt phức tạp để làm cho chúng dễ đọc hơn:

Chữ viết tắt không phải là một ngôn ngữ mẫu, họ không phải là người có thể đọc được, họ phải là người nhanh chóng có thể mở rộng và có thể tháo rời.

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

... Mở rộng sang

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

Nếu bạn làm việc với trình duyệt DOM DOM, bạn có thể nghĩ về các nhóm là các đoạn tài liệu: mỗi nhóm chứa Subtree viết tắt và tất cả các yếu tố sau được chèn ở cùng cấp độ với phần tử đầu tiên của nhóm.

Bạn có thể làm tổ các nhóm bên trong nhau và kết hợp chúng với toán tử nhân

<div>div>
<p>p>
<blockquote>blockquote>

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

...produces

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

Với các nhóm, bạn thực sự có thể viết đánh dấu trang đầy đủ với một chữ viết tắt duy nhất, nhưng xin vui lòng làm điều đó.

Toán tử thuộc tính

Các toán tử thuộc tính được sử dụng để sửa đổi các thuộc tính của các phần tử xuất hiện. Ví dụ: trong HTML và XML, bạn có thể nhanh chóng thêm thuộc tính

<div>div>
<p>p>
<blockquote>blockquote>

ID và lớp học

Trong CSS, bạn sử dụng ký hiệu

<div>div>
<p>p>
<blockquote>blockquote>

div+div>p>span+em 

div+div>p>span+em 

<div>div>
<p>p>
<blockquote>blockquote>

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

... sẽ xuất ra

<div id="page">
    <div class="logo">div>
    <ul id="navigation">
        <li><a href="">Item 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>

Thuộc tính tùy chỉnh

Bạn có thể sử dụng ký hiệu

div+div>p>span+em 

div>ul>li

...outputs

div>ul>li

• Bạn có thể đặt bao nhiêu thuộc tính như bạn muốn bên trong dấu ngoặc vuông.
• Bạn không phải chỉ định các giá trị thuộc tính:

  div+div>p>span+em 
  

  4 sẽ tạo

  div+div>p>span+em 
  

  5 với các tabstops bên trong mỗi thuộc tính trống (nếu trình soạn thảo của bạn hỗ trợ chúng).
• Bạn có thể sử dụng trích dẫn đơn hoặc đôi để trích dẫn các giá trị thuộc tính.
• Bạn không cần phải trích dẫn các giá trị nếu chúng không chứa khoảng trống:

  div+div>p>span+em 
  

  6 sẽ hoạt động.

Đánh số mục: div+div>p>span+em 7

Với toán tử nhân

<div>div>
<p>p>
<blockquote>blockquote>

div+div>p>span+em 

div+div>p>span+em 

div>ul>li

... đầu ra đến

div>ul>li

Bạn có thể sử dụng nhiều

div+div>p>span+em 

div>ul>li

... đầu ra đến

div>ul>li

Bạn có thể sử dụng nhiều

div+div>p>span+em 

7 liên tiếp đến số pad với số 0:

Thay đổi cơ sở và hướng đánh số

Với công cụ sửa đổi

<div>div>
<div>
    <p><span>span><em>em>p>
div>

div>ul>li

Ví dụ: để thay đổi hướng, thêm

<div>div>
<div>
    <p><span>span><em>em>p>
div>

div+div>p>span+em 

div>ul>li

Đầu ra vào

div>ul>li

Để thay đổi giá trị cơ sở bộ đếm, hãy thêm công cụ sửa đổi

<div>div>
<div>
    <p><span>span><em>em>p>
div>

div+div>p>span+em 

div>ul>li

Biến đổi thành

<div>
    <ul>
        <li>li>
    ul>
div>

Bạn có thể sử dụng các sửa đổi này cùng nhau:

<div>
    <ul>
        <li>li>
    ul>
div>

… Được chuyển đổi thành

Văn bản:

<div>div>
<div>
    <p><span>span><em>em>p>
div>

<div>
    <ul>
        <li>li>
    ul>
div>

Bạn có thể sử dụng niềng răng xoăn để thêm văn bản vào phần tử:

<div>
    <ul>
        <li>li>
    ul>
div>

...sẽ sản xuất

<div>
    <ul>
        <li>li>
    ul>
div>

Lưu ý rằng

<div>div>
<div>
    <p><span>span><em>em>p>
div>

div+p+bq

div+p+bq

div+div>p>span+em^bq

div+div>p>span+em^bq

div+div>p>span+em^bq

div+div>p>span+em^bq

<div>
    <ul>
        <li>li>
    ul>
div>

...produces

<div>
    <ul>
        <li>li>
    ul>
div>

Trong ví dụ thứ hai, phần tử

div+div>p>span+em^bq

div+div>p>span+em^bq

<div>div>
<div>
    <p><span>span><em>em>p>
div>

Trong ví dụ này, để viết

div+div>p>span+em^bq

div+div>p>span+em^bq

div+p+bq

div+p+bq

<div>div>
<div>
    <p><span>span><em>em>p>
    <blockquote>blockquote>
div>

<div>
    <ul>
        <li>li>
    ul>
div>

...produces

<div>
    <ul>
        <li>li>
    ul>
div>

Để so sánh, ở đây, cùng một chữ viết tắt được viết mà không có nhà điều hành trẻ em div+p+bq 6:

Ghi chú về định dạng viết tắt

<div>
    <ul>
        <li>li>
    ul>
div>

Khi bạn quen thuộc với cú pháp viết tắt Emmet, bạn có thể muốn sử dụng một số định dạng để làm cho chữ viết tắt của bạn dễ đọc hơn. Ví dụ: sử dụng khoảng trắng giữa các phần tử và toán tử, như thế này:

Nhưng nó đã giành được công việc của người Viking, bởi vì không gian là một biểu tượng dừng trong đó Emmet dừng phân tích chữ viết tắt.

Nhiều người dùng đã nhầm lẫn rằng mỗi chữ viết tắt nên được viết trong một dòng mới, nhưng họ đã sai: bạn có thể gõ và mở rộng viết tắt ở bất cứ đâu trong văn bản:

• Đây là lý do tại sao Emmet cần một số chỉ số (như không gian) trong đó nó nên dừng phân tích cú pháp để không mở rộng bất cứ thứ gì mà bạn không cần. Nếu bạn vẫn nghĩ rằng định dạng như vậy là cần thiết cho các chữ viết tắt phức tạp để làm cho chúng dễ đọc hơn:
• Chữ viết tắt không phải là một ngôn ngữ mẫu, họ không phải là người có thể đọc được, họ phải là người nhanh chóng có thể mở rộng và có thể tháo rời.