Id hình ảnh html
Thẻ HTML img được sử dụng để hiển thị hình ảnh trên trang web. Thẻ HTML img là một thẻ trống chỉ chứa các thuộc tính, các thẻ đóng không được sử dụng trong phần tử hình ảnh HTML Show
Hãy xem một ví dụ về hình ảnh HTML Kiểm tra nó ngay bây giờđầu ra Các thuộc tính của thẻ HTML imgsrc và alt là các thuộc tính quan trọng của thẻ img HTML. Tất cả các thuộc tính của thẻ hình ảnh HTML được đưa ra dưới đây 1) srcNó là một thuộc tính cần thiết mô tả nguồn hoặc đường dẫn của hình ảnh. Nó hướng dẫn trình duyệt tìm hình ảnh trên máy chủ ở đâu Vị trí của hình ảnh có thể nằm trên cùng một thư mục hoặc máy chủ khác 2) thay thếThuộc tính alt xác định văn bản thay thế cho hình ảnh, nếu nó không thể hiển thị. Giá trị của thuộc tính alt mô tả hình ảnh bằng chữ. Thuộc tính alt được coi là tốt cho triển vọng SEO 3) chiều rộngNó là một thuộc tính tùy chọn được sử dụng để chỉ định chiều rộng để hiển thị hình ảnh. Nó không được khuyến khích bây giờ. Bạn nên áp dụng CSS thay cho thuộc tính chiều rộng 4) chiều caoNó h3 chiều cao của hình ảnh. Thuộc tính chiều cao HTML cũng hỗ trợ các phần tử iframe, hình ảnh và đối tượng. Nó không được khuyến khích bây giờ. Bạn nên áp dụng CSS thay cho thuộc tính chiều cao Sử dụng thuộc tính chiều cao và chiều rộng với thẻ imgBạn đã tìm hiểu về cách chèn hình ảnh vào trang web của mình, bây giờ nếu chúng tôi muốn cung cấp một số chiều cao và chiều rộng để hiển thị hình ảnh theo yêu cầu của chúng tôi, thì chúng tôi có thể đặt nó với các thuộc tính chiều cao và chiều rộng của hình ảnh Thí dụKiểm tra nó ngay bây giờđầu ra Ghi chú. Luôn cố gắng chèn hình ảnh có chiều cao và chiều rộng, nếu không hình ảnh có thể nhấp nháy khi hiển thị trên trang webSử dụng thuộc tính altChúng ta có thể sử dụng thuộc tính alt với Làm cách nào để lấy hình ảnh từ thư mục/thư mục khác?Để chèn một hình ảnh vào trang web của bạn, hình ảnh đó phải có trong cùng một thư mục mà bạn đã đặt tệp HTML. Nhưng nếu trong một số trường hợp, hình ảnh có sẵn trong một số thư mục khác thì bạn có thể truy cập hình ảnh như thế này img giới thiệu img sự xuất hiện img tùy chọn img hiển thị trình duyệt img bản đồ hình ảnh phía máy chủ (ismap) so với bản đồ hình ảnh phía máy khách (usemap) img cú phápimg alt thuộc tínhimg thuộc tính ismapimg thuộc tính usemapimg chiều rộng, chiều cao thuộc tínhimg thuộc tính srcimg thuộc tính khóa truy cậpimg thuộc tính lớpimgthuộc tính có thể kéoimgthuộc tính ẩnimg 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 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 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 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ử 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. 9 và 0. Thuộc tính 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 2 cho các phần tử 3, thuộc tính 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 9, phần tử 6 không có hình ảnh để tảiCá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à 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
Nếu hình ảnh nằm trong thư mục con 9, nằm trong cùng thư mục với trang HTML, thì bạn sẽ nhúng nó như thế này
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ó
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
Mã trên của chúng tôi sẽ cho chúng tôi kết quả sau Ghi chú. Các phần tử như 6 và 3 đôi khi được gọi là phần tử thay thế. Điều này là do nội dung và kích thước của phần tử được xác định bởi một tài nguyên bên ngoài (như tệp hình ảnh hoặc video), chứ không phải bởi nội dung của chính phần tử đó. Bạn có thể đọc thêm về chúng tại Các phần tử đã thay thếGhi chú. Bạn có thể tìm thấy ví dụ đã hoàn thành từ phần này đang chạy trên GitHub (cũng xem mã nguồn. ) Thuộc tính tiếp theo chúng ta sẽ xem xét là 0. Giá trị của nó được cho là mô tả bằng văn bản của hình ảnh, để sử dụng trong các trường hợp không thể xem/hiển thị hình ảnh hoặc mất nhiều thời gian để hiển thị do kết nối internet chậm. Ví dụ, mã trên của chúng tôi có thể được sửa đổi như vậy
Cách dễ nhất để kiểm tra văn bản 0 của bạn là cố tình viết sai chính tả tên tệp của bạn. Ví dụ: nếu tên hình ảnh của chúng tôi được đánh vần là 6, trình duyệt sẽ không hiển thị hình ảnh và thay vào đó sẽ hiển thị văn bản thay thếVì vậy, tại sao bạn lại thấy hoặc cần văn bản thay thế?
Chính xác thì bạn nên viết gì bên trong thuộc tính 0 của mình? . Nói cách khác, bạn sẽ mất gì nếu hình ảnh của bạn không hiển thị
Về cơ bản, điều quan trọng là mang lại trải nghiệm có thể sử dụng được, ngay cả khi không thể nhìn thấy hình ảnh. Điều này đảm bảo tất cả người dùng không bỏ lỡ bất kỳ nội dung nào. Hãy thử tắt hình ảnh trong trình duyệt của bạn và xem mọi thứ như thế nào. Bạn sẽ sớm nhận ra văn bản thay thế hữu ích như thế nào nếu không thể nhìn thấy hình ảnh Ghi chú. Để biết thêm thông tin, hãy xem hướng dẫn của chúng tôi về Bạn có thể sử dụng các thuộc tính 6 và 7 để chỉ định chiều rộng và chiều cao của hình ảnh của mình. Bạn có thể tìm thấy chiều rộng và chiều cao của hình ảnh theo một số cách. Ví dụ: trên Mac, bạn có thể sử dụng Cmd + I để hiển thị thông tin cho tệp hình ảnh. Quay trở lại ví dụ của chúng tôi, chúng tôi có thể làm điều này
Điều này không dẫn đến nhiều khác biệt cho màn hình, trong các trường hợp bình thường. Nhưng nếu hình ảnh không được hiển thị, chẳng hạn như người dùng vừa điều hướng đến trang và hình ảnh chưa được tải, bạn sẽ nhận thấy trình duyệt đang để lại một khoảng trống để hình ảnh xuất hiện trong đó. Đây là một điều nên làm, dẫn đến việc tải trang nhanh hơn và mượt mà hơn Tuy nhiên, bạn không nên thay đổi kích thước hình ảnh của mình bằng các thuộc tính HTML. Nếu bạn đặt kích thước hình ảnh quá lớn, bạn sẽ nhận được hình ảnh có hạt, mờ hoặc quá nhỏ và lãng phí băng thông khi tải xuống hình ảnh không phù hợp với nhu cầu của người dùng. Hình ảnh cũng có thể trông bị méo nếu bạn không duy trì tỷ lệ khung hình chính xác. Bạn nên sử dụng trình chỉnh sửa hình ảnh để đặt hình ảnh của mình ở kích thước chính xác trước khi đưa nó lên trang web của bạn Ghi chú. Nếu bạn cần thay đổi kích thước của hình ảnh, bạn nên sử dụng CSS để thay thế Vì , bạn cũng có thể thêm thuộc tính 8 vào hình ảnh để cung cấp thêm thông tin hỗ trợ nếu cần. Trong ví dụ của chúng tôi, chúng tôi có thể làm điều này
Điều này cung cấp cho chúng tôi chú giải công cụ khi di chuột, giống như tiêu đề liên kết Tuy nhiên, điều này không được khuyến nghị — 8 có một số vấn đề về khả năng truy cập, chủ yếu dựa trên thực tế là hỗ trợ trình đọc màn hình rất khó đoán và hầu hết các trình duyệt sẽ không hiển thị trừ khi bạn di chuột (vì vậy e. g. không có quyền truy cập vào người dùng bàn phím). Nếu bạn muốn biết thêm thông tin về điều này, hãy đọc Thử thách và khổ nạn của thuộc tính tiêu đề của Scott O'HaraTốt hơn là bao gồm thông tin hỗ trợ như vậy trong văn bản chính của bài viết, thay vì đính kèm với hình ảnh Bây giờ đến lượt bạn chơi. Phần học tích cực này sẽ giúp bạn bắt đầu và chạy với một bài tập nhúng đơn giản. Bạn được cung cấp một thẻ 6 cơ bản; https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg Trước đó chúng tôi đã nói không bao giờ liên kết nóng đến hình ảnh trên các máy chủ khác, nhưng điều này chỉ nhằm mục đích học tập, vì vậy chúng tôi sẽ bỏ qua điều này một lần Chúng tôi cũng muốn bạn
Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời
Nói về chú thích, có một số cách bạn có thể thêm chú thích đi kèm với hình ảnh của mình. Ví dụ, sẽ không có gì ngăn cản bạn làm điều này 0cái này ổn. Nó chứa nội dung bạn cần và có thể tạo kiểu độc đáo bằng CSS. Nhưng có một vấn đề ở đây. không có gì liên kết ngữ nghĩa hình ảnh với chú thích của nó, điều này có thể gây ra sự cố cho trình đọc màn hình. Ví dụ: khi bạn có 50 hình ảnh và chú thích, chú thích nào đi với hình ảnh nào? Một giải pháp tốt hơn là sử dụng các phần tử HTML 7 và 5. Chúng được tạo ra cho chính xác mục đích này. để cung cấp một vùng chứa ngữ nghĩa cho các hình và để liên kết rõ ràng hình với chú thích. Ví dụ trên của chúng tôi có thể được viết lại như thế này 1Phần tử 5 cho trình duyệt và công nghệ hỗ trợ biết rằng chú thích mô tả nội dung khác của phần tử 7Ghi chú. Từ quan điểm khả năng tiếp cận, chú thích và văn bản có vai trò riêng biệt. Chú thích mang lại lợi ích cho cả những người có thể nhìn thấy hình ảnh, trong khi văn bản cung cấp chức năng giống như hình ảnh vắng mặt. Do đó, chú thích và văn bản 0 không nên nói cùng một điều, bởi vì cả hai đều xuất hiện khi hình ảnh biến mất. Hãy thử tắt hình ảnh trong trình duyệt của bạn và xem nó trông như thế nàoMột hình không nhất thiết phải là một hình ảnh. Nó là một đơn vị nội dung độc lập mà
Một hình có thể là một số hình ảnh, đoạn mã, âm thanh, video, phương trình, bảng hoặc thứ gì đó khác Trong phần học tích cực này, chúng tôi muốn bạn lấy đoạn mã đã hoàn thành từ phần học tích cực trước đó và biến nó thành một hình
Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời 2
4Bạn cũng có thể sử dụng CSS để nhúng hình ảnh vào trang web (và JavaScript, nhưng đó hoàn toàn là một câu chuyện khác). Thuộc tính CSS https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg5 và các thuộc tính https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg6 khác được sử dụng để kiểm soát vị trí hình nền. Ví dụ: để đặt một hình nền trên mỗi đoạn trên một trang, bạn có thể làm điều này 5Hình ảnh nhúng kết quả được cho là dễ định vị và kiểm soát hơn so với hình ảnh HTML. Vậy tại sao phải bận tâm với hình ảnh HTML? . Nếu bạn chỉ muốn thêm một cái gì đó đẹp đẽ vào trang của mình để nâng cao hình ảnh, thì điều này là tốt. Mặc dù, những hình ảnh như vậy không có ý nghĩa ngữ nghĩa nào cả. Chúng không thể có bất kỳ văn bản tương đương nào, không hiển thị với trình đọc màn hình, v.v. Đây là nơi hình ảnh HTML tỏa sáng Tổng hợp. nếu một hình ảnh có ý nghĩa, về mặt nội dung của bạn, bạn nên sử dụng một hình ảnh HTML. Nếu hình ảnh chỉ mang tính chất trang trí, bạn nên sử dụng hình nền CSS Ghi chú. Bạn sẽ tìm hiểu thêm về hình nền CSS trong chủ đề CSS của chúng tôi Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . hình ảnh HTML Đó là tất cả cho bây giờ. Chúng tôi có hình ảnh và chú thích chi tiết. Trong bài viết tiếp theo, chúng ta sẽ tiến dần lên, xem xét cách sử dụng HTML để nhúng nội dung video và âm thanh vào các trang web Làm cách nào để đặt id hình ảnh trong HTML?Một chuỗi chữ và số duy nhất. Giá trị id phải bắt đầu bằng một chữ cái ([aside-Zaside-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0-9]), dấu gạch nối (-), dấu gạch dưới (_), dấu hai chấm (. ) và dấu chấm (. )
Làm cách nào để cung cấp id cho hình ảnh trong CSS?Để sử dụng bộ chọn ID trong CSS, bạn chỉ cần viết thẻ bắt đầu bằng # (#) theo sau là ID của phần tử . Sau đó đặt các thuộc tính kiểu bạn muốn áp dụng cho phần tử trong ngoặc.
Bạn có thể thêm ID vào HTML không?Thuộc tính id là Thuộc tính chung và có thể được sử dụng trên bất kỳ phần tử HTML nào .
Mã ID trong HTML là gì?Thuộc tính chung id xác định một mã định danh (ID) phải là duy nhất trong toàn bộ tài liệu . Mục đích của nó là xác định phần tử khi liên kết (sử dụng mã định danh phân đoạn), viết mã lệnh hoặc tạo kiểu (với CSS). |