Các Phần tử Cấp khối và Nội tuyến trong HTML
Bài viết này giải thích về các phần tử cấp khối và nội tuyến trong HTML.
Điều này giải thích sự khác biệt giữa các phần tử cấp khối và các phần tử nội tuyến, cũng như các phần tử cấp khối chính và các phần tử nội tuyến.
YouTube Video
Các phần tử cấp khối và các phần tử nội tuyến
HTML có hai loại phần tử chính quyết định cách chúng hiển thị trên màn hình: 'phần tử cấp khối' và 'phần tử nội tuyến'. Các phần tử này đóng vai trò quan trọng trong bố cục trang và trực tiếp ảnh hưởng đến cách chúng được định vị. Tại đây, chúng tôi sẽ giải thích chi tiết các đặc điểm và cách sử dụng của từng phần tử.
Phần tử cấp khối là gì?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Phần tử cấp khối thường chiếm toàn bộ chiều rộng của trang và xuất hiện trên một dòng riêng biệt so với các phần tử khác. Các phần tử này có thể chứa các phần tử cấp khối khác hoặc phần tử nội tuyến bên trong chúng và định nghĩa cấu trúc lớn hơn của tài liệu.
Đặc điểm:
- Các phần tử bắt đầu trên một dòng mới và mở rộng để chiếm toàn bộ chiều rộng có thể (thường là toàn bộ chiều rộng của phần tử cha).
- Chúng được tách biệt với các phần tử khối khác theo chiều dọc, với các khoảng cách (margin) được áp dụng giữa chúng.
- Chúng có thể chứa các phần tử khối hoặc phần tử nội tuyến khác bên trong chúng.
Tại đây, các phần tử cấp khối sau được sử dụng:.
- Thẻ
<div>thường được sử dụng để xây dựng bố cục. - Thẻ
<p>được sử dụng để định nghĩa một đoạn văn. <h1>đến<h6>là các phần tử được sử dụng để định nghĩa tiêu đề.<h1>là tiêu đề lớn nhất, và<h6>là tiêu đề nhỏ nhất.- Thẻ
<ul>tạo một danh sách không có thứ tự. - Thẻ
<ol>tạo một danh sách có thứ tự. - Thẻ
<section>định nghĩa một phần trong tài liệu.
Phần tử nội dung là gì?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Các phần tử nội tuyến được đặt trên cùng một dòng với các phần tử khác và thường chỉ chiếm chiều rộng vừa bằng nội dung của chúng. Các phần tử này được coi là một phần của văn bản và, không giống như các phần tử cấp khối, không chiếm toàn bộ dòng.
Đặc điểm:
- Các phần tử xuất hiện trên cùng một dòng và được đặt cạnh nhau với các phần tử nội tuyến khác.
- Chiều rộng được xác định bởi nội dung của phần tử (văn bản hoặc hình ảnh).
- Chúng có thể được bao gồm bên trong các phần tử cấp khối, nhưng không thể ngược lại.
Tại đây, các phần tử nội tuyến sau được sử dụng:.
- Thẻ
<span>được sử dụng để nhấn mạnh một phần của văn bản với một kiểu dáng cụ thể. - Thẻ
<a>định nghĩa một liên kết. - Thẻ
<img>là một phần tử được sử dụng để nhúng hình ảnh. <strong>làm nổi bật văn bản quan trọng (thường được hiển thị in đậm).<em>chỉ ra văn bản được nhấn mạnh (thường được hiển thị in nghiêng).
Sự khác biệt giữa phần tử cấp khối và phần tử nội tuyến
- Phương pháp hiển thị: Các phần tử cấp khối được hiển thị trên một dòng mới và chiếm toàn bộ chiều rộng của trang, trong khi phần tử nội tuyến được hiển thị trên cùng một dòng với các phần tử khác và chiều rộng của chúng được xác định bởi nội dung.
- Xử lý các phần tử bên trong: Các phần tử cấp khối có thể chứa các phần tử cấp khối khác cũng như các phần tử nội tuyến, nhưng phần tử nội tuyến không thể chứa các phần tử cấp khối.
- Vai trò trong bố cục: Các phần tử cấp khối chủ yếu được sử dụng để tạo ra cấu trúc bố cục của một trang, trong khi phần tử nội tuyến định nghĩa các phần tử nhỏ như văn bản và liên kết.
Các điểm chính để phân biệt
Tạo bố cục: Sử dụng các phần tử cấp khối như <div>, <section>, <article> để định nghĩa các phần lớn và khối nội dung.
Trang trí văn bản và liên kết: Sử dụng các phần tử nội tuyến như <span>, <a>, <strong>, <em> để trang trí các phần của văn bản hoặc thêm liên kết.
Kết hợp các phần tử cấp khối và nội tuyến
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Các phần tử mức khối như
<main>,<header>, và<section>được sử dụng, và chúng thường được hiển thị trên một dòng mới, chiếm toàn bộ chiều rộng của phần tử cha của chúng. - Các phần tử nội tuyến như
<a>,<strong>,<span>, và<img>được sử dụng, và chúng được đặt trong dòng mà không chiếm toàn bộ chiều rộng trong các phần tử mức khối.
Việc bao gồm các phần tử nội tuyến bên trong các phần tử cấp khối là một mô hình phổ biến. Ví dụ, thông thường chúng ta thêm liên kết (<a>) hoặc nhấn mạnh (<strong>) trong một đoạn văn (<p>). Tuy nhiên, do không thể bao gồm các phần tử cấp khối bên trong các phần tử nội tuyến, việc sử dụng chúng một cách phù hợp là rất quan trọng.
Tóm tắt
Các phần tử cấp khối và phần tử nội tuyến là hai loại phần tử cơ bản của HTML, mỗi loại có một vai trò riêng. Các phần tử cấp khối tạo nên nền tảng của bố cục trang, trong khi các phần tử nội tuyến được sử dụng để trang trí và xử lý nội dung chi tiết bên trong chúng. Hiểu và sử dụng đúng cách hai loại phần tử này sẽ giúp mã HTML hiệu quả hơn.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.