Tìm hiểu về cấu trúc và cách định dạng của thẻ HTML

I. Cấu trúc thẻ HTML

1. Thành phần của thẻ HTML

- Thẻ HTML được chia làm 3 thành phần cơ bản sau:

  • Selector: tên của thẻ HTML.
  • Property & value: thuộc tính và giá trị của thuộc tính.
  • Content: nội dung chứa trong thẻ.

2. Ví dụ HTML

<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>

- Selector là div.

- Property & value lần lượt là id với giá trị là demo, class cũng với giá trị demo, style với giá trị witdh: 200px.

- Content là Cấu trúc của thẻ HTML.

II. Định dạng thẻ HTML và mức độ ưu tiên

- Có 5 cách cơ bản để định dạng 1 thẻ HTML đó là style, id, class, selector, *.

1. Định dạng với *

- Thuộc tính * sẽ định dạng cho tất cả các thẻ HTML có trong trang Web.

- Ví dụ: 

<body>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
  </style>
</body>

- Chạy đoạn code trên các bạn sẽ nhận được kết quả text trong thẻ div và span đều chuyển sang màu đỏ.

2. Định dạng với selector

- Thuộc tính selector sẽ định dạng cho những thẻ selector giống nó và mức độ ưu tiên của nó cao hơn thuộc tính *.

- Ví dụ: 

<body>
  <div class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
   <div class="demo" style="width: 200px;">Định dạng thẻ HTML</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
  </style>
</body>

- Chạy đoạn code trên các bạn sẽ thấy đoạn text trong 2 thẻ div sẽ chuyển sang màu xanh và thẻ span vẫn giữ nguyên.

3. Định dạng với class

- Thuộc tính class sẽ định dạng cho những thẻ HTML có cùng chung class và mức độ ưu tiên sẽ cao hơn thuộc tính selector.

- Ví dụ: 

<body>
  <div class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML</div>
  <div style="width: 200px;">Mức độ ưu tiên</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
    .demo{
      color: yellow;
    }
  </style>
</body>

- Chạy đoạn code trên các bạn sẽ thấy đoạn text của 2 thẻ div đầu tiên sẽ đổi màu vàng và thẻ div thứ 3 vẫn giữ màu xanh, thẻ span vẫn màu đỏ do mức độ ưu tiên.

4. Định dạng với id

- Tương tự như class, thuộc tính id sẽ định dạng những thẻ HTMl có id giống nó. Đương nhiên mức độ ưu tiên sẽ cao hơn thuộc tính class.

- Ví dụ: 

<body>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 1</div>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 2</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 1</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 2</div>
  <div style="width: 200px;">Mức độ ưu tiên</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
    .demo{
      color: yellow;
    }
    #demo{
      color: #000;
    }
  </style>
</body>

- Chạy đoạn code trên các bạn sẽ thấy 2 thẻ div đầu tiên sẽ chuyển màu đen, các thẻ còn lại sẽ giữ nguyên màu.

5. Định dạng với style

- Thuộc tính style sẽ định dạng với chính thẻ HTML của nó và mức độ ưu tiên của nó sẽ cao hơn thuộc tính id.

- Ví dụ: 

<body>
  <div id="demo" class="demo" style="width: 200px; color: lime;">Hello Word</div>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 1</div>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 2</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 1</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 2</div>
  <div style="width: 200px;">Mức độ ưu tiên</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
    .demo{
      color: yellow;
    }
    #demo{
      color: #000;
    }
  </style>
</body>

- Chạy đoạn code trên các bạn sẽ thấy thẻ div đầu tiên sẽ đổi màu xanh lá, các thẻ còn lại sẽ giữ nguyên màu.

Bài viết nên đọc

Trên đây là những kiến thức từ kinh nghiệm bản thân mình nên các bạn có thể tham khảo. Nếu các bạn có góp ý cho mình thì hãy gửi vào đây, mình sẵn sàng nhận ý kiến đóng góp từ các bạn.

Ngoc Phuong

Ngoc Phuong - 61 bài viết - Đánh giá:

Có 2 cách học hiệu quả nhất, 1 là nói cho người khác biết thứ bạn mới học được, 2 là nói cho người khác biết thứ bạn sắp quên. Tôi mới học được rất nhiều thứ. Tôi cũng sắp quên rất nhiều thứ.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công khai