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

Tôi muốn hỏi một số ví dụ đơn giản cho thấy việc sử dụng <div>và <span>. Tôi đã thấy cả hai được sử dụng để đánh dấu một phần của một trang bằng idhoặc class, nhưng tôi muốn biết liệu có những lúc nào cái này được ưa thích hơn cái kia không.

• divlà một yếu tố khối
• spanlà một yếu tố nội tuyến .

Điều này có nghĩa là để sử dụng chúng về mặt ngữ nghĩa, nên sử dụng div để bọc các phần của tài liệu, trong khi các nhịp nên được sử dụng để bọc các phần nhỏ của văn bản, hình ảnh, v.v.

Ví dụ:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Lưu ý rằng việc đặt phần tử cấp khối trong một phần tử nội tuyến là bất hợp pháp, vì vậy:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...Là bất hợp pháp.

EDIT: Kể từ HTML5, một số thành phần khối có thể được đặt bên trong một số thành phần nội tuyến. Xem tài liệu tham khảo MDN ở đây để biết danh sách khá rõ ràng. Ở trên vẫn là bất hợp pháp, vì <span>chỉ chấp nhận nội dung phrasing, và <div>là nội dung dòng chảy.

Bạn đã yêu cầu một số ví dụ cụ thể, do đó, một ví dụ được lấy từ trang web bowling của tôi, BowlSK :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Ok, chuyện gì đang xảy ra vậy?

Cũng lưu ý rằng HTML5 bao gồm một tập hợp các yếu tố mới xác định cấu trúc trang phổ biến, chẳng hạn như bài viết, phần, điều hướng, v.v.

Mục 4.4 của dự thảo làm việc HTML 5 liệt kê chúng và đưa ra gợi ý về việc sử dụng chúng. HTML5 vẫn là một thông số kỹ thuật hoạt động, vì vậy chưa có gì là "cuối cùng", nhưng điều đáng nghi ngờ là bất kỳ yếu tố nào trong số này sẽ đi bất cứ đâu. Có một hack javascript mà bạn sẽ cần sử dụng nếu bạn muốn tạo kiểu cho các phần tử này trong một số phiên bản IE cũ hơn - Bạn cần tạo một trong từng phần tử bằng cách sử dụng document.createElementtrước khi bất kỳ phần tử nào được chỉ định trong nguồn của bạn. Có một loạt các thư viện sẽ giải quyết vấn đề này cho bạn - một tìm kiếm nhanh trên Google đã xuất hiện html5shiv .

Để hoàn thiện, tôi mời bạn suy nghĩ về nó như thế này:

• Có rất nhiều yếu tố khối (ngắt dòng trước và sau) được xác định trong HTML và rất nhiều thẻ nội tuyến (không ngắt dòng).
• Nhưng trong HTML hiện đại, tất cả các yếu tố được cho là có ý nghĩa : a <p>là một đoạn văn, một <li>là một mục danh sách, v.v. và chúng ta phải sử dụng đúng thẻ cho đúng mục đích - không giống như ngày xưa khi chúng ta thụt lề sử dụng <blockquote>cho dù nội dung là một trích dẫn hay không.
• Vì vậy, bạn sẽ làm gì khi có là không có ý nghĩa với điều bạn đang cố gắng để làm gì? Không có ý nghĩa gì với cột rộng 400px, phải không? Bạn chỉ muốn cột văn bản của bạn rộng 400px vì phù hợp với thiết kế của bạn.
• Vì lý do này, họ đã thêm hai yếu tố nữa vào HTML: các yếu tố chung chung hoặc vô nghĩa <div>và <span>vì nếu không, mọi người sẽ quay lại lạm dụng các yếu tố có ý nghĩa.

Đã có câu trả lời tốt, chi tiết ở đây, nhưng không có ví dụ trực quan, vì vậy đây là một minh họa nhanh:

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>là một thẻ khối, trong khi <span>là một thẻ nội tuyến.

<div>là một yếu tố cấp khối và <span>là một yếu tố nội tuyến.

Nếu bạn muốn làm một cái gì đó với một số văn bản nội tuyến, đó <span>là cách để đi vì nó sẽ không giới thiệu ngắt dòng mà <div>sẽ làm.

Như đã lưu ý bởi những người khác, có một số ngữ nghĩa ngụ ý với từng điều này, đáng kể nhất là thực tế là một <div>phân chia logic trong tài liệu, gần giống như một phần của tài liệu hoặc một cái gì đó, la:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

Sự khác biệt quan trọng thực sự đã được đề cập trong câu trả lời của Chris. Tuy nhiên, ý nghĩa sẽ không rõ ràng đối với mọi người.

Là một yếu tố nội tuyến, <span>chỉ có thể chứa các yếu tố nội tuyến khác. Do đó, đoạn mã sau là sai:

<span><p>This is a paragraph</p></span>

Các mã trên không hợp lệ. Để bọc các phần tử cấp khối, phải sử dụng một phần tử cấp khối khác (chẳng hạn như <div>). Mặt khác, <div>chỉ có thể được sử dụng ở những nơi mà các yếu tố cấp khối là hợp pháp.

Hơn nữa, các quy tắc này được cố định trong (X) HTML và chúng không bị thay đổi bởi sự hiện diện của các quy tắc CSS! Vì vậy, các mã sau đây cũng sai!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

Tầm quan trọng của "phần tử khối" được ngụ ý nhưng không bao giờ được nêu rõ ràng. Nếu chúng ta bỏ qua tất cả các lý thuyết (lý thuyết là tốt) thì sau đây là một so sánh thực dụng. Sau đây là

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

sản xuất:

This paragraph has a span.

This paragraph

has
a div.

Đó là chương trình mà không chỉ cần một div không được sử dụng nội tuyến, nó chỉ đơn giản sẽ không tạo ra mong muốn ảnh hưởng.

Như đã đề cập trong các câu trả lời khác, theo mặc định divsẽ được hiển thị dưới dạng phần tử khối, trong khi spansẽ được hiển thị nội tuyến trong ngữ cảnh của nó. Nhưng không có bất kỳ giá trị ngữ nghĩa; chúng tồn tại để cho phép bạn áp dụng kiểu dáng và nhận dạng cho bất kỳ nội dung nào. Sử dụng các kiểu, bạn có thể thực hiện một divhành động như một spanvà ngược lại.

Một trong những phong cách hữu ích cho div làinline-block

Ví dụ:

1. http://dustwell.com/div-span-inline-block.html

2. Hiển thị CSS: nội tuyến vs khối nội tuyến

Tôi đã từng inline-blockrất thành công trong các dự án web game.

Div là một phần tử khối và span là một phần tử nội tuyến và chiều rộng của nó phụ thuộc vào nội dung của chính nó trong đó div không

Tôi sẽ nói rằng nếu bạn biết một chút tiếng Tây Ban Nha để xem trang này , nơi được giải thích chính xác.

Tuy nhiên, một định nghĩa nhanh sẽ divlà phân chia các phần và spanáp dụng một số kiểu cho một phần tử trong một phần tử khối khác như div.

Chỉ muốn thêm một số bối cảnh lịch sử vào làm thế nào để có được spanvsdiv

Lịch sử của span:

Vào ngày 3 tháng 7 năm 1995, Benjamin CW Sittler đề xuất một thẻ chứa văn bản chung để áp dụng các kiểu cho các khối văn bản nhất định. Kết xuất là trung tính trừ khi được sử dụng cùng với biểu định kiểu. Có một cuộc tranh luận xung quanh so với về khả năng đọc, ý nghĩa. Bert Bos đang đề cập đến bản chất mở rộng của phần tử thông qua thuộc tính lớp (với các giá trị như thành phố, người, ngày, v.v.). Paul Prescod lo lắng rằng cả hai yếu tố sẽ bị lạm dụng. Ông phản đối văn bản đề cập rằng "bất kỳ yếu tố mới nào cũng nên có trên một yếu tố cũ" và thêm "Nếu chúng tôi tạo một thẻ không có ngữ nghĩa, nó có thể được sử dụng bất cứ nơi nào mà không bao giờ sai.Chúng ta phải buộc các tác giả gắn thẻ đúng ngữ nghĩa của tài liệu của họ. Chúng ta phải buộc các nhà cung cấp biên tập viên đưa ra lựa chọn đó rõ ràng trong giao diện của họ. "

- Nguồn (wiki w3)

Từ dự thảo RFC giới thiệu span:

Đầu tiên, cần có một người nhận chung chung để mang các thuộc tính LANG và BIDI trong trường hợp không có yếu tố nào khác phù hợp; ele SPAN được giới thiệu cho mục đích đó.

- Nguồn (Dự thảo IETF)

Lịch sử của div:

Các phần tử DIV có thể được sử dụng để cấu trúc các tài liệu HTML dưới dạng phân cấp các bộ phận.

...

TRUNG TÂM đã được Netscape giới thiệu trước khi họ thêm hỗ trợ cho phần tử DIV HTML 3.0. Nó được giữ lại trong HTML 3.2 trên tài khoản triển khai rộng rãi của nó.

Thông số kỹ thuật HTML 3.2

Tóm lại, cả hai yếu tố nảy sinh từ nhu cầu về một thùng chứa chung hơn về mặt ngữ nghĩa. Span đã được đề xuất như là một thay thế chung hơn cho một <text>yếu tố để phong cách văn bản. Div được đề xuất như một cách chung để phân chia các trang và có thêm lợi ích của việc thay thế <center>thẻ cho nội dung căn chỉnh trung tâm. Div luôn là một thành phần khối vì lịch sử của nó là một bộ chia trang. Span luôn là một yếu tố nội tuyến vì mục đích ban đầu của nó là kiểu dáng văn bản và ngày nay cả div và span đều có các yếu tố chung với các thuộc tính hiển thị khối và nội tuyến tương ứng.

Trong HTML có các thẻ thêm cấu trúc hoặc ngữ nghĩa vào nội dung. Ví dụ, <p>thẻ được sử dụng để xác định một đoạn văn. Một ví dụ khác là <ol>thẻ cho một danh sách được sắp xếp.

Khi không có thẻ phù hợp có sẵn trong HTML như được hiển thị ở trên, các thẻ <div>và <span>thường được sử dụng.

Các <div>thẻ được sử dụng để xác định một phần blocklevel / bộ phận của một tài liệu mà có một ngắt dòng cả trước và sau nó.

Ví dụ về nơi các thẻ div có thể được sử dụng là tiêu đề, chân trang, điều hướng, v.v. Tuy nhiên, trong HTML 5, các thẻ này đã được cung cấp.

Các <span>thẻ được sử dụng để xác định một inline phần / bộ phận của một tài liệu.

Ví dụ, thẻ span có thể được sử dụng để thêm chữ tượng hình nội tuyến vào một phần tử.

Hãy nhớ rằng, về cơ bản và chúng cũng không thực hiện bất kỳ chức năng nào. Họ không cụ thể về chức năng chỉ bằng các thẻ của họ .

Chúng chỉ có thể được tùy chỉnh với sự trợ giúp của CSS.

Bây giờ đến câu hỏi của bạn:

Thẻ SPAN cùng với một số kiểu dáng sẽ hữu ích khi giữ bên trong một dòng, nói trong một đoạn văn, trong html. Đây là loại mức độ dòng hoặc mức độ tuyên bố trong HTML.

Thí dụ:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

Chức năng thẻ DIV như đã nói chỉ có thể được nhìn thấy được hỗ trợ bằng kiểu dáng, có thể chứa các đoạn mã HTML lớn.

DIV là cấp Khối

Thí dụ:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

Cả hai đều có thời gian và trường hợp của họ khi được sử dụng, dựa trên yêu cầu của bạn.

Hy vọng là rõ ràng với câu trả lời. Cảm ơn bạn.