HTML个人网站设计需要哪些基础？(快速掌握3个关键知识)

前几天心血来潮想搞个自己的小破站，结果打开编辑器就傻眼了——这堆标签堆在一起像盘炒煳的面条！但人菜瘾大，撸起袖子就开干，折腾两天总算摸到点门道，今天就把踩坑记录掏出来晒晒。

第一步：从乱炖标签开始

我以为网页就是个文档，直接在记事本里哗哗敲字。上来就怼了个大标题，后面跟着几段碎碎念。保存成html双击打开……好家伙！字全挤成一坨，连段空行都没有！这才明白得用标签给文字“穿衣服”。马上翻资料，给标题裹上<h1>，段落套上<p>，顺手在段落间塞了个<br>换行。虽然丑得像九十年代网站，至少能看出分段了！

第二步：被布局逼到掀桌

看别人网站排版整整齐齐，我也把个人介绍和照片往页面上怼。结果左边照片右边文字？想得美！照片直接把文字挤到底下去了，活像掉进下水道。急得抓耳挠腮时扒拉到CSS盒子模型，才知道每个元素都是个“水泥墩子”——得靠margin拉开距离、padding填充内衬。更绝的是用float: left让照片漂在左边，文字才肯乖乖绕到右边。为了居中标题还试了各种歪招：

• 在标题前狂敲空格（失败！空格被浏览器吞了）
• 写十个假装居中（被自己蠢哭）
• 发现text-align: center一行搞定（拍大腿骂街）

第三步：导航栏差点送走我

想在顶上放一排导航按钮“首页关于废话”，结果每个链接都像得了帕金森似的乱抖。用<ul>列成清单，又用display: inline-block硬生生把竖排掰成横排。刚美滋滋刷新页面，鼠标往按钮上一挪——颜色突变像抽筋，吓得手一抖就点歪。连夜研究:hover伪类，把背景色切换写成慢悠悠渐变，这才看着顺眼点。

两天折腾下来满脑子浆糊，但回头看就靠三根柱子撑住：用对HTML标签分清楚骨架（别拿<br>当段落使）、拿CSS盒子当搬砖工调间距（多试试margin和padding）、靠伪类让按钮别犯癫痫（hover特效别太闪）。你要是跟我一样零基础，照这三点怼出个能看的页面绝对够使！