Thẻ Phân Chia Khu Vực | Hướng Dẫn Học

Trang chủ » Chia Vung Html » Thẻ Phân Chia Khu Vực | Hướng Dẫn Học

Có thể bạn quan tâm

Thẻ phân chia khu vực
  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học HTML/HTML5
  • Thẻ phân chia khu vực

Định nghĩa và cách dùng thẻ <div>

  • Thẻ <div></div> viết tắt của từ "division" có nghĩa là phân chia, ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web.
  • Có thể chứa hầu hết các thẻ trong HTML/XHTML.
  • Một số thẻ không được chứa bên trong <div></div>: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>.
  • Một số thẻ không nên chứa bên trong <div></div>: <style></style>, <script></script>.

  • Một số khu vực khuyên sử dụng thẻ <div></div>:

    • Header, global navigation, page body, content, sidebar, footer (Xem lại cấu trúc cơ bản của trang web)
    • Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ <div></div> để tiện cho việc điều khiển.

Xem ví dụ để hiểu rõ hơn về thẻ <div></div>, đoạn code bên dưới có sử dụng thuộc tính id, chúng ta có thể xem ở phần tham khảo thuộc tính id.

HTML viết

<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Tiêu đề trang web</title> </head> <body> <div id="header">Viết nội dung phần header ở đây</div> <div id="gNav">Viết nội dung phần global navigation ở đây</div> <div id="pageBody"> <div id="content">Viết nội dung phần content ở đây</div> <div id="sidebar">Viết nội dung phần sidebar ở đây</div> </div> <div id="footer">Viết nội dung phần footer ở đây</div> </body> </html>

Hiển thị trình duyệt:

Viết nội dung phần header ở đây Viết nội dung phần global navigation ở đây Viết nội dung phần content ở đây Viết nội dung phần sidebar ở đây Viết nội dung phần footer ở đây

Những cấu trúc không nên sử dụng

Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image, một liên kết, một button,... nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline. Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ.

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> <div>Đây là đoạn văn</div> <div><img src="images/img_planet.gif" alt="Space" /></div> <div>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></div> </body> </html>

Tham khảo thêm

  • <!Doctype>
  • <html></html>
  • <head></head>
  • <body></body>
  • <div></div>
  • <a></a>
  • <img />

Thẻ định dạng đoạn văn bản

Thẻ xác định danh sách

HỌC WEB CHUẨN

HƯỚNG DẪN HỌC

Hướng dẫn học XHTML & HTML5

  • Hướng dẫn học XHTML & HTML5
  • Giới thiệu về HTML
  • Cấu trúc cơ bản của HTML

  • Nhóm các thẻ block

    • <h1> - <h2> - <h3> - <h4> - <h5> - <h6>
    • <p>
    • <div>
    • <dl> - <dt> - <dd>
    • <ul> - <ol> - <li>
    • <nav>
    • <header>
    • <section>
    • <article>
    • <aside>
    • <footer>
    • <figure> - <figcaption>

  • Nhóm các thẻ inline

    • <a>
    • <img />
    • <br />
    • <span>
    • <strong>
    • <em>
  • Xem thêm ví dụ về HTML
  • Bài tập HTML & HTML5 cơ bản
  • Bài tập HTML & HTML5 nâng cao

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • BẠN SẼ TÀI TRỢ?DONATE
  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Chia Vung Html