零基础可新建文本文件改后缀为.html，用记事本或VS Code等纯文本编辑器编写，首行必须写<!DOCTYPE html>，再搭html/head/title/body骨架；用语义标签如<article><h2><time datetime="YYYY-MM-DD"><p>排版博客；通过body等内联style快速优化可读性；本地预览需确保UTF-8编码、英文路径、资源同目录。
零基础怎么打开一个能写的网页文件
直接新建一个文本文件，把后缀改成 .html 就行——别用 Word 或 WPS 保存，它们默认加格式、藏隐藏字符，浏览器一打开就乱码。推荐用系统自带的记事本（Windows）或 TextEdit（macOS 切换到纯文本模式），更稳妥的是装个轻量编辑器，比如 VS Code 或 Notepad++，它们对 HTML 有语法高亮和自动补全，写错标签一眼就能看出来。
新建文件后第一行必须是：<!DOCTYPE html>，这是告诉浏览器“这是现代 HTML”，少了它，有些样式或 JS 行为会出问题；紧接着写 <html><head><title>我的博客</title></head><body></body></html>，这个骨架搭起来，双击就能在浏览器里看到空白页——不是“成功了”，而是“没报错，可以往下写了”。
标题、文章、日期怎么用最简 HTML 排版
个人博客不需要复杂布局，<header> 放博客名，<main> 套每篇文章，用 <article> 包裹，里面按顺序放 <h2>（文章标题）、<time>（日期，加上 datetime 属性方便机器读取）、<p>（正文段落）。别碰 <div> 堆砌，也先别学 CSS Grid 或 Flexbox——用原生语义标签本身就有默认间距和层级，够用。
示例片段：
立即学习“前端免费学习笔记（深入）”；
<article> <h2>今天学了 HTML</h2> <time datetime="2024-06-15">2024年6月15日</time> <p>原来 <code><strong></code> 是加粗，<code><em></code> 是斜体，不用记样式类名。</p> </article>
注意：<time> 的 datetime 值必须是 ISO 格式（如 2024-06-15），否则无效；<p> 里嵌 <code> 显示代码片段时，记得把 < 和 > 写成 和 <code>>，不然浏览器以为是标签。
怎么让页面看起来不那么“默认”但又不写 CSS
零基础硬上 CSS 容易卡在选择器优先级或盒模型上，先用浏览器默认样式+少量内联 style 控制关键节奏。比如给 <body> 加 style="max-width: 700px; margin: 0 auto; padding: 20px; line-height: 1.6;"，这三行就把文字居中、留白舒服、行距可读——比默认挤成一坨强太多。
其他实用内联技巧：
-
<h2 style="border-bottom: 1px solid #eee; padding-bottom: 8px;">给标题加底线，视觉分隔立刻清晰 -
<p style="margin-top: 0;">去掉首段顶部空白，避免标题和正文之间空太大 -
<time style="color: #666; font-size: 0.9em;">让日期低调不抢眼
这些写法不优雅，但见效快、无依赖、改完保存刷新就看到效果——等你真想换字体或配色时，再把 style 拆出去建 style.css 文件也不迟。
本地预览老打不开？三个必查点
双击 .html 文件打不开，或者打开是乱码，大概率卡在这三处：
- 文件编码不是 UTF-8：记事本另存为时勾选“UTF-8”，VS Code 右下角看编码显示，点开切换；否则中文变方块或问号
- 路径含中文或空格：把文件放在
C:/blog/index.html这种纯英文路径下测试，浏览器地址栏看到file:///C:/blog/index.html才算稳 - 用了相对路径引入资源（比如图片）但没放对位置：暂时删掉所有
<img src="...">，确认文字能正常显示后再逐个加图，图文件和 HTML 放同一文件夹最省事
真正麻烦的不是写不出，而是浏览器报错信息藏得深——右键→“检查”→切到 Console 或 Elements 标签页，看红字提示，通常一句话就定位问题。比如 Failed to load resource: net::ERR_FILE_NOT_FOUND 就是路径错了，Uncaught SyntaxError: Unexpected token '<' 多半是把 HTML 当 JS 引入了。
