HTML 入门教程
本教程是 HTML 的完整 10 篇入门系列,面向零基础初学者。从编辑器安装、文档骨架一路讲到表单、语义化、音视频与 SEO,每一篇都配有可在浏览器中直接打开的代码示例。
HTML 是 HyperText Markup Language(超文本标记语言)的缩写,诞生于 1989 ~ 1991 年,由 Tim Berners-Lee 在欧洲核子研究中心(CERN)发明。它不是编程语言,而是用一组"标签"描述页面上每一块内容是什么——这是标题、那是段落、这里是一张图。浏览器读取这些标签,然后把内容渲染成你看到的网页。
一个类比:如果把网页比作一篇文章,HTML 就是这篇文章的"大纲"和"段落标记";CSS 负责排版美化;JavaScript 负责交互动效。三者各司其职,而 HTML 永远是地基——地基不牢,上面的样式和交互都会出问题。
先看一个 HTML 页面
下面是最简单的 HTML 页面,先感受一下它的样子:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好,世界</h1>
<p>这是我的第一个 HTML 页面。</p>
</body>
</html>全部 10 篇子教程
建议按顺序学习,每天 1 ~ 2 篇,一周即可入门。
- HTML 简介 — 什么是 HTML、发展史与应用场景
- 编辑器与浏览器 — 写代码用什么、怎么打开网页
- HTML 文档骨架 — doctype、html、head、body
- 标题、段落与文本 — h1~h6、p、strong、em、span
- 链接与图片 — a、img、相对路径与锚点
- 列表与表格 — ul、ol、table 的正确用法
- 表单 — form、input、select、HTML5 校验
- 语义化标签 — header、nav、article、section
- 音视频与嵌入 — video、audio、iframe
- meta 与 SEO — 字符集、viewport、Open Graph
推荐学习路径
如果你是完全的零基础,建议按下面 3 个阶段推进,每个阶段都建立在前一个之上:
- 阶段 1 打地基:简介 → 编辑器与浏览器 → 文档骨架 → 标题段落。先能在本地双击打开网页,看懂最简单的结构。
- 阶段 2 内容标签:链接图片 → 列表表格 → 表单。学会把常见内容(文字、图、数据、输入)正确地写到页面里。
- 阶段 3 工程化:语义化 → 音视频 → meta 与 SEO。学会让页面结构清晰、对搜索引擎和无障碍友好。
每篇都建议你边读边敲:把示例代码复制到本地,改一改、刷新浏览器,看效果是否和预期一致。HTML 是"手艺活",光看不练记不住。
开始学习
准备好了吗?从第一篇开始 → HTML 简介