علامة <body> HTML

التعريف والاستخدام

<body> تعريف العنصر الجسم.

تغلف البيانات المetatada والمعلومات الخاصة بالوثيقة في عنصر head، بينما تغلف محتويات الوثيقة في عنصر body.

يتبع عنصر دائمًا بعنصر head، وهو ثاني فرع عنصر html.

<body> يحتوي عنصر على كل محتويات وثيقة HTML، مثل العناوين والجمل والصور والروابط والجداول والقوائم، وما إلى ذلك.

ملاحظة:يمكن أن يحتوي وثيقة HTML على عنصر واحد فقط <body> عنصر.

مثال

وثيقة HTML بسيطة لكن كاملة:

<!DOCTYPE html>
<html>
  <head>
    <title>عنوان الوثيقة</title>
  </head>
  <body>
    <h1>هذا عنوان.</h1>
    <p>هذا جملة.</p>
  </body>
</html>

جربها بنفسك

نصيحة:يقدم المزيد من الأمثلة في أسفل الصفحة.

خصائص العالمية

<body> يدعم العنصر خصائص العالمية في HTML.

خصائص الحدث

<body> يدعم العنصر خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض القيم التالية كقيم افتراضية: <body> العنصر:

body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}

جربها بنفسك

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

مثال 1

إضافة صورة خلفية إلى الوثيقة (استخدام CSS):

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>مرحبا بالعالم!</h1>
<p><a href="">زيارة codew3c.com!</a></p>
</body>

جربها بنفسك

مثال 2

تعيين لون الخلفية للوثيقة (استخدام CSS):

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>مرحبا بالعالم!</h1>
<p><a href="https://www.codew3c.com">زيارة codew3c.com!</a></p>
</body>

جربها بنفسك

مثال 3

تعيين لون النص في الوثيقة (استخدام CSS):

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>مرحبا بالعالم!</h1>
<p>هذا نص.</p>
<p><a href="">زيارة codew3c.com!</a></p>
</body>
</html>

جربها بنفسك

مثال 4

تعيين لون الروابط التي لم تزور بعد في المستند (استخدام CSS):

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">دروس HTML</a></p>
</body>
</html>

جربها بنفسك

مثال 5

تعيين لون الروابط التي تعمل حاليًا في المستند (استخدام CSS):

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">دروس HTML</a></p>
</body>
</html>

جربها بنفسك

مثال 6

تعيين لون الروابط التي تم زيارتها في المستند (استخدام CSS):

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">دروس HTML</a></p>
</body>
</html>

جربها بنفسك

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
دعم دعم دعم دعم دعم