Css thêm thẻ

Để thêm thẻ chú thích, hãy chỉ lựa chọn -a trong thẻ lệnh rồi thực hiện. Khi thực hiện xong, trình soạn thảo sẽ khởi động nên hãy nhập bình luận sẽ thiết lập trong thẻ

Cũng có thể chỉ định lựa chọn -am nếu muốn vừa tạo thẻ vừa thêm bình luận

$ git tag -a 

Để gắn thẻ chú thích có tên là chuối trong cam kết mà HEAD hiện chỉ đến, thì hãy thực hiện lệnh bên dưới

Emmet là một trong những tính năng được tích hợp sẵn sở thích của mình với trình soạn thảo văn bản VS Code, và nó cũng là tiện ích mở rộng có sẵn trên các trình soạn thảo mã nền tảng khác. Với Emmet, bạn có thể tăng tốc độ làm việc của HTML & CSS, thậm chí còn bị coi là cheat-code

  Bỏ túi Cheatsheet React cho năm 2022 (kèm ví dụ thực tế)

  Tất tần tật các bảng tính Frontend tốt nhất

Sử dụng Emmet trong HTML

Với Emmet, việc tạo một bản soạn sẵn HTML diễn ra trong nháy mắt. Với tệp HTML, chỉ cần gõ

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
20 bạn sẽ thấy Emmet hiển thị các gợi ý, sau đó chỉ việc
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
21 đã có sẵn trang HTML trống cơ bản. Đây mình mới chỉ đang demo khả năng vài tính năng của VS Code và Emmet nên nếu chưa hiểu thì không sao, cứ đọc tiếp nhé

Css thêm thẻ
Css thêm thẻ

Xem thêm Tạo React Boilerplate – Từ a tới z

Các thẻ cơ bản

Để tạo thẻ – thẻ HTML, chỉ cần nhập tên thẻ và

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
21. Emmet sẽ đặt con trỏ chuột trong thẻ đó, lúc này có thể tiếp tục gõ bên trong thẻ rồi

  • Thử gõ
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    0 sau đó
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    21, hoặc
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    2, hoặc
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    3
  • Ngoài ra thì còn có.
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    4 cho
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    5, 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    6 cho
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    7, 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    8 cho
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    9, 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    00 cho
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    01, và
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    02 cho phần

Các lớp học

Nếu bạn đã quen với CSS, Emmet cũng sử dụng cách tương tự, dấu. để tham khảo lớp học. Todefine class with the tag, only need more as this thế

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    03 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    04
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    05 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    06

ID

Làm với ID thì cũng tương tự

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    07 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    08

  Xây dựng jar thực thi bằng cách sử dụng Plugin Maven Shade

ghép chuỗi

Ghép 2 cái trên thì ta có

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    09 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    00

Attributes – thuộc tính

Ta cũng có thể chỉ định thuộc tính cho thẻ

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    01 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    02

Nội dung – nội dung

Để “bọc” nội dung trong thẻ, chỉ cần bỏ chúng giữa 2 dấu trích dẫn

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
03

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    04 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    05

  Tin tức CSS tháng 8 năm 2022 có gì mới

Anh chị em và con cái

Tương tự với anh chị em ruột và con cái thì dùng các ký tự dấu cộng

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
06 và dấu lớn hơn
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
07

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    08 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    09
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    00 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    01

Đang treo lên

Hình dung những gì đang xây dựng trong đầu vì lúc này bạn đang gõ tốc ký Emmet. Ví dụ này thì mình đang leo cây với

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
02

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
03

Kết quả

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
4

Ở đây mình muốn blockquote nó xuất hiện ngang hàng – cùng cấp với đoạn văn. Vì thế mới phải leo lên, nếu không thì blockquote sẽ chen vào trong đoạn văn

Nhóm

Nếu cấu trúc phức tạp thì bạn có thể nhóm thẻ – thẻ nhóm thay vì sử dụng leo lên. Ví dụ này mình tạo đầu trang và chân trang (không leo lên) sử dụng trích đơn

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
04 .

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
05

Kết quả

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>

Character and symbol $

Bạn có thể tạo thẻ theo cấp số nhân bằng (

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
06) và đánh số các mục theo thứ tự với ký hiệu đô la (
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
07)

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    08 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    09
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    20 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    21

Thậm chí bạn có thể tùy chỉnh luôn thứ tự đánh số bao gồm chữ số 0, bắt đầu với số xác định và có thể đảo ngược

Pad number 0.

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
22

Kết quả

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
0

Bắt đầu bằng một số xác định.

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
23

Kết quả

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
0

Island direction.

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
24

Kết quả

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
0

Đảo hướng từ một số xác định.

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
25

Kết quả

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
2

  Hiểu về JavaScript bất đồng bộ - Vòng lặp sự kiện

Tag stop

Có một số thẻ tag không cần gõ ra mà có thể hiểu được

  • Một lớp lúc đầu không có thẻ thì sẽ được hiểu là
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    26

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
27 —> 
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
04

  • Lớp với thẻ nhấn mạnh sẽ được hiểu là
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    29

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
60 —> 
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
61

  • Lớp xác định bên trong danh sách sẽ được hiểu là mục danh sách

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
62 —> 
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
63

  • Lớp xác định trong bảng được hiểu là
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    64 còn trong hàng thì là
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    65

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
66 —> 
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
67

Thẻ “Kẹp”

Có lúc bạn muốn kết nối thẻ tag vào các đoạn mã có sẵn, Emmet có thể dễ dàng thực hiện việc này. Đầu tiên, đánh dấu đoạn mã bạn cần thêm thẻ và mở bảng lệnh (

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
68) lên, tìm kiếm
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
69. Sau đó sẽ có hộp thoại để nhập phần tử vào

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
200 —> 
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
201

Ngoài cách này, bạn cũng có thể sử dụng cú pháp Emmet tiêu chuẩn trong hộp thoại này, ngắt đoạn văn bản với

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
202. Chức năng này không được gán vào phím tắt. Nên nếu bạn sử dụng tính năng này thường xuyên thì nên thêm phím tắt cho nó

Lorem Ipsum

“Lorem Ipsum” là đoạn văn bản giả mạo biến rất phổ biến được sử dụng để hiển thị các giá trị dữ liệu ngẫu nhiên trên trang. Chỉ cần nhập và

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
203 nhấn
<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
21. Emmet sẽ tạo ra 30 từ ngẫu nhiên có thể sử dụng để dàn nội dung trong dự án

You can also select the number of the character theo nhu cầu

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    205 sẽ cho bạn 10 từ ngẫu nhiên

Gop chung lại

Attempt to the general section at on back.

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
206

Kết quả

<div>
    <header>
        <ul>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>
6

Dùng Emmet trong CSS

Với CSS, thì Emmet có từng cái viết tắt cho từng thuộc tính, mình sẽ không liệt kê chúng ra hết mà sẽ đưa ra những trường hợp được sử dụng nhiều nhất. Bạn có thể xem danh sách đầy đủ tại đây

  Tìm hiểu về thuộc tính Chế độ viết trong CSS

Chức vụ

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    207 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    208 (mặc định là họ hàng)
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    209 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    210
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    211 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    212
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    213 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    208
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    215 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    216

Xem thêm Tất tần tật về vị trí thuộc tính trong CSS

Shows

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    217 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    218 (default block)
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    219 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    210
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    211 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    218
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    213 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    214
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    215 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    216
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    217 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    218
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    219 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    00

con trỏ

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    01 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    02

Color

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    03 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    04
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    05 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    06
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    07 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    08
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    09 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    10

Đệm lề. pad lề

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    11 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    12
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    13 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    14
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    15 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    16
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    17 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    18
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    19 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    20
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    21 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    22
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    23 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    24
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    25 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    26
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    27 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    28
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    29 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    30
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    31 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    32

Kích thước hộp

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    33 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    34

Xem thêm CSS Box Model – Các cách hiển thị phần tử với thuộc tính hiển thị

Chiều rộng

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    35 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    36
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    37 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    38
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    39 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    40
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    41 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    42
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    43 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    44
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    45 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    46

Canh lề

  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    47 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    48
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    49 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    50
  • <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    51 —> 
    <div>
        <header>
            <ul>
                <li><a href="">a>li>
            ul>
        header>
        <footer>
            <p>p>
        footer>
    div>
    52

Kết luận

Với Emmet, bạn có thể tạo nên cấu trúc HTML phức tạp chỉ với một dòng, với CSS cũng làm được những điều kiện tương tự. Tóm lại, Emmet khá đỉnh, sử dụng Emmet có thể giúp nâng cao hiệu suất và tốc độ viết HTML và CSS