HTML <body> 標簽

定義和用法

<body> 標簽定義文檔的主體。

HTML 文檔的元數據和文檔信息包裝在 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 中的全局屬性。

事件屬性

<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 {
  color: green;
}
</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
支持 支持 支持 支持 支持