引入
<head> 标签用于放网页的配置信息和说明信息。
它里面的内容大多不会直接显示在页面正文中，但会影响网页标题、编码、样式、搜索描述等。
正文
定义
定义
<head>是 HTML 文档中用于存放页面元信息的区域，通常包含<title>、<meta>、<link>、<style>、<script>等标签。
<head> 写在 <html> 内部，通常位于 <body> 之前。
基础结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>页面正文</h1>
</body>
</html><head> 管页面信息，<body> 管页面中真正显示的内容。
<title>
<title> 用于设置网页标题。
<title>HTML 学习笔记</title>它通常显示在浏览器标签页上，也会影响搜索结果中的标题。
<meta>
<meta> 用于设置页面元数据。HTML meta 标签有更详细内容
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML 基础学习笔记。">常见用途：
- 设置字符编码，避免中文乱码
- 设置移动端视口
- 设置页面描述，帮助 SEO
<link>
<link> 常用于引入外部 CSS 文件或网站图标。
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico">href 用于指定资源路径。
<style>
<style> 用于在 HTML 内部直接写 CSS。
<style>
p {
color: red;
}
</style>简单页面可以这样写，但项目中更常见的是使用外部 CSS 文件。
<script>
<script> 用于引入或编写 JavaScript。
<script src="js/main.js"></script>脚本可以写在 <head> 中，也可以写在 <body> 结束前。
如果脚本会操作页面元素，要注意加载顺序。
常见完整写法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个 HTML 学习页面。">
<title>HTML head 标签</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>HTML head 标签</h1>
</body>
</html>这个结构是常见 HTML 页面模板的一部分。
特点
<head>用于放页面元信息<head>中的内容大多不直接显示在页面正文中<title>设置浏览器标签页标题<meta>设置编码、视口、描述等信息<link>常用于引入 CSS 和图标<style>可以写内部 CSS<script>可以引入 JavaScript
注意事项
<head>应该写在<html>内部、<body>前面<meta charset="UTF-8">建议放在<head>靠前位置- 每个页面都应该有合适的
<title> - 移动端页面通常需要写
viewport - 不要把页面正文内容写进
<head> - 外部资源路径写错会导致样式或脚本加载失败
理解
可以把 <head> 理解为网页的“后台配置区”。
用户主要看到的是 <body>，但浏览器和搜索引擎会从 <head> 中读取很多重要信息。
它不负责展示正文内容，而是负责告诉浏览器这个页面应该怎样被理解和加载。
引出
理解 <head> 之后，可以继续学习 HTML meta 标签，它是 <head> 中最常见的一类配置标签。