HTML 总结
到这里，HTML 的基础语法与常用标签已经基本学完。这节课做一次系统回顾：把零散的知识串成一张"知识地图"，并给出清晰的学习路线，为接下来的 CSS 与 JavaScript 打好基础。
HTML 到底是什么
HTML（HyperText Markup Language，超文本标记语言）不是编程语言，而是一种标记语言：用成对的标签给文本加上语义，浏览器再按语义渲染成页面。可以说：一个网页 = 文档结构（标签）+ 内容（文字、图像、媒体）。
一张页面由哪些标签组成
常用标签可按用途分成几类，写页面时按这张表"取用"即可：
| 分类 | 典型标签 | 作用 |
|---|---|---|
| 文档结构 | html、head、body、title | 搭建页面骨架 |
| 文本 | h1~h6、p、br、hr、strong、em | 标题与文字排版 |
| 列表 | ul、ol、li、dl | 罗列条目 |
| 链接与图像 | a、img | 页面跳转与配图 |
| 表格 | table、tr、td、th | 展示二维数据 |
| 表单 | form、input、select、textarea | 收集用户输入 |
| 多媒体 | audio、video、canvas | 声音、视频、绘图 |
| 语义化 | header、nav、section、footer | 表达区块含义 |
全局属性要记牢
有些属性几乎所有标签都支持，称为全局属性：id（页面内唯一标识）、class（样式类名）、style（行内样式）、title（鼠标悬停提示）、lang（语言）等。其中 id 与 class 是 CSS 和 JavaScript 定位元素的两大"钩子"。
一个完整的页面示例
把上面学到的标签组合起来，就是一个五脏俱全的页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>我的主页</title>
</head>
<body>
<header><h1>张三的学习笔记</h1></header>
<nav><a href="#html">HTML</a> | <a href="#css">CSS</a></nav>
<section id="html"><h2>HTML 学习</h2><p>已完成标签与表单部分。</p></section>
<section id="css"><h2>CSS 学习</h2><p>下一步美化页面样式。</p></section>
<footer>版权信息 © 2025</footer>
</body>
</html>
在浏览器中显示为：一个带页眉、导航、两个内容区与页脚的简单个人主页。
常见坑位回顾
- 标签要正确嵌套并及时闭合，块级元素与行内元素的区别要分清。
- 属性值记得加引号；图片写 alt、链接写可读文字，利于无障碍与 SEO。
- 全站统一使用 UTF-8 编码（meta charset="utf-8"），避免中文乱码。
下一步学什么
- CSS：控制颜色与布局，让页面变得美观（配合 div 与 class 使用）。
- JavaScript：操作 DOM、响应事件，让页面产生交互。
- HTML5 新特性：语义元素、Canvas、本地存储等，让页面能力更强。
小结：HTML 是网页的"骨架语言"，掌握文档结构、常用标签、全局属性三大块即可入门；学完后应立刻跟上 CSS 布局与 JavaScript 交互，才能做出真正完整的网页。