【HTML教程】HTML的body标签|html入门知识
时间: 2025-01-05 11:09:27 浏览次数：3
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：【定义和用法】body 标签定义文档的主体。HTML 文档的元数据和
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：
【定义和用法】
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>
例子 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>
例子 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;
}