【HTML教程】HTML的body标签|html入门知识

攻城狮与产品喵

发布于 2026-03-02 21:38:18

180

——致力做企业用得上的平台； ——开发企业节省成本的系统；

导读

常用的html标签汇总、以及操作过程中的一些bug问题解决方法，是我们在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就 查询/搜索 一下，实践出真章，做多了自然就熟悉了！

——龙腾飞网络科技-小吴

#body标签 #HTML教程 #HTML标签 #html入门知识

【定义和用法】

body 标签定义文档的主体。

HTML 文档的元数据和文档信息包装在 head 元素中，文档的内容则包装在 body 元素中。

body 元素总是紧跟在 head 元素之后，它是 html 元素的第二个子元素。

body 元素包含 HTML 文档的所有内容，例如标题、段落、图像、超链接、表格、列表等。

注意：一个 HTML 文档中只能有一个 body 元素。

【实例】

例子 1：一个简单却完整的 HTML 文档：

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
  </body>
</html>

例子 2：向文档添加背景图像(使用 CSS)：

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>龙腾飞网络科技</h1>
<p><a href="">访问 www.gzlongtengfei.com！</a></p>
</body>
  </body>
</html>

例子 3：设置文档的背景颜色(使用 CSS)：

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>

<h1>龙腾飞网络科技</h1>
<p><a href="https://www.gzlongtengfei.com">访问 www.gzlongtengfei.com！</a></p>
  </body>
</html>

例子 4：设置文档中文本的颜色(使用 CSS)：

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>

<h1>龙腾飞网络科技</h1>
<p>这是一段文本。</p>
<p><a href="http://www.gzlongtengfei.com/">访问 www.gzlongtengfei.com</a></p>

</body>
</html>

例子 5：设置文档中未访问链接的颜色(使用 CSS)：

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>

<p><a href="http://www.gzlongtengfei.com/">龙腾飞网络科技</a></p>
<p><a href="http://www.gzlongtengfei.com/html/">HTML 教程</a></p>

</body>
</html>

例子 6：设置文档中活动链接的颜色(使用 CSS)：

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>

<p><a href="http://www.gzlongtengfei.com/">龙腾飞网络科技</a></p>
<p><a href="http://www.gzlongtengfei.com/html/">HTML 教程</a></p>

</body>
</html>

例子 7：设置文档中已访问链接的颜色(使用 CSS)：

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>

<p><a href="http://www.gzlongtengfei.com/">龙腾飞网络科技</a></p>
<p><a href="http://www.gzlongtengfei.com/html/">HTML 教程</a></p>

</body>
</html>

【默认的 CSS 设置】

大多数浏览器将使用以下默认值显示 body 元素：

body {
  display: block;
  margin: 8px;
}

body:focus {
  outline: none;
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-02-25，如有侵权请联系 cloudcommunity@tencent.com 删除

企业

本文分享自攻城狮与产品喵微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度