html只定义内容结构，css才控制美观；需用外部css文件、flexbox布局、图片尺寸限制与压缩、系统字体栈及相对字号来实现专业效果。
零基础做不出“美观”的个人简介页——不是因为HTML难，而是HTML本身不负责美观。
HTML只是骨架，CSS才是颜值担当
很多人花半天写 <h1></h1>、<p></p>、<img>，结果页面灰扑扑、文字挤成一团、照片歪斜还拉伸变形。这不是你写错了，是没加CSS。HTML只定义“这是标题”“这是段落”“这是图片”，而字体大小、颜色、间距、居中、圆角、阴影……全靠CSS控制。
- 别试图用
<font></font>标签调颜色——它早已被废弃，现代浏览器可能直接忽略 - 不要把样式写在HTML里（比如
style="color:red"），初学可以临时用，但很快会失控 - 必须新建一个
style.css文件，用<link rel="stylesheet" href="style.css">引入
用 Flexbox 快速搞定“居中+排版”这个老大难
新手最卡在“怎么让照片和文字并排”“怎么让整页内容垂直居中”。别碰 <table> 或一堆 <code><div> + <code>float，直接上 Flexbox——现代浏览器全支持，三行CSS就能理清布局。
- 给父容器加
display: flex，子元素自动水平排列 - 加
flex-direction: column切成竖排 -
justify-content: center控制主轴居中（水平或垂直，看方向） -
align-items: center控制交叉轴居中（另一方向） - 想让头像和文字左右对齐？给包裹它们的
<div> 加 <code>display: flex; align-items: center; gap: 1rem图片变形、模糊、加载慢？三个硬性检查点
放张照片，结果糊成马赛克、宽高比崩坏、点开要等五秒——大概率栽在这三处：
- 没限制尺寸：
<img src="me.jpg">会按原图尺寸渲染，大图直接撑爆屏幕。务必加CSS：max-width: 100%; height: auto; - 没压缩：手机拍的原图动辄5MB，网页加载极慢。用 Squoosh（免费在线工具）或Photoshop“导出为Web格式”，目标尺寸下存成
.webp格式 - 没设
alt属性：<img src="me.jpg" alt="戴眼镜的短发女生站在咖啡馆门口">不仅利于无障碍访问，图片加载失败时也能看到描述
字体丑、行距密、看着累？从两行CSS开始救
默认宋体/Times New Roman 是阅读杀手。改字体不是搜个“好看字体”贴上去就完事，得考虑加载、备选、可读性。
- 优先用系统字体栈，快且稳：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - 单行太挤？加
line-height: 1.6（数值无单位，表示字号的1.6倍） - 段落间太空？删掉默认的
margin-bottom，统一用margin: 0 0 1.2rem 0 - 别用
font-size: 14px这种固定值，改用font-size: 1rem（相对根字号），方便后期整体缩放
真正卡住人的从来不是“怎么写HTML”，而是“怎么让浏览器按你想要的样子渲染”。CSS不是附加项，是页面呈现的必经路径。先接受这个前提，再动手，少走两个月弯路。
- 没限制尺寸：
