Cách viết code html nhanh

(Tín dụng hình ảnh: Tương lai)

Các trang web hiện đại yêu cầu nhiều mã HTML. Bố cục phức tạp với nhiều chế độ xem và trạng thái khác nhau có thể khó tạo chỉ với một trình soạn thảo văn bản đơn giản. Rất may, có một loạt các công cụ tạo HTML ngoài kia để làm việc với. Ở đây chúng tôi xem nhanh về hai trong số các công cụ phổ biến hơn, emmet và pug.

Tuy nhiên, bạn vẫn cần biết HTML của mình để sử dụng cả hai công cụ tiết kiệm thời gian mạnh mẽ này. Vì vậy, trước khi bạn lặn trong việc đảm bảo bạn đang sử dụng ngữ nghĩa phổ biến Thẻ html. đúng cách Cũng xem hướng dẫn của chúng tôi để sử dụng một Nồi hơi html .

Bạn muốn cai trị mã? Thử những thứ này xem xây dựng trang web . Hoặc để được giúp đỡ thêm trên đường đi, chọn một web hosting Dịch vụ với sự hỗ trợ kỹ thuật.

Tạo HTML trên đường bay

Khi viết một lượng lớn HTML trong một lần, hãy viết từng tag bằng tay có thể trở nên rất tẻ nhạt, rất nhanh. Ví dụ: khi viết ra danh sách các liên kết, chúng ta cần đảm bảo rằng & lt; ul & gt ;, & lt; li & gt; và & lt; a & gt; Tags tất cả mở và đóng ở đúng nơi. Nếu không, các liên kết có thể không hoạt động và toàn bộ bố cục trang sẽ diễn ra hoàn toàn haywire.

Cách sử dụng Emmet

Để đảm bảo bạn giảm cơ hội này xảy ra, bạn có thể sử dụng tài năng của Emmet. . Đây là một công cụ sẽ giúp bạn tiết kiệm rất nhiều gõ và sẽ cải thiện rất nhiều HTML & amp của bạn; CSS Workflow. Emmet cho phép bạn tạo các yếu tố bằng cách nhập bộ chọn giống như CSS. Sau đó, nó sẽ phân tích và mở rộng phần tử đó thành HTML thông thường. Dưới đây là yếu tố ban đầu được tạo ra trong emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet sẽ phát hiện phần tử này, phân tích cú pháp và sau đó chuyển đổi phần tử thành HTML tiêu chuẩn như hiển thị bên dưới. Nhìn nhanh về yếu tố emmet cho thấy rằng & lt; li & gt; được nhân với ( * 3. ) và mỗi & lt; li & gt; Ví dụ sẽ được gọi là chương theo sau là số thích hợp (tối đa 3).

Lưu ý Có bao nhiêu ký tự phần tử Emmet chứa và có bao nhiêu HTML tiêu chuẩn chứa. Ngay cả đoạn mã nhỏ này cũng chứng minh lượng thời gian có thể được lưu bằng cách sử dụng tốc ký Emmet.

 & lt; Nav & GT;
  & lt; ul & gt;
    & lt; li & gt; & lt; a href = "" class = "chương" & gt; chương 1
 của 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "chương" & gt; Chương 2
 của 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "chương" & gt; Chương 3
 của 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Emmet cũng nhận thức được bối cảnh. Ví dụ: nếu chúng ta đang chỉnh sửa một & lt; bảng & gt; Có khả năng chúng ta sẽ muốn một số & lt; tr & gt; (Đây là những hàng) các yếu tố để lấp đầy nó. Tất cả những gì chúng ta cần làm là chỉ định bao nhiêu chúng ta cần.

Đây chỉ là một ví dụ nhanh về những gì emmet có thể làm, nhưng có rất nhiều tùy chọn cấu hình có sẵn. Chúng bao gồm việc chỉnh sửa CSS, BEM (Công cụ sửa đổi phần tử khối) và thậm chí còn có trình tạo Ipsum Lorem.

Cũng đáng chú ý rằng hầu hết các trình soạn thảo mã đều có Emmet tích hợp hoặc hỗ trợ nó thông qua các plugin. Bạn có thể tìm hiểu thêm về điều này trên Tài liệu Emmet trang.

Sử dụng pug cho nội dung động

Trong khi emmet là lý tưởng cho nội dung tĩnh, điều gì xảy ra nếu nội dung cần được động hơn? Ví dụ: chúng ta có thể cần tạo trang chủ được cá nhân hóa, bảng đặt hàng phức tạp hoặc lặp lại các khối HTML phổ biến. Đây là tất cả có thể trong JavaScript, nhưng bằng cách kết xuất nội dung này, chúng ta có thể nhận được tốc độ tăng tốc mà không cần dựa vào trình duyệt của người dùng. Hãy nhớ rằng nếu bạn có một trang nặng phương tiện, bạn sẽ muốn sao lưu nó với đáng tin cậy lưu trữ đám mây .

Bước về phía trước Pug. Đây là một công cụ tạo mẫu cho HTML. Bạn có thể viết các trang ở định dạng ".pug" và pug sẽ đọc tệp đó, tiêm một số dữ liệu động vào nó và trả về HTML tiêu chuẩn. Ví dụ dưới đây là cách bạn sẽ viết mã ở Pug để tạo cùng một HTML với ví dụ Emmet (ở trên).

 ul
  mỗi val trong [1, 2, 3]
    li.
      Một (href = "", lớp = "chương") chương
# {val} của 3

Một tệp Pug sử dụng thụt lề một mình để chỉ lồng.Nó có thể lặp lại các giá trị để tạo ra một lượng lớn HTML trong một lượt.Các tệp ".pug" này được thiết kế để được sử dụng lại nhiều lần trên một dự án.

Pug có sẵn để cài đặt từ Trình quản lý gói npm. .Nhưng, nếu bạn muốn biết thêm thông tin về cách bắt đầu với Pug phải ghé thăm trang mạng .

Nội dung này ban đầu xuất hiện trong tạp chí thiết kế web.

Đọc thêm:

• 10 tốt nhất Khung CSS.
• Hoạt hình CSS. ví dụ để tái tạo
• 8 thẻ html bạn cần được sử dụng (và 5 để tránh)