网络宝典
第二套高阶模板 · 更大气的阅读体验

HTML页面制作入门:从新建一个空白页开始

发布时间:2026-01-24 09:01:21 阅读:102 次

你有没有试过打开记事本,敲几行字,然后双击就直接在浏览器里看到效果?其实这就是做网页的第一步——写 HTML。它不难,也不需要装什么复杂软件,一台电脑、一个文本编辑器、一个浏览器就够了。

先搞清楚:HTML 是啥?

HTML 不是编程语言,更像是一种“说明书”,告诉浏览器:这儿是一段标题,那儿是一张图片,下面该换行了…… 它靠的是一个个带尖括号的标签,比如 <h1>、<p>、<img>,就像给内容贴上小纸条,浏览器照着读就行。

动手写第一个页面

打开电脑自带的“记事本”(Windows)或“文本编辑”(Mac,记得设为纯文本模式),把下面这段代码原样复制进去:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的小站</h1>
  <p>这是用记事本写的第一个 HTML 页面。</p>
  <p>不用上传,不用服务器,保存后双击就能看!</p>
</body>
</html>

点【文件 → 另存为】,文件名输入 index.html(注意后缀必须是 .html),保存类型选“所有文件”,编码选 UTF-8。然后找到这个文件,双击——浏览器自动打开,你的网页就出来了。

几个常用标签,够你搭个简易主页

别急着背全,先记住这几个最常用的:

  • <h1>~<h6>:标题,数字越小字越大,<h1>一般一页只用一次
  • <p>:段落,写文字就包在里面
  • <img src="图片地址" alt="描述文字">:插入图片,src 填图片路径(比如同文件夹下放了 photo.jpg,就写 "photo.jpg")
  • <a href="https://xxx.com">点我跳转</a>:超链接,“href”后面填网址

试试改一改刚才的代码:把 <p>里的字换成你想说的,或者加一行 <img src="cat.jpg" alt="一只猫">,再把一张叫 cat.jpg 的照片和 index.html 放在同一个文件夹里,刷新页面看看效果。

小提醒:别踩这些坑

• 文件名别用中文或空格,比如“我的网页.html”容易出错,用 “my-page.html” 更稳;
• 所有标签尽量成对出现,<p>要配 </p>,漏了可能显示错乱;
• 保存时一定选“UTF-8 编码”,不然中文会变成乱码;
• 浏览器改了代码后,按 Ctrl+F5 强制刷新,确保看到最新版。

做完这个,你就已经能做出带标题、文字、图片、链接的静态页面了。下一步想让按钮变色、让菜单收起来?那是 CSS 和 JavaScript 的事儿——但那都是后话。现在,关掉这篇文章,打开记事本,敲下 <!DOCTYPE html>,你的网页生涯,就从这一行开始了。