- Tham gia
- 28/02/2015
- Bài viết
- 16,220
- Được Like
- 12,559
Tìm hiểu dạng block và inline của HTML
Block và inline là 2 dạng thường thấy khi lập trình với HTML. Vậy cụ thể cách thức hoạt động của nó thế nào thì bài viết này sẽ mô tả cho bạn được rõ hơn.
Trong văn bản HTML, các phần tử HTML được phân loại ra thành 2 cấp độ đó là: block và inline
Các phần tử dạng block (khối) được hiển thị bắt đầu bởi một dòng mới, đó là các phần tử:
Ví dụ: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div> ...
Các phần tử dạng inline hiển thị bình thường mà không có sự ngắt dòng mới, như các phần tử:
Ví dụ: <b>, <a>, <strong>, <img>, <input>, <em>, <span> ...
Thẻ <div>
Thẻ <div> là một loại thẻ block thường được sử dụng làm khối để chứa các phần tử HTML khác. Thường thì div sẽ được sử dụng kết hợp với CSS để trình bày HTML
Kết quả:
Thẻ <span>
Thẻ <span> thì lại là loại thẻ inline, thường được dùng để chứa văn bản. Tương tự div, span thường kết hợp với CSS để định dạng văn bản nó chứa:
Kết quả:
Tóm lại: Thẻ <div> dùng để định nghĩa khối trong HTML. Thẻ <span> định nghĩa các phần văn bản dạng inline không ngắt dòng.
Phần tử loại block thì có thể chứa các phần tử inline, phần tử inline thì không được chứa phần tử block
Ngoài ra có một số phần tử có thể sử dụng khi thì là dạng block khi thì inline như:
Block và inline là 2 dạng thường thấy khi lập trình với HTML. Vậy cụ thể cách thức hoạt động của nó thế nào thì bài viết này sẽ mô tả cho bạn được rõ hơn.
Trong văn bản HTML, các phần tử HTML được phân loại ra thành 2 cấp độ đó là: block và inline
Các phần tử dạng block (khối) được hiển thị bắt đầu bởi một dòng mới, đó là các phần tử:
Ví dụ: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div> ...
Các phần tử dạng inline hiển thị bình thường mà không có sự ngắt dòng mới, như các phần tử:
Ví dụ: <b>, <a>, <strong>, <img>, <input>, <em>, <span> ...
Thẻ <div>
Thẻ <div> là một loại thẻ block thường được sử dụng làm khối để chứa các phần tử HTML khác. Thường thì div sẽ được sử dụng kết hợp với CSS để trình bày HTML
Mã:
<div style="background-color:green; color:white; padding:20px;">
<p>Một đoạn văn bản.</p>
<p>Đoạn văn bản khác.</p>
</div>
Kết quả:
Thẻ <span> thì lại là loại thẻ inline, thường được dùng để chứa văn bản. Tương tự div, span thường kết hợp với CSS để định dạng văn bản nó chứa:
Mã:
<h2>Some
<span style="color:red">Important</span>
Message</h2>
Kết quả:
Phần tử loại block thì có thể chứa các phần tử inline, phần tử inline thì không được chứa phần tử block
Ngoài ra có một số phần tử có thể sử dụng khi thì là dạng block khi thì inline như:
- APPLET - nhúng Java applet
- IFRAME - Inline frame
- INS - chèn văn bản
- MAP - image map
- OBJECT - embedded object
- SCRIPT - script trong HTML
Nguồn: Internet