HTML 入门体验课程：三个实战场景带你轻松上手学

你刚开始接触网页制作时，最先要掌握的就是 HTML 入门。一句话说清楚：HTML 是用标签描述网页结构的标记语言，它不负责样式和逻辑，只负责说明「页面上有哪些内容、各自是什么」。只要熟悉十几个最常用的标签，你就能写出带有标题、段落、图片、链接和表单的静态网页。编程狮把这套标签拆成了可以动手做的练习，让你在浏览器里一边写代码一边看到真实效果，比单纯看文档更容易记住。下面这三个场景，就是所有网页都离不开的基本功，跟着敲一遍，你会发现写网页并没有想象中那么难。

HTML 入门体验课程三个场景封面

一、为什么先学 HTML

在正式写代码之前，你可能会问：为什么不是直接学那些看起来更炫的框架？原因很现实——HTML 是整个前端世界的地基。浏览器渲染任何页面，第一步都是把 HTML 解析成一颗「文档树」，CSS 负责给这棵树化妆，JavaScript 负责让树动起来。如果这棵树本身长歪了，后面再怎么装饰都没用，所以结构永远是第一位的。

更关键的是，HTML 的学习曲线非常平缓。它不像编程语言那样有复杂的变量作用域和内存模型，你只要记住「标签成对出现、属性写在开始标签里」这两条规矩，就能开始产出看得见的东西。这种即时反馈对初学者极其重要，它能让你在半小时内就拿到第一个能运行的成果，而不是卡在环境配置里放弃。

从求职和实战角度看，HTML 也是性价比最高的起点。无论你以后做后台、做数据分析，还是做小程序，只要涉及页面，就绕不开结构标记。先学 HTML 入门，等于先拿到一张通往所有前端知识的通行证，后续学 CSS 布局、学组件框架都会顺理成章，不会出现「看不懂别人在写什么」的断层。

还有一个容易被忽略的好处：HTML 几乎不需要配置环境。你不用装编译器、不用配数据库，一个记事本加一个浏览器就能开工。这种极低的上手门槛，让 HTML 成为检验「我到底适不适合做前端」 cheapest 的试金石，也难怪几乎所有入门课都把 HTML 放在第一节。

二、场景一：写出第一个网页（标题+段落）

我们先从一个最小可用的页面开始。打开任意文本编辑器，新建文件输入下面这段内容，保存为 first.html，双击用浏览器打开，你就拥有了人生第一个网页。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一门课程 | 编程狮（w3cschool.cn）</title>
  </head>
  <body>
    <h1>你好，编程狮</h1>
    <p>这是我在编程狮上学的第一门前端课程。</p>
  </body>
</html>

这段代码里，<!DOCTYPE html> 告诉浏览器使用现代标准解析；<html> 是根标签；<head> 放元数据，比如字符集和标题；<body> 才是用户真正看到的内容区。<h1> 表示一级标题，<p> 表示段落，它们都必须成对闭合，少写半个括号页面就会出错。

想系统记住这些标签的写法，可以对照 HTML 教程逐个练习。标题从 <h1> 到 <h6> 共六级，字号依次变小；段落用 <p>；强制换行用 <br>。记住一个核心原则：结构标签只描述「这是什么」，不要把颜色、字号这些样式写进标签里，那是 CSS 的工作，分工清楚才不会乱。

当你能熟练写出标题加段落，就已经跨过了最难的入门门槛。很多人卡在 HTML 入门，其实不是因为难，而是因为迟迟不肯动手写第一行。一旦你亲眼看到自己写的字出现在浏览器里，后面的列表、链接、表单都会变成顺水推舟的事。

三、场景二：用列表和链接做导航

单个页面很快会不够用，你需要把多个页面连起来。这时候 <a> 链接标签和列表标签就派上用场了。下面用三个链接做一个简单的站点导航，它也是几乎所有网站顶部都有的东西。

<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</nav>

<ul> 是无序列表，<li> 是列表项，<a href="..."> 的 href 属性指向目标地址。点击文字，浏览器就会跳转到对应页面。如果是站外链接，记得在 href 里写完整的 https:// 开头地址，否则浏览器会把它当成站内相对路径去找文件。

记不住标签怎么写时，随时翻 HTML 速查手册都很方便，它把常用标签按功能分组排列，查起来比翻长文档快得多。导航做好后，用户就能在不同页面间自由走动，这正是一个网站最基本的体验，也是 HTML 入门之后第一个能让你感到「网站成型了」的瞬间。

列表除了做导航，还能写商品清单、文章目录、排行榜。把 <ul> 换成 <ol> 就能变成带数字编号的有序列表，适合步骤说明和榜单。掌握这两种列表加一个链接，你已经能搭出大部分内容型网站的骨架，剩下的只是往里面填更多内容而已。

四、场景三：用表单收集信息

静态展示还不够，很多页面需要用户主动输入，比如登录、搜索、留言。这就轮到表单 <form> 出场了，它是网页和用户之间最直接的对话窗口。

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <label for="msg">留言：</label>
  <textarea id="msg" name="msg"></textarea>
  <button type="submit">提交</button>
</form>

<input> 的 type 决定输入形态，text 是单行文本，textarea 是多行文本，button 是提交按钮。<label for="name"> 通过 id 和输入框关联，点击文字就能聚焦输入框，对手机用户尤其友好，这也是做无障碍网页的基本要求。

想立刻看到表单效果，可以用 HTML 在线运行把上面代码粘进去直接运行，不用本地建文件。表单的真正价值在于它能把用户输入送到服务器，但这需要后端配合；作为 HTML 入门阶段，你先把结构写对、把字段命名清楚就足够了，提交后的处理逻辑留到以后再学也不迟。

到这里，标题、段落、列表、链接、表单这五类标签你都亲手写过一遍。它们组合起来，几乎能覆盖八成以上的普通网页需求。你会发现，所谓「做网页」拆解到底，无非就是把正确的标签放在正确的位置，没有什么神秘可言。

五、三个场景怎么串成页面

现在把前面三个场景拼起来，你会发现它们并不是孤立的，而是一张网页的自然分层：结构靠标题和段落立骨架，导航靠列表和链接把骨架连成网络，表单负责让这个网络能听用户说话，三层各司其职。

一个典型的个人主页就可以这样组织：用 <h1> 写站点名，用 <nav> 里的列表做顶部导航，用 <section> 分块放自我介绍和作品，最后用 <form> 放一个「给我留言」的入口。每一块都用语义化标签包裹，既方便搜索引擎理解，也方便以后加 CSS 美化，结构清晰的代码维护起来也省心。

建议你把三个场景的代码合并到同一个文件里练习一遍，而不是各写各的。合并过程中你会自然遇到「标签嵌套不能交叉」「一个页面只放一个 <h1>」这类实战规则，这些细节才是区分新手和熟手的地方，文档上往往一笔带过，只有动手踩过坑才记得住。

当你能把三个场景顺畅串成一个完整页面，HTML 入门这门课的核心目标就达成了。后面无论是学 CSS 调整外观，还是学 JavaScript 加交互，你都有了可以往上搭建的稳固地基，不会再出现「想改不知道从哪下手」的茫然。

HTML 三个实战场景怎么串成页面

总结

HTML 入门并不难，难的是迈出第一行代码。本文用三个最贴近真实需求的场景，带你从写出第一个标题段落，到用列表链接做导航，再到用表单收集用户输入，最后把它们串成一个完整页面。你只要记住：HTML 只负责描述结构，标签成对闭合、属性写在开始标签里，这两点守住就不会乱。遇到记不住的标签，随时回到教程和速查手册查就行。把三个场景亲手敲一遍，比看十遍文档都管用，这也是编程狮把这节课设计成「边写边看」的初衷。下一步，你就可以给这个页面加 CSS，让它真正好看起来。

延伸学习

想系统跟练，推荐 HTML 入门体验课，从零到写出一个完整页面。
区分不清 id 和 class 时，看这篇 HTML 里 id 与 class 的区别笔记，讲得很透。
写页面需要查标签用法，常备 HTML 参考手册更高效。

常见问题

Q：HTML 入门需要先懂英语吗？

A：完全不需要，标签名只是约定俗成的英文单词，记住几个常用的就行。
你真正要理解的是「标签成对、属性赋值」这种结构逻辑，而不是背单词。
用中文教材配合在线运行工具，零英语基础也能顺利开始。

Q：HTML、CSS、JavaScript 三者是什么关系？

A：HTML 是结构，CSS 是样式，JavaScript 是行为，三者分工明确。
浏览器先解析 HTML 得到内容树，再用 CSS 给它化妆，最后用 JS 让它动起来。
建议按 HTML 入门、CSS、JavaScript 的顺序学，层层叠加最稳。

Q：写好的 HTML 文件用什么打开？

A：用任意现代浏览器双击打开即可，不需要特殊软件。
开发时用记事本或专业编辑器写代码，预览时切到浏览器看效果。
保存时务必选「所有文件」类型并把后缀写成 .html，否则可能变成 txt 打不开。

Q：HTML5 和以前的 HTML 区别大吗？

A：对入门者来说区别不大，主要是新增了语义标签和多媒体支持。
像 <header>、<nav>、<video> 这类标签让结构更清晰、写视频不用插件。
基础写法完全兼容，你学的入门内容在 HTML5 里照样成立。