HTML <body> 标签-代码号

HTML <body> 标签详解：网页内容的结构化容器

HTML 文档中的 <body> 标签用于定义浏览器中显示的主要内容区域。作为网页结构的核心组成部分，它可以包含文本、段落、标题、图像、表格、链接、视频等多种类型的内容元素。本教程将系统讲解 <body> 标签的语法规范、功能特性及实际应用方法。

语法规范与基本结构

<body> 标签必须作为 <head> 标签后的第二个元素，位于 </head> 和 </html> 标签之间。每个 HTML 文档有且只能有一个 <body> 标签。

基本语法：

<body>
  此处放置网页内容......
</body>

标准文档结构示例：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题示例</title>
</head>
<body>
  <h2>代码号学习编程示例页面</h2>
  <p>此段落内容位于 body 标签内部</p>
</body>
</html>

显示特性与功能分类

显示方式：块级容器（实际表现为包含整个可视内容的矩形区域）
标签类型：双标签（必须同时包含开始标签和结束标签）
功能分类：结构型标签（定义文档内容区域）

属性详解

传统呈现属性（HTML4.01，HTML5中已废弃）

以下属性在现代HTML5开发中不再推荐使用，建议使用CSS替代：

属性	值类型	说明
`alink`	颜色值	定义文档中活动链接的颜色
`background`	URL	指定文档背景图像
`bgcolor`	颜色值	指定文档背景颜色
`link`	颜色值	定义未访问链接的颜色
`text`	颜色值	指定文档文本颜色
`vlink`	颜色值	定义已访问链接的颜色

事件处理属性

属性	说明
`onload`	页面加载完成后触发调用的函数
`onunload`	用户离开页面时触发调用的函数
`onfocus`	文档获得用户焦点时触发
`onblur`	文档失去用户焦点时触发

全局属性和事件属性

<body> 标签支持所有HTML全局属性和事件属性，如 class、id、style、onclick 等。

浏览器兼容性

<body> 标签在所有主流浏览器中均得到完整支持，包括：

标签	Chrome	IE	Firefox	Opera	Safari
<body>	支持	支持	支持	支持	支持

实际应用示例

示例1：基础内容结构

<!DOCTYPE html>
<html>
<head>
  <title>代码号编程学习平台</title>
</head>
<body>
  <header>
    <img src="https://www.ebingou.cn/biancheng/images/logo.png" alt="代码号logo">
    <h1>欢迎访问代码号编程学习平台</h1>
  </header>
  
  <nav>
    <a href="https://www.ebingou.cn/">首页</a> |
    <a href="https://www.ebingou.cn/jiaocheng/">教程中心</a> |
    <a href="https://www.ebingou.cn/biancheng/">编程实践</a>
  </nav>
  
  <main>
    <article>
      <h2>HTML基础教程</h2>
      <p>本节课程将介绍HTML文档的基本结构和body标签的使用方法。</p>
      <img src="https://www.ebingou.cn/biancheng/images/1.jpg" alt="编程示例">
    </article>
  </main>
  
  <footer>
    <p>联系我们: alan@ebingou.cn</p>
    <p>© 2025 代码号学习平台</p>
  </footer>
</body>
</html>

示例2：使用CSS替代传统属性

<!DOCTYPE html>
<html>
<head>
  <title>现代HTML实践</title>
  <style>
    body {
      background-color: #f0f0f0;
      color: #333;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    a:link { color: blue; }
    a:visited { color: purple; }
    a:active { color: red; }
  </style>
</head>
<body>
  <h1>代码号CSS样式示例</h1>
  <p>此示例展示如何使用CSS替代传统的body属性实现样式控制。</p>
  <p>访问我们的<a href="https://www.ebingou.cn/jiaocheng/">教程中心</a>获取更多学习资源。</p>
</body>
</html>

示例3：事件属性应用

<!DOCTYPE html>
<html>
<head>
  <title>事件处理示例</title>
  <script>
    function pageLoaded() {
      alert('页面加载完成！欢迎来到代码号学习平台');
    }
    
    function trackFocus() {
      console.log('文档获得焦点');
    }
    
    function trackBlur() {
      console.log('文档失去焦点');
    }
  </script>
</head>
<body onload="pageLoaded()" onfocus="trackFocus()" onblur="trackBlur()">
  <h1>Body事件属性演示</h1>
  <p>尝试切换浏览器标签页或窗口，观察控制台输出。</p>
  <p>更多编程示例请访问<a href="https://www.ebingou.cn/biancheng/">代码号编程实践区</a>。</p>
</body>
</html>

本节课程知识要点

<body> 标签是HTML文档的内容容器，所有可见内容都应放置其中
每个HTML文档只能包含一个<body>标签
传统呈现属性已废弃，应使用CSS进行样式控制
事件属性可用于响应页面生命周期和用户交互事件
保持语义化结构有助于提高代码可维护性和SEO效果

扩展练习

创建一个包含标题、段落和图像的基本HTML页面
使用CSS为body元素设置背景颜色和文字样式
实现一个页面加载完成后显示欢迎信息的脚本
在页面中添加指向代码号不同板块的导航链接

通过本教程的学习，您应该已经掌握了HTML <body> 标签的核心概念和应用方法。下一步可以继续学习HTML5语义化标签和CSS布局技术，以创建更加专业和结构良好的网页。

本文标签：

HTML <body> 标签