可维护的HTML模板需满足三项基础声明：<!DOCTYPE html>必须大写且独占一行，<html lang="zh-CN">的lang值须严格匹配IANA标签，<meta charset="UTF-8">须置于<head>最前；语义化标签、类名规范、alt属性、嵌套结构等均影响可维护性与可访问性。
可维护的 HTML 模板不是靠“写得漂亮”，而是靠结构清晰、语义准确、约束明确——改一个导航，不该让页脚样式崩掉，也不该让 JS 查询失效。
模板开头必须包含哪些基础声明
缺任何一项都可能在 WebView、旧版 Safari 或 SEO 抓取时出问题。关键三项不能省：
-
<!DOCTYPE html>必须大写DOCTYPE，且独占一行；小写或空格错位会触发怪异模式（Quirks Mode），flex、grid行为全乱 -
<html lang="zh-CN">的lang值要严格匹配 IANA 语言标签，zh或cn都不合法，会破坏屏幕阅读器语音切换和 Google 翻译识别 -
<meta charset="UTF-8">必须放在<head>最前面，否则浏览器可能用 ISO-8859-1 解析，中文变乱码，且某些 Android WebView 会直接卡住首屏渲染
语义化标签不是“可选装饰”，而是 DOM 接口契约
用 <div class="header"> 和用 <header> 的差别，不只是代码长短——它决定了 JS 怎么查、屏幕阅读器怎么读、SEO 怎么抓。
-
<main>在整个页面中只能出现一次，重复会导致辅助技术跳过后续内容；若模板需复用，就用<section>+ 明确的<h2>作为主题标识 -
<nav>必须包裹导航链接，且内部优先用<ul><li><a>结构；纯<div>+onclick不仅无法键盘 Tab 导航，还会让 Lighthouse 可访问性评分直接扣分 -
<aside>不等于“右边栏”，它必须与当前<article>或<section>内容逻辑相关（如作者简介、同类推荐），否则应改用<section>
类名和属性写法直接影响后期重构成本
类名是 HTML 和 CSS/JS 之间的唯一稳定接口，一旦写错，三个月后你改一个颜色，就得全局搜替换。
立即学习“前端免费学习笔记（深入）”；
- 禁止用样式描述类名：
red-box、float-left、big-font—— 这些名字会在换设计系统时全部失效，且误导后续开发者 - 状态类必须带修饰符：
button--disabled而非disabled，避免和原生disabled属性冲突；nav-list__item--current比current更安全，不依赖父级结构 -
alt属性不能为空字符串alt=""仅适用于纯装饰图；功能性图标（如搜索按钮里的放大镜）必须写明用途，alt="搜索"，否则屏幕阅读器会跳过该交互点
嵌套深度和闭合方式决定调试效率
审查元素时一眼找不到 <main> 开始位置？八成是嵌套太深或标签没闭合。
- 块级元素禁止嵌套在行内元素里：
<span><div>...</div></span>是非法结构，Chrome DevTools 会自动修正并插入匿名文本节点，导致布局偏移难以定位 - 自闭合标签不用斜杠：
<img src="x.jpg" alt="x">正确，<img src="x.jpg" alt="x" />在 HTML5 中虽不报错，但某些构建工具（如 Hugo、Eleventy）模板引擎会误判为 XML 语法而报错 - 每层嵌套都要有存在理由：如果某个
<div>既没 class、也没 id、还没 JS 绑定，只是用来撑样式，就该删掉——扁平结构让 CSS 选择器更短，JSquerySelector更快
真正难的不是记住所有规则，而是在写第 5 个组件时，还坚持给 <img> 补 alt、给 <input> 配 <label for="xxx">、把 lang 值核对三遍——这些动作不会立刻见效，但某天你发现改一个 footer 不影响 header 的 margin，就知道值在哪了。
