HTML 头部

HTML 头部位于 <head> 标签内，是网页的 “配置中心”，包含了所有不直接显示在页面上但对网页至关重要的元数据和资源引用。其核心作用包括：

<head> 标签必须作为 <html> 根元素的直接子元素，且位于 <body> 标签之前，示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 头部内容 -->
  </head>
  <body>
    <!-- 页面可见内容 -->
  </body>
</html>

核心头部元素

<title> 用于定义网页的标题，是头部中唯一必须存在的元素。其内容会显示在浏览器的标签页上，同时也是搜索引擎结果中显示的主要标题。

<head>
  <title>【坤坤】技术文档</title>
</head>

<meta> 标签用于提供网页的元数据，通过不同的属性组合，可实现多种功能。

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="本文详细介绍HTML头部的组成元素及用法，适合前端初学者学习参考。">

<meta name="keywords" content="HTML, 头部, head标签, 元数据">

<meta name="author" content="坤坤">

通过 <link> 标签引入外部 CSS 文件，控制网页的布局和外观。

<link rel="stylesheet" href="styles.css">

通过 <script> 标签引入外部 JavaScript 文件，实现网页的交互功能。

<script src="app.js" defer></script>

为网页添加图标（显示在浏览器标签页或书签中）

<link rel="icon" href="favicon.ico">

使用<base>标签为页面中所有相对 URL 指定一个基准 URL，简化链接和资源引用的路径书写

<base href="https://example.com/pages/">

之后页面中的相对链接会以该基准 URL 为基础，如 <a href="about.html"> 会被解析为 https://example.com/pages/about.html

使用<style>标签在头部嵌入 CSS 样式，作用于当前页面

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
  }
  h1 {
    color: #333;
  }
</style>

使用<noscript>标签可以在浏览器不支持 JavaScript 或禁用 JavaScript 时，显示该标签内的内容。

<noscript>
  您的浏览器不支持JavaScript，部分功能可能无法正常使用。
</noscript>

最后更新于5个月前