عند الحديث عن الصور، أعتقد أن الجميع على دراية بها، لأنه في حياتنا اليومية واستخدامها، يمكننا دائمًا رؤية الصور، وتكون الصور أكثر تعبيرًا وجاذبية من الكلمات عند استخدامها، عندما نستخدم الصور بشكل مناسب، يمكننا أن نجعل الأشخاص صفحة ويب أصبح أكثر جمالا وبديهية، خاصة أن المشاهدة الأولى لصفحة الويب مهمة للغاية.
1. سمة SRC
الرمز: img
الميزات: ملصق واحد
شفرة:
<!doctypehtml><html><head><metacharset=utf-8><title>إدراج صورة بتنسيق HTML</title></head><body><p>الصورة المراد عرضها:</p><imgsrc=fish .jpg></body></html>
ملخص: يمكن إكمال إدراج الصورة عن طريق إدخال اسم سمة src في علامة img، حيث تكون قيمة سمة src هي "اسم الملف" أو "اسم المسار/الملف". ملاحظة: يجب أن تكون الصورة المراد إدراجها في ملف نفس الملف مثل مشروع HTML اشتعلت! سيقدم هذا القسم التفسيرات الرئيسية.
2. سمات أخرى
3. الاستخدام البديل
الوصف: عندما لا يمكن عرض الصورة لسبب ما، يتم عرض قيمة السمة المقابلة للسمة البديلة.
شفرة:
<!doctypehtml><html><head><metacharset=utf-8><title>إدراج صورة بتنسيق HTML</title></head><body><p>الصورة المراد عرضها:</p><imgsrc=potato .jpgwidth=500alt=بطاطس></body></html>
يظهر أدناه:
4. استخدام العنوان
ملاحظة: إذا تم عرض الصورة بشكل طبيعي، فعند تمرير الماوس فوق الصورة، سيتم عرض المحتوى المطابق لقيمة السمة الخاصة بسمة العنوان.
شفرة:
<!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. المسار المطلق
يمكن أن يصل الموضع المطلق ضمن الدليل مباشرة إلى الموقع المستهدف، وعادةً ما يشير ذلك إلى المسار الذي يبدأ من حرف محرك الأقراص أو عنوان URL الكامل. عند إدراج صور html، لا يتم استخدام المسارات المطلقة بشكل عام، ويتم استخدام المسارات النسبية بشكل أكثر شيوعًا.
2. المسار النسبي
غالبًا ما يتم استخدام عملية البحث عن الملف الهدف بدءًا من الملف الحالي.
(2) إدراج الصور عبر المستويات
1. نفس المستوى
عندما تكون الصورة المراد إدراجها في نفس مستوى ملف html الذي تم إنشاؤه، يمكن إدراجها مباشرة. قيمة سمة src هي "اسم الملف الهدف. لاحقة" أو "اسم الملف./الهدف. لاحقة". عند استخدام المترجم للتعليمات البرمجية، إذا قمت بإدخال الحرف الأول من اسم الملف من نفس المستوى، فغالبًا ما يقفز المترجم تلقائيًا من بقية المحتوى.
عرض الكود: (بافتراض أن الصورة تحمل اسم الصورة وهي بتنسيق 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>
(العودة إلى المستوى السابق أولا، ثم زيارة المستوى التالي)