<h1>到<h6>、<p>、、<img>四类标签占编码量70%以上；语义化标签如<header>、<nav>、<main>、<article>、<footer>应优先使用；<!DOCTYPE html>和<meta charset="UTF-8">不可省略，否则引发怪异模式或乱码。
哪些HTML标签真正在项目里高频出现
真正写页面时，<h1>到<h6>、<p>、<a>、<img>这四类占日常编码量的70%以上。其他如<ul>、<ol>、<table>只在特定模块用，<marquee>或<font>这类已废弃标签别碰——现代浏览器虽可能渲染，但会触发控制台警告，且无障碍支持为零。
-
<h1>必须全页唯一，搜索引擎和读屏器都依赖它定位主标题；滥用多个<h1>等于主动放弃SEO和可访问性 -
<img>的alt属性不是可选项，是法律合规要求（如WCAG 2.1），空字符串alt=""仅适用于纯装饰图 -
<a>默认在当前页跳转，加target="_blank"必须配rel="noopener"，否则存在安全漏洞（window.opener劫持）
容易被忽略但关键的结构标签
新手常把所有内容塞进<div>，结果页面在屏幕阅读器里变成“div、div、div……”。实际应优先用语义化容器：<header>、<nav>、<main>、<article>、<footer>。这些标签不改变样式，但直接提升结构清晰度和辅助技术兼容性。
-
<main>全页只能出现一次，代表主体内容区域；重复使用会被浏览器忽略语义 -
<nav>专指导航链接集合，面包屑、页脚链接不算，强行套用反而混淆逻辑 -
<article>适合独立分发的内容（如博客正文、新闻条目），不是所有卡片都该用它
字符编码和文档声明为什么不能省
<!DOCTYPE html>和<meta charset="UTF-8">不是摆设。漏掉<!DOCTYPE html>会触发怪异模式（quirks mode），导致CSS盒模型计算错误、display: flex失效等隐蔽问题；缺<meta charset="UTF-8">则中文直接变æ–‡乱码，且无法通过CSS修复。
- 这两个标签必须放在
<head>最开头，顺序不能颠倒 - 移动端适配需额外加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则手机上页面会缩成一团 - 语言声明
<html lang="zh-CN">影响拼写检查、语音合成，中文站别写成lang="en"
注释和空格的实际影响
HTML里的换行和空格在渲染时大多被合并为单个空格，但<pre>、<textarea>、<code>内保留原格式。注释<!-- -->虽然不显示，但体积会进HTTP响应体——线上页面注释过多会拖慢首屏加载。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段用注释分隔模块没问题，上线前建议用构建工具自动移除
- 避免在
<head>里写大段注释，某些CDN会因注释过长触发缓存截断 -
<br>只是换行符，不是段落分隔；需要间距请用CSS的margin，而非堆砌<br>
真正难的不是记住多少标签，而是判断哪个标签在当前语境下语义最准确。比如“按钮”该用<button>还是<a>？前者触发表单提交或JS行为，后者跳转URL——选错会导致键盘用户无法用Enter键激活，或屏幕阅读器播报错误类型。
