【H5 前端开发笔记】第 05 期：HTML常用标签 (1) —— 文档定义标签
（2026 最新版 · 结构清晰 · 可直接作为学习/面试笔记）
本期我们正式进入 HTML 常用标签 系列的第一讲，重点学习文档定义相关标签。这些标签主要出现在 <head> 中，是每个网页的“身份证”和“元数据”。
一、文档定义标签概览
文档定义标签指的是用来描述文档本身信息（而不是页面可见内容）的标签，主要集中在 <head> 标签内。
核心文档定义标签清单（必须掌握）：
| 标签 | 含义 | 是否必须 | 优先级 |
|---|---|---|---|
<!DOCTYPE html> | 文档类型声明 | 必须 | ★★★★★ |
<html> | HTML 根元素 | 必须 | ★★★★★ |
<head> | 文档头部（元数据容器） | 必须 | ★★★★★ |
<meta> | 元数据标签（最重要！） | 强烈推荐 | ★★★★★ |
<title> | 页面标题 | 必须 | ★★★★★ |
<base> | 基准 URL（较少使用） | 可选 | ★★ |
<link> | 引入外部资源（CSS、图标等） | 常用 | ★★★★ |
<style> | 嵌入式 CSS 样式 | 常用 | ★★★ |
<script> | 嵌入或引入 JavaScript | 常用 | ★★★★ |
二、每个标签详细讲解
1. <!DOCTYPE html> —— 文档类型声明
- 位置：必须是 HTML 文件的第一行
- 作用：告诉浏览器使用 HTML5 标准解析，触发标准模式
- 写法：简洁版（HTML5 唯一推荐）
<!DOCTYPE html>
2. <html> —— 根元素
- 作用：包裹整个 HTML 文档
- 推荐属性：
lang（语言声明，对 SEO 和屏幕阅读器非常重要）
<html lang="zh-CN">
<!-- 或英文页面 -->
<html lang="en">
3. <head> —— 文档头部
- 作用：存放不会显示在页面上的信息（元数据、标题、资源引用等）
- 一个页面只能有一个
<head>
4. <title> —— 页面标题（极其重要）
- 作用：
- 显示在浏览器标签页
- 搜索引擎收录的主要标题
- 用户收藏网页时的默认名称
- 最佳实践：标题要简洁、有吸引力，包含核心关键词
<title>小米手机官网 - 探索科技新可能</title>
<title>张三的个人简历 | 前端工程师</title>
5. <meta> 标签 —— 元数据之王（本期重点）
<meta> 是自闭合标签，用于提供关于页面的元信息。
最常用的几种 meta 写法：
<head>
<!-- 1. 字符编码（必须写在最前面） -->
<meta charset="UTF-8">
<!-- 2. 视口设置（移动端适配，必写！） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. 页面描述（SEO 重要） -->
<meta name="description" content="小米科技官网，提供最新手机、笔记本、智能硬件产品及服务">
<!-- 4. 关键词（现代搜索引擎权重已降低，但仍可写） -->
<meta name="keywords" content="小米,手机,Redmi,笔记本">
<!-- 5. 作者信息 -->
<meta name="author" content="张三">
<!-- 6. 刷新/跳转（较少使用） -->
<meta http-equiv="refresh" content="5; url=https://www.example.com">
<!-- 7. 兼容性设置（针对旧版 IE） -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
2026 年最推荐的 head 基础模板（直接背下来）：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这里写 50-150 字的页面描述">
<title>页面标题 - 网站名称</title>
<link rel="stylesheet" href="css/style.css">
</head>
6. <link> 标签（常用）
主要用于引入外部 CSS 和网站图标：
<!-- 引入 CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- 网站 favicon 图标 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.png">
7. <style> 和 <script>（简单了解）
<style>
body { font-family: "Microsoft YaHei", sans-serif; }
</style>
<script src="js/main.js"></script>
三、本期总结（建议抄写记忆）
<!DOCTYPE html>必须写在第一行<html lang="zh-CN">推荐加上语言声明<head>中最重要的三个标签：<meta charset>、<meta viewport>、<title><meta>是元数据标签，charset和viewport是必写的- 良好的
<head>是网页专业度的体现
四、课后练习（建议立即动手）
- 新建文件
05-head.html，完整写出标准的 HTML5 head 结构 - 给页面设置合适的
<title>和<meta name="description"> - 引入一个外部 CSS 文件（即使现在是空的）
- 添加 favicon 图标链接（可使用在线图标）
第 06 期预告：《HTML 常用标签 (2) —— 文本与格式化标签（h、p、strong、em、span、br、hr 等）》
需要我立刻补充以下任意内容，请直接回复：
- 本期完整标准 head 模板（可直接复制使用）
- 带详细注释的完整 HTML 示例文件
<meta>标签更高级用法（Open Graph、Twitter Card、SEO 进阶）- 把第 01~05 期笔记合并成一份完整的前端基础笔记文档
继续加油！第 05 期笔记到此结束，你的 HTML 文档结构知识已经非常完整了！✨
