HTML - Phân loại các phần tử Block và Inline

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của các phần tử block và inline trong HTML. Là người thầy thân thiện trong lĩnh vực máy tính, tôi sẽ dẫn dắt các bạn qua hành trình này với rất nhiều ví dụ và giải thích. Vậy, hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng bắt đầu编码 nào!

Phần tử Block

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà bằng các khối LEGO. Một số khối này lớn và chiếm toàn bộ một hàng. Đây chính là các phần tử block trong HTML. Chúng bắt đầu từ một dòng mới và chiếm toàn bộ chiều rộng có sẵn.

Hãy xem xét một số phần tử block phổ biến:

<div>Tôi là một phần tử block</div>
<p>Tôi cũng là một phần tử block</p>
<h1>Tôi là một tiêu đề và cũng là một phần tử block!</h1>

Khi bạn chạy đoạn mã này, mỗi phần tử sẽ xuất hiện trên một dòng mới. Nó giống như chúng đang nói, "Tôi cần không gian riêng của mình, cảm ơn bạn rất nhiều!"

Dưới đây là bảng liệt kê một số phần tử block phổ biến:

Phần tử	Mô tả
<div>	Một容器通用
<p>	Một đoạn văn bản
<h1> đến <h6>	Tiêu đề
<ul>	Danh sách không có thứ tự
<ol>	Danh sách có thứ tự
<li>	Phần tử danh sách

Phần tử Inline

Bây giờ, hãy tưởng tượng những mảnh LEGO nhỏ hơn có thể đặt cạnh nhau trên cùng một hàng. Đây chính là các phần tử inline trong HTML. Chúng chỉ chiếm-width cần thiết và không bắt đầu từ một dòng mới.

Dưới đây là một ví dụ:

<span>Tôi là một phần tử inline</span>
<a href="#">Tôi là một liên kết và cũng là inline</a>
<strong>Tôi là chữ đậm và cũng inline!</strong>

Các phần tử này sẽ tất cả xuất hiện trên cùng một dòng (nếu có đủ không gian).

Dưới đây là bảng liệt kê một số phần tử inline phổ biến:

Phần tử	Mô tả
<span>	Một container inline通用
<a>	Một liên kết
<strong>	Chữ đậm
<em>	Chữ in nghiêng
<img>	Một hình ảnh
<br>	Một dòng断裂

Nhóm các phần tử Block và Inline trong HTML

Bây giờ chúng ta đã hiểu về các phần tử block và inline, hãy xem cách chúng ta có thể nhóm chúng lại với nhau. Điều này giống như việc sắp xếp các mảnh LEGO vào các ngăn khác nhau của một hộp công cụ.

Nhóm bằng thẻ <div>

Thẻ <div> giống như một hộp lớn nơi bạn có thể đặt nhiều phần tử cùng nhau. Đây là một phần tử block-level, vì vậy nó bắt đầu từ một dòng mới.

Hãy xem một ví dụ:

<div style="background-color: lightblue; padding: 20px;">
<h2>Chào mừng đến với trang web của tôi</h2>
<p>Đây là một đoạn văn bản trong một div.</p>
<p>Đây là đoạn văn bản khác với <span style="color: red;">một phần văn bản màu đỏ</span>.</p>
</div>

Trong ví dụ này, chúng ta đã nhóm một tiêu đề và hai đoạn văn bản trong một <div>. Chúng ta cũng đã thêm một chút phong cách để làm cho nóDistinct visually. Thẻ <span> trong đoạn văn bản thứ hai là một phần tử inline mà chúng ta đã sử dụng để thay đổi màu sắc của một phần văn bản.

Nhóm bằng thẻ <span>

Thẻ <span> giống như một容器 nhỏ, trong suốt mà bạn có thể sử dụng để nhóm các phần tử inline hoặc thậm chí là các phần của văn bản trong một phần tử block.

Dưới đây là một ví dụ:

<p>
Tôi yêu <span style="color: blue;">màu xanh lam</span> và
<span style="color: green;">màu xanh lá cây</span> colors.
</p>

Trong trường hợp này, chúng ta đã sử dụng <span> để áp dụng màu sắc khác nhau cho các từ cụ thể trong một đoạn văn bản.

Nhớ rằng, <div> là để nhóm các phần tử block-level (hoặc tạo các nhóm block-level), trong khi <span> là để nhóm các phần tử inline hoặc các phần của văn bản.

Kết hợp tất cả lại

Bây giờ, hãy kết hợp những gì chúng ta đã học vào một ví dụ phức tạp hơn:

<div style="background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc;">
<h1>Blog cá nhân của tôi</h1>
<div style="margin-bottom: 20px;">
<h2>Bài viết mới nhất: Niềm vui của việc lập trình</h2>
<p>
Lập trình giống như giải đố. Nó khó khăn, nhưng
<span style="font-weight: bold; color: #ff6600;">rất thú vị</span>
khi bạn cuối cùng làm cho chương trình của mình hoạt động!
</p>
</div>
<div>
<h3>Liên kết nhanh</h3>
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Về tôi</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</div>
</div>

Trong ví dụ này, chúng ta đã tạo một giao diện blog đơn giản sử dụng nhiều phần tử block và inline. Chúng ta đã sử dụng thẻ <div> để nhóm các nội dung liên quan, <span> để định dạng các phần cụ thể của văn bản, và một sự kết hợp của các phần tử block và inline khác để cấu trúc nội dung của chúng ta.

Nhớ rằng, HTML giống như việc xây dựng bằng LEGO. Bắt đầu với các khối cơ bản, và trước khi bạn biết điều đó, bạn sẽ tạo ra những cấu trúc tuyệt vời! Hãy tiếp tục thực hành và đừng sợ thử nghiệm. Đó là cách chúng ta đã học!

Chúc các bạn may mắn trong việc lập trình, các pháp sư web tương lai! ?‍♂️?

Credits: Image by storyset