Sự khác biệt giữa <p> và <div> là gì?

Sự khác biệt giữa <p> và <div> là gì?

Chúng có thể được sử dụng thay thế cho nhau? Các ứng dụng là gì?

Mã trước đó là

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

Vì vậy, tôi phải thay đổi nó thành

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

Đó là sửa chữa dễ dàng. Và CSS cho đoạn mã trên là

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

Vì vậy, thẻ div có thể chứa các yếu tố khác. P không nên bị buộc phải làm điều đó.

Chúng có sự khác biệt về ngữ nghĩa - một <div>yếu tố được thiết kế để mô tả một thùng chứa dữ liệu trong khi một<p> yếu tố được thiết kế để mô tả một đoạn nội dung.

Các ngữ nghĩa làm cho tất cả sự khác biệt. HTML là một ngôn ngữ đánh dấu, có nghĩa là nó được thiết kế để "đánh dấu" nội dung theo cách có ý nghĩa đối với người tiêu dùng đánh dấu. Hầu hết các nhà phát triển tin rằng ngữ nghĩa của tài liệu là các kiểu mặc định và kết xuất mà trình duyệt áp dụng cho các yếu tố này nhưng đó không phải là trường hợp.

Các yếu tố bạn chọn để đánh dấu nội dung của bạn nên mô tả nội dung. Đừng đánh dấu tài liệu của bạn dựa trên giao diện của nó - hãy đánh dấu nó dựa trên nội dung của nó.

Nếu bạn cần một container chung hoàn toàn cho mục đích bố trísau đó sử dụng a <div>. Nếu bạn cần một yếu tố để mô tả một đoạn nội dung thì hãy sử dụng a <p>.

Lưu ý: Điều quan trọng là phải hiểu rằng cả hai <div>và <p>là các yếu tố cấp khối , có nghĩa là hầu hết các trình duyệt sẽ xử lý chúng theo cách tương tự.

Tất cả các câu trả lời hay, nhưng có một điểm khác biệt mà tôi chưa thấy đề cập đến, và đó là cách các trình duyệt hiển thị chúng theo mặc định. Các trình duyệt web chính sẽ hiển thị một <p>thẻ có lề trên và dưới đoạn văn. Một <div>thẻ sẽ được hiển thị mà không có bất kỳ lề nào cả.

<p> chỉ ra một đoạn văn và có ý nghĩa ngữ nghĩa.

<div> chỉ đơn giản là một container khối cho nội dung khác.

Bất cứ điều gì có thể đi trong một <p>có thể đi trong một <div>nhưng điều ngược lại là không đúng sự thật. <div>thẻ có thể có các yếu tố cấp khối như trẻ em. <p>yếu tố không thể.

Hãy nhìn vào DTD HTML .

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->

Sự khác biệt duy nhất giữa hai yếu tố là ngữ nghĩa. Cả hai phần tử, theo mặc định, có hiển thị quy tắc CSS: khối (do đó mức khối) được áp dụng cho chúng; không có gì hơn (ngoại trừ phần nào lề thêm trong một số trường hợp). Tuy nhiên, như đã nói ở trên, cả hai đều khác nhau rất nhiều về ngữ nghĩa.

Các <p>yếu tố, như tên của nó phần nào ngụ ý, là cho các đoạn văn. Vì vậy, <p>nên được sử dụng khi bạn muốn tạo các khối văn bản đoạn văn.

Các <div>yếu tố, tuy nhiên, có ít hoặc không có nghĩa ngữ nghĩa và do đó có thể được sử dụng như một yếu tố khối cấp generic - phổ biến nhất, người sử dụng nó trong bố trí bởi vì nó là vô nghĩa ngữ nghĩa và có thể được sử dụng cho bất cứ điều gì nói chung là bạn có thể yêu cầu một block yếu tố cấp độ cho.

Liên kết để biết thêm chi tiết

DIV là một thùng chứa mức khối chung có thể chứa bất kỳ thành phần khối hoặc nội tuyến nào khác, bao gồm các thành phần DIV khác, trong khi P là để bọc các đoạn văn bản (văn bản).

Có thể tốt hơn để xem tiêu chuẩn được thiết kế bởi W3.org. Đây là địa chỉ: http://www.w3.org/

Thẻ "DIV" có thể bao bọc thẻ "P" trong khi đó, thẻ "P" không thể bọc thẻ "DIV" - cho đến nay tôi biết sự khác biệt này. Có thể có nhiều sự khác biệt khác.

Hãy nghĩ về DIVnhư một yếu tố nhóm. Bạn đặt các phần tử trong một phần tử DIV để bạn có thể đặt sự sắp xếp của chúng

Trong khi đó "p"chỉ đơn giản là để tạo ra một đoạn mới.

<p> đại diện cho một đoạn văn và <div> đại diện cho một 'bộ phận', tôi cho rằng sự khác biệt chính là các div là về mặt ngữ nghĩa 'vô nghĩa', trong đó <p> được cho là đại diện cho một cái gì đó liên quan đến chính văn bản.

Ví dụ, bạn sẽ không muốn lồng <p> s, vì điều đó sẽ không có nhiều ý nghĩa ngữ nghĩa (ngoại trừ theo nghĩa trích dẫn) Trong khi mọi người sử dụng <div> s lồng nhau để bố trí trang.

Theo Wikipedia

Trong HTML, các phần tử span và div được sử dụng trong đó các phần của tài liệu không thể được mô tả về mặt ngữ nghĩa bởi các phần tử HTML khác.

Một pthẻ dành cho một đoạn văn, thường được sử dụng cho văn bản. Một divthẻ là cho chia, và thường được sử dụng để tạo các phần của văn bản.

<p> được sử dụng về mặt ngữ nghĩa cho văn bản, đoạn văn thường.

<div>được sử dụng cho một khối hoặc khu vực trong một trang web. Ví dụ, nó có thể được sử dụng để tạo vùng cho tiêu đề.

Chúng có thể được sử dụng thay thế cho nhau, nhưng bạn không nên.