Phân loại thẻ HTML và cách chuyển đổi khối

Sau khi nắm được các thẻ cơ bản HTML, thì các bạn cần phân loại thẻ HTML để có thể sử dụng thẻ HTML phù hợp hơn cho từng trường hợp. Nào cùng tìm hiểu qua bài viết dưới đây nhé!

I. Phân loại thẻ HTML

Thẻ HTML được chia làm 3 khối cơ bản

1. None

Khối này không hiển thị nội dung bên trong. 

Ví dụ: <html>, <head>, <title>, <meta>, <link>, <script>, <style> ..

2. Block level

Khối này hiển thị nội dung bên trong và chiều ngang tràn hết trình duyệt.

Ví dụ: <body>, <h1>, <p>, <ul>, <form>, <table> ...

3. Inline

Khối này hiển thị nội dung bên trong và chiều ngang tùy thuộc độ dài của các đối tượng bên trong của khối đó. Và nó sẽ nằm trên một dòng.

Ví dụ: <span>, <img>, <a>, <b>, <i>, <u> ...

phan loai the html

Các thẻ HTML trong cặp thẻ <body> </body> thường là kiểu blockinline.

II. Cách chuyển đổi khối

1. Chuyển block sang inline

Dùng css với thuộc tính float: left,right.

Dùng css với thuộc tính display: inline.

2. Chuyển inline sang block

Dùng css với thuộc tính display: block.

III. Ví dụ chuyển đổi khối

Khi chưa chuyển khối

<div>Thẻ Block level</div>
<br>
<span>Thẻ Inline</span>

<style type="text/css">
  div{
    border: 1px solid #000;
    margin: 5px;
    font-size: 30px;
    padding: 5px;
  }
  span{
    border: 1px solid red;
    margin: 5px;
    font-size: 30px;
    padding: 5px;

  }
</style>

Khi đã chuyển khối block sang inline: cụ thể là thêm thuộc tính display: inline vào css của thẻ div.

<div>Thẻ Block level</div>
<br>
<span>Thẻ Inline</span>

<style type="text/css">
  div{
    border: 1px solid #000;
    margin: 5px;
    font-size: 30px;
    padding: 5px;
    display:inline;
  }
  span{
    border: 1px solid red;
    margin: 5px;
    font-size: 30px;
    padding: 5px;

  }
</style>

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 - 82 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