HTML是标记语言，核心是描述内容结构而非控制逻辑；新手应专注语义化标签、文件编码与后缀规范、校验结构合理性，并用最简CSS实现基础样式。
HTML不是编程语言，别从“写程序”角度学
HTML 是标记语言，核心任务是描述内容结构，不是控制逻辑或计算。新手常卡在“怎么让按钮变色”“怎么让页面自动跳转”——这些属于 CSS 和 JavaScript 的事，硬套 HTML 会越学越懵。
实操建议：
- 先扔掉“我要做网站”的念头，专注用 <h1>、<p>、<ul>、<a> 把一篇短文的层级和链接关系理清楚
- 不要一上来就查 <div> 和 <span> 的区别，先用语义化标签：比如联系人信息用 <address>，文章用 <article>
- 浏览器直接双击打开 .html 文件就能看效果，不需要服务器、不需要安装环境、不需要“运行”
写完 HTML 打不开？八成是文件后缀或编码问题
常见错误现象：This page isn’t working、空白页、中文乱码（显示为 ）、右键“查看源代码”看到一堆问号。
原因很具体：
- 文件保存成了 index.txt 而不是 index.html（Windows 默认隐藏后缀，务必手动输入完整后缀）
- 编辑器用了 UTF-8 with BOM 编码，某些浏览器解析失败；必须选纯 UTF-8（Sublime/VS Code 都在右下角可切换）
- 写了 <img src="图片.jpg"> 但图片文件名含中文或空格，路径失效；改用英文名 + 下划线，如 product_photo.jpg
浏览器报错 “Element ‘xxx’ is not allowed here” 怎么办
这是 HTML 校验层面的问题，不是语法错误，但会影响结构合理性，尤其对后续加 CSS 或 JS 有隐性干扰。
典型场景：
- 在 <p> 里嵌 <div>（<p> 只允许行内元素）
- 把 <h2> 直接放在 <ul> 外面又没包 <section>，破坏标题层级流
- 忘了闭合 <li>，导致后面所有列表项错位
快速自查法：
- 打开 https://www.php.cn/link/6c4ce2d66be954338a51e72eb79aae10 粘贴代码，它会明确指出哪一行哪个标签违规
- 记住一个铁律：块级元素（如 <div>、<section>、<h1>）不能塞进行内元素（如 <p>、<span>、<a>）内部
想让页面好看一点，但别碰 CSS 写法细节
新手最容易在这一步崩溃：查“HTML 怎么改字体”，结果掉进 CSS 选择器、盒模型、flex 布局的深坑。其实初期只要掌握三件事就够了。
立即学习“前端免费学习笔记（深入）”；
够用方案：
- 用 <style> 标签写最简 CSS：比如在 <head> 里加 <style> body { font-family: "Helvetica Neue", sans-serif; } </style>
- 改颜色只动两个属性：color（文字）和 background-color（背景），别碰 border 或 margin，除非你真看到错位了
- 图片加宽高限制：<img src="a.jpg" width="300" height="200"> 比写 CSS 更直观，也更兼容老浏览器
注意：现在主流编辑器（VS Code）装个 Live Server 插件，右键“Open with Live Server”，就能实时刷新预览，比双击打开稳定得多 —— 这个动作本身不涉及 HTML 知识，但能极大减少“改了没反应”的挫败感。
真正难的不是标签怎么写，而是判断哪些内容该归到 <header>，哪些该放进 <nav>；同一个页面里 <h1> 只该出现一次，但很多人复制粘贴时顺手多写了三个。这些不是技术问题，是结构意识，得靠多看真实网页的源码来培养。
