Tìm Hiểu Phần Tử Khối, Phần Tử Nội Tuyến Trong HTML - Web Cơ Bản

Trang chủ » Nội Tuyến Là Gì » Tìm Hiểu Phần Tử Khối, Phần Tử Nội Tuyến Trong HTML - Web Cơ Bản

Có thể bạn quan tâm

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
HTML Bài 14: Phần tử khối, phần tử nội tuyến 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.

<!DOCTYPE html> <html> <head> <title>Tiêu đề của trang web</title> <meta charset="utf-8"> </head> <body> <u>Phần tử khối là gì !?</u> <i>Phần tử nội tuyến là gì !?</i> <p>Điểm khác nhau giữa phần tử khối và phần tử nội tuyến</p> <s>block element & inline element</s> <h3>Cách tạo một cái phần tử khối trong HTML</h3> </body> </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ử <p> và <h3> đề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.

<!DOCTYPE html> <html> <head> <title>Tiêu đề của trang web</title> <meta charset="utf-8"> </head> <body> <p>Điểm khác <b>giữa</b> <s>phần tử khối</s> và <u>phần tử nội tuyến</u></p> <i>Phần tử khối là gì !?</i> <h3>Cách tạo một cái phần tử khối trong HTML</h3> </body> </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ử <b>, <s>, <u> đề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ử <i> 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ử <em> thuộc loại nào nên tôi tạo một cái đường viền bao xung quanh nó.

<!DOCTYPE html> <html> <head> <title>Tiêu đề của trang web</title> <meta charset="utf-8"> </head> <body> <em style="border:1px solid black;background-color:pink">Lập Trình Web</em> </body> </html>

- 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 <em> 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ẻ <div> và <span> trong HTML Chèn hình ảnh (Image) vào trang web Bản đồ ảnh (Image Map) Chèn Video vào trang web Chèn Audio vào trang web Chèn Iframe vào trang web Nhúng video trên Youtube vào trang web Danh sách (List) Bảng (Table) Cách nhúng ứng dụng bên ngoài (Plugin) vào trang web Các ký tự thực thể (Entities) trong HTML Danh sách các thẻ trong HTML (sắp xếp theo bảng chữ cái) Danh sách các thẻ trong HTML (sắp xếp theo thể loại) Danh sách mã ngôn ngữ (Language Code) trong HTML

Từ khóa » Nội Tuyến Là Gì