Hiển thị hình ảnh HTML

Bài viết này là một phần của Loạt bài Nhà phát triển Web dành cho Người mới bắt đầu. Loạt bài này nhắm đến những người muốn bắt đầu phát triển web một cách nghiêm túc, cũng như những người đã là nhà phát triển web và muốn củng cố kiến ​​thức của họ về các nguyên tắc cơ bản đồng thời có thể lấp đầy một số lỗ hổng. Nếu bạn thấy mình mày mò với HTML, CSS hoặc Javascript cho đến khi bạn làm cho nó hoạt động, thì loạt bài này là dành cho bạn. Tài liệu trong sê-ri này được liên kết chặt chẽ với khóa học Coursera được xếp hạng hàng đầu của tôi

Show

Có lẽ không có gì nâng cao trang web tốt hơn hình ảnh được đặt một cách chiến lược

Nếu bạn đã theo dõi các bài viết trước của tôi trong loạt bài này, thì bài viết này sẽ cực kỳ dễ dàng. Tuy nhiên, có một số vấn đề nhỏ khi nói đến hình ảnh trong HTML

đọc tiếp

Để bắt đầu, hãy đi thẳng vào một ví dụ

Bạn có thể nhận ra mã từ bài viết về Tham chiếu thực thể ký tự HTML. Nội dung là một trong những trích dẫn yêu thích của tôi từ Theodore Roosevelt. Tuy nhiên, lần này, tôi cũng sẽ bao gồm một bức ảnh (tôi. e. , một hình ảnh) của Theodore Roosevelt ngay trước câu trích dẫn

Dưới đây là images.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

Đầu tiên, lưu ý rằng một số mã HTML được nhận xét. Tôi đã giải thích điều này có nghĩa là gì và nó ảnh hưởng như thế nào đến những gì trình duyệt tải trong bài viết về Tạo liên kết HTML bên trong và bên ngoài. (Lời nhắc nhở. trình duyệt không hiển thị phần nhận xét. )

Các dòng từ 12 đến 15 hiển thị thẻ

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

0 có nghĩa là trình duyệt sẽ tìm tệp có tên



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

0 trong cùng thư mục chứa tệp images.html. Nói cách khác, đây là một liên kết nội bộ đến một tệp hình ảnh

Giá trị thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

3 phải chứa văn bản mà trình đọc màn hình có thể đọc được để mô tả cho người khiếm thị nội dung được mô tả trong hình ảnh

Còn 2 thuộc tính nữa (




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5). Chúng ta sẽ thảo luận về những điều đó trong một phút

Hãy xem trang HTML này trong trình duyệt

Hiển thị hình ảnh HTML

Như bạn có thể thấy, hình ảnh xuất hiện trong dòng như thể nó chỉ là một ký tự văn bản khác trong câu

Điều đó sẽ cho chúng tôi biết ngay rằng thẻ

Hiển thị hình ảnh HTML

Đủ dễ dàng, phải không?. 👍

Mặc dù không hoàn toàn bắt buộc nhưng bạn nên luôn chỉ định chiều rộng và chiều cao của hình ảnh

Rất thường xảy ra trường hợp bạn sử dụng hình ảnh làm điểm neo trực quan trong bố cục trang của mình. Nói cách khác, bố cục trang của bạn phụ thuộc vào hình ảnh có kích thước nhất định

Ví dụ: thiết kế của bạn có thể quy định rằng 200 pixel trên cùng được chiếm bởi một số hình ảnh tiêu đề, theo sau là một số văn bản bên dưới hình ảnh

Như tôi đã thảo luận trước đây, các trình duyệt đọc và giải thích HTML theo trình tự, bắt đầu từ đầu tài liệu HTML

Trình duyệt sẽ đọc thẻ hình ảnh tiêu đề và bắt đầu tải hình ảnh, được chỉ ra bởi thuộc tính src. Tuy nhiên, trình duyệt không đợi hình ảnh tải trước khi tiếp tục đọc và hiển thị phần còn lại của mã HTML. Quá trình tải hình ảnh diễn ra song song khi trình duyệt tiến hành diễn giải và hiển thị phần còn lại của HTML trên màn hình

Thông thường, hình ảnh mất nhiều thời gian để tải xuống hơn so với mã HTML dựa trên văn bản. Do đó, trình duyệt sẽ sẵn sàng hiển thị văn bản được cho là theo hình ảnh tiêu đề trước khi hình ảnh tiêu đề được tải xuống và hiển thị

Tuy nhiên, không có tệp hình ảnh được tải xuống đầy đủ, không có cách nào để tìm ra kích thước của nó, tôi. e. , chiều rộng và chiều cao. Trình duyệt sẽ không phân bổ bất kỳ không gian nào cho hình ảnh

Đối với người dùng, ảnh hưởng trực quan sẽ là văn bản, vốn được cho là xuất hiện bên dưới hình ảnh, lúc đầu sẽ xuất hiện ở trên cùng, sau đó nhảy xuống khi hình ảnh được hiển thị

Để giải quyết vấn đề này, HTML cho phép chúng tôi thông báo trước cho trình duyệt về kích thước hình ảnh, ngay cả trước khi nó được tải xuống, bằng cách chỉ định các thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5 trên thẻ
Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5 của hình ảnh, trình duyệt vẫn sẽ tính toán kích thước, nhưng sau khi tải xuống hình ảnh, có khả năng gây ra hiện tượng giật bố cục

Nếu tệp hình ảnh có kích thước nhỏ và người dùng có kết nối Internet rất nhanh, điều này có thể chỉ xuất hiện dưới dạng nhấp nháy tạm thời. Với kích thước hình ảnh lớn hơn và kết nối Internet chậm hơn, điều này sẽ mang lại trải nghiệm chói tai hơn một chút

Mô phỏng kết nối Internet chậm hơn để thử nghiệm trong Chrome

Luôn luôn tốt khi kiểm tra trang web của bạn trông như thế nào khi nó tải trên kết nối Internet chậm hơn. Loại thử nghiệm đó mang lại cho bạn một vị trí tuyệt vời ở hàng ghế đầu đối với trải nghiệm mà người dùng trang web của bạn có thể sẽ có.

Bạn có thể mô phỏng trải nghiệm như vậy với Công cụ dành cho nhà phát triển Chrome (CDT) mà không cần bất kỳ plugin bổ sung nào. Trình duyệt Chrome đi kèm với các công cụ dành cho Nhà phát triển Chrome, bao gồm điều chỉnh kết nối dưới dạng một trong các tùy chọn

Mở CDT bằng cách sử dụng phím tắt Ctrl-Alt-I (trên Windows) hoặc Option-Command-I (trên máy Mac) và nhấp vào tab Mạng. Sau đó, nhấp vào mũi tên bên cạnh từ Trực tuyến và chọn kết nối chậm hơn mà bạn muốn kiểm tra. (Bạn cũng có thể định cấu hình tốc độ kết nối tùy chỉnh bằng cách chọn Tùy chỉnh. )

Hiển thị hình ảnh HTML

Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
"It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."

Theodore Roosevelt 1910 © Copyright

4 and Displaying Images

Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
"It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."

Theodore Roosevelt 1910 © Copyright

5 Present

Đầu tiên, hãy chuẩn bị cho bài kiểm tra của chúng tôi

Vì hình ảnh đầu tiên trong HTML của chúng tôi là nội bộ và tôi đang tải trang trực tiếp từ ổ cứng của mình, việc làm chậm tốc độ Internet sẽ không cho chúng tôi thấy nhiều. Chúng ta sẽ cần kiểm tra điều này trên hình ảnh thứ hai trong mã (hình ảnh hiển thị những con kiến ​​​​trên một ngọn cỏ xanh)

Hãy xóa các thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5 khỏi hình ảnh thứ 2, lưu tệp và tải lại trình duyệt của chúng ta

Các trình duyệt cố gắng lưu (i. e. , bộ đệm) hầu hết mọi thứ họ tải xuống cục bộ trên máy tính của bạn để họ không phải tải xuống lại khi bạn tải lại. Để đảm bảo thử nghiệm của chúng tôi hoạt động chính xác, chúng tôi cần buộc trình duyệt xóa bộ nhớ cache và tải hình ảnh như thể nó đang tải xuống lần đầu tiên

Để thực hiện điều đó, khi mở Công cụ dành cho nhà phát triển Chrome, hãy nhấp và giữ nút tải lại trong trình duyệt cho đến khi menu thả xuống. Từ menu đó, chọn Empty Cache and Hard Reload

Hiển thị hình ảnh HTML

Lưu ý rằng khi trang bắt đầu tải lại, văn bản




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

1 xuất hiện ngay sau trích dẫn. Tuy nhiên, khi hình ảnh cuối cùng được tải, văn bản sẽ nhảy xuống bên dưới hình ảnh

Nếu chúng tôi đặt các thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5 trở lại và sau đó lặp lại quy trình này, bạn có thể thấy rằng trình duyệt phân bổ đúng dung lượng cho hình ảnh phía trước, do đó không xảy ra hiện tượng nhảy

Hiển thị hình ảnh HTML

Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
"It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."

Theodore Roosevelt 1910 © Copyright

4 và Displaying Images

Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
"It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."

Theodore Roosevelt 1910 © Copyright

5

Một tình huống khác trong đó các thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5 rất hữu ích là khi liên kết hình ảnh bị hỏng. Nếu bạn đang dựa vào kích thước hình ảnh cho một phần bố cục của mình và hình ảnh không tải, bố cục sẽ bị hỏng

Ví dụ: chúng ta hãy loại bỏ các thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5 từ thẻ
Hiển thị hình ảnh HTML

Bây giờ, văn bản




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

1 sẽ không còn hiển thị thấp hơn nhiều so với trích dẫn. Rõ ràng, trong trường hợp này, đó không thực sự là một vấn đề, nhưng bạn có thể tưởng tượng một kịch bản bố cục trang khác, nơi mọi thứ sẽ bị lệch vì điều này

Chặn miền trong Chrome để thử nghiệm

Hãy chứng minh điều gì xảy ra khi một liên kết bị hỏng khi có các thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5

Hãy đặt các thuộc tính




   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

4 và



   charset="utf-8">
  </span>Displaying Images<span>


Don't be afraid to be <then a 100% success:

Hiển thị hình ảnh HTML
-->

Theodore Roosevelt 1910 © Copyright

5 vào thẻ
Hiển thị hình ảnh HTML

Như bạn có thể thấy, trình duyệt vẫn phân bổ cùng một kích thước cho hình ảnh mặc dù nó không bao giờ tải nó

Chơi lô tô. 😀

Cách đơn giản nhất để hoàn tác việc này là đóng và mở lại CDT. Tên miền sẽ không còn bị chặn. Một cách khác là nhấp chuột phải vào images.html7 được đánh dấu màu đỏ và chọn Bỏ chặn lorempixel. com

** Lưu ý rằng mặc dù bài viết này giả định rằng bố cục trang của bạn phụ thuộc vào hình ảnh có kích thước nhất định, đây không phải là cách tiếp cận tốt nhất. Một phương pháp hay hơn là áp dụng các quy tắc định cỡ CSS cho chính thẻ images.html9 hoặc cho thẻ chứa thẻ images.html9

Tại sao trong hình ảnh HTML không hiển thị?

Bạn cần nhập lại mã HTML của mình bằng chữ hoa. các tệp hình ảnh của bạn đã được tải lên máy chủ đúng cách, nhưng đường dẫn đến hình ảnh của máy chủ không chính xác .

Thẻ nào hiển thị hình ảnh trong HTML?

Thẻ dùng để nhúng hình ảnh vào trang HTML.