如何用HTML制作一个简单的网页

你打开记事本，敲下第一行代码，制作一个网页就诞生了。个简HTML没你想的网页那么玄乎——它就是一叠带标签的纯文本，浏览器负责把它们翻译成你看到的何用画面。别被那些花哨的制作前端框架吓住，一个“简单网页”的个简底线，其实只需要一个文件、网页几个标签，何用外加一点好奇心。制作

先写骨架：DOCTYPE与html标签

每个HTML文件的个简开头都得声明文档类型，告诉浏览器“我按HTML5标准来”。网页然后整个内容裹在<html>标签里。何用这一步像盖房子先打地基，制作别嫌麻烦，个简没有它浏览器会进入“怪异模式”，排版可能莫名错乱。

<!DOCTYPE html> <html lang="zh-CN"> <!-- 所有内容都写在这里面 --> </html>

头部与身体：head和body的分工

<head>里放“看不见的东西”——页面编码、标题、样式表链接。而<body>才是你真正给用户看的内容。我第一次写的时候把文字全塞进head里，半天没反应，后来才明白：头部是后台，身体才是舞台。

<head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>你好，世界！</h1> </body>

标题与段落：让文字有层次

别一上来就用<h1>，那是给大标题用的。从<h1>到<h6>，字号递减，语义递增。段落用<p>包裹，浏览器会自动在段落间加空行。我见过有人用<br>硬撑间距，结果换行全挤成一坨——那是自找麻烦。

<h2>关于咖啡</h2> <p>这是我早上手冲的第二杯。豆子是哥伦比亚产的，酸度明亮，带点红糖味。</p> <p>写代码时喝咖啡，写出来的标签都更整齐。</p>

链接与图片：网页的灵魂

没有超链接的网页是一张孤岛海报。用<a>加href属性就能跳转，用<img>加src属性就能显示图片。注意<img>是自闭合标签，不需要结束符。图片加载失败时，alt属性会显示替代文字——这个细节，很多新手会忽略。

<a href="https://example.com">点我去看看</a> <img src="coffee.jpg" alt="一杯手冲咖啡" width="300">

列表与强调：整理信息的小工具

无序列表用<ul>，有序列表用<ol>，每一项都用<li>包起来。想强调某个词，用<strong>加粗，<em>斜体。我写代码清单时总用无序列表，因为顺序不重要——但做菜谱时就得用有序列表，步骤错了那就真糊了。

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

一个完整的“简单网页”长什么样

把上面这些拼一起，就是一个能跑的页面。复制下面代码，存成myfirstpage.html，双击打开——你已经在做网页了。别慌，出错很正常，我头回写</html>忘了加斜杠，页面直接显示一团标签，那也才花了五分钟就找到问题。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的咖啡日记</title> </head> <body> <h1>今天喝了什么</h1> <p>下午三点，做了一杯拿铁。奶泡打得有点粗，下次要再转小一点角度。</p> <a href="https://baike.baidu.com/item/拿铁">拿铁是什么？</a> <h2>原料清单</h2> <ul> <li>浓缩咖啡 30ml</li> <li>牛奶 200ml</li> <li>糖浆 10ml（可选）</li> </ul> <p>对了，加一点<em>肉桂粉</em>会有惊喜。</p> </body> </html>

写网页这件事，本质上就是“用标签给内容做标记”。你不需要记住所有标签——常用的就那十来个。打开编辑器，敲几行，刷新浏览器，看到变化，再改，再刷新。这个循环本身就是乐趣。别怕犯错，浏览器是你最耐心的老师。

很赞哦!（88364）