【H5 前端开发笔记】第 05 期：HTML常用标签 (1) 文档定义标签
【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 唯一推荐）
<!DOCTYPEhtml>2.<html>—— 根元素
- 作用：包裹整个 HTML 文档
- 推荐属性：
lang（语言声明，对 SEO 和屏幕阅读器非常重要）
<htmllang="zh-CN"><!-- 或英文页面 --><htmllang="en">3.<head>—— 文档头部
- 作用：存放不会显示在页面上的信息（元数据、标题、资源引用等）
- 一个页面只能有一个
<head>
4.<title>—— 页面标题（极其重要）
- 作用：
- 显示在浏览器标签页
- 搜索引擎收录的主要标题
- 用户收藏网页时的默认名称
- 最佳实践：标题要简洁、有吸引力，包含核心关键词
<title>小米手机官网 - 探索科技新可能</title><title>张三的个人简历 | 前端工程师</title>5.<meta>标签 —— 元数据之王（本期重点）
<meta>是自闭合标签，用于提供关于页面的元信息。
最常用的几种 meta 写法：
<head><!-- 1. 字符编码（必须写在最前面） --><metacharset="UTF-8"><!-- 2. 视口设置（移动端适配，必写！） --><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 3. 页面描述（SEO 重要） --><metaname="description"content="小米科技官网，提供最新手机、笔记本、智能硬件产品及服务"><!-- 4. 关键词（现代搜索引擎权重已降低，但仍可写） --><metaname="keywords"content="小米,手机,Redmi,笔记本"><!-- 5. 作者信息 --><metaname="author"content="张三"><!-- 6. 刷新/跳转（较少使用） --><metahttp-equiv="refresh"content="5; url=https://www.example.com"><!-- 7. 兼容性设置（针对旧版 IE） --><metahttp-equiv="X-UA-Compatible"content="IE=edge"></head>2026 年最推荐的 head 基础模板（直接背下来）：
<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="description"content="这里写 50-150 字的页面描述"><title>页面标题 - 网站名称</title><linkrel="stylesheet"href="css/style.css"></head>6.<link>标签（常用）
主要用于引入外部 CSS 和网站图标：
<!-- 引入 CSS --><linkrel="stylesheet"href="css/style.css"><!-- 网站 favicon 图标 --><linkrel="icon"href="favicon.ico"type="image/x-icon"><linkrel="shortcut icon"href="favicon.png">7.<style>和<script>（简单了解）
<style>body{font-family:"Microsoft YaHei",sans-serif;}</style><scriptsrc="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 文档结构知识已经非常完整了！✨