HTML中的head标签和body标签分别有什么作用?

81次阅读
没有评论

HTML中的<head>标签和<body>标签分别有不同的作用:

1、<head>标签

<head>标签用于在HTML文档中定义文档的头部区域,通常用于包含一些元数据信息和引用外部资源等。下面是<head>标签常用的元素和属性:

  • <title>元素:定义文档的标题,通常显示在浏览器的标题栏上。
  • <meta>元素:定义文档的元数据,如字符集、关键词等。
  • <link>元素:用于链接外部资源,如样式表、图标等。
  • <style>元素:定义文档的样式信息,可以包含CSS样式表。
  • <script>元素:定义文档的脚本信息,可以包含JavaScript代码。

下面是一个<head>标签的完整示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
<!-- 此处省略页面内容 -->
</body>
</html>

2、<body>标签

<body>标签用于在HTML文档中定义文档的主体区域,通常用于包含页面的内容。下面是<body>标签常用的元素和属性:

  • <h1>~<h6>元素:定义标题,从<h1>到<h6>分别表示不同级别的标题。
  • <p>元素:定义段落。
  • <a>元素:定义链接。
  • <img>元素:定义图像。
  • <ul>和<li>元素:定义无序列表。
  • <ol>和<li>元素:定义有序列表。

下面是一个<body>标签的完整示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
<h1>Welcome to my page</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="An image">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ol>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ol>
</body>
</html>

需要注意的是,<head>标签和<body>标签是HTML文档的必要部分,每个HTML文档中只能有一个<head>标签和一个<body>标签。

正文完
 
评论(没有评论)