Kênh 360 Công Nghệ Kênh 360 Công Nghệ

Trang chủ - Thiết kế web - HTML - CSS - Tìm hiểu thẻ DIV cơ bản và nâng cao

Tìm hiểu thẻ DIV cơ bản và nâng cao

Thẻ <div> xác định một division hoặc một section trong tài liệu HTML. Nó thường đọc dùng để nhóm các phần tử khối block-elements có cùng một style.


Mô tả thẻ DIV:

Thẻ <div> trong XHTML xác định các vùng logic - logical divisions bên trong nội dung của một trang. Nó giúp định dạng, quản lý, sao chép các sections trong trang web. Nó là công cụ mạnh hỗ trợ cho các Web developers trong việc thiết kế web theo chuẩn của W3C.

ví dụ về thẻ <div>

Ví dụ khối sau có nền màu xanh:

<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>

This is a header

This is a paragraph.


Trình duyệt hỗ trợ

Internet Explorer Firefox Opera Google Chrome Safari

Hầu hết tất cả các trình duyệt.


Khác biệt giữa HTML và XHTML

Thuộc tính "align" của thẻ div được hỗ trợ trong HTML 4.01, nhưng không được hỗ trợ trong XHTML 1.0 Strict DTD.


Sử dụng thẻ DIV:

  • Thẻ <div> là một phần tử khối
  • Thẻ <div> có thể chứa bất kỳ thẻ nào khác
  • Thẻ <div> không thể nằm trong thẻ <p>

Tips:

  • Thẻ <div> không thay thế thẻ <p>. Thẻ <p> chỉ dùng cho đoạn văn bản, hỗ trợ định dạng đoạn văn bản với các khoảng trắng, trong khi thẻ <div> xác định nhiều vùng trong một tài liệu HTML. Đừng thay thế thẻ <p> bằng <div>.
  • Bạn nên đặt id cho các thẻ <div> riêng biệt. Và áp dụng một lớp CSS cho các div có cùng một style.
  • Ví dụ, để xác định nội dung chính của site, bạn nên đặt id cho thẻ DIV là: "maincontent". <div id="maincontent">
Sử dụng Thẻ div kết hợp với CSS để tạo bố cục cho trang web.
Chú ý: Đừng quên đóng thẻ div </div> khi bạn đã tạo một thẻ mở. Nếu không bố cục website của bạn có thể bị sai lệch ngoài ý muốn.

Trình duyệt sẽ đặt một đường thẳng phân cách trước và sau các thẻ div.


thuộc tính tùy chọn

DTD chỉ rõ thuộc tính được cho phép. S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description DTD
align left
right
center
justify
Deprecated. Use styles instead.
Specifies the alignment of the content inside a div element
TF


thuộc tính chuẩn

Attribute Value Description DTD
class classname Specifies a classname for an element STF
dir rtl
ltr
Specifies the text direction for the content in an element STF
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents STF

Thuộc tính sự kiện

Thẻ <div> hỗ trợ các thuộc tính sự kiện sau:

Attribute Value Description DTD
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
onmouseout script Script to be run when mouse pointer moves out of an element STF
onmouseover script Script to be run when mouse pointer moves over an element STF
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF

Dịch từ Nguồn w3cschool.org

Tin mới hơn:
Tin cũ hơn:

Lần cập nhật cuối ( Thứ bảy, 23 Tháng 5 2009 21:25 )  

Kênh 360 công nghệ

  • Nổi bật
  • Tin mới
  • Game mới
  • PrestaShop Guide
  • PrestaShop

Có thể bạn quan tâm

Download nhiều nhất

11/12
Download PES 2011 - FIFA 11
693
18/12
binkw32 dll
175
18/12
TeamViewerQS
49
English French German Japanese Korean