Tìm hiểu ‘div’ trong HTML là gì và tại sao bạn cần sử dụng nó để tùy chỉnh trang web của mình.

Bạn đang xem : div có nghĩa là gì trong html

Bạn có thể nghĩ về ba trang web khối chính. Bạn có tiêu đề footer và ở giữa là phần nội dung chính . Nhưng khi nhìn vào bất kỳ trang web nào, bạn cũng có thể thấy phần thân cũng được tạo thành từ các phần. Có thể có một phần dành cho các sản phẩm và dịch vụ, lời chứng thực, thành viên nhóm, thông tin liên hệ, v.v.

Mỗi phần trong số này có thể trông hơi khác một chút. Có thể chúng có màu sắc và phông chữ khác nhau. Có thể một cái có nền thị sai và một cái có nền video. Có thể một cái được tạo thành từ nhiều hàng và cột, v.v.

Có thể có biến thể về kiểu này do yếu tố phân chia nội dung trong HTML . Còn được gọi là “div”, phần tử này có thể chia trang web của bạn thành các phần để bạn có thể nhắm mục tiêu chúng bằng các thuộc tính CSS duy nhất.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Trong bài đăng này, chúng ta sẽ xem xét kỹ hơn yếu tố này là gì, chức năng chính xác của nó và lý do bạn muốn sử dụng nó trên trang web của riêng mình.

& lt; div & gt; trong HTML?

Trong HTML, thẻ & lt; div & gt; là một vùng chứa cấp khối chung cho các phần tử khác.

Hãy xem xét một số thuật ngữ chính trong định nghĩa này.

Đầu tiên, div là một vùng chứa “chung chung” vì nó không mô tả nội dung mà nó chứa. Các phần tử khác như & lt; nav & gt ;, & lt; header & gt ;, & lt; footer & gt ;, và & lt; form & gt; mô tả rõ ràng nội dung chúng chứa và được gọi là phần tử HTML ngữ nghĩa . Bạn nên luôn sử dụng phần tử ngữ nghĩa trên div khi có thể vì nó làm cho mã của bạn dễ tiếp cận hơn và dễ bảo trì hơn.

Thứ hai, div là một vùng chứa cấp khối. Để hiểu điều đó có nghĩa là gì, hãy so sánh một div với một phần tử span, là một vùng chứa nội tuyến.

Đây là một số điểm khác biệt chính giữa cấp khối và vùng chứa nội tuyến. Ví dụ: một div luôn bắt đầu trên dòng riêng của nó, trong khi một khoảng trống ở trên dòng (inline – get it?). Một div cũng chiếm toàn bộ chiều rộng của trang và span thì không. Điều đó có nghĩa là nếu bạn có nhiều div liên tiếp, chúng sẽ xuất hiện xếp chồng lên nhau ở giao diện người dùng. Mặt khác, các nhịp có thể tồn tại song song với nhau. Điểm khác biệt chính cuối cùng là bạn có thể xác định chiều cao và chiều rộng của một div, nhưng bạn không thể xác định khoảng cách.

Thứ ba, các phần tử có thể chứa trong một div được gọi cụ thể hơn là “nội dung có thể sờ thấy” hoặc “nội dung dòng”. Nội dung có thể sờ thấy về cơ bản là bất kỳ phần tử HTML nào có chứa văn bản hoặc nội dung nhúng và nội dung luồng về cơ bản là bất kỳ phần tử nào được sử dụng trong phần nội dung của tài liệu HTML. Vì vậy, các phần tử liên kết, trích dẫn khối, âm thanh, hình ảnh, đoạn văn và tiêu đề đều được coi là nội dung có thể sờ thấy hoặc dòng chảy và có thể được đặt bên trong một div.

Xem Thêm  Độ dài của Bộ Python - Lấy Độ dài Bộ bằng Hàm Python len () - python len của bộ

Ở đâu một & lt; div & gt; thẻ đi trong HTML?

Các đơn vị nằm trong phần nội dung của tệp HTML. Điều này được đánh dấu rõ ràng bởi & lt; body & gt; & lt; / body & gt; trong một tệp HTML. (Lưu ý: những thẻ này thường bị bỏ sót trong trình chỉnh sửa mã, như CodePen.)

Để tạo phần tử div, bạn phải sử dụng thẻ mở và thẻ đóng. Bạn có thể đặt các phần tử bạn muốn nhóm lại với nhau bên trong các thẻ này. Thông thường, chúng sẽ xuất hiện thụt vào, như hình dưới đây.

  

& lt; div class = "myDiv" & gt;

& lt; h2 & gt; Đây là tiêu đề trong phần tử div & lt; / h2 & gt;

& lt; p & gt; Đây là một số văn bản trong phần tử div. & lt; / p & gt;

& lt; / div & gt;

Bây giờ chúng ta đã hiểu định nghĩa và cú pháp của phần tử div trong HTML, hãy xem xét kỹ hơn những gì nó thực hiện chính xác.

div làm gì?

& lt; div & gt; về mặt kỹ thuật thẻ không làm bất cứ điều gì. Nó có thể giúp tổ chức tệp HTML thành các phần ở giao diện người dùng, nhưng điều đó sẽ không ảnh hưởng đến cách các phần đó hiển thị trên giao diện người dùng. Tuy nhiên, nó cho phép các phần này dễ dàng được tạo kiểu bằng CSS.

Để tạo kiểu cho các phần này bằng CSS, bạn phải thêm thuộc tính lớp hoặc ID vào phần tử div. Sau đó, bạn sẽ sử dụng một Bộ chọn CSS để áp dụng các thuộc tính kiểu duy nhất cho các phần tử có trong div.

Trước khi chúng ta đi sâu vào một ví dụ với CSS, trước tiên chúng ta hãy xem xét một ví dụ về phần tử div chưa được phân loại.

Đây là HTML và kết quả:

Xem Bút ký XWMWmYO của Christina Perricone ( @hubspot ) trên CodePen .

Bây giờ bạn đã biết một phần tử div không tự làm bất cứ điều gì, bạn có thể tự hỏi tại sao bạn thậm chí còn sử dụng một phần tử. Chúng ta sẽ xem xét một số trường hợp sử dụng bên dưới.

Tại sao sử dụng div trong HTML?

Thông thường nhất, bạn sẽ sử dụng phần tử div để nhóm các phần mã mà bạn muốn nhắm mục tiêu với CSS. Bạn có thể tạo kiểu cho chúng trông khác với các phần khác trên trang hoặc định vị chúng theo cách khác. Bạn cũng có thể sử dụng thuộc tính div và language để thay đổi ngôn ngữ của một phần cụ thể trên trang.

Dưới đây, hãy xem xét kỹ hơn các trường hợp sử dụng này.

& lt; Div & gt; Ví dụ về thẻ

& lt; div & gt; thẻ được sử dụng tốt nhất để thêm kiểu hoặc để đánh dấu ngữ nghĩa chung cho một nhóm các phần tử liên tiếp. Dưới đây là một số ví dụ về kiểu hoặc ngữ nghĩa mà bạn có thể thêm bằng phần tử div.

Ví dụ 1: & lt; Div & gt; Gắn thẻ với thuộc tính Lang

Hãy bắt đầu với ví dụ đơn giản nhất. Giả sử ngôn ngữ mặc định của văn bản trên trang web là tiếng Anh, nhưng một phần ở ngôn ngữ khác. Để đánh dấu phần cụ thể này trên một trang web, chỉ cần đặt các phần tử bên trong một div. Sau đó, thêm một thuộc tính ngôn ngữ và đặt nó thành ngôn ngữ bạn muốn. Vì lợi ích của bản demo này, tôi sẽ đặt nó thành tiếng Pháp.

Đây là HTML:

  

& lt; article lang = "vi" & gt;

& lt; p & gt; Ngôn ngữ mặc định của trang web là tiếng Anh. Nhưng bên dưới là một câu bằng tiếng Pháp, được đánh dấu tương ứng trong mã. & Lt; / p & gt;

& lt; div lang = "fr" & gt;

& lt; p & gt; Dans le numéro de novembre de Marie Claire, une erreur s'est glissée dans la rubrique Chế độ Thực tế. & lt; / p & gt;

& lt; / div & gt;

& lt; p & gt; Đây là một số văn bản bằng tiếng Anh bên ngoài phần tử div. & lt; / p & gt;

& lt; / article & gt;

Xem Thêm  Hướng dẫn về HTML5 Canvas cho người mới bắt đầu - hướng dẫn canvas html5 cho người mới bắt đầu

Điều này sẽ đặt ngôn ngữ của tiêu đề và đoạn bên trong div cùng một lúc, vì vậy bạn không phải đặt ngôn ngữ của từng phần tử riêng biệt. Các phần tử bên ngoài div sẽ vẫn được đặt thành ngôn ngữ mặc định (tiếng Anh).

Bây giờ, hãy xem ví dụ về thời điểm bạn sử dụng div để thay đổi giao diện của một phần trên trang web của mình.

Ví dụ 2: & lt; Div & gt; Gắn thẻ với thuộc tính lớp

Để thay đổi kiểu của div, bạn sẽ bắt đầu theo cách tương tự như bạn đã làm ở trên, nhưng thay vì thêm thuộc tính ngôn ngữ, bạn sẽ thêm thuộc tính ID hoặc lớp. Sau đó, bạn sẽ sử dụng công cụ chọn tương ứng để thêm CSS mà bạn muốn.

Giả sử bạn muốn tạo kiểu cho một tiêu đề và đoạn văn cụ thể trên trang và để phần còn lại không được đánh kiểu. Sau đó, bạn sẽ bọc tiêu đề và đoạn văn riêng lẻ trong một phần tử div và đặt tên lớp cho nó. Vì lợi ích của bản trình diễn này, chúng tôi sẽ sử dụng “myDiv” làm tên lớp.

Đây là HTML:

  

& lt; div class = "myDiv" & gt;

& lt; h2 & gt; Đây là tiêu đề trong phần tử div & lt; / h2 & gt;

& lt; p & gt; Đây là một số văn bản trong phần tử div. & lt; / p & gt;

& lt; / div & gt;

& lt; p & gt; Đây là một số văn bản bên ngoài phần tử div. & lt; / p & gt;

Sau đó, trong phần đầu của tài liệu HTML của bạn hoặc trong biểu định kiểu bên ngoài, bạn có thể sử dụng bộ chọn lớp .myDiv và xác định bất kỳ thuộc tính CSS nào bạn muốn. Đối với bản trình diễn này, chúng tôi sẽ sử dụng đường viền, màu nền , text-align thuộc tính màu .

Đây là CSS:

  

.myDiv {

font-family: 'Avenir Next LT Pro';

font-weight: bold;

border: 5px outset # 00A4BD;

màu: # 2D3E50;

màu nền: # EAF0F6;

text-align: center;

}

Đây là kết quả:

Xem cây bút dived Styled của Christina Perricone ( @hubspot ) trên CodePen .

Ví dụ 3: & lt; Div & gt; Gắn thẻ là Flexbox

Bây giờ, hãy xem ví dụ về thời điểm bạn sử dụng div để thay đổi vị trí hoặc bố cục của một phần trên trang web của mình.

Giả sử, tôi muốn tạo một lưới flexbox có bảy cột. Tôi sẽ bắt đầu bằng cách tạo bảy phần tử div và sau đó đặt chúng bên trong một phần tử div khác. Tôi muốn thêm lớp .flex-container vào div chính này.

Đây là HTML:

  

& lt; body & gt;

& lt; h1 & gt; Vùng chứa Flexbox & lt; / h1 & gt;

& lt; p & gt; Lưu ý cách các mục linh hoạt thu nhỏ và mở rộng khi trình duyệt được thay đổi kích thước, nhưng không lấp đầy toàn bộ vùng chứa khi cửa sổ xem mở rộng ra ngoài một điểm cụ thể. & lt; / p & gt;

& lt; div class = "flex-container" & gt;

& lt; div & gt; 1 & lt; / div & gt;

& lt; div & gt; 2 & lt; / div & gt;

& lt; div & gt; 3 & lt; / div & gt;

& lt; div & gt; 4 & lt; / div & gt;

& lt; div & gt; 5 & lt; / div & gt;

& lt; div & gt; 6 & lt; / div & gt;

& lt; div & gt; 7 & lt; / div & gt;

& lt; / div & gt;

& lt; / body & gt;

Xem Thêm  Toán tử có điều kiện trong Javascript: if, ‘?’ - if điều kiện trong javascript với và toán tử

Sau đó, trong phần đầu của tài liệu của tôi hoặc trong biểu định kiểu bên ngoài, tôi sẽ sử dụng bộ chọn lớp .flex-container để làm cho vùng chứa linh hoạt. Sau khi đặt thuộc tính hiển thị thành linh hoạt, tôi sẽ chỉ định chiều cao của vùng chứa cũng như màu nền. Để tạo kiểu cho các mục linh hoạt trong vùng chứa, tôi sẽ sử dụng bộ chọn .flex-container & gt; div.

Đây là CSS:

  

.flex-container {

display: flex;

chiều cao: 200px;

màu nền: # 00A4BD;

}

.flex-container & gt; div {

màu nền: # EAF0F6;

chiều rộng: 90px;

margin: 10px;

text-align: center;

line-height: 50px;

font-size: 60px;

flex: 1 1 200px;

}

Đây là kết quả:

Xem Bút & lt; Div & gt; Gắn thẻ là Flexbox bởi Christina Perricone ( @hubspot ) trên CodePen .

Hãy xem cách vùng chứa linh hoạt và các mục hoạt động khi trình duyệt được thay đổi kích thước:

Bạn có thể tìm thấy các ví dụ tương tự trong bài đăng Đây là Sự khác biệt giữa Flexbox, CSS Grid, & amp; Bootstrap .

Phân chia HTML của bạn

Div là một trong những phần tử được sử dụng phổ biến nhất trong HTML. Mặc dù nó có nhiều mục đích, nhưng mục đích chính của nó là nhóm các phần tử HTML để bạn có thể tạo kiểu cho chúng bằng CSS. Điều này làm cho yếu tố div trở thành công cụ trong việc tùy chỉnh trang web của bạn trông chính xác theo cách bạn muốn. Điều tốt nhất là nó dễ sử dụng.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề div viết tắt là gì trong html

HTML – Sử dụng thẻ Div bố cục đơn giản

alt

  • Tác giả: Thanh Duong Huu
  • Ngày đăng: 2020-05-12
  • Đánh giá: 4 ⭐ ( 2145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng thẻ div bố cục lưới đơn giản

Thẻ div trong html là gì

  • Tác giả: hocviencanboxd.edu.vn
  • Đánh giá: 5 ⭐ ( 8422 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mỗi thẻ (hay mỗi phần tử) trong HTML đều có chức năng và nhiệm vụ riêng. Trong đó, thẻ div là thẻ được dùng khá nhiều. Vậy chi tiết thẻ div là gì và nó có

Thẻ div trong html là gì

  • Tác giả: yamada.edu.vn
  • Đánh giá: 3 ⭐ ( 6946 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mỗi thẻ (hay mỗi phần tử) trong HTML đều có chức năng và nhiệm vụ riêng, Trong đó, thẻ div là thẻ được sử dụng khá nhiều

Thẻ div trong html là gì

  • Tác giả: ttmn.mobi
  • Đánh giá: 4 ⭐ ( 8528 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mỗi thẻ (hay mỗi phần tử) trong HTML đều có chức năng và nhiệm vụ riêng, Trong đó, thẻ div là thẻ được sử dụng khá nhiều

Div là gì? Cách dùng thẻ div trong HTML từ A đến Z – Blog | Got It AI

  • Tác giả: sentayho.com.vn
  • Đánh giá: 4 ⭐ ( 7082 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thẻ Div Trong Html Là Gì ? Cách Sử Dụng Thẻ Trong Html

  • Tác giả: hoidapthutuchaiquan.vn
  • Đánh giá: 3 ⭐ ( 1246 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mỗi thẻ (hay mỗi phần tử) trong HTML đều có chức năng và nhiệm vụ riêng, Trong đó, thẻ div là thẻ được sử dụng khá nhiều

Thẻ Div Là Gì – Thẻ Div Trong Html Là Gì

  • Tác giả: cungdaythang.com
  • Đánh giá: 3 ⭐ ( 1980 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mỗi thẻ (hay mỗi phần tử) trong HTML đều có chức năng và nhiệm vụ riêng. Trong đó, thẻ div là thẻ được sử dụng khá nhiều. Vậy cụ thể thẻ div là gì và nó có

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php