【H5 前端开发笔记】第 01 期：HTML 基础结构
（2026 最新版 · 0基础友好 · 结构清晰可直接当笔记使用）
一、什么是 HTML？
- 全称：HyperText Markup Language（超文本标记语言）
- 作用：负责网页的结构和内容（骨架），不是样式（CSS）也不是交互（JavaScript）
- 核心理念：使用标签（Tag）来描述内容的语义
- 当前标准：HTML5（2014 年正式推荐，2026 年依然是主流，新增了大量语义化标签和 API）
二、HTML 基础骨架（必须背下来）
每个合格的 HTML 页面都应该包含以下标准结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题 - 出现在浏览器标签页</title>
<!-- 这里放 CSS、图标、SEO 相关 meta 等 -->
</head>
<body>
<!-- 页面所有可见内容都写在这里 -->
<h1>一级标题</h1>
<p>这是一个段落。</p>
</body>
</html>
每一行详细解释：
<!DOCTYPE html>
文档类型声明，必须放在第一行，告诉浏览器使用 HTML5 标准解析。<html lang="zh-CN">
根标签，lang属性声明页面主要语言（利于 SEO 和屏幕阅读器）。<head>
头部，不在页面显示，用于存放元数据（meta）、标题、引入的 CSS、JS 等。<meta charset="UTF-8">
字符编码声明，必须放在<head>最前面，防止中文乱码。<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端适配核心，让页面在手机上不缩放，宽度等于设备宽度。<title>
页面标题，极其重要（SEO、浏览器标签页、收藏夹名称）。<body>
主体，所有用户可见的内容都放在这里。
三、HTML 标签书写规范（2026 推荐）
- 标签必须闭合（HTML5 部分可以省略，但推荐显式闭合）
- 标签名一律小写（历史遗留问题，大写也能识别，但不推荐）
- 属性值用双引号（强烈推荐）
- 合理缩进（一般 2 或 4 个空格）
- 语义化优先（后面课程重点）
正确示例：
<h1>欢迎来到我的网站</h1>
<p>这是段落内容。</p>
<img src="logo.png" alt="公司Logo" width="200">
四、常用基础标签速览（本期重点记忆）
1. 标题标签（h1 ~ h6）
<h1>一级标题（最重要的标题，一个页面只用一次）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
2. 段落与文本
<p>这是一个段落。</p>
<br> <!-- 换行（自闭合标签） -->
<hr> <!-- 水平分割线 -->
<strong>加粗并强调语义</strong>
<em>斜体并强调语义</em>
3. 图片与链接（重点）
<!-- 图片 -->
<img src="images/photo.jpg" alt="照片描述" title="鼠标悬停文字">
<!-- 链接 -->
<a href="https://www.baidu.com" target="_blank">打开新标签页</a>
<a href="about.html">内部页面链接</a>
<a href="#section1">页面内锚点跳转</a>
4. 列表（后面会详细讲）
- 无序列表
<ul><li> - 有序列表
<ol><li>
五、语义化标签（HTML5 新增，强烈推荐使用）
代替以前大量使用 <div> 的写法，提高可读性、SEO、辅助设备友好度。
常用语义化标签（本期先认识）：
<header>—— 页头<nav>—— 导航<main>—— 页面主要内容（一个页面只能有一个）<section>—— 区块<article>—— 独立文章/内容<aside>—— 侧边栏<footer>—— 页脚
示例结构（现代写法）：
<body>
<header>...</header>
<nav>...</nav>
<main>
<article>
<h1>文章标题</h1>
<p>内容...</p>
</article>
</main>
<footer>...</footer>
</body>
六、HTML 文件创建与运行（立即动手）
- 新建文件 → 命名为
index.html（必须是.html后缀） - 把上面的标准骨架复制进去
- 保存，用浏览器直接打开（双击或右键 → 用浏览器打开）
- 推荐编辑器：VS Code（安装 Live Server 插件，可实时刷新）
七、本期练习题（建议全部完成）
- 按照标准结构新建一个
01-html基础.html文件 - 写一个个人介绍页面，包含：
- 标题：我的个人主页
- 一级标题、自我介绍段落
- 一张图片（用网络图片或本地）
- 至少两个超链接（一个外部，一个锚点）
- 使用语义化标签
<header>、<main>、<footer> - 验证代码：把代码粘贴到 https://validator.w3.org/ 检查错误
笔记总结（建议抄写或截图）：
- HTML 负责结构，CSS 负责样式，JS 负责交互
- 必须记住的标准 8 行骨架
<!DOCTYPE html>、meta charset、viewport是必写- 语义化 > 无意义 div
- 属性值用双引号，标签名用小写
第 02 期预告：《HTML 常用标签与语义化进阶》（文本、图片、表格、表单、音视频等）
需要我立即补充以下任意内容，请直接说：
- 完整可运行的「个人主页」示例代码（带注释）
- VS Code + Live Server 详细安装配置步骤
- HTML5 新增语义化标签思维导图
- 本期练习题的标准参考答案
- 把本期笔记整理成 Markdown / PDF 格式
继续你的 H5 前端系统学习！
第 01 期笔记到此结束，加油！✨
