数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学解释HTML中<head>和<body>标签的意义
HTML中最常用的两个标签是<head>和<body>。极少有行业级别的网站在其页面上不使用<head>和<body>标签。它们执行不同的任务，对于确定网页的内容、外观和行为至关重要。让我们深入了解这篇文章，学习更多关于HTML中<head>和<body>标签的意义。
<head>标签的意义
<head>标签是HTML页面中所有头部元素的容器。我们使用<head>…</head>标签将其添加到HTML页面。头部标签包含文档标题、样式、脚本和其他HTML元素。<head>元素是元数据的容器——关于数据的数据，位于<html>…</html>标签之间。
以下元素可以放在<head>元素内：
<title> − 在每个HTML页面中使用，定义内容的标题。
<style> − 用于向HTML文档应用简单的样式。
<base> − 为页面上的所有链接指定默认URL和默认目标。
<link> − 定义当前文档和外部资源之间的关系。
<meta> − 定义关于HTML文档的元数据，通常用于指定字符集、页面描述、关键词、文档作者和视口设置。
<script> − 用于嵌入客户端脚本（JavaScript），它通过src属性指向外部脚本文件。
<noscript> − 定义要显示给在浏览器中禁用了脚本或使用不支持脚本的浏览器的用户的替代内容。<noscript>元素可以在<head>和<body>中使用。
示例
在下面的示例中，我们将<title>标签放在<head>标签内。
<!DOCTYPE html> <html> <head> <title>Welcome to Tutorials point</title> </head> <body>Welcome to Tutorials point</body> </html>
当我们运行上面的代码时，它将生成一个输出，在网页的标题栏上显示文本。
示例
考虑另一个场景，我们将使用<style>标签放在<head>标签内。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #DE3163;
font-family: verdana;
font-size: 30px;
}
body {
background-color: #D5F5E3;
}
p {
color: #6C3483;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<p>The Best E-way Learning.!</p>
</body>
</html>
运行上面的代码后，输出窗口将弹出，显示应用了CSS样式的文本。
示例
下面是一个我们将<script>标签放在<head>标签内的示例。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<button onclick="mytutorial()">CLICK</button>
<p id="tp"></p>
<script>
function mytutorial() {
document.getElementById("tp").innerHTML = "WELCOME.!";
}
</script>
</body>
</html>
当我们运行上面的代码时，它将生成一个输出，其中包含网页上的点击按钮。当用户点击按钮时，脚本被激活并显示一条消息。
<body>标签的意义
用户访问站点时看到的可见网页内容包含在<body>标签中。它包括文本、图片、视频、链接等等。网页的结构和设计由<body>标签内包含的内容决定。
您可以在<body>标签内使用各种HTML元素来组织您的信息，包括标题（<h1>，<h2>…<h6>）、段落（<p>）、列表（<ul>，<ol>和<li>）、图像（<img>）、超链接（<a>）等等。此外，您可以使用适当的HTML标签添加多媒体组件，如音频和视频。
示例
让我们来看下面的例子，我们将图像添加到网页中。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
}
</style>
</head>
<body>
<img src="https://tutorialspoint.com/cg/images/logo.png" alt="LOGO" width="300" height="150">
</body>
</html>
运行上面的代码后，将弹出一个输出窗口，显示上传到网页的图像。
示例
在下面的示例中，我们将音频文件添加到网页中。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<audio controls>
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
当我们运行上面的代码时，它将生成一个输出，其中包含上传到网页的音频文件。
227 次浏览
