HTML 主体标签 - <body>

什么是 <body> 标签？

<body> 标签包含HTML文档的所有可见内容，如文本、图像、链接、表格、表单等。它位于 <head> 标签之后，是用户在浏览器中实际看到的部分。

基本语法

html 
<html lang="zh-CN">
<head>
  <!-- 元数据 -->
</head>
<body>
  <!-- 可见内容 -->
</body>
</html>

主要内容类型

<body> 标签可以包含各种HTML元素，主要分为以下几类：

1. 文本内容

html 
<h1>标题</h1>
<p>段落文本</p>
<a href="#">链接</a>
<strong>强调文本</strong>
<em>斜体文本</em>

2. 列表内容

html 
<ul>
  <li>无序列表项</li>
  <li>无序列表项</li>
</ul>

<ol>
  <li>有序列表项</li>
  <li>有序列表项</li>
</ol>

3. 表格内容

html 
<table>
  <tr>
    <th>表头</th>
    <th>表头</th>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
</table>

4. 表单内容

html 
<form>
  <input type="text" placeholder="用户名">
  <input type="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

5. 媒体内容

html 
<img src="image.jpg" alt="描述">
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

6. 语义化结构

html 
<header>
  <h1>网站标题</h1>
</header>
<nav>
  <!-- 导航链接 -->
</nav>
<main>
  <!-- 主要内容 -->
</main>
<footer>
  <!-- 页脚信息 -->
</footer>

全局属性

<body> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为元素指定类名
id 为元素指定唯一ID
style 内联样式
onload 页面加载完成事件
onunload 页面卸载事件

样式相关属性（已废弃）

以下属性已在HTML5中废弃，建议使用CSS替代：

  • bgcolor：背景颜色
  • text：文本颜色
  • link：未访问链接颜色
  • vlink：已访问链接颜色
  • alink：活动链接颜色

不推荐使用：

html 
<body bgcolor="#ffffff" text="#000000">

推荐使用CSS：

html 
<body>
  <style>
    body {
      background-color: #ffffff;
      color: #000000;
    }
  </style>
</body>

最佳实践

  1. 语义化结构：使用HTML5语义化标签（<header>, <nav>, <main>, <footer>等）组织页面结构

  2. 内容层次：合理使用标题标签（<h1>至<h6>）建立清晰的内容层次

  3. 可访问性：为所有图像添加alt属性，确保表单控件有适当的标签

  4. 性能优化：合理组织资源，优先加载关键内容

  5. 响应式设计：确保内容在不同设备上都能正常显示

完整示例

html 
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Body示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section>
      <h2>欢迎访问</h2>
      <p>这是一个关于HTML学习的网站。</p>
      <img src="html-logo.png" alt="HTML5 Logo">
    </section>
    
    <section>
      <h2>学习资源</h2>
      <ul>
        <li>HTML基础</li>
        <li>CSS样式</li>
        <li>JavaScript交互</li>
      </ul>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2026 我的网站</p>
  </footer>
</body>
</html>

总结

<body> 标签是HTML文档的核心部分，包含了用户在浏览器中看到的所有内容。正确使用<body>标签及其内部元素，结合语义化结构和现代CSS技术，可以创建出功能完整、用户友好的网页。

最后更新：2026-02-07