Thiết Kế Web

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

Thẻ div là một trong những thẻ khá là đặc biệt trong html, ngày càng được sử dụng nhiều hơn và được nhiều người đánh giá rất cao về mặt công dụng trình bày. Các lão làng trong thiết kế …

Thẻ div là một trong những thẻ khá là đặc biệt trong html, ngày càng được sử dụng nhiều hơn và được nhiều người đánh giá rất cao về mặt công dụng trình bày. Các lão làng trong thiết kế thường dùng các thẻ div rất nhiều thay vì các thẻ table. Thẻ div thật ra là layer(lớp), thẻ div có thể chứa mọi thành phần html khác, nó đơn thuần giống như một tag body nhưng linh động hơn.

1. 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. Đặc biệt thẻ <div> được hỗ trợ trên tất cả các trình duyệt.

Ví dụ:

 2. 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.

3. 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>

4. 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 ra 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 web của bạn có thể bị sai lệch ngoài ý muốn vì trình duyệt sẽ đặt một đường thẳng phân cách trước và sau thể div

5. 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

 6. 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

 7. 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

Kết luận: Bài viết trên là kiến thức cơ bản về thẻ DIV trong HTML. Hy vọng bài viết này sẽ giúp ích cho các bạn.

Thẻ:, ,
comments powered by Disqus
Powered by HTH Company