您现在的位置是：网站首页 > <body>-文档主体内容文章详情
<body>-文档主体内容
陈川
【
HTML
】
21223人已围观
2847字
<body> 标签是 HTML 文档的核心部分，所有可见内容都包含在其中。从文本、图片到交互式表单和动态脚本，它承载了网页的骨架与血肉。
<body> 的基本结构
<body> 是 HTML 文档的根容器，必须嵌套在 <html> 标签内。一个典型的文档结构如下：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 所有可见内容放在这里 -->
<h1>Hello World</h1>
<p>这是一个段落。</p>
</body>
</html>
如果省略 <body>，浏览器仍会渲染内容，但可能导致 DOM 解析异常或样式失效。
内容类型与子元素
<body> 可以包含多种类型的元素：
- 块级元素：如
<div>、<p>、<section> - 行内元素：如
<span>、<a>、<strong> - 多媒体：
<img>、<video>、<audio> - 交互控件：
<button>、<input>、<form>
示例展示混合内容：
<body>
<header>
<nav>
<a href="#home">首页</a>
<a href="#news">新闻</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>正文内容...</p>
<img src="example.jpg" alt="示例图片">
</article>
</main>
<footer>
<button id="contact">联系我们</button>
</footer>
</body>
关键属性与应用
<body> 支持全局属性，还有一些特殊属性：
已废弃但需了解的属性
bgcolor：设置背景色（改用 CSS）text：定义默认文本颜色（改用 CSS）link/vlink/alink：控制链接颜色状态（改用 CSS 伪类）
现代实践
通过 CSS 控制样式更灵活：
body {
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
}
脚本与事件处理
<body> 是 JavaScript 操作的重要入口点：
<body onload="init()" onresize="handleResize()">
<script>
function init() {
console.log("页面加载完成");
}
document.body.addEventListener('click', function() {
alert('Body被点击!');
});
</script>
</body>
语义化结构最佳实践
现代 HTML5 推荐使用语义化标签组织内容：
<body>
<header>
<h1>网站标题</h1>
<nav>...</nav>
</header>
<aside>
<h2>侧边栏</h2>
<ul>...</ul>
</aside>
<main>
<article>...</article>
<section>...</section>
</main>
<footer>版权信息</footer>
</body>
性能优化要点
- 减少顶层元素数量：避免直接在
<body>下放置过多元素 - 延迟脚本加载：将
<script>放在</body>前或使用defer - CSS 放置优化：关键 CSS 可内联在
<head>中
<body>
<!-- 内容 -->
<script src="app.js" defer></script>
</body>
浏览器渲染机制
<body> 的渲染流程：
- 解析 HTML 构建 DOM 树
- 计算样式（CSSOM）
- 生成布局树（Layout）
- 绘制（Paint）
示例中修改 body 样式会触发重排：
document.body.style.padding = '30px'; // 触发重新布局
移动端适配技巧
通过 <body> 控制视口行为：
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 内容 -->
</body>
响应式设计常用模式：
body {
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 768px) {
body {
padding: 10px;
}
}
可访问性设计
ARIA 角色应用示例：
<body role="document">
<div role="banner">...</div>
<main role="main">
<article role="article">...</article>
</main>
</body>
键盘导航支持：
body:focus {
outline: 2px solid #0066cc;
}
上一篇： <title>-文档标题
下一篇： <meta>-文档元数据
