HTML <figure> تاجب
- الصفحة السابقة <figcaption>
- الصفحة التالية <font>
التعريف والاستخدام
<figure> العلامة تُحدد المحتوى المضمن، مثل الرسومات، الجداول، الصور، قوائم الشيفرة، وما إلى ذلك.
بالرغم من <figure> محتوى العنصر مرتبط بالمحتوى الرئيسي، لكن موقعه مستقل عن تيار المحتوى الرئيسي، إذا تم حذفه، لا يجب أن يؤثر على تيار المستند.
نصيحة:استخدم <figcaption> العنصر لـ <figure> إضافة عنوان للعنصر.
انظر أيضًا:
دليل مرجع HTML DOM:مفهوم Figure
مثال
مثال 1
استخدم علامة <figure> لوضع الصور في المستند، واستخدم علامة <figcaption> لتعريف عنوان الصورة:
<figure> <img src="trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>فوتو 1 - ترولي في منطقة بوليا في إيطاليا.</figcaption> </figure>
مثال 2
استخدم CSS لضبط النمط لـ <figure> و <figcaption>:
<html>
<head>
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>فوتو 1 - ترولي في منطقة بوليا في إيطاليا.</figcaption>
</figure>
</body>
</html>
صفات العالمية
<figure> يدعم التاج صفات العالمية في HTML。
صفات الحدث
<figure> يدعم التاج صفات الحدث في HTML。
إعدادات CSS الافتراضية
معظم المتصفحات ستستخدم القيم التالية كقيم افتراضية <figure> العنصر:
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
دعم المتصفح
رقم في الجدول هو أحدث إصدار من المتصفح الذي يدعم العنصر.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
التعليق:<figure> تاج هو تاج جديد في HTML 5.
- الصفحة السابقة <figcaption>
- الصفحة التالية <font>
