html不是编程语言，而是标记语言，核心是描述内容结构而非控制逻辑；需先接受此前提，再通过纯html文件实践、chrome devtools实时调试及语义化标签使用来扎实入门。
HTML 不是编程语言，别从“写程序”角度学
大一新生最容易卡在“HTML 是不是编程”的认知上——它不是，它是标记语言，核心任务是描述内容结构，不是控制逻辑。想用 if 或 for 写网页？不行；想让按钮点一下就变颜色？单靠 HTML 也做不到。先接受这个前提，才能避开“学了三天 JS 还在纠结 <h1></h1> 为啥不自动居中”的混乱。
实操建议：
- 用纯文本编辑器（如 VS Code）新建一个 index.html，只写最简结构：
<!DOCTYPE html><br><html><br> <head><title>我的第一个页面</title></head><br> <body><br> <h1>你好，世界</h1><br> <p>这是段落</p><br> </body><br></html>
- 双击打开，看浏览器怎么渲染；改几个标签名（比如把
<p></p> 换成 <div>），刷新对比效果<br>
- 别急着装框架、建服务器，本地双击 <code>.html 文件就能跑，这是 HTML 最大的友好点别碰 CSS 和 JS 的“高级写法”，先搞懂 class 和 id 怎么用
很多教程一上来就教 flexbox 布局或 addEventListener，但大一学生真正卡住的，其实是“为什么我加了 class="header"，CSS 里写 .header { color: red; } 却没反应”。根源往往在路径、加载顺序或拼写错误。
常见错误现象：
- 浏览器开发者工具（F12）里看到 CSS 文件标红（404），说明 href 路径错了
- class 名里用了中文、空格或特殊符号（如 class="我的标题"）→ 浏览器直接忽略
- 把 id 当成可重复使用的样式钩子（id 必须唯一，重复会导致 JS 获取元素出错）
- 在 里写了 <style></style>，但写在了 <title></title> 后面 → 部分老浏览器可能解析异常
用 Chrome DevTools 实时改代码，比抄笔记管用十倍
新手常以为“学会 HTML 就是背熟所有标签”，其实真正在项目里，90% 的时间是在查文档 + 实时试错。Chrome 的 Elements 面板就是你的实时沙盒。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 右键网页任意文字 → “检查”，在 Elements 面板里双击标签名、属性或文本，直接修改并即时看到效果
- 在 Styles 面板里勾选/取消 CSS 属性，快速验证哪些样式生效、哪些被覆盖
- 输入 document.querySelector('h1') 到 Console，确认选择器是否能拿到元素 —— 这比死记 getElementById 和 getElementsByClassName 的区别更直观
- 注意：这些修改只在当前页面临时生效，刷新即消失，所以看到效果后，一定立刻回到编辑器里补上对应代码
别跳过语义化，否则简历项目一上线就被吐槽
很多作业交上去能跑就行，但企业级网页对结构有硬要求：<div> 堆砌不是错，但搜索引擎、读屏软件、甚至未来你自己维护时都会吃亏。语义化不是“加分项”，是基础可用性门槛。<p>参数差异和影响：<br>
- <code><nav></nav> vs <div class="nav">：前者自带导航区域语义，辅助技术能识别；后者只是个盒子<br>
- <code><article></article> 和 <section></section> 不是换汤不换药：前者表示独立可分发的内容（如一篇博客），后者是逻辑分组（如“评论区”）
- 错误用法：<h2></h2> 套 <h1></h1>（标题层级断裂）、<button></button> 里塞 <a></a>（语义冲突、键盘焦点异常）
- 兼容性提醒：IE8 及以下不识别语义标签，但加一句 document.createElement('article') 就能兼容 —— 现在基本不用管，除非老师指定
事情说清了就结束。语义化不是玄学，它就在你每次写 <header></header> 而不是 <div id="topbar"> 的那一次选择里。</div>
