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

手把手教你入门HTML网页制作

发布时间:2025-12-18 09:41:38 阅读:59 次

从零开始做网页

很多人觉得做网页是程序员的事,离自己很远。其实,只要会打字、会上网,就能学会最基础的HTML网页制作。比如你想做个简单的个人简历页面,或者给家里的小店做个介绍页,都不需要复杂工具,一个记事本加浏览器就够了。

什么是HTML

HTML全称是“超文本标记语言”,它不是编程语言,而是一种用来描述网页结构的标记方式。就像写作文有标题、段落、列表一样,HTML用标签来告诉浏览器哪里是标题、哪里是图片、哪里是链接。

常见的标签都长这样:<h1> 是一级标题,<p> 是段落,<img> 是插图,<a> 是超链接。这些标签用尖括号包起来,成对出现(除了少数自闭合标签),内容就夹在中间。

动手写第一个网页

打开电脑上的记事本,输入下面这段代码:

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的小站</h1>
  <p>这里是我分享生活的地方。</p>
  <p>可以放照片、写日记,还能加音乐链接。</p>
</body>
</html>

保存时取个名字,比如 myweb.html,注意后缀一定是 .html。然后双击这个文件,浏览器就会打开你的第一个网页了。

让页面更丰富一点

想加一张图?用 <img src="图片地址" alt="描述文字">。本地图片就写路径,网络图片直接贴URL:

<img src="photo.jpg" alt="我家的小猫">

想加个链接跳转到别处?试试这个:

<a href="https://www.example.com" target="_blank">点击访问示例网站</a>

点进去会在新窗口打开,不会关掉你原来的页面。

常见结构别搞混

<head> 里放的是网页的“说明书”,比如标题、编码、引用的样式表,这部分不直接显示在页面上。<body> 才是真正展示内容的地方,所有你看得到的文字、按钮、图片都在这里面写。

别忘了开头那句 <!DOCTYPE html>,它告诉浏览器:这是用现代HTML标准写的,别用老方式解析。

边改边看效果

改完代码保存,刷新浏览器就能看到变化。这种“写一行、看一眼”的方式特别适合新手。比如试着把标题改成红色,虽然HTML本身不负责样式,但可以临时用内联方式试试:

<h1 style="color:red;">变红的标题</h1>

虽然正式项目不推荐这么写,但学习阶段方便直观。

做网页就像搭积木,HTML是第一块砖。掌握了它,下一步学CSS美化、JavaScript加互动,路就顺了。现在就开始,几分钟就能做出属于你的第一个页面。