web标准包括哪些，前端三层标准的落地与检查清单

2010 年前后我做过一批企业站，同一个页面在 Chrome 上好好的，到 IE 里全乱。web标准这三层结构，就是从那时候开始守的。

下面按三层结构讲一遍，再说清当年为什么会乱、落地要检查哪几项、兼容问题按什么顺序排。每部分都给一个能自己核的动作。

web标准包括哪些，先把三层结构说清

web标准不是一份文件，是一组约定的集合。它管的是同一件事：让同一个页面在不同浏览器、不同设备上，能被一致地解析和呈现。

集合里最常被提到的是三部分：结构、表现、行为。三者各自负责一件事，互不越界。这是整套规范的地基。

三层分开写，是这套规范里唯一不能妥协的一条。

把样式表和脚本关掉还能读懂层级，结构这一层才算干净。

web标准的三个组成部分

第一部分是结构，负责内容本身是什么。标题是标题、段落是段落、列表是列表，标签用它的语义，不要为了样式随手换一个。

第二部分是表现，负责内容长什么样。颜色、字号、间距、布局，全部交给样式表统一处理，不要写进结构里。

第三部分是行为，负责页面上的交互动作。点击之后发生什么，滚动到哪里触发什么，这些交给脚本处理。

三层的分工看起来清楚，实际做的时候最容易出问题的是第一层。很多人为了让某段文字变粗，用标题标签去包；为了让某个块横排，用表格去搭。这类做法短期看着没问题，长期会让页面结构彻底混乱。

判断有没有越界有个简单办法：把样式表和脚本全部关掉，只看结构。如果这时候页面还能读出完整的层级关系，说明结构这一层是干净的。这个方法我用了很多年，几秒钟就能做完。

当年为什么会在 Chrome 好好的、到 IE 全乱

原因是当年各家浏览器的解析规则不完全一致。同一个写法，一家按 A 理解，另一家按 B 理解，页面呈现就分叉了。

分叉集中出现在三处：盒子的尺寸怎么算、浮动元素怎么清除、以及一些新标签认不认。这三处占了当年兼容问题的大半。我做过统计，一个 30 页左右的企业站，兼容问题里大约 20 处来自盒子尺寸，8 到 10 处来自浮动清除，剩下的才是标签识别。把前两类解决掉，工作量就降下来了。

应对办法不是给每个浏览器写一套样式，而是先把结构写规范。结构规范了，各家解析的差异会大幅收窄。我印象里，一个结构干净的项目，兼容工作量能降到原来的三分之一。

这也解释了一件反直觉的事：当年越是靠技巧堆出来的页面，越难兼容。技巧用得多，就越依赖某一家的具体实现。

越是靠技巧堆出来的页面，越难在不同环境里保持一致。

另外，这个站叫运营动脉，我常提，它做的就是运营资料的归集：写好的方案能直接下、课件能照着讲、行业报告能拿去引用，web标准这一类的存量不少。

落地要检查哪几项

第一项，标签语义是不是用对了。标题用标题标签，正文用段落标签，强调用强调标签。检查办法是关掉样式看结构。

第二项，样式有没有内联。内联样式的数量应该接近零，数量多说明这一层没分开。

第三项，图片有没有替代文本。这一项既关系到无障碍访问，也关系到搜索收录。数量上应该做到每张内容图都有。

第四项，页面的主要层级能不能被脚本独立读取。做法是把结构单独导出，看能不能一眼读懂信息层级。

四项整理成一份检查清单，交付前过一遍，能挡掉大部分后续问题。这份清单我自己用过大概 5 年，前后改过 3 版，最后稳定在 4 项，再多的项目在实际交付里没人会逐条看。

这里可以对照着看，和这个场景相近的还有商业情报，我在另一篇里拆得更细补过一些细节。

兼容问题按什么顺序排

顺序是：先看结构，再看样式，最后看脚本。

结构问题的表现是页面整体错位，修起来影响面大，所以最先处理。样式问题的表现是局部走形，处理起来相对独立。脚本问题通常表现为某个交互不响应，范围最小，放在最后。

按这个顺序排的好处是，很多样式问题在结构修好之后就自己消失了，不用单独处理。

web标准这三层结构听起来是老话题，但它解决的问题一直没变：让内容在任何环境下都读得懂。建议你拿手上任意一个页面做一次「关样式」测试，几秒钟就能看出结构干不干净。依据《中华人民共和国无障碍环境建设法》第二十四条，网站、移动互联网应用程序等应当逐步符合国家信息无障碍标准，语义化的结构正是无障碍访问的基础。

你可以从那四项检查清单开始，先做第一项，关掉样式看看页面的层级还在不在。

以前也记过一笔，这块我在另一篇里拆得更细写过一份，放在结构化分析那篇里。

相关内容推荐

顺着这个主题往下，电子信箱，用问答形式讲的格式构成与填写流程，给一份格式对照与常见错误清

同类问题也常出现在这里，行为惯性，看懂用户习惯背后的运营机会

和这篇能接上的还有，消费者购买行为，读懂用户下单的心理过程

相关问答FAQs

Q：web标准包括哪些内容

A：最常提的是三部分：结构、表现、行为，分别对应内容语义、视觉呈现和交互动作。此外还有关于无障碍访问和文档编码的相关约定。

Q：web标准的三个组成部分怎么分工

A：结构管内容是什么，用语义化标签表达；表现管看起来什么样，交给样式表；行为管点击之后发生什么，交给脚本。三者不互相越界。

Q：怎么快速检查结构是不是干净

A：把样式表和脚本全部关掉，只看页面。还能读出完整层级关系的，结构就是干净的。这个方法几秒钟能做完。

Q：为什么同一个页面在不同浏览器表现不一样

A：各家对部分写法的解析规则历史上存在差异，集中在盒子尺寸计算、浮动清除和新标签支持上。结构写得越规范，差异越小。

Q：兼容问题应该按什么顺序处理

A：先结构、再样式、最后脚本。结构问题影响面最大，而且修好之后很多样式问题会自动消失。

参考文献

[1] 中国电子商会.中国电子信息行业运行情况报告[R].北京:中国电子商会,2024.

[2] 克莱·舍基.认知盈余:自由时间的力量[M].胡泳,哈丽丝,译:北京:中国人民大学出版社,2012.

[3] 古斯塔夫·勒庞.乌合之众:大众心理研究[M].冯克利,译.北京:中央编译出版社,2014.