HTML不是编程语言而是标记规则，三步即可入门：新建index.html写基础结构、实时刷新验证效果、通过删改标签理解语义；优先用语义化标签，属性值统一加双引号，表单控件必设name属性。
HTML 不是编程语言，不需要“学起”——它是一套标记规则，打开编辑器就能写，关键在于知道写什么、为什么这么写、浏览器怎么理解它。
从 <html> 到能跑通一个页面：三步动手流程
别看教程，直接新建一个 index.html 文件，用任意文本编辑器（VS Code、Notepad++、甚至记事本）写进去：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>你好，世界</h1> <p>这是段落。</p> </body> </html>
保存后双击用浏览器打开。看到内容了？你已经会 HTML 了。接下来只做三件事：
- 每次改完一点，刷新浏览器看效果 —— 这是唯一可靠的验证方式
- 删掉某一行（比如
<meta charset="UTF-8">），再刷新，观察中文是否乱码 - 把
<h1>改成<h2>或<div>，对比显示差异
<div> 和 <span> 的区别不是“块级/行内”，而是语义意图
很多人死记“<div> 是块级、<span> 是行内”，结果写出满屏 <div> 套 <div>。其实浏览器根本不关心这个，真正重要的是：
立即学习“前端免费学习笔记（深入）”；
-
<div>表示“这里有一块内容区域，暂时没想好语义” -
<span>表示“这里有一小段文字，暂时没想好语义” - 优先用
<header>、<nav>、<article>、<section>等语义化标签，它们自带默认样式且利于 SEO 和可访问性 - 只有当语义确实模糊时，才退回到
<div>或<span>
属性值加不加引号？class="menu" vs class=menu
HTML5 允许省略引号，但必须满足：属性值不含空格、等号、小于号、大于号、反引号、双引号、单引号。实际中几乎总会踩坑：
-
class=main menu→ 解析为两个属性：class="main"和未定义的menu（报错） -
href=/page?id=1&sort=asc→&会被当作实体解析，导致 URL 错误 -
data-id=123看似安全，但团队协作或未来加空格时极易出问题
结论：一律用双引号包裹属性值，包括 id、class、src、href —— 这不是教条，是避免调试时花 20 分钟找一个漏掉的空格。
表单元素必须配 name，否则提交时根本不会发出去
写一个 <input type="text">，看着能输，但提交后后端收不到。原因大概率是没写 name 属性：
<form action="/login"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form>
注意点：
-
id是给 CSS 或 JS 用的，和提交数据无关 -
name才是字段名，后端靠它接收值（如req.body.username） - 复选框组用相同
name，如name="hobby"，多个<input type="checkbox">才能被当做一个字段数组提交 - 没有
name的表单控件，无论有没有值，都不会出现在提交数据中
HTML 最容易被忽略的复杂点，其实是“浏览器如何把标签变成可交互的 DOM 节点”——但这不是入门阶段要深究的。先确保每个标签都带明确目的，每次修改都立刻在浏览器里验证，比记住所有标签更重要。
