Div và p trong html là gì?

Thử nó

Là một vùng chứa "thuần túy", phần tử

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục

Ghi chú. Thuộc tính

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

ghi chú sử dụng

• Phần tử

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
        background-color: #f1f1f1;
      }
  .square {
        background-color: #2ecc71;
        width: 200px;
        height: 200px;
      }
  

  1 chỉ nên được sử dụng khi không có phần tử ngữ nghĩa nào khác [chẳng hạn như

  
    Here's a very interesting note displayed in a lovely shadowed box.
  
  

  1 hoặc

  
    Here's a very interesting note displayed in a lovely shadowed box.
  
  

  2] phù hợp

Mối quan tâm về khả năng tiếp cận

Phần tử

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  Here's a very interesting note displayed in a lovely shadowed box.

ví dụ

Một ví dụ đơn giản

  
    Any kind of content here. Such as <p>, <table>. You name it!
  

Kết quả trông như thế này

Một ví dụ theo kiểu

Ví dụ này tạo một hộp bóng mờ bằng cách áp dụng một kiểu cho

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  Here's a very interesting note displayed in a lovely shadowed box.

Thẻ phân chia HTML, được gọi tắt là "div", là một thành phần đặc biệt cho phép bạn nhóm các bộ nội dung tương tự lại với nhau trên một trang web. Bạn có thể sử dụng nó làm vùng chứa chung để liên kết nội dung tương tự

Thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Trong hướng dẫn này, tôi sẽ chỉ cho bạn những điều khác nhau mà bạn có thể làm với thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Khi nào nên sử dụng thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

9

Thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Cuối cùng, hầu như bạn sẽ luôn sử dụng nó để tạo kiểu cho bất kỳ thứ gì chứa trong đó hoặc thao tác với những thứ đó bằng JavaScript

1. Sử dụng

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

9 trong Bố cục Web

Bạn sẽ chủ yếu sử dụng thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Ở phần sau của hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo bố cục trang web với nhiều thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Bản thân Div không có ảnh hưởng trực tiếp đến việc trình bày nội dung trừ khi bạn tạo kiểu cho nó

2. Sử dụng

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

9 trong CSS Art

Với thẻ div, bạn có thể tạo nhiều hình dạng khác nhau và vẽ bất cứ thứ gì vì nó rất dễ tạo kiểu

• Cách tạo hình vuông với thẻ

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
        background-color: #f1f1f1;
      }
  .square {
        background-color: #2ecc71;
        width: 200px;
        height: 200px;
      }
  

  9

Để tạo một hình vuông với thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  Here's a very interesting note displayed in a lovely shadowed box.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

• Cách tạo vòng kết nối với thẻ

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
        background-color: #f1f1f1;
      }
  .square {
        background-color: #2ecc71;
        width: 200px;
        height: 200px;
      }
  

  9

Bạn có thể tạo một vòng kết nối với thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

• Cách tạo cờ Nigeria bằng CSS

Làm cờ Nigeria với thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Để tạo nó, hãy xác định 3 thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

Cách tạo kiểu cho thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

9

Như chúng ta đã thảo luận ở trên, thẻ div rất dễ tạo kiểu. Đó là một trong những lý do tại sao nhiều nhà phát triển sử dụng nó để nhóm nội dung tương tự

Thẻ div chấp nhận hầu hết tất cả các thuộc tính CSS mà không gặp vấn đề gì. Bây giờ chúng ta hãy xem xét một vài ví dụ về điều đó

1. Cách Áp dụng Thuộc tính Phông chữ với

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

9

Bạn có thể áp dụng các thuộc tính CSS như

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  
    Any kind of content here. Such as <p>, <table>. You name it!
  

2. Cách áp dụng màu với thẻ Div

Bạn có thể áp dụng các thuộc tính CSS

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  
    Any kind of content here. Such as <p>, <table>. You name it!
  

  
    Any kind of content here. Such as <p>, <table>. You name it!
  

3. Cách tạo kiểu cho văn bản bằng thẻ Div

Bạn có thể áp dụng các thuộc tính CSS

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

4. Cách tạo hiệu ứng đổ bóng với thẻ Div

Bạn có thể tạo hiệu ứng đổ bóng bằng thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Điều gì đang xảy ra trong CSS ở trên?

Tôi đã có thể tạo hiệu ứng đổ bóng bằng thuộc tính CSS box-shadow

• Giá trị đầu tiên [2px] biểu thị phần bù trên trục x [offset-x]
• Thứ hai [2px khác] biểu thị phần bù trên trục y [offset-y]
• 20px tiếp theo dành cho bán kính mờ, nghĩa là bạn muốn bóng mờ đến mức nào
• Giá trị 23px là bán kính trải rộng [bạn muốn bóng trải rộng bao xa]
• Giá trị cuối cùng là màu bóng – trong trường hợp này là #7fecad

Đầu ra trông như thế này

Cách sử dụng nhiều phần tử Div mà không bị nhầm lẫn

Thẻ div thường được sử dụng để nhóm các nội dung tương tự lại với nhau. Trong các trang web cũ hơn và thậm chí là mới hơn, bạn sẽ tìm thấy các div xung quanh, mặc dù thực tế là các thẻ ngữ nghĩa được khuyến nghị để truy cập và SEO tốt hơn

Vì các thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Tôi sẽ hướng dẫn bạn cách áp dụng điều này vào thực tế bằng cách tạo bố cục web cơ bản

Phần đầu tiên bạn muốn tạo là tiêu đề, chứa logo và thanh điều hướng

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Trước khi tạo kiểu cho thanh điều hướng, tôi đã đặt lại một số CSS để làm cho mọi thứ được căn chỉnh chính xác và hiển thị đẹp mắt

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Trong đoạn mã trên

• Tôi đã xóa lề và phần đệm mặc định
• Tôi đặt chiều rộng tối đa cho các phần chính để chúng không bị cắt ngang nhằm mang lại trải nghiệm người dùng tốt hơn
• Tôi đặt một lề ở dưới cùng của mỗi phần để cung cấp cho họ một số không gian
• Tôi đặt lề 0 ở trên cùng và dưới cùng, tự động ở bên trái và bên phải để căn giữa chúng

Để tạo kiểu cho thanh điều hướng một cách thích hợp, tôi sẽ lấy thẻ vùng chứa

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  Here's a very interesting note displayed in a lovely shadowed box.

  Here's a very interesting note displayed in a lovely shadowed box.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  Here's a very interesting note displayed in a lovely shadowed box.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Đối với các phần còn lại ngoài chân trang, HTML và kiểu dáng là chung chung

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

Tôi đã cho các phần riêng lẻ có màu nền xám và chiều cao là 200px. Tôi đã định vị các thẻ h1 bên trong trung tâm của chúng bằng Flexbox và áp dụng

  Here's a very interesting note displayed in a lovely shadowed box.

Cuối cùng, tôi đã tạo cho phần chân trang một màu nền xám đậm hơn để làm cho nó nổi bật và căn giữa nội dung trong đó với một

  Here's a very interesting note displayed in a lovely shadowed box.

Bố cục kết quả trông như thế này

Sự kết luận

Thẻ div HTML thường được các nhà phát triển web sử dụng ở khắp mọi nơi

Chỉ cần lưu ý rằng bạn thường nên sử dụng HTML ngữ nghĩa thay cho thẻ div trừ khi không có thẻ nào trong số chúng [thẻ ngữ nghĩa] thực sự khớp với nội dung để nhóm lại với nhau. Điều này là do các thẻ ngữ nghĩa tốt hơn cho khả năng truy cập và SEO

Nói tóm lại, thẻ div vẫn hữu ích và sẽ không sớm biến mất, vì vậy hãy sử dụng nó khi cần thiết

Cảm ơn bạn đã đọc và có một thời gian tốt đẹp