Hướng dẫn Khái quát cơ bản và nâng cao về thẻ DIV

[PVS]

Khái quát cơ bản và nâng cao về thẻ DIV

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ụ:

<div style="color:#00FF00">
   <h3>Tiêu đề bài viết</h3>
   <p>Nội dung bài viết</p>
</div>

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.

​

6. Thuộc tính chuẩn:

​

7. Thuộc tính sự kiện:

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

​

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

Chúc các bạn thành công.

Nguồn: tuhocphp.com​