很多刚入行或者想自己折腾个博客的朋友，一听到“记事本”做网站，脑子里全是乱码和报错。其实吧，用记事本写HTML代码，那是建站最纯粹的方式。没那些花里胡哨的可视化编辑器干扰，你能真正懂网页是怎么长出来的。但问题来了，代码里怎么把图片塞进去？很多新手卡在这一步，图片不显示，或者位置乱飞，急得抓耳挠腮。
咱不整那些虚头巴脑的理论，直接上干货。你打开记事本，输入，接着写，
，，这一套流程要是熟，说明你入门了。现在，重点来了，图片标签是标签里有两个核心属性必须写：src和alt。src是图片的来源路径，alt是图片加载失败时显示的替代文字。很多小白只写src，忘了写alt，虽然能显示图片，但SEO（搜索引擎优化）会吃亏，而且用户体验不好。比如你想放一张logo，代码大概长这样：
。
这里有个大坑，就是路径问题。记事本做的网站，图片文件和HTML文件必须在同一个文件夹里，或者你知道相对路径怎么写。如果你把图片放在了叫images的文件夹里，那src就得写成src="images/logo.png"。别偷懒，路径错了，浏览器就找不到图，只会显示一个破碎的图标。
有人问，记事本做网站怎么插图才能自适应屏幕？这就得加样式了。你可以直接在img标签里加style属性，比如style="max-width: 100%; height: auto;"。这样不管图片原图多大，在手机上也不会撑破屏幕。这是最简单的响应式写法，不用去折腾复杂的CSS文件，对新手友好。
再说说图片格式。别用PSD或者AI，浏览器不认识。最常用的就是JPG和PNG。JPG适合照片，文件小，清晰度高；PNG适合有透明背景的图标或者线条图。GIF虽然能动，但文件大，加载慢，除非你是做表情包，否则尽量少用。还有种新格式叫WebP，压缩率更高，但有些老旧浏览器不支持，新手建议先用JPG和PNG，稳妥。
我有个学员，之前用Word排版，然后直接复制HTML代码，结果图片全乱了。因为他没理解相对路径和绝对路径的区别。绝对路径是完整的网址，比如http://www.example.com/images/pic.jpg。相对路径是相对于当前HTML文件的位置。做本地测试或者小网站，用相对路径最方便，换服务器也不用改代码。
另外，图片加载速度是个大问题。记事本写的代码，没有CDN加速，全靠服务器。所以，图片一定要压缩！用TinyPNG这种在线工具，把几MB的图片压缩到几百KB，加载速度提升不止一倍。别舍不得那点画质，用户等不起。
还有个小技巧，给图片加个title属性，鼠标悬停时显示文字，比如
。虽然简单，但能增加一点交互感。
最后，检查代码。记事本不会自动纠错，你得自己看。标签有没有闭合？引号是不是英文的？路径对不对？这些细节决定了网站能不能正常打开。
记事本做网站怎么插图？其实就是掌握img标签，搞懂路径，注意格式和压缩。别怕麻烦，手动敲代码的过程，就是学习的过程。等你熟练了，再考虑用VS Code或者其他编辑器，那时候你会发现，记事本教的规矩，才是根本。
本文关键词：记事本做网站怎么插图