可维护性与可访问性是语义化html的自然结果：正确使用语义标签、规范属性（如alt、lang、label）、扁平结构及完整文档声明，既保障屏幕阅读器导航与seo，也降低后期维护成本。
可维护性和可访问性在HTML里不是两个独立目标，而是同一套结构决策的自然结果：语义正确、结构清晰、属性完备的代码，既能让屏幕阅读器准确导航，也能让三个月后的你快速定位和修改。
用对语义化标签，别靠class“模拟”含义
浏览器和辅助技术不读你的 class="nav-bar"，它们只认 <nav></nav>。写 <div class="main-content"></div> 等于主动放弃SEO权重、键盘Tab跳转逻辑和屏幕阅读器的“跳至主要内容”功能。
-
<main></main>必须且只能出现一次；多个会破坏辅助技术的上下文感知 -
<section></section>不是“分块容器”，它需要有明确主题，建议紧随<h2></h2>或更高层级标题 @#@#@#@#@#@#@#@#@#@0
结构扁平 + 属性规范 = 维护成本直降
DOM层级过深会让CSS选择器脆弱（比如 div div div .btn）、JS查询变慢（querySelectorAll('div > div > div .action')）、审查元素时眼花。而松散的属性书写会放大协作成本。
- 属性顺序按惯例排列：
class、id、src/href、alt/title、布尔属性（如required、disabled）——省略赋值，不写disabled="disabled" - 所有属性值用双引号包裹，包括数字类值：
colspan="2"✅，colspan=2❌ - 每个标签单独成行，缩进统一用 2 或 4 个空格；闭合标签与开始标签垂直对齐，便于追踪嵌套关系
- 避免无意义的 wrapper：
<div><p>文字</p></div>中的外层div若无 class/id/JS 钩子，直接删掉
最常被忽略的其实是“结构验证”本身：没写 <meta charset="UTF-8">，某些 Android WebView 会用 ISO-8859-1 解析，中文全乱码；没写 <title></title>，SEO 抓取直接丢弃页面。这些不是边缘 case，而是上线前必须肉眼确认的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
