Lệnh hình ảnh trong html là gì?

HTML

Attributes: The

Ví dụ sau chèn ba hình ảnh trên trang web

Mỗi hình ảnh phải mang ít nhất hai thuộc tính. thuộc tính

9 và thuộc tính

0

Thuộc tính

9 cho trình duyệt biết nơi tìm thấy hình ảnh. Giá trị của nó là URL của tệp hình ảnh

Trong khi đó, thuộc tính

0 cung cấp một văn bản thay thế cho hình ảnh, nếu nó không có sẵn hoặc không thể hiển thị vì lý do nào đó. Giá trị của nó phải là một sự thay thế có ý nghĩa cho hình ảnh

Ghi chú. Giống như

1 , phần tử

7 cũng là phần tử trống và không có thẻ đóng. Tuy nhiên, trong XHTML nó tự đóng kết thúc bằng "______13"

Mẹo. Thuộc tính

0 bắt buộc cung cấp mô tả văn bản thay thế cho hình ảnh nếu người dùng vì lý do nào đó không thể xem hình ảnh đó do kết nối chậm, hình ảnh không có sẵn tại URL được chỉ định hoặc nếu người dùng sử dụng trình đọc màn hình hoặc trình duyệt phi đồ họa

Đặt chiều rộng và chiều cao của hình ảnh

Thuộc tính

5 và

6 được sử dụng để chỉ định chiều rộng và chiều cao của hình ảnh

Giá trị của các thuộc tính này được hiểu theo pixel theo mặc định

Bạn cũng có thể sử dụng thuộc tính

7 để chỉ định chiều rộng và chiều cao cho hình ảnh. Nó ngăn các biểu định kiểu vô tình thay đổi kích thước hình ảnh, vì kiểu nội tuyến có mức độ ưu tiên cao nhất

Ghi chú. Bạn nên chỉ định cả hai thuộc tính

5 và

6 cho một hình ảnh để trình duyệt có thể phân bổ nhiều dung lượng cho hình ảnh trước khi tải xuống. Nếu không, tải hình ảnh có thể gây biến dạng hoặc nhấp nháy trong bố cục trang web của bạn

Sử dụng phần tử hình ảnh HTML5

Đôi khi, tăng hoặc giảm tỷ lệ hình ảnh để phù hợp với các thiết bị khác nhau [hoặc kích thước màn hình] không hoạt động như mong đợi. Ngoài ra, việc giảm kích thước hình ảnh bằng cách sử dụng thuộc tính hoặc thuộc tính

5 và

6 không làm giảm kích thước tệp gốc. Để giải quyết những vấn đề này, HTML5 đã giới thiệu thẻ

2 cho phép bạn xác định nhiều phiên bản của một hình ảnh để nhắm mục tiêu các loại thiết bị khác nhau

Phần tử

2 chứa 0 hoặc nhiều phần tử

2, mỗi phần tử đề cập đến nguồn hình ảnh khác nhau và một phần tử

7 ở cuối. Ngoài ra, mỗi phần tử

2 có thuộc tính

7 chỉ định điều kiện phương tiện [tương tự như truy vấn phương tiện] được trình duyệt sử dụng để xác định khi nào nên sử dụng một nguồn cụ thể. Hãy thử một ví dụ

8

Ghi chú. Trình duyệt sẽ đánh giá từng phần tử

2 con và chọn phần tử phù hợp nhất trong số chúng; . Ngoài ra, thẻ

7 phải được chỉ định là phần tử con cuối cùng của phần tử

2

Làm việc với Bản đồ hình ảnh

Bản đồ hình ảnh cho phép bạn xác định các điểm nóng trên một hình ảnh hoạt động giống như một siêu liên kết

Ý tưởng cơ bản đằng sau việc tạo bản đồ hình ảnh là cung cấp một cách dễ dàng để liên kết các phần khác nhau của hình ảnh mà không chia nó thành các tệp hình ảnh riêng biệt. Ví dụ: bản đồ thế giới có thể có mỗi quốc gia được liên kết với thông tin thêm về quốc gia đó

Hãy thử một ví dụ đơn giản để hiểu nó thực sự hoạt động như thế nào

1

Thuộc tính

83 của thẻ

2 được sử dụng để tham chiếu bản đồ từ thẻ

7 bằng thuộc tính

86 của nó. Thẻ

2 được sử dụng bên trong phần tử

2 để xác định các vùng có thể nhấp trên hình ảnh. Bạn có thể xác định bất kỳ số lượng khu vực có thể nhấp nào trong một hình ảnh

Ghi chú. Bản đồ hình ảnh không nên được sử dụng để điều hướng trang web. Chúng không thân thiện với công cụ tìm kiếm. Việc sử dụng hợp lệ bản đồ hình ảnh là với bản đồ địa lý

Mẹo. Có nhiều công cụ trực tuyến có sẵn để tạo bản đồ hình ảnh. Một số trình chỉnh sửa nâng cao như Adobe Dreamweaver cũng cung cấp một bộ công cụ để dễ dàng tạo bản đồ hình ảnh

Làm cách nào để đặt một hình ảnh trong HTML?

Làm cách nào để chèn hình ảnh vào HTML bằng CSS?

Ví dụ về cách sử dụng thẻ hình ảnh trong HTML?