今儿个闲着没事干，突然想折腾个个人小站玩玩，听说现在做网页都用HTML5，那我也试试呗。掏出我那台老掉牙的笔记本，立马就开整了。
第一步：找个趁手的家伙事儿
我寻思着总不能拿记事本硬敲代码？赶紧下个了免费的Visual Studio Code，这玩意儿自带颜色区分，敲错字一眼就能瞅见，对新手贼友新建个空白文件，啪嗒一下存成，得，根据地有了。
第二步：搭个最基础的架子
咱也不懂啥原理，直接照葫芦画瓢。先敲上<!DOCTYPE html>，听说这行是告诉浏览器“爷用HTML5写的”。接着把<html>、<head>、<body>几个大架子搭跟盖房子打地基似的。完事儿在<head>里塞个<title>我的破站</title>，不然浏览器标签页光秃秃的多难看。
第三步：往房子里砌砖头
盯着空白的<body>发呆三分钟，决定先搞个导航栏。手一抖敲了<header>标签，里面塞了三个<a>链接，分别叫“首页”、“瞎写”、“关于我”。结果预览一看，仨链接挤成一坨！这才想起得用<nav>包起来，再拿<ul>和<li>做成列表：
- <nav>
- <ul>
- <li><a href="#">首页</a></li>
- <li><a href="#">瞎写</a></li>
- </ul>
- </nav>
这下总算排排站整齐了！
第四步：给毛坯房刮大白
看着黑底白字的页面直皱眉头，赶紧新建个文件。把标题字号调大用font-size: 2rem;，导航栏背景色改成屎黄色...呸，是暖黄色！最头疼的是想把内容区放中间，折腾半天才搞懂：
- 先给整个内容区套个<div class="container">
- 在CSS里写.container { max-width: 800px; margin: 0 auto; }
按F5刷新那瞬间，看着居中的内容框差点老泪纵横。
第五步：开张营业前的扫除
拿着手机、平板、笔记本轮流点开页面，发现手机上看导航栏都挤变形了。骂骂咧咧地加上：
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
又手忙脚乱给图片加上max-width: 100%，用@media把手机上的字号调大两档。折腾到半夜终于能看了，赶紧扔服务器上——得，明儿早饭钱又得靠这个破站接广告了！
