صور HTML

通过使用 HTML，可以在文档中显示图像。

实例

插入图像
本例演示如何在网页中显示图像。
从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。

（更多实例可以在本页底端找到。）

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.codew3c.com 的 images 目录中，那么其 URL 为 http://www.codew3c.com/images/boat.gif。

浏览器将在文档中图像标签出现的地方显示图像。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

属性（Alt）替换

يستخدم属性 alt لتحديد سلسلة نصية بديلة مسبقة لأصالة الصورة. قيمة نص البديل محددة من قبل المستخدم.

<img src="boat.gif" alt="Big Boat">

عندما لا يستطيع المتصفح تحميل الصورة، يمكن أن تخبر النص البديل القراء عن المعلومات المفقودة. في هذه الحالة، سيقوم المتصفح بعرض هذا النص البديل بدلاً من الصورة. من الجيد إضافة نص بديل لكل صورة في الصفحة، مما يساعد في عرض المعلومات بشكل أفضل، ويساعد أيضًا المستخدمين الذين يستخدمون متصفحات نصية فقط.

ملاحظات أساسية - نصائح مفيدة:

إذا كان ملف HTML يحتوي على عشرة صور، فإنه يتطلب تحميل 11 ملفًا لعرض الصفحة بشكل صحيح. يتطلب تحميل الصور وقتًا، لذا نوصي بالتقليل من استخدام الصور.

مزيد من الأمثلة

صورة الخلفية
هذا المثال يوضح كيفية إضافة صورة خلفية إلى صفحة HTML.
ترتيب الصورة
هذا المثال يوضح كيفية ترتيب الصورة في النص.
طوفة الصورة
هذا المثال يوضح كيفية جعل الصورة تطوف إلى اليسار أو اليمين من الفقرة.
تعديل حجم الصورة
هذا المثال يوضح كيفية تعديل حجم الصورة.
عرض نص بديل للصورة
هذا المثال يوضح كيفية عرض نص بديل للصورة. عندما لا يستطيع المتصفح تحميل الصورة، يخبر النص البديل القراء عن المعلومات المفقودة. من الجيد إضافة نص بديل لكل صورة في الصفحة.
صنع رابط الصورة
هذا المثال يوضح كيفية استخدام الصورة كرابط.
إنشاء خريطة صورة
هذا المثال يوضح كيفية إنشاء خريطة صورة تحتوي على منطقة قابلة للنقر. كل منطقة هي رابط.
تحويل الصورة إلى خريطة صورة
هذا المثال يوضح كيفية تحويل صورة عادية إلى خريطة صورة.

وسم الصورة

الوسم الوصف
<img> تحديد الصورة.
<map> تحديد خريطة الصورة.
<area> تحديد منطقة القابلة للنقر في خريطة الصورة.