HTML 中的头部是 HTML 文档的重要组成部分，主要负责存储文档的元数据（描述数据的数据，如标题、编码、引入CSS、引入JavaScript等等），不会直接在浏览器页面的可视区域显示（少数标签除外，如 <title> 标签，内容会在浏览器的标签页显示）。
HTML 的所有头部信息都是包含在 <head>元素中，在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。如下图：
注意：可以添加在头部区域的元素标签为 <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
下面将分别介绍这些元素的作用：
<title>元素定义浏览器标签栏上显示的标题，也是搜索引擎结果中显示的页面标题（注意，必须闭合标签）。
浏览器标签栏显示标题，如下图：
搜索引起结果中显示标题，如下图：
注意，当网页添加到收藏夹时，显示在收藏夹中的标题也是通过<title>元素定义的。
一个简单的 HTML 文档:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h1>欢迎开始学习HTML</h1>
</body>
</html>上面示例定义标题为“HTML教程”。
定义页面中所有相对路径的基础 URL，单标签，一旦定义，页面中所有相对路径都会基于该地址拼接。
base 元素示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<!-- 注意：必须使用 / 结尾，不然显示存在问题 -->
<base href="https://www.hxstrive.com/cdn/" target="_blank">
<style>
img { width:200px; }
</style>
</head>
<body>
<!-- 相对地址，使用 <base> 定义的地址作为基础地址 -->
<img src="resources/img_lake_640.jpg" alt="风景"/>
<!-- 和上面图片效果一致 -->
<img src="https://www.hxstrive.com/cdn/resources/img_lake_640.jpg" alt="风景"/>
</body>
</html>运行示例，效果如下：
<link> 元素主要用于引入外部文件，最核心的用途是引入 CSS 样式表，也可用于设置页面图标（favicon）。
注意，<link> 元素是单标签，没有结束标签。
<link> 元素简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<!-- 核心：引入.ico图标（favicon） -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- 和上面图片效果一致 -->
<img src="https://www.hxstrive.com/cdn/resources/img_lake_640.jpg" alt="风景"/>
</body>
</html>运行示例，效果如下图：
跟多 <link>元素引入图标的实例：
<head>
<!-- 传统.ico图标（兼容所有浏览器） -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- PNG格式图标（支持高分辨率，可选） -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- 手机桌面快捷方式图标（可选） -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<!-- 将图标放在非根目录 -->
<link rel="icon" type="image/x-icon" href="static/icons/favicon.ico">
</head><style>元素是 HTML 中用于嵌入 CSS 样式代码的核心标签，主要作用是为当前 HTML 页面定义样式规则，控制页面元素的外观排版（比如字体、颜色、布局等）。
<style>元素必须放在 <head> 标签内（这是规范写法，利于浏览器提前加载样式，避免页面 “闪屏”），少数情况可放在<body>内，但不推荐。
基本语法：
<style type="text/css">
/* 这里是CSS注释（可选），写在/* 和 */ 之间 */
选择器 {
样式属性1: 属性值1;
样式属性2: 属性值2;
/* 单个样式规则以分号 ; 结尾，最后一个可省略 */
}
</style>注意，type="text/css" 可以省略，关于如何编写 CSS 将在 CSS 教程中进行详细介绍。
<style> 简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
h1 {
color: blue; /* 蓝色标题 */
font-size: 24px; /* 字体大小 */
}
</style>
</head>
<body>
<h1>欢迎开始学习HTML</h1>
</body>
</html>运行示例，效果如下图：
更多关于 <style> 元素的知识参考 HTML CSS 章节教程。
<script>元素是 HTML 中用于嵌入或引入 JavaScript 代码的核心标签，主要作用是为静态的 HTML 页面添加动态交互功能（比如表单验证、页面弹窗、内容动态修改、数据请求等），让网页从 “静态展示” 变成 “动态交互”。
直接在<script>标签内编写 JavaScript 代码，运行在当前页面。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h1>点击按钮触发弹窗</h1>
<button id="btn" type="button">点击我</button>
<!-- 嵌入内部JS代码，放在body末尾（推荐，确保页面元素先加载完成） -->
<script>
// 获取页面中的按钮元素
const btn = document.getElementById('btn');
// 给按钮添加点击事件，点击时弹出弹窗
btn.addEventListener('click', function() {
alert('Hello, JavaScript! 这是内部脚本实现的弹窗');
});
</script>
</body>
</html>运行示例，点击按钮“点击我”效果如下图：
通过src属性加载外部的.js文件，实现代码复用和分离，是项目开发的首选方式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h1>点击按钮触发弹窗</h1>
<button id="btn" type="button">点击我</button>
<!-- 引入外部JS文件，src属性指定文件路径 -->
<script type="text/JavaScript" src="simple.js"></script>
</body>
</html>更多关于<script>元素的知识参考HTML 脚本章节教程。
<meta>元素是放在<head>标签内的元数据标签，核心作用是为浏览器、搜索引擎、爬虫等工具提供关于当前 HTML 页面的「描述性信息」（比如编码、视口设置、页面关键词等），这些信息不会直接显示在页面上，却对页面的渲染、兼容性、SEO 优化至关重要。
<meta>元素是自闭合标签（没有结束标签，格式为<meta ... />或<meta ...>，HTML5 中两种写法都合规），主要通过 name、http-equiv、charset 这三个核心属性来定义不同类型的元数据。
<meta> 常用场景：
这是每个 HTML 页面都必须添加的元数据，用于告诉浏览器当前页面使用的字符编码格式，避免出现中文等特殊字符乱码。
例如：
<!-- HTML5 简化写法，设置页面编码为 UTF-8（万能编码，支持所有语言字符） -->
<meta charset="UTF-8">提示：UTF-8 是目前互联网上最通用的字符编码，几乎支持所有国家和地区的文字，所有项目都应优先使用。
注意，早期 HTML 版本会用http-equiv实现相同功能，现在已被简化写法替代，仅需了解：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">移动端网页开发必不可少的元数据，用于控制浏览器如何渲染移动端页面（避免页面缩放错乱、元素显示过小），实现移动端适配。
例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">详细说明：
width=device-width：设置页面宽度等于设备的屏幕宽度（比如手机屏幕宽 375px，页面就宽 375px）。
initial-scale=1.0：设置页面初始加载时的缩放比例为 1:1（不放大也不缩小）。
user-scalable=no：禁止用户手动缩放页面（不推荐，影响用户体验，部分 APP 内嵌网页会使用）。
maximum-scale=1.0：设置最大缩放比例为 1.0。
minimum-scale=1.0：设置最小缩放比例为 1.0。
这类元数据用于向搜索引擎（百度、谷歌等）提供页面的核心信息，帮助搜索引擎理解页面内容，提升页面在搜索结果中的排名和展示效果。
例如：
<!-- 页面描述：简要概括页面核心内容，会显示在搜索引擎搜索结果中 -->
<meta name="description" content="这是一个HTML教程页面，详细讲解<meta>元素的使用方法、核心属性和常见场景，适合前端新手学习。">
<!-- 页面关键词：填写与页面内容相关的核心词汇，多个词汇用英文逗号分隔 -->
<meta name="keywords" content="HTML,meta元素,前端教程,SEO优化">
<!-- 页面作者：标注页面的创建者/作者 -->
<meta name="author" content="张三">http-equiv的作用是模拟 HTTP 响应头信息，告诉浏览器如何处理页面的缓存、刷新、跳转等行为，常用场景如下：
页面自动刷新
<!-- 每3秒自动刷新一次页面（content中的数字为刷新间隔，单位：秒） -->
<meta http-equiv="refresh" content="3">页面自动跳转
<!-- 5秒后自动跳转到指定网址（百度首页），分号前是间隔时间，分号后是跳转地址 -->
<meta http-equiv="refresh" content="5; url=https://www.baidu.com">设置页面缓存（较少使用，多由后端 HTTP 头控制）
<!-- 禁止浏览器缓存当前页面（每次打开都重新加载最新内容） -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<!-- 过期时间：设置页面缓存过期时间为过去的时间，强制重新加载 -->
<meta http-equiv="Expires" content="0">禁止浏览器自动识别电话号码 / 邮箱
<meta name="format-detection" content="telephone=no, email=no">设置页面主题颜色（适配部分移动端浏览器）
<meta name="theme-color" content="#2c3e50">完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 移动端视口适配（核心） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO 相关 -->
<meta name="description" content="HTML<meta>元素完整教程，包含核心属性、常用场景和实战示例。">
<meta name="keywords" content="HTML,meta,视口,SEO,字符编码">
<meta name="author" content="前端学习笔记">
<!-- 移动端优化 -->
<meta name="format-detection" content="telephone=no">
<title>HTML教程</title>
</head>
<body>
<h1>查看<head>标签中的meta元素配置</h1>
</body>
</html>更多HTML知识请阅读后续教程……
川公网安备51010802032098