Block và Inline trong HTML
HTML HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. Code: ...
HTML
HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <div style="background-color:black; color:white; padding:20px;"> <h2>HTML</h2> <p>HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web.</p> </div> </body> </html> |
Demo
Thành phần block và Inline trong HTML
Block và Inline là hai khái niệm cơ bản nhưng rất quan trọng khi bạn bắt tay vào thiết kế website. Hầu hết các thành phần trong HTML đều thuộc block hoặc inline. Vậy block là gì? Inline là gì?
Block là những thẻ tự động tạo một dòng mới ở đầu và ở cuối của thẻ khi hiển thị trên trình duyệt. Ví dụ như thẻ: <h1>, <p>, <ul>, <table>
Ví dụ:
1 |
Thành phần 1 <p>thành phần 2</p> thành phần 3 |
Trình duyệt sẽ hiển thị:
1 2 3 |
Thành phần 1 thành phần 2 thành phần 3 |
Thẻ P sẽ tự động tạo một dòng mới ở đầu và ở cuối thẻ. P là một thành phần kiểu block.
Inline là những thẻ hiển nội dung trên cùng một dòng (không tạo ra dòng mới, không xuống dòng). Ví dụ như thẻ: <b>, <td>, <a>, <img>
Ví dụ:
1 |
Thành phần 1 <span>thành phần 2</span> thành phần 3 |
Trình duyệt sẽ hiển thị:
1 |
Thành phần 1 thành phần 2 thành phần 3 |
Thẻ span vẫn hiển thị nội dung trên cùng một dòng. Span là một thành phần kiểu inline.
Thẻ div trong HTML
Thẻ <div> là một thẻ block có thể sử dụng để chứa các thành phần HTML khác.
Thẻ <div> không mang ý nghĩa đặc biệt nào (như thẻ <h1> dùng để định nghĩa đề mục, thẻ <a> để tạo liên kết…) và cũng không kèm theo thuộc tính bắt buộc.
Vì là một thẻ block nên khi hiển thị, trình duyệt sẽ thêm một dòng ở trước và sau thẻ.
Cùng với CSS, thẻ <div> có thể được dùng để trang trí khung bao ngoài nội dung.
Thẻ span trong HTML
Thẻ <span> trong HTML là một thẻ inline có thể sử dụng để chứa nội dung là chữ.
Cũng giống thẻ <div>, thẻ <span> không mang ý nghĩa đặc biệt nào và cũng không có thuộc tính bắt buộc.
Nếu như thẻ <div> được tự động thêm dòng mới ở đầu và cuối thì thẻ <span> lại hoàn toàn không có bất kỳ trang trí tự động nào.
Khi sử dụng cùng với CSS, thẻ <span> có thể trang trí một phần của đoạn văn bản:
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <h1>Đề mục này <span style="color:red">rất quan trọng</span> trong trang</h1> </body> </html> |
Demo