Block element là gì

Tìm hiểu phần tử khối, phần tử nội tuyến trong HTML

- Trong HTML, nếu xét về đặc điểm hiển thị thì các phần tử sẽ được chia ra làm hai loại chính:

• Phần tử khối (Block element)
• Phần tử nội tuyến (Inline element)

1) Phần tử khối là gì ?

- Phần tử khối là loại phần tử mà khi hiển thị lên màn hình thì nó sẽ có các đặc điểm như sau:

• Luôn luôn được bắt đầu trên một hàng mới.
• Chiều rộng của phần tử sẽ chiếm toàn bộ chiều rộng phần nội dung của phần tử cha của nó.Ví dụ:

- Tôi có một tập tin HTML chứa đoạn mã như bên dưới. Phần tử khối là gì !? Phần tử nội tuyến là gì !?

Điểm khác nhau giữa phần tử khối và phần tử nội tuyến

Cách tạo một cái phần tử khối trong HTML

- Khi thực thi tập tin, màn hình trình duyệt sẽ hiển thị là:

- Để giúp các bạn dễ nhận ra đặc điểm hiển thị của các phần tử phía trên thì tôi sẽ thiết lập màu nền cho chúng.

- Sau khi xem xong phần minh họa phía trên thì chúng ta thấy hai phần tử

và

đều được bắt đầu trên một hàng mới, chiều rộng của chúng chiếm toàn bộ chiều rộng phần nội dung của phần tử cha của chúng. Cho nên, hai phần tử này chính là phần tử khối.

2) Phần tử nội tuyến là gì ?

- Phần tử nội tuyến là loại phần tử mà khi hiển thị lên màn hình thì nó sẽ có các đặc điểm như sau:

• Phần tử hiển thị tiếp nối trên hàng hiện tại (nếu anh của nó không phải là một phần tử khối)
• Chiều rộng của phần tử phụ thuộc vào kích cỡ của nội dung nằm ở bên trong nó.Ví dụ:

- Tôi có một tập tin HTML chứa đoạn mã như bên dưới.

Điểm khác giữa phần tử khối và phần tử nội tuyến

Cách tạo một cái phần tử khối trong HTML

- Khi thực thi tập tin, màn hình trình duyệt sẽ hiển thị là:

- Để giúp các bạn dễ nhận ra đặc điểm hiển thị của các phần tử phía trên thì tôi sẽ thiết lập màu nền cho chúng.

- Sau khi xem xong phần minh họa phía trên thì chúng ta thấy ba phần tử , , đều hiển thị tiếp nối trên hàng hiện tại, chiều rộng của chúng phụ thuộc vào kích cỡ của các nội dung nằm ở bên trong chúng. Cho nên, ba phần tử này chính là phần tử nội tuyến.

- Lưu ý: Phần tử cũng là một phần tử nội tuyến, nguyên nhân mà nó không được hiển thị tiếp nối trên hàng hiện tại là bởi vì phần tử anh của nó là một phần tử khối.

3) Cách kiểm tra một phần tử thuộc loại nào

- Để kiểm tra xem một phần tử thuộc loại "phần tử khối" hay "phần tử nội tuyến" thì cách đơn giản nhất là thiết lập màu nền cho nó hoặc tạo một cái đường viền bao xung quanh, sau đó dựa vào đặc điểm hiển thị của phần tử để kết luận.Ví dụ:

- Tôi không biết phần tử thuộc loại nào nên tôi tạo một cái đường viền bao xung quanh nó. Lập Trình Web

- Chỉ dựa vào đặc điểm chiều rộng của phần tử phụ thuộc vào chiều rộng của nội dung bên trong nó thì cũng đủ để kết luận rằng là một phần tử nội tuyến. Một số kiến thức cơ bản về HTML Cách tạo và chạy một tập tin HTML Cấu trúc cơ bản của một tập tin HTML Đoạn văn bản (Paragraph) Thẻ đề mục (Heading) Các thẻ định dạng văn bản Tìm hiểu khái niệm phần tử (Element) Cách viết chú thích Liên kết (Link) Cách liên kết đến một vị trí bên trong trang web Tìm hiểu khái niệm thuộc tính (Attribute) Cách sử dụng thuộc tính Style Thuộc tính ID & Class trong HTML Phần tử khối, phần tử nội tuyến Cách sử dụng thẻ