初学者学HTML是学用标签标记内容结构，而非编程；需用标准骨架写index.html文件，通过Live Server等本地服务器打开以避免file://协议限制；优先掌握8个核心语义化标签，正确使用id（唯一）和class（复用），注重路径、编码和语义结构。
初学者学 HTML，不是学“编程”，而是学怎么用标签给内容打结构标记——就像 Word 里点“标题1”“正文”“项目符号”，只是你要亲手敲 <h1>、<p>、<ul>，而不是点按钮。
怎么写出第一个能打开的 HTML 文件
别从空文件开始，直接用标准骨架，少踩 90% 的编码坑：
- 新建文本文件，保存为
index.html（后缀必须是.html，不能是.txt） - 内容只写这 12 行，一个字别多、别少、别换行错位：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一页</title> </head> <body> <h1>你好，HTML！</h1> <p>这是第一段文字。</p> </body> </html>
- 双击打开——如果看到文字，说明成功；如果空白或报错，大概率是文件没存成
.html，或编辑器偷偷加了 BOM 头（换用 VS Code 或记事本重存）
为什么浏览器打不开你写的 .html 文件
常见现象：双击后页面空白、控制台报 Cross origin requests are only supported for protocol schemes、CSS 不生效、图片显示为小方块。
- 根本原因：浏览器用
file://协议打开本地文件时，会禁用fetch()、@import、本地 JSON 加载等能力，连某些 CSS 特性也会受限 - 最简解法：在 VS Code 中装
Live Server插件，右键文件 →Open with Live Server，自动起http://127.0.0.1:5500/index.html - 命令行党可用：
npx http-server（需提前装 Node.js），进目录执行即可，比 Python 的http.server更稳 - 别折腾 Chrome 启动参数——Chrome 94+ 已彻底移除
--allow-file-access-from-files开关
哪些标签必须立刻会写，哪些可以先放一放
初学阶段盯死 8 个核心标签，覆盖 90% 静态页需求。其他像 <canvas>、<svg>、<template> 全部暂缓。
立即学习“前端免费学习笔记（深入）”；
- 必会：
<h1>–<h6>（注意层级逻辑，<h1>全页只能一个）、<p>、<ul>/<ol>+<li>、<a href="xxx">、<img src="x.jpg" alt="描述"> - 必须带
alt：哪怕写alt=""（表示装饰图），不写就等于放弃屏幕阅读器用户和 SEO 基础分 - 路径要对：如果
index.html和图片在同级目录，就写src="photo.jpg"；如果图片在images/文件夹，必须写src="images/photo.jpg"，大小写敏感（Linux/macOS 下尤其关键） - 别碰这些：过时的
<font>、<center>、<u>；也别急着写<div class="header">，先用<header>、<nav>、<main>、<footer>
class 和 id 到底怎么用才不翻车
新手最大误区：以为 id 是“给元素起名字”，class 是“给元素分类”。其实它们职责完全不同。
-
id唯一且不可复用：整页只能有一个id="header"。重复了，JS 的document.getElementById()只返回第一个，CSS 选择器仍生效但逻辑已错乱 -
class是行为/样式载体：支持空格分隔多个值，如class="btn btn--primary js-submit"，分别对应样式、状态、交互三类关注点 - 别为每个元素都加
id：除非你要做锚点跳转（<a href="#section2">）、用aria-labelledby关联表单、或 JS 明确要单例操作 - 验证方式：删掉所有 JS/CSS，只留 HTML，用浏览器 DevTools 的 Elements 面板检查结构是否清晰、语义是否合理
真正卡住初学者的，从来不是标签记不住，而是文档结构没闭环、路径写错、协议限制被忽略、或者把 class 当命名工具用。把这四点理清，剩下的就是反复改、刷新看、再改。
