你是不是也这样？看着别人的网站流光溢彩，自己打开记事本，敲了一行 ，然后脑子就一片空白。别急，我也踩过这个坑。那时候我觉得写代码是魔法，后来发现，它就是搭积木。今天我不讲那些虚头巴脑的理论，只讲怎么在2024年，用最笨但最稳的方法，搞定一个能看的网页。

先说个真事。我有个学员，之前做销售，想做个个人作品集。他报了个几千块的课，老师讲了一堆DOM操作、事件监听。结果他连个图片都放不进去。为啥？基础没打牢。他连HTML的结构都搞混了。所以，第一步，别急着学JavaScript，先把HTML骨架搭好。

第一步：搭建基本骨架。

别嫌简单，这是地基。打开你的编辑器，VS Code最好，或者甚至记事本也行。新建一个文件，命名为 index.html。注意，后缀必须是 .html。

在里面输入 ! 然后按 Tab 键。对，就这么简单。VS Code 会自动帮你生成一套标准的 HTML5 模板。你会看到 ，，， 这些标签。别管它们具体啥意思，先记住位置。 里放的是给浏览器看的，比如标题、编码； 里放的是给用户看的，比如文字、图片。

这时候，你的网页是空的。但结构已经在了。这一步很多人跳过，直接写内容，结果后面加样式的时候全乱套。

第二步：填充内容，别怕丑。

现在，在 标签里，开始写东西。

加个标题：

这是我的第一个网页

。

加段文字：

大家好，这是我学习 html写一个完整网页 的第一步记录。

。

加个图片：。

这里有个坑。图片路径一定要对。如果你的图片 photo.jpg 和 html 文件在同一个文件夹，直接写名字就行。如果不在，得写相对路径，比如 images/photo.jpg。我见过太多人，图片死活显示不出来，最后发现是路径写错了，或者文件名大小写不对。Linux服务器对大小写很敏感，别偷懒。

还有，alt 属性别省。这不仅对SEO好，万一图片加载失败，用户也能知道这是个啥。这也是 html写一个完整网页 的基本规范。

第三步：加点样式，别让它太寒酸。

纯 HTML 很丑，这是事实。所以我们需要 CSS。在 里，加一个