定义和用法
<body>定义了 HTML 文档的可见内容，例如标题、段落、图像、视频、超链接、表格、列表、按钮等。
<html>文档中，元数据和文档信息包装在head元素中，可见内容包装在body元素中。
<body>元素的基本语法：
<!DOCTYPE html>
<html>
<head>
<!-- 这里是head部分，用于填写元数据和文档信息 -->
</head>
<body>
<!-- 这里是body部分，所有可见内容均写在这里 -->
</body>
</html><body>元素总是紧跟在head元素之后，它是html元素的第二个子元素。- 一个 HTML 文档中只能有一个
<body>元素。 <body>元素是可见的，用于展示给用户的部分。<body onload="init()">是<body>常用的属性，定义了页面加载完成后执行的脚本。
使用实例
接下来用多种实例演示<body>标签的用法，来深化您对<body>的理解。
1. 简单的 body 使用实例
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 所有可见内容写在这里 -->
<h1>Hello World!</h1>
</body>
</html>2. body onload 使用实例
在这段 HTML 代码里，借助事件属性 onload 达成了页面加载完毕时，给出提示的功能。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body onload="alert('页面加载完成!')">
<!-- 所有可见内容写在这里 -->
<h1>Hello World!</h1>
</body>
</html>3. 完整页面结构使用实例
下面示例综合了<head>、<body>标签、CSS 样式以及 JavaScript 交互，帮助你了解如何构建一个完整的网页。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
body {
background: #fff;
margin: 0;
font-family: sans-serif;
}
</style>
</head>
<body>
<header>
<h1>网站标题</h1>
</header>
<main>
<p>欢迎来到我的网站！</p>
</main>
<footer>
<p>© 2023</p>
</footer>
<script>
// JavaScript代码
console.log("DOM加载完毕");
</script>
</body>
</html>全局属性
<body>标签还支持 HTML 中的全局属性。
事件属性
<body>标签还支持 HTML 中的事件属性。
默认的 CSS 设置
大多数浏览器将使用以下默认值显示<body>元素：
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}注意事项
- 必须闭合标签：
<body>标签为双标签，注意添加闭合标签。 - 唯一性：一个 HTML 文档中只能有一个
<body>标签。 - 位置正确：必须位于
<head>标签之后，<html>标签之内。
浏览器支持
 |
 |
 |
 |
 |
| 支持 | 支持 | 支持 | 支持 | 支持 |
评论区 0
发表评论
教程介绍
HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法 。
50
章节
74
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈