新手应直接用HTML5语义标签（如、、、）搭建单页骨架，避免过早学框架；内容须包裹在块级标签中，图片加alt，链接带href，CSS用有意义class名，路径写对，表单先用mailto协议。
直接用 HTML5 语义结构搭骨架，别碰框架
新手一上来就学 React 或套模板，反而卡在构建流程和配置上。单页网站真正要练的是“内容怎么组织、样式怎么挂钩、链接怎么生效”——这些全靠原生 <header></header>、<nav></nav>、<main></main>、<footer></footer> 就能说清。
别写 <div id="header">，浏览器不认识它；用 <code><header></header> 不仅语义清晰，还能被屏幕阅读器识别，SEO 也更友好。
- 所有文字内容必须包裹在块级标签里（
<p></p>、<h1></h1>～<h6></h6>、<section></section>），不能裸写文本 -
<a></a>标签必须带href，哪怕只是跳转到本页锚点，比如href="#about" - 图片必须加
alt属性，哪怕写alt="我的照片"，空字符串alt=""也比不写强
内联 CSS 足够起步，但 class 名要有意义
新手常把所有样式写进 <style></style> 标签里，这没问题；但容易堆出一堆 .box1、.div2 这种命名，后期改起来自己都懵。
比如导航栏固定在顶部，与其写 .fix-top，不如用 .main-nav；介绍区背景色统一，就叫 .section-about —— 名字反映用途，不是位置或样式。
立即学习“前端免费学习笔记（深入）”；
- 优先用类名（
class）而非 ID（id）控制样式，ID 只留给 JS 操作或锚点跳转 - 颜色值别用
red或#ff0000，选可读性强的，比如#333（深灰）、#f8f9fa（浅灰背景） - 字体大小用
rem（如1.2rem），而不是像素，这样缩放时更可控
本地预览不用服务器，但路径必须写对
双击打开 index.html 是最简单的预览方式，但图片、CSS 文件路径一旦写错，页面就只显示文字——这是新手最常卡住的地方。
假设你的文件结构是：
my-site/
├── index.html
├── style.css
└── assets/
└── photo.jpg
那么 index.html 里引用 CSS 必须写 <link rel="stylesheet" href="style.css">，引用图片必须写 <img src="assets/photo.jpg" alt="适合新手的HTML个人单页网站基础起步代码" >。不能写成 ./style.css 或 /assets/photo.jpg —— 前者多余，后者会指向系统根目录。
- 所有路径都是相对于当前 HTML 文件的位置，不是相对于项目根目录
- Windows 和 macOS 对大小写不敏感，但部署到 Linux 服务器（比如 GitHub Pages）就敏感了，
Photo.JPG和photo.jpg是两个文件 - 如果图片不显示，右键 → “检查元素”，看
<img alt="适合新手的HTML个人单页网站基础起步代码" >的src是否变成红色报错，就知道路径错了
表单提交先用 mailto，别急着接后端
联系页的 <form></form> 初期根本不需要 PHP 或 Node.js。用 mailto: 协议就能让访客点击“发送”后直接唤起本地邮件客户端，填好收件人和主题，连发邮件都省了。
示例写法：<form action="mailto:you@example.com?subject=%E6%9D%A5%E8%87%AA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%E7%9A%84%E7%95%99%E8%A8%80"></form>，配合 <input name="body"> 可把留言正文传过去。
-
action地址里不能有空格，中文要用 URL 编码（比如“你好” →%E4%BD%A0%E5%A5%BD），建议先用英文 subject 起步 -
<button type="submit"></button>必须明确写type="submit"，否则默认是type="button"，点了没反应 - 用户填完点发送，如果没弹出邮件软件，请检查浏览器是否屏蔽了
mailto:协议（Chrome 通常允许，Safari 有时需手动启用）
复杂交互、表单验证、数据存档这些，等你能稳稳写出一个不崩的单页再说。现在最该盯住的，是每个标签有没有闭合、每个引号有没有配对、每个路径是不是真能找到文件。
