html网页制作教程

打开记事本，敲下 <h1>我的制作第一个网页</h1>，保存为 .html 文件，教程双击——浏览器里跳出一行大字。网页这就是制作HTML的全部起点。别被那些花哨的教程框架吓住，网页的网页骨架从来都是标签堆出来的。

我刚开始学的制作时候，总想一口气搞懂所有标签。教程结果三天过去，网页连段落和换行都分不清。制作后来发现，教程真正每天用到的网页核心标签不超过二十个。先把它们练熟，制作比背完整本手册管用。教程

标签不是命令，是给内容贴的标签

很多人把HTML当成编程语言，其实它更像一份标注说明书。你告诉浏览器：“这段是标题，那段是段落，这里放张图。”浏览器负责渲染成视觉样式。比如 <p> 标签，你写 <p>今天下雨了</p>，浏览器就知道这是个段落，自动加上下间距。

看个最简单的结构：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的页面</title> </head> <body> <h1>欢迎</h1> <p>这是我的第一个网页。</p> </body> </html>

<!DOCTYPE html> 告诉浏览器用标准模式解析。没有它，某些老浏览器会进入怪异模式，边距全乱。<head> 里放元信息，<body> 里放用户看得见的东西。就这么简单。

属性是标签的额外说明

标签可以带属性，比如链接 <a href="https://example.com">点我</a>。href 就是属性，指定跳转地址。图片标签 <img src="photo.jpg" alt="风景照">，src 是图片路径，alt 是图片加载失败时显示的文字。我见过有人漏写 alt，结果图片裂了，用户完全不知道那里原本是什么。

属性值通常用双引号包起来。单引号也行，但别混用。有人写 <a href='page.html">，浏览器直接懵掉。这种错误我犯过不止一次，调试半天才发现引号不配对。

块级与行内，布局的隐形分界线

标签分两类：块级和行内。块级独占一行，比如 <div>、<p>、<h1>。行内跟着文字走，比如 <span>、<a>、<strong>。刚学的时候我不理解为什么 <div> 会换行，而 <span> 不会。后来明白，这是浏览器默认的显示规则。

想改？用CSS的 display 属性。但初学阶段，先记住默认行为就好。比如你想把几个链接排成一行，直接用 <a> 就行，它们天然并排。如果想给每个链接加背景色又希望它们竖着排，那就得用 <div> 包起来，或者给 <a> 设 display: block。

我教朋友写网页时，常让他们做一个练习：用 <div> 搭三个方块，分别放标题、段落、图片。不用CSS，纯HTML。做完他们立刻明白块级元素是怎么堆叠的。这个练习比看十篇教程都直观。

表格别用来布局，但得会看

早年用 <table> 排版的网站，现在看代码简直是灾难。但表格本身没罪，展示数据时它依然好用。比如 <tr> 是行，<td> 是单元格，<th> 是表头。写个三行四列的成绩表，五分钟搞定。

<table border="1"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> </tr> <tr> <td>张三</td> <td>92</td> <td>88</td> </tr> </table>

border="1" 加个边框，不然表格线看不见。现代开发用CSS控制边框，但初学阶段加个属性省事。注意别用表格去拼页面布局，那是二十年前的玩法。现在有flex和grid，表格回归数据展示就好。

表单是交互的入口

登录框、搜索栏、注册页，背后都是 <form> 标签。里面放 <input>、<textarea>、<button>。<input type="text"> 是单行文本，type="password" 是密码框，type="submit" 是提交按钮。每个输入框最好配个 <label>，点文字也能聚焦输入框，体验好很多。

我见过一个报名表，所有输入框都没加 name 属性。提交后后端收不到任何数据。写表单时，name 是给服务器看的，id 是给 <label> 关联用的，placeholder 是给用户提示的。三者各司其职，别混。

HTML不难，但细节多。我的建议是：打开浏览器，按F12，看别人网站的代码结构。你会发现，再复杂的页面，拆开都是这些基础标签。先能看懂，再模仿，最后自己写。别急着学框架，骨架搭稳了，穿什么衣服都好看。

最后留个小任务：用今天提到的标签，做一个个人简介页面。包含标题、段落、一张图、一个链接、一个表格、一个表单。不用CSS，纯HTML。做完保存，用浏览器打开。你会看到自己第一个真正意义上的网页。