网页开发中，HTML 的头部（<head> 部分）扮演着至关重要的角色。虽然不像 <body> 部分那样显眼，但头部包含了网页的许多关键元素，对网页的功能性和表现有着直接的影响。

一、HTML 头部概述

HTML 头部部分位于 <html> 标签内的 <head> 标签中。它通常包含了与网页的元数据、样式和脚本相关的信息，而不直接展示给用户。尽管头部内容不会在浏览器中直接显示，但它却影响了页面的呈现和行为。

1、头部的基本结构

HTML 头部的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

这个示例中，<head> 标签包含了几个关键元素：字符集声明、视口设置、标题、样式表链接和脚本标签。

二、常用头部标签详解

1、HTML <head> 元素

<head> 元素包含了所有头部标签。在 <head> 中，你可以插入脚本（<script>）、样式表（<link> 或 <style>）以及各种元数据（<meta>）。常见的头部元素标签包括：<title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>。

2、HTML <title> 元素

<title> 标签定义了网页的标题，这个标题会显示在浏览器的标签栏中，并且被搜索引擎用作网页的标题。一个好的标题应该简洁明了地描述页面内容。

<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

理解 HTML 头部：从基础到进阶——WEB开发系列07_html

3、