html5学习应先掌握语义化标签及嵌套规则，而非语法；标准骨架需含、lang属性、charset声明；优先熟练header/nav/main/article/footer等结构标签的正确使用与限制；结构决定css/js效果及可访问性。
VS Code 写 HTML5，不需要先学“语法”，HTML 本身不是编程语言，没有变量、循环、作用域这些概念；真正要优先掌握的是结构语义化标签的用法和嵌套规则，否则后面加 CSS 和 JS 会反复踩坑。
从
很多新手直接写 <div> 堆内容，结果浏览器不识别、SEO 友好度归零、屏幕阅读器读不出结构。VS Code 里新建 <code>index.html 后，第一件事是补全标准骨架：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <!-- 这里放内容 --> </body> </html>
必须顶格写，少一个空格或换行都可能触发怪异模式（Quirks Mode）-
lang="zh-CN"不是可选装饰，它影响语音朗读、翻译插件、搜索引擎分词 -
<meta charset="UTF-8">要放在<title></title>前面，否则中文标题可能乱码
优先练熟 <header></header>、<nav></nav>、<main></main>、<article></article>、<footer></footer>
这些标签不是“高级技巧”，而是现代 HTML5 的基础结构单元。VS Code 里用 Emmet 输入 header + Tab 就能快速生成，但关键在什么时候该用、能不能嵌套、是否需要 aria-label：
-
<nav></nav>只用于主导航链接集合，侧边栏菜单、页脚链接不算 -
<main></main>页面中只能出现一次，且不能嵌套在<article></article>或<aside></aside>里 -
<article></article>表示独立可分发的内容（如一篇博客、一条新闻），不是所有<div> 都该替换成它<li>如果 <code><nav></nav>没有可见文字标题，建议加aria-label="主导航"，不然读屏软件会念成“导航”两个字 - 写了
<section></section>却没配<h2></h2>—— 结构层级断裂，辅助技术无法建立大纲 - 把
<button></button>放进<a></a>里 —— 浏览器会自动剥离，控制台报错Failed to execute 'appendChild' on 'Node' - 用
<div id="header"> 代替 <code><header></header>—— 看起来一样，但语义丢失，后续用document.querySelector('header')就查不到结构标签不是“写完就完”，它决定了后续 CSS 选择器怎么写、JS 获取元素是否稳定、移动端缩放是否异常。很多人卡在“样式调不出来”，其实根源是
<main></main>被包在了<div class="wrapper"> 里，而 CSS 本意是作用于语义容器。</div>
别急着加 CSS 类名，先用浏览器开发者工具看结构渲染效果
VS Code 写完 HTML 后，右键 → “Open with Live Server”（需装扩展），打开页面再按 F12，切换到 Elements 面板，点开标签看实际 DOM 树。常见问题往往当场暴露：
立即学习“前端免费学习笔记（深入）”；
