Tìm hiểu các phần tử block trong HTML

Trong bài viết trước Taimienphi.vn đã giới thiệu cho bạn về danh sách (list) trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về phần tử block trong HTML.

Các phần tử HTML được phân làm 2 loại: Block Element (phần tử khối) và Inline Element (phần tử nội tuyến). Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết phần tử block trong HTML.

phan tu block trong html hoc html

Phần tử block trong HTML

Mục Lục bài viết:
1. Phần tử block trong HTML
1.1. Phần tử khối (Block Element) trong HTML
1.2. Phần tử nội tuyến (Inline Element) trong HTML
1.3. Phần tử (div) trong HTML
1.4 Phần tử (Span) trong HTML
2. Tổng kết

1. Phần tử block trong HTML

1.1 Phần tử khối (Block Element) trong HTML

Một phần tử khối (block element) thường bắt đầu trên dòng mới và chiếm toàn bộ chiều rộng có sẵn.
Phần tử div là một phần tử khối.
Ví dụ: ví dụ dưới đây minh họa phần tử khối trong HTML:

phan tu block trong html

Kết quả trả về sau khi áp dụng phần tử khối có dạng như dưới đây:

phan tu block trong html 2

Dưới đây là danh sách các phần tử khối trong HTML:

phan tu block trong html 3

1.2 Phần tử nội tuyến (Inline Element) trong HTML

Phần tử nội tuyến (Inline Element) trong HTML không bắt đầu bằng dòng mới và chỉ chiếm chiều rộng vừa đủ.
Ví dụ: tham khảo ví dụ dưới đây để tìm hiểu về phần tử nội tuyến (Inline Element) trong HTML:

phan tu block trong html 4

Kết quả trả về sau khi áp dụng phần tử nội tuyến có dạng như dưới đây:

phan tu block trong html 5

Dưới đây là bảng danh sách các phần tử nội tuyến trong HTML:

phan tu block trong html 6

1.3 Phần tử div trong HTML

Phần tử div trong HTML thường được sử dụng để chứa các phần tử HTML khác.
Phần tử div không yêu cầu các thuộc tính, tuy nhiên style, classid là các thuộc tính phổ biến.
Khi được sử dụng cùng CSS, phần tử div có thể được sử dụng để chỉ định kiểu block (khối) cho nội dung.
Ví dụ: tham khảo ví dụ minh họa dưới đây để dễ hình dung về phần tử div trong HTML:

phan tu block trong html 7

Kết quả trả về sau khi áp dụng phần tử div có dạng như dưới đây:

phan tu block trong html 8

1.4 Phần tử span trong HTML

Phân tử span trong HTML thường được sử dụng làm phần tử chứa văn bản (text).
Phần tử span không yêu cầu các thuộc tính, tuy nhiên style, classid là các thuộc tính phổ biến.
Khi được sử dụng cùng CSS, phần tử span có thể được sử dụng để chỉ định kiểu cho các phần của văn bản.
Ví dụ: dưới đây là ví dụ minh họa phần tử span trong HTML:phan tu block trong html 9

Kết quả trả về sau khi áp dụng phần tử span có dạng như dưới đây:

phan tu block trong html 10

2. Tổng kết

Dưới đây là bảng danh sách các thẻ trong HTML:

phan tu block trong html 11

https://thuthuat.taimienphi.vn/phan-tu-block-trong-html-50635n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về phần tử block (khối) trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết để có được câu tả lời và học HTML tốt hơn nhé. Trong các bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính class trong HTML nhé.

Tác giả: Duy Vinh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Tìm hiểu các phần tử trong HTML
Thuộc tính class trong HTML, cách sử dụng
Thuộc tính Style trong HTML
Thuộc tính id trong HTML, thẻ ID
Danh sách các thuộc tính trong HTML
Từ khoá liên quan:

phan tu block trong html

, block trong html, html,

SOFT LIÊN QUAN
  • HTML Optimizer Pro

    Tiện ích mã nguồn HTML, tăng tốc độ website

    HTML-Optimizer Pro là tiện ích mã nguồn HTML, tăng tốc độ website. Nó cho phép tải các file ảnh với kích thước và định dạng cho phép như JPEG và PNG. Đồng thời hỗ trợ lưu trữ dữ liệu, tối ưu hóa mã nguồn HTML, tìm kiếm d ...

Tin Mới

  • Sự khác nhau giữa JSON và XML

    XML (Extensible Markup Language) và JSON (JavaScript Object Notation) là 2 định dạng trao đổi dữ liệu phổ biến nhất hiện nay. So sánh JSON và XML, sự khác nhau giữa JSON và XML là gì? Cùng theo dõi bài viết dưới đây để tìm hiểu nhé.

  • Danh sách (list) trong HTML

    Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về bảng (table) trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách (list) trong HTML.

  • Thẻ img trong HTML

    Trên các trang web đều sử dụng hình ảnh minh họa để làm nổi bật nội dung, đồng thời để tránh người dùng cảm thấy khó chịu vì text quá dài. Trong HTML hình ảnh được chỉ định bằng thẻ img. Tham khaor tiếp bài viết dưới

  • Viết 4 - 5 câu về tình cảm với bạn bè

    Chúng ta ai cũng có cho mình những người bạn thân thiết. Hãy cùng tập cách kể, giới thiệu về người thân của mình qua bài Viết 4 - 5 câu về tình cảm