html博客起步需构建语义化结构：header含标题与导航，main用article包裹文章（h2标题、time日期），footer放联系信息；确保utf-8编码、正确路径及css置于head内；内容增多后应转向jekyll等静态生成器。
HTML 文件怎么起手写，不是从 开始就完事了
光写个 加空的 <code> 页面能打开，但根本没法当博客用——没标题、没导航、内容堆一起、手机上字小得眯眼。新手常卡在这步，以为“能显示”=“能用”，其实缺的是结构骨架。
真正起步要先想清楚三块内容：header（放博客名和导航）、main（放文章列表或单篇正文）、footer（放版权或联系方式）。不用框架，纯 HTML 就用语义化标签搭：
-
<header></header>里放<h1></h1>博客标题 +<nav></nav>链接（比如“首页”“关于”“归档”） -
<main></main>里每篇文章用<article></article>包裹，标题用<h2></h2>，日期用<time datetime="2024-05-20"></time> -
<footer></footer>别只写“© 2024”，加个<a href="mailto:you@example.com"></a>方便读者联系
本地预览老是空白页？检查这三处硬伤
写完 index.html 双击打开却一片白，90% 是路径或编码问题，不是代码写错了。
- 文件保存时编码必须选
UTF-8（Notepad++ 或 VS Code 下拉菜单确认），否则中文标题变乱码，浏览器直接拒渲染 - 图片路径写成
<img src="images/photo.jpg">，就得确保同目录下真有images/文件夹，且里面真有photo.jpg——Windows 资源管理器默认隐藏扩展名，可能你存的是photo.jpg.jpg - 别用网盘链接或微信下载的“网页文件”直接改，它们常带多余 BOM 头或格式污染，新建一个纯文本文件重写最稳
CSS 不生效？别急着查语法，先看是不是加载顺序搞反了
写了 style.css，也用了 <link rel="stylesheet" href="style.css">，但颜色字体全没变——大概率是 CSS 放在了 里，或者 <link> 标签漏了 rel="stylesheet"。
-
<link>必须放在内，且顺序在<title></title>之后、<script></script>之前 - 如果用内联样式测试（
<p style="color:red"></p>）有效，说明 HTML 结构没问题，问题一定出在外部 CSS 加载环节 - 浏览器按 F12 打开开发者工具，切到
Network标签，刷新页面，看style.css状态是不是404或blocked（跨域或路径错）
文章越来越多后，为什么不能只靠改 HTML 文件来更新？
写到第 10 篇文章时，你得手动在 index.html 里加新 <article></article>，再进每篇详情页改上一篇的“上一篇”链接……这不是维护，是自我惩罚。
静态博客的本质矛盾就在这：HTML 是最终产物，不是编辑界面。你现在能靠手改撑 5 篇，但到 20 篇时，一个错位的 就让整页布局崩掉，而且无法搜索、没有归档页、分享按钮全是手动填 URL。
这时候该考虑的不是“怎么写更多 HTML”，而是“要不要用 Jekyll 或 Hugo 这类静态站点生成器”——它们让你用 Markdown 写文章，自动套模板、生目录、算分页。不学也没关系，但得知道这个坎迟早要迈，别把时间耗在重复粘贴上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
