2009-08-24 38 views
7

Tôi đã tự hỏi thực hành tốt nhất về divs với hình nền và thẻ img là gì. Tôi hiểu rằng các div có nguồn gốc có thể có nội dung trên đầu trang và những gì không, nhưng nếu trường hợp của nó chỉ có một hình ảnh, đó là phương pháp ưa thích? Có lẽ một câu hỏi hay hơn là .. thẻ img có lỗi thời không? Khi bạn có hình ảnh, bạn nên sử dụng thẻ img hoặc div?Divs với nguồn gốc hình ảnh so với thẻ img

Cảm ơn! Matt Mueller

Trả lời

15

Nguồn gốc nền nên chỉ là: hình nền cho kiểu. Thẻ img phải là khi bạn hiển thị hình ảnh thực tế dưới dạng hình ảnh, nói rằng bạn đang hiển thị hình ảnh của một thứ gì đó. bạn nên sử dụng thẻ hình ảnh chứ không phải hình ảnh div bg

+2

cũng nói +1 – annakata

5

là hình ảnh cho bố cục hoặc nội dung?

nếu hình ảnh được bố trí liên quan đến tôi sẽ sử dụng CSS và có nó trong một div ... nếu nội dung của nó liên quan đến tôi sẽ có nó trong một img ...

Hy vọng rằng sẽ giúp!

1

Thẻ IMG không lỗi thời. Bạn sử dụng nó với hình ảnh động, đến và đi từ hệ thống của bạn.

Hình nền trên div là hữu ích khi bạn có một tập hợp hình ảnh tĩnh là một phần của thiết kế của bạn. Đôi khi bạn có thể hợp nhất chúng thành một hình ảnh lớn để giảm thiểu thời gian tải và số lượng trang yêu cầu HTTP.

9

Hãy suy nghĩ về nó như đánh dấu ngữ nghĩa:

  1. Nếu đó là một "hình ảnh" trên trang web, như xa như ý nghĩa của trang, sử dụng thẻ img.

  2. Nếu điều gì đó không quan trọng đối với ý nghĩa của trang, ví dụ: hình nền, sử dụng hình nền trên bất kỳ loại phần tử nào (không chỉ là một div).

Sự khác biệt này thực sự không quan trọng như cách trang hiển thị trên hầu hết các trình duyệt, nhưng có ý nghĩa khác với những người không diễn giải hình ảnh một cách trực quan.

Hãy thử tưởng tượng các yếu tố sẽ được diễn giải như thế nào do khiếm thị.

Cũng có thể có một hành vi hơi khác so với công cụ tìm kiếm-- Tôi không biết liệu công cụ tìm kiếm có chọn hình nền cho tìm kiếm hình ảnh của họ hay không. Nếu bạn thực sự muốn hình ảnh đó, thẻ img an toàn hơn.

+1

Chính xác: ngữ nghĩa. Cũng nên nhớ rằng thẻ 'img' có thuộc tính' alt'. Văn bản thay thế này (ví dụ: mô tả hình ảnh) rất hữu ích cho các trường hợp hình ảnh có ý nghĩa ngữ nghĩa và có thể được sử dụng cho công cụ tìm kiếm, ứng dụng chuyển văn bản thành giọng nói cho người khiếm thính và kết nối internet kém. –

+1

Chưa kể rằng nó thân thiện với máy in. –

5

Cách tốt nhất để xem đây là xem trang web của bạn với biểu định kiểu đã tắt. Bạn sẽ nhanh chóng tìm ra rằng tất cả các thẻ DIV có hình nền không xuất hiện. Tất cả các hình ảnh thẻ IMG của bạn là đúng nơi họ nên. Tôi sẽ sử dụng thẻ DIV với hình nền cho tất cả các khía cạnh của thiết kế và bố cục trang web và sử dụng thẻ IMG cho mọi thứ khác.

Thẻ IMG có thuộc tính alt và thuộc tính tiêu đề. Chúng được sử dụng thay cho hình ảnh khi nó không tải hoặc thay thế cho hình ảnh trong các trình duyệt văn bản hoặc trình đọc màn hình.

Các vấn đề liên quan