Ban đầu, Web chỉ là văn bản và nó thực sự khá nhàm chán. May mắn thay, không lâu sau, khả năng nhúng hình ảnh (và các loại nội dung thú vị khác) vào trong các trang web đã được thêm vào. Có nhiều loại đa phương tiện khác để xem xét, nhưng thật hợp lý khi bắt đầu với phần tử khiêm tốn <img src="images/dinosaur.jpg" alt="Dinosaur" /> 6, được sử dụng để nhúng một hình ảnh đơn giản vào một trang web. Trong bài viết này, chúng ta sẽ xem xét cách sử dụng nó một cách chuyên sâu, bao gồm những điều cơ bản, chú thích nó bằng chú thích bằng cách sử dụng <img src="images/dinosaur.jpg" alt="Dinosaur" /> 7 và nêu chi tiết cách nó liên quan đến hình nền CSS
điều kiện tiên quyết. Trình độ máy tính cơ bản, cài đặt phần mềm cơ bản, kiến thức cơ bản về làm việc với các tệp, quen thuộc với các nguyên tắc cơ bản về HTML (như được trình bày trong Bắt đầu với HTML. )Khách quan. Để tìm hiểu cách nhúng hình ảnh đơn giản vào HTML, hãy chú thích chúng bằng chú thích và cách hình ảnh HTML liên quan đến hình nền CSSĐể đưa một hình ảnh đơn giản lên trang web, chúng ta sử dụng phần tử <img src="images/dinosaur.jpg" alt="Dinosaur" /> 6. Đây là một phần tử void (có nghĩa là nó không thể có bất kỳ nội dung con nào và không thể có thẻ kết thúc) yêu cầu hai thuộc tính hữu ích. <img src="images/dinosaur.jpg" alt="Dinosaur" /> 9 và <img src="//www.example.com/images/dinosaur.jpg" alt="Dinosaur" /> 0. Thuộc tính <img src="images/dinosaur.jpg" alt="Dinosaur" /> 9 chứa URL trỏ đến hình ảnh bạn muốn nhúng vào trang. Như với thuộc tính <img src="//www.example.com/images/dinosaur.jpg" alt="Dinosaur" /> 2 cho các phần tử <img src="//www.example.com/images/dinosaur.jpg" alt="Dinosaur" /> 3, thuộc tính <img src="images/dinosaur.jpg" alt="Dinosaur" /> 9 có thể là một URL tương đối hoặc một URL tuyệt đối. Không có thuộc tính <img src="images/dinosaur.jpg" alt="Dinosaur" /> 9, phần tử <img src="//www.example.com/images/dinosaur.jpg" alt="Dinosaur" /> 6 không có hình ảnh để tải
Các
Ghi chú. Bạn nên đọc để nhớ lại các URL tương đối và tuyệt đối trước khi tiếp tục
Vì vậy, ví dụ: nếu hình ảnh của bạn có tên là <img src="//www.example.com/images/dinosaur.jpg" alt="Dinosaur" /> 8 và nó nằm trong cùng thư mục với trang HTML của bạn, thì bạn có thể nhúng hình ảnh như vậy
<img src="dinosaur.jpg" alt="Dinosaur" />
Nếu hình ảnh nằm trong thư mục con <img src="//www.example.com/images/dinosaur.jpg" alt="Dinosaur" /> 9, nằm trong cùng thư mục với trang HTML, thì bạn sẽ nhúng nó như thế này
<img src="images/dinosaur.jpg" alt="Dinosaur" />
Và như thế
Ghi chú. Công cụ tìm kiếm cũng đọc tên tệp hình ảnh và tính chúng cho SEO. Do đó, bạn nên đặt cho hình ảnh của mình một tên tệp mô tả;
Ví dụ: bạn có thể nhúng hình ảnh bằng URL tuyệt đối của nó
<img src="//www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
Nhưng điều này không được khuyến khích. Bạn nên lưu trữ hình ảnh của riêng mình, điều này trong các thiết lập đơn giản có nghĩa là giữ hình ảnh cho trang web của bạn trên cùng một máy chủ với HTML của bạn. Trong các thiết lập nâng cao hơn, bạn có thể sử dụng CDN (Mạng phân phối nội dung) để phân phối hình ảnh của mình
Cảnh báo. Không bao giờ trỏ thuộc tính src của bạn vào một hình ảnh được lưu trữ trên trang web của người khác mà không được phép. Điều này được gọi là "liên kết nóng". Nó thường được coi là phi đạo đức, vì người khác sẽ trả chi phí băng thông để phân phối hình ảnh khi ai đó truy cập trang của bạn. Nó cũng khiến bạn không kiểm soát được liệu hình ảnh có bị xóa hay thay thế bằng thứ gì đó đáng xấu hổ hay không
Nói chung, bạn nên lưu trữ những hình ảnh bạn muốn sử dụng trên trang web của mình. Hãy nhớ rằng nhiều hình ảnh bạn có thể tìm thấy trên web có bản quyền. Trước khi bạn lưu trữ một hình ảnh, bạn nên đảm bảo rằng một trong những điều này được áp dụng
- Bạn sở hữu hình ảnh
- Bạn đã nhận được sự cho phép rõ ràng bằng văn bản từ chủ sở hữu hình ảnh
- Trên thực tế, bạn có nhiều bằng chứng cho thấy hình ảnh thuộc phạm vi công cộng
Mã trên của chúng tôi sẽ cho chúng tôi kết quả sau
.. .