发布日期：2025-09-24 07:52浏览次数：
今天突然想捣鼓个个人主页，找来找去发现还是HTML最省事，说干就干。
先开了个记事本，没错就是Windows自带的老古董。新建文件直接命名，这名字听说浏览器认。
噼里啪敲了个最基础的框架：
<!DOCTYPE html>
<html>
<head>
<title>我的小破站</title>
</head>
<body>
</body>
</html>
就这几行玩意儿，保存完双击打开——嚯！浏览器里真跳出个空白页，标题栏还写着“我的小破站”，有模有样的！
在<body>里加了句<h1>欢迎来我这儿溜达！</h1>，刷新页面立马看见一行大字，倍儿有成就感。
接着又补了段自我介绍：
<p>我是个爱瞎折腾的普通人，平时拍点破照片，写点没人看的字儿。</p>
顺手加了条横线分割：<hr>
想搞个照片展示区，折腾半天才弄明白要用<img>标签。从电脑里扒拉了张图，路径还写错了两次，浏览器显示个裂开的小图标，气笑了。写成<img src="我的丑照.jpg" width="200">，总算能看了。
看标题颜色太素，在<head>里加了<style>捣鼓颜色：
h1 {
color: #ff6b6b; / 整了个粉色 /
text-align: center; / 字给整中间去 /
想搞个蓝底白字的页脚，结果写成：
<div style="background-color: blue; color: white; padding: 10px;">
版权所有 © 我本人
</div>
结果布局稀碎！标题和照片挤成一团，页脚突然窜到屏幕中间。没办法又往<style>里塞了堆margin和padding，跟糊墙似的这里调10像素那里加15像素，反复刷新了二十几次才算勉强能看。
加了个导航栏：
<div>
<a href="#home">主页</a>
<a href="#photos">破照片</a>
<a href="#about">我是谁</a>
</div>
结果点“破照片”死活不跳转，原来忘了写id="photos"在对应位置。熬了三个晚上发现的，血压都高了。
想试试手机上看，直接眼前一黑——字小得像蚂蚁，布局全垮了。赶紧手忙脚乱在<head>里加了条：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
稍微救回来点，但歪七扭八的只能凑合。
保存文件那刻长舒一口气。回头看了眼代码：标签嵌套得像俄罗斯套娃，style里补丁摞补丁，手机上看还是有点别扭。但亲手从零敲出个能打开的东西，这感觉还挺带劲！
微信便捷交流