HTML/CSS | Tóm tắt chương - Comments và blank space

Học HTML, CSS từ Zero Tới Hero

Tóm tắt

  • Cú pháp comments trong HTML luôn bắt đầu bằng <!-- và kết thúc bằng -->.
  • Comments là đoạn văn bản do người viết code thêm vào để cung cấp lời giải thích rõ ràng cho đoạn code, ghi chú cho bản thân hoặc đồng nghiệp trong tương lai.
  • Không nên sử dụng comments cho những thứ đã rõ ràng. Ví dụ: “Thẻ <h1> dùng làm tiêu đề chính của trang web”. Khi mới học, bạn có thể tự comments như thế này. Nhưng khi làm dự án thực tế, không nên comments những thứ mà nhà phát triển nào cũng hiểu.
  • Nội dung các comments không được trình duyệt hiển thị. Vì vậy, nó không làm ảnh hưởng tới kết quả hiển thị của trang web.
  • Tránh quên cú pháp đóng comment -->, nếu quên phần còn lại của tệp HTML sẽ trở thành comments.
  • Không sử dụng được cú pháp comments lồng nhau.
  • Nhiều khoảng trống, nhiều ngắt dòng trong code HTML sẽ được coi là một khoảng trống khi hiển thị ra trình duyệt. Việc làm này có ý nghĩa giúp trình bày code HTML một cách linh hoạt.
  • Thẻ <pre> (preformatted) được sử dụng để giữ nguyên khoảng cách văn bản, ngắt dòng, tab và các ký tự định dạng khác mà trình duyệt web bỏ qua.
  • Văn bản trong thẻ <pre> được hiển thị bằng phông chữ có độ rộng cố định, nhưng nó có thể được thay đổi bằng cách sử dụng CSS.
  • Dấu xuống hàng đầu tiên và cuối cùng trong thẻ <pre> sẽ không được hiển thị ra trình duyệt.
  • Thẻ <pre> thường được kết hợp với thẻ <code> để hiển thị khối code trên nội dung trang web.
  • HTML Entities là các chuỗi bắt đầu bằng dấu & và kết thúc bằng dấu ;. Nó được sử dụng để hiển thị 2 loại ký tự:
    • Các ký tự có ý nghĩa đặc biệt hoặc trùng với các ký tự trong HTML
    • Các ký tự không dễ dàng hoặc không nhập được từ bàn phím. Ví dụ: ©, v.v
  • Có tới hàng ngàn HTML Entities, nhưng thực tế chúng ta thường sử dụng một vài trong số đó.
  • Bạn nên sử dụng HTML Entities khi hiển thị “Các ký tự có ý nghĩa đặc biệt hoặc trùng với các ký tự trong HTML”. Vì đây là tình huống có thể gây nhầm lẫn hoặc bắt buộc phải sử dụng.
  • Những tình huống khác, nếu việc sử dụng HTML Entites gây khó khăn cho việc đọc code thì chúng ta nên sử dụng luôn ký tự mà nó thể hiện. Nếu trang web sử dụng bảng mã ký tự UTF-8 thì hầu hết các ký tự đặc biệt (bao gồm cả các biểu tượng cảm xúc) có thể hiển thị ngay mà không cần sử dụng HTML Entities.
  • Non-breaking space Entity (&nbsp;) hiển thị giống như một khoảng trống, nhưng khoảng trống này sẽ không bị “bẻ gãy” (breaking) như khoảng trống thông thường (được viết bởi dấu cách trên bàn phím).
  • Trường hợp sử dụng &nbsp; đó là khi chúng ta muốn 2 từ luôn được đi kèm với nhau. Ví dụ: Đường vào tim Crush xa như 1000&nbsp;km.
  • Thẻ <code> trong HTML được sử dụng để thể hiện các đoạn code trong nội dung trang web.
  • Có 2 trường hợp sử dụng thẻ <code>:
    • Trong một đoạn văn: <p>Đoạn văn có <code>đoạn code</code></p>
    • Khối code độc lập: <pre><code>Nội dung khối code</code></pre>
  • Có thể sử dụng thư viện PrismJS (prismjs.com) để Highlight code, thư viện này hỗ trợ hầu hết các ngôn ngữ phổ biến.

Nhận xét

Mới hơn Cũ hơn