Cách viết HTML nhanh chóng bằng Emmet

Đối với cá nhân tôi, một trong những phần nhàm chán nhất khi bắt đầu một dự án web mới là phải cấu trúc đánh dấu ban đầu. Tôi thường sẵn sàng đi sâu vào lập kế hoạch logic, cài đặt database hoặc thậm chí chỉ thêm một số kiểu cơ bản, nhưng tôi đã sao chép / dán văn bản ipsum lorem 50 lần.

Nhưng không còn nữa. Thời gian ghi nhớ cách cài đặt loại tài liệu, sao chép, dán thẻ li , và thậm chí viết ra các từ 'lớp' và 'id' đã qua. Với tiện ích mở rộng Emmet , giờ đây ta có thể viết ra một version viết tắt đơn giản của đánh dấu, tab nhấn của ta và ngạc nhiên trước những vinh quang của thời đại hiện đại.

Cá nhân tôi thực sự phát cuồng với Emmet, viết ít nhất 80% trang của bạn trên một vài dòng và sử dụng thư viện CSS để hầu hết bố cục và một số kiểu dáng được hoàn thiện. Khi kết hợp với Pug , các đoạn mã tùy chỉnh và Materialize , tôi cảm thấy gần như toàn năng.

Cài đặt

Bạn cần làm theo bước cài đặt cho editor mã cụ thể của bạn . Nếu bạn đang sử dụng VSCode, nó thực sự được tích hợp sẵn nên bạn thậm chí không phải làm bất cứ điều gì và có thể bắt đầu khai thác năng lượng ngay lập tức.

Cú pháp cơ bản

Cú pháp rất đơn giản, chỉ cần sử dụng tên của thẻ bạn muốn, như header , ul hoặc script và ký hiệu cho thao tác bạn muốn và nhấn tab.

> Thêm các mục tiếp tục vào bên trong.
^ Chuyển bạn ra khỏi phạm vi hiện tại.
+ Thêm các mục đứng trước vào cùng một phạm vi.

<!-- h1+ul>li -->
<h1></h1>
<ul>
  <li></li>
</ul>

<!-- header>nav^footer -->
<header>
  <nav></nav>
</header>
<footer></footer>

<!-- nav>div>h1+img^ul>li+li+li -->
<nav>
  <div>
    <h1></h1>
    <img src="" alt="">
  </div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

Lặp lại và group

Trong ví dụ trên, ta phải sử dụng ba li cho danh sách của bạn , điều này sẽ trở nên khá khó chịu rất nhanh. thay vào đó, ta có thể chỉ * và chuyển số lần lặp lại mà ta muốn.

<!-- ul>li*2 -->
<ul>
  <li></li>
  <li></li>
</ul>

Ta còn có thể làm được nhiều hơn thế, ta có thể group các phần viết tắt lại với nhau bằng cách sử dụng dấu ngoặc đơn () . Hãy làm cho nó để ta có ba group trong danh sách này với hai mục mỗi group .

<!-- (ul>li*2)*3 -->
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>

Thuộc tính và văn bản

Ta có thể làm nhiều hơn nữa bằng cách thêm các lớp và id vào ngắn gọn của ta . Chỉ cần sử dụng a . cho một lớp và một # cho một id và nối nó vào bạn muốn nó áp dụng. Bất kỳ thuộc tính nào khác có thể được đặt trong ngoặc [] và nhập bình thường.

<!-- h1.title+input#name -->
<h1 class="title"></h1>
<input type="text" id="name">

<!-- Let's build on the former example -->
<!-- (ul.list>li.list-item*2)*3 -->
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>

<!-- img[src="#"]+script[src="#"] -->
<img src="#" alt="">
<script src="#"></script>

Ta cũng có thể bắt đầu thêm một số nội dung cơ bản bằng cách thêm những gì ta muốn trong dấu ngoặc nhọn {} . Emmet cũng cho phép bạn tạo văn bản ipsum lorem với lorem theo sau là số lượng từ bạn muốn.

<!-- h1{I'm a title}+p>lorem20 -->
<h1>I'm a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, expedita earum iste cumque unde perspiciatis nobis adipisci saepe a eum.</p>

<!-- When adding Lorem Ipsum to an li iteration, you can just omit the li's entirely -->
<!-- (ul.list>lorem10.list-item*2)*3 -->
<ul class="list">
  <li class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, totam.</li>
  <li class="list-item">Vero iure amet blanditiis iste aperiam velit deleniti officiis consectetur!</li>
</ul>
<ul class="list">
  <li class="list-item">Ad et fuga sed earum veniam eius distinctio, omnis quas.</li>
  <li class="list-item">Error quam cumque eligendi dicta praesentium tenetur cum soluta qui?</li>
</ul>
<ul class="list">
  <li class="list-item">Reiciendis suscipit eveniet magnam ipsum quam? Qui rem consectetur inventore.</li>
  <li class="list-item">Consectetur odit quos commodi nulla eaque, sapiente reprehenderit perspiciatis. Voluptate?</li>
</ul>

Kết luận

Lúc này, Emmet là một trong những công cụ được sử dụng nhiều nhất của tôi và hy vọng sau khi làm quen với nó và xem qua bảng cheetsheet tuyệt vời này, bạn cũng có thể trải nghiệm sự gia tăng năng suất mà nó có thể mang lại.

Tags:

Các tin liên quan

Sử dụng vue-template-loader với Vue.js để biên dịch các mẫu HTML
2018-01-18
Nhận và thiết lập thẻ meta HTML trong Angular
2017-11-27
Hiển thị HTML thô trong ứng dụng Vue của bạn
2017-06-26
Nén HTML của bạn trong Jekyll
2017-01-17
Sử dụng DOMParser để phân tích cú pháp các chuỗi HTML
2016-10-21
Tham chiếu thuộc tính mục tiêu cho thẻ neo trong HTML
2016-09-12
HTML AMP, Tổng quan
2016-06-29
Cách bảo vệ trang web WordPress của bạn khỏi Genericons Example.html Lỗ hổng XSS
2015-05-07