Phần Tử Khối Và Phần Tử Nội Tuyến Trong HTML

Trang chủ » Nội Tuyến » Phần Tử Khối Và Phần Tử Nội Tuyến Trong HTML

Có thể bạn quan tâm

Hầu hết các phần tử HTML đều thuộc một trong hai loại là: phần tử khối hoặc phần tử nội tuyến

Phần tử khối (Block Element) là gì?

Phần tử khối:

  • Luôn được bắt đầu trên một hàng mới.
  • Chiều rộng của nó trải dài từ trái qua phải (chiếm toàn bộ chiều rộng phần nội dung của phần tử chứa nó).
  • Phần tử phía sau nó sẽ được bắt đầu trên một hàng mới.

Dưới đây là hình ảnh minh họa về phần tử khối:

Phần tử thứ nhất Phần tử thứ hai Phần tử thứ ba Phần tử thứ tư (Đây là một phần tử khối) Phần tử thứ năm

Một số thẻ thuộc kiểu phần tử khối:

  • <div>
  • <p>
  • <h1> - <h6>
  • <form>
  • <table>
  • <ul>, <ol>, <li>

Phần tử nội tuyến (Inline Element) là gì?

Phần tử nội tuyến:

  • Không được bắt đầu trên một hàng mới (trừ trường hợp trước nó là một phần tử khối).
  • Chiều rộng của nó phụ thuộc vào chiều rộng phần nội dung của nó.

Dưới đây là hình ảnh minh họa về phần tử nội tuyến:

Phần tử thứ nhất (Đây là một phần tử nội tuyến) Phần tử thứ hai (Đây là một phần tử nội tuyến) Phần tử thứ ba Phần tử thứ tư (Đây là một phần tử nội tuyến) Phần tử thứ sáu (Đây là một phần tử nội tuyến)

Một số thẻ thuộc kiểu phần tử nội tuyến:

  • <span>
  • <a>
  • <img>

Thẻ <div>

Thẻ <div> là một phần tử khối và có thể dùng để chứa các phần tử khác.

Thẻ <div> không có định dạng gì đặc biệt. Nó thường được dùng để nhóm các phần tử HTML lại thành một khối, tiện cho việc định dạng tập thể.

Ví dụ <p>Đoạn văn số 1</p> <div style="color:blue;font-size:25px"> Đoạn văn số 2 <p>Đoạn văn số 3</p> <p>Đoạn văn số 4</p> </div> <p>Đoạn văn số 5</p> Xem ví dụ

Ta có thể dùng thuộc tính align để canh lề nội dung của phần tử <div>

Ví dụ <p>Đoạn văn số 1</p> <div align="center"> Đoạn văn số 2 <p>Đoạn văn số 3</p> <p>Đoạn văn số 4</p> </div> <p>Đoạn văn số 5</p> <div align="right"> <p>Đoạn văn số 6</p> <p>Đoạn văn số 7</p> </div> Xem ví dụ

Thẻ <span> trong HTML

Thẻ <span> là một phần tử nội tuyến, nó thường được dùng để chứa văn bản và định dạng cho văn bản.

Ví dụ <p>Trong đoạn văn bản <span style="background-color:green">câu này nằm bên trong thẻ span</span> và được định dạng</p> Xem ví dụ
Gợi ý: Để kiểm tra một phần tử thuộc loại phần tử khối hay phần tử nội tuyến, ta thêm style="border:1px solid black" vào thẻ mở của phần tử để xem kích thước của phần tử. Ví dụ <div style="border:1px solid black">Hello</div>

Từ khóa » Nội Tuyến