برچسب <body> HTML

تعریف و استفاده

<body> برچسب body تعریف‌کننده بدنه مستند است.

اطلاعات متا و اطلاعات مستند مستند در عنصر head بسته‌بندی شده‌اند و محتوای مستند در عنصر body بسته‌بندی شده است.

عنصر body همیشه پس از عنصر head قرار می‌گیرد و دومین فرزند عنصر html است.

<body> عنصر شامل تمام محتوای مستند HTML است، مانند عنوان، پاراگراف، تصویر، لینک‌های پیوندی، جدول‌ها، لیست‌ها و غیره.

توجه:یک مستند HTML فقط می‌تواند یک <body> عنصر.

مثال

یک مستند HTML ساده اما کامل:

<!DOCTYPE html>
<html>
  <head>
    <title>عنوان مستند</title>
  </head>
  <body>
    <h1>این یک عنوان است</h1>
    <p>این یک پاراگراف است.</p>
  </body>
</html>

آزمایش کنید

توجه:مثال‌های بیشتری در پایین صفحه ارائه شده است.

ویژگی‌های جهانی

<body> برچسب‌ها نیز از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد در 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>Hello world!</h1>
<p><a href="">بازدید از codew3c.com!</a></p>
</body>

آزمایش کنید

مثال 2

تنظیم رنگ پس‌زمینه مستند (از طریق CSS):

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">بازدید از codew3c.com!</a></p>
</body>

آزمایش کنید

مثال 3

تنظیم رنگ متن مستند (از طریق CSS):

<html>
<head>
<style>
body {
  رنگ: سبز;
}
</style>
</head>
<body>
<h1>Hello world!</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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی