เมื่อพูดถึงรูปภาพ ฉันเชื่อว่าทุกคนคงคุ้นเคยกับรูปภาพเหล่านี้ เพราะในชีวิตประจำวันและการใช้งานของเรา เราสามารถเห็นภาพได้เสมอ และรูปภาพจะสื่อความหมายและน่าดึงดูดใจมากกว่าคำพูดเมื่อเราใช้รูปภาพอย่างเหมาะสม เราก็สามารถทำให้ผู้คนกลายเป็นหน้าเว็บได้ มีความสวยงามและใช้งานง่ายมากขึ้น โดยเฉพาะการดูหน้าเว็บครั้งแรกมีความสำคัญมาก
1. แอตทริบิวต์ src
สัญลักษณ์: img
คุณสมบัติ: ป้ายเดียว
รหัส:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML แทรกรูปภาพ</title></head><body><p>รูปภาพที่จะแสดง:</p><imgsrc=fish .jpg></body></html>
สรุป: การแทรกรูปภาพสามารถทำได้โดยการแนะนำชื่อแอตทริบิวต์ src ในแท็ก img โดยที่ค่าแอตทริบิวต์ของ src คือ "ชื่อไฟล์" หรือ "path./file name" หมายเหตุ: รูปภาพที่จะแทรกจะต้องอยู่ใน ไฟล์เดียวกับโปรเจ็กต์ html ติดแล้ว! ส่วนนี้จะให้คำอธิบายที่สำคัญ
2. คุณสมบัติอื่นๆ
3. การใช้งานทางเลือก
คำอธิบาย: เมื่อไม่สามารถแสดงรูปภาพได้ด้วยเหตุผลบางประการ ค่าแอตทริบิวต์ที่สอดคล้องกับแอตทริบิวต์ alt จะปรากฏขึ้น
รหัส:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML แทรกรูปภาพ</title></head><body><p>รูปภาพที่จะแสดง:</p><imgsrc=potato .jpgwidth=500alt=มันฝรั่ง></body></html>
แสดงด้านล่าง:
4. การใช้ชื่อเรื่อง
หมายเหตุ: หากรูปภาพแสดงตามปกติ เมื่อวางเมาส์เหนือรูปภาพ เนื้อหาที่สอดคล้องกับค่าแอตทริบิวต์ของแอตทริบิวต์ title จะปรากฏขึ้น
รหัส:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML แทรกรูปภาพ</title></head><body><p>รูปภาพที่จะแสดง:</p><imgsrc=fish .jpgwidth=500alt=fish title=นี่คือปลาที่ปรุงแล้ว></body></html>
เอฟเฟกต์: หากสามารถแสดงภาพได้ตามปกติ หากคุณเลื่อนเมาส์ไปที่ภาพ คำว่า "นี่คือปลาปรุงสุก" จะปรากฏขึ้น
แสดงตามที่แสดง:
5. ลักษณะคุณลักษณะ
ลักษณะแอตทริบิวต์ของแท็กรูปภาพใช้ได้กับแท็ก HTML ส่วนใหญ่:
1. คุณลักษณะของแท็กเขียนอยู่ภายในแท็กเริ่มต้น
2. สามารถมีแอตทริบิวต์ได้หลายรายการในแท็กพร้อมกัน
3. แยกแอตทริบิวต์ด้วยการเว้นวรรค
4. ชื่อแท็กและคุณลักษณะต้องคั่นด้วยช่องว่าง
5. ไม่มีลำดับระหว่างคุณลักษณะ
6. คำอธิบายเส้นทางและการแทรกรูปภาพข้ามระดับ
(1) การแนะนำเส้นทาง
1. เส้นทางที่แน่นอน
ตำแหน่งที่แน่นอนภายใต้ไดเร็กทอรีสามารถเข้าถึงตำแหน่งเป้าหมายได้โดยตรง โดยปกติจะอ้างอิงถึงเส้นทางที่เริ่มต้นจากอักษรชื่อไดรฟ์หรือ URL ที่สมบูรณ์ ในการแทรกรูปภาพ html โดยทั่วไปจะไม่ใช้เส้นทางสัมบูรณ์ และเส้นทางสัมพัทธ์มักใช้มากกว่า
2. เส้นทางสัมพัทธ์
มักใช้กระบวนการค้นหาไฟล์เป้าหมายโดยเริ่มจากไฟล์ปัจจุบัน
(2) แทรกรูปภาพข้ามระดับ
1.ระดับเดียวกัน
เมื่อรูปภาพที่จะแทรกอยู่ในระดับเดียวกับไฟล์ html ที่สร้างขึ้น ก็สามารถแทรกได้โดยตรง ค่าแอตทริบิวต์ของ src คือ "target file name. suffix" หรือ "./target file name. suffix" เมื่อใช้คอมไพลเลอร์ในการเขียนโค้ด หากคุณป้อนอักษรตัวแรกของชื่อไฟล์ในระดับเดียวกัน คอมไพเลอร์มักจะกระโดดออกจากเนื้อหาที่เหลือโดยอัตโนมัติ
การแสดงรหัส: (สมมติว่ารูปภาพมีชื่อว่ารูปภาพและอยู่ในรูปแบบ jpg)
<imgsrc=picture.jpg> หรือ <imgsrc=./picture.jpg>
2. ผู้ใต้บังคับบัญชา
หากไฟล์ html อยู่ในระดับเดียวกับโฟลเดอร์ไฟล์และรูปภาพที่จะแทรกอยู่ในโฟลเดอร์ไฟล์ การแทรกรูปภาพลงในไฟล์ html จะเป็นการดำเนินการเข้าถึงรูปภาพข้ามระดับ รหัสจะเป็นดังนี้:
<imgsrc=file/picture.jpg>
3. เหนือกว่า
หากมีรูปภาพในโฟลเดอร์ทั้งหมดและการทดสอบโฟลเดอร์อื่นและไฟล์ html อยู่ในโฟลเดอร์ทดสอบ การแทรกรูปภาพลงในไฟล์ html เป็นของการเข้าถึงโฟลเดอร์ระดับบน รหัสจะเป็นดังนี้:
<imgsrc=../picture.jpg>
หากคุณต้องการเข้าถึงรูปภาพในโฟลเดอร์สองระดับบน รหัสคือ:
<imgsrc=../../picture.jpg>
4. แอปพลิเคชันที่ครอบคลุม
หากมีสองโฟลเดอร์ ได้แก่ file1 และ file2 โดย file1 จะจัดเก็บไฟล์ html และ file2 จะจัดเก็บแฟล็กรูปภาพที่จะแทรกในรูปแบบ jpg ดังนั้นโค้ดสำหรับการแทรกรูปภาพแฟล็กลงในไฟล์ html จะเป็นดังนี้:
<imgsrc=../file2/flag.jpg>
(กลับไปที่ระดับก่อนหน้าก่อนแล้วจึงไปที่ระดับถัดไป)