文章目录▼CloseOpen

• XHTML 1.0的“新”，是给HTML定了“不可商量”的规矩
• XHTML 1.0的“新”，是给后来的网页行业埋了“隐形地基”
• XHTML 1.0的“新”，是让网页行业从“野蛮生长”变成“体系化”
  • XHTML 1.0给HTML定了哪些“不可商量”的规矩啊？
  • XHTML 1.0的这些老规矩，对现在做网页还有用吗？
  • 为什么说XHTML 1.0是网页标记的“新开端”啊？
• →
  • XHTML 1.0和HTML的区别到底在哪？

我们聊XHTML 1.0的“新”，其实是在聊网页标准从“野蛮生长”到“体系化”的第一步——那些当年看似“麻烦”的规范，恰恰成了今天网页能跨端兼容、灵活迭代的基石。想知道这些改变到底如何影响了我们现在的上网体验？接下来就拆透它的每一处“新”。

你有没有过这种体验？早年帮朋友改博客代码，明明写了

没关标签，IE浏览器能正常打开，Firefox却把页面搞成“乱码拼图”；或者手机端看网页，图片总跑位、文字叠在一起？其实这些问题的源头，早在XHTML 1.0发布时就被盯上了——它不是简单给HTML“打补丁”，而是直接给网页标记换了套“严谨基因”，让原本“随性”的网页代码，变成了连“挑剔”的设备都能读懂的“标准文档”。

XHTML 1.0的“新”，是给HTML定了“不可商量”的规矩

早在上世纪90年代，HTML刚出来时，完全是“野生生长”的状态——写标签可以大写也可以小写（比如

和

都能用），单标签（比如换行的
）不用闭合也没关系，属性值（比如class=header）甚至不用加引号。那时候做网页像“写随笔”，怎么舒服怎么来，但问题也跟着来了：不同浏览器解析这些“随性代码”的方式不一样，导致同一个页面在IE和Netscape（当年的主流浏览器）里长得完全不同；更麻烦的是，随着手机、PDA（掌上电脑）这些移动设备出现，这些“不严谨”的代码根本没法适配——手机屏幕小，却要解析一堆没闭合的标签，结果就是页面“崩得没法看”。

XHTML 1.0就是为解决这个问题来的。它直接给HTML套上了XML的“紧箍咒”（XML是一种不管什么设备都能读懂的标记语言，比如手机APP的数据、电脑配置文件很多都是XML格式），定下了四个“必须遵守”的规矩：

标签必须小写：再也不能写

了，只能用

——因为XML对大小写敏感，小写标签能让所有设备“统一理解”；

所有标签必须闭合：单标签比如
得改成
，双标签比如

必须有对应的——这样浏览器就不会“猜”标签在哪儿结束；

属性值必须加引号：class=header得写成class="header"，哪怕值是数字也得加——避免浏览器把属性值和其他内容搞混；

文档结构必须完整：必须包含、、标签，而且里必须有——就像写文章得有标题和正文，让浏览器一眼就能看懂“这页内容是啥”。

我2018年帮本地一家旅行社改官网时，就遇到过“随性代码”的坑：他们老网站用的是HTML 4.01，全是大写标签，

这种写法，结果手机端打开导航栏直接叠成一团。我把代码改成XHTML的标准格式——标签全小写、闭合所有标签、属性值加引号，再加上（响应式设计的核心标签），结果不仅安卓和苹果端的页面统一了，百度蜘蛛爬取的频率还高了20%——后来查W3C（万维网联盟，网页标准的制定者）的官方文档（链接：https://www.w3.org/TR/xhtml1/）才知道，XHTML的严谨性刚好戳中了搜索引擎“喜欢规整内容”的点——蜘蛛解析规整的代码更高效，自然会给页面更高的“可信度”。

XHTML 1.0的“新”，是给后来的网页行业埋了“隐形地基”

你现在做响应式网页、搞SEO优化，其实都在吃XHTML 1.0的“红利”——它当年定下的“结构优先”理念，直接变成了后来网页标准的“底层逻辑”。

先说说响应式设计：你现在做手机适配，肯定会用@media查询（CSS的媒体查询）调整不同屏幕的样式，但前提是你的网页得有明确的结构——比如

是导航、

是主要内容、

是版权信息。而这个“结构优先”的理念，就是XHTML 1.0带起来的。我去年帮一个做儿童绘本的客户做网站，他们原来的页面是纯HTML写的，图片直接设宽度1000px，手机端打开得左右滑。我把代码改成XHTML的标准结构（完整的→→，里的内容按

→

→

嵌套），再加了viewport meta标签和@media查询，结果手机端的跳出率从65%降到了38%——这其实就是XHTML的结构要求，给响应式设计铺了路。

再说说SEO优化：你现在做SEO，肯定知道“标题要包含关键词”“内容要语义化”，但早在上世纪2000年代，XHTML 1.0就把这些变成了“强制要求”。比如它要求每个页面必须有标签，而且得准确描述页面内容——这刚好和搜索引擎的“抓取逻辑”吻合。谷歌在《搜索质量评估指南》（链接：https://support.google.com/webmasters/answer/7440004?hl=zh-Hans）里明确说：“页面标题是判断内容相关性的重要信号”。我之前帮一个做健身教练的朋友优化博客，他原来的页面没有，结果百度搜索他的名字，出来的是“无标题文档”。改成XHTML的标准结构后，把改成“XX健身教练-北京朝阳专业私教”，才一个月，搜索他名字的流量就涨了40%——这就是XHTML的结构要求给SEO带来的直接好处。

还有个更直观的对比，我整理了HTML和XHTML 1.0的关键差异，你一看就懂：

对比项	HTML	XHTML 1.0
标签大小写	不敏感， 和 都能用	必须小写，只能用
标签闭合	单标签可省略闭合，比如	所有标签必须闭合，比如
属性值	可不用引号，比如class=header	必须用引号，比如class="header"
文档结构	可省略、、标签	必须包含完整结构：→→

你看表格里的“文档结构”项，XHTML要求必须有完整的→→标签，这其实就是现在“语义化HTML”的基础。我自己的博客就是用XHTML的标准写的，虽然现在HTML5允许更灵活的写法，但我习惯了这种规整的方式——结果博客的加载速度比同类型的快了15%，因为浏览器解析规整的代码更高效。

XHTML 1.0的“新”，是让网页行业从“野蛮生长”变成“体系化”

其实XHTML 1.0最了不起的地方，不是定了几个规矩，而是给网页行业指明了“ 方向”——网页要适配所有设备，要让搜索引擎和人类都能看懂。

早年间做网页，大家只盯着电脑屏幕，根本没想过手机、平板这些设备；但XHTML 1.0出来后，行业里的人突然意识到：“原来网页不是‘电脑专属’的，得让手机、PDA甚至盲人阅读器（用语音读网页内容的设备）都能读懂”。比如盲人阅读器解析网页时，会按

→

→

的层级读内容，如果你的代码没有闭合标签，阅读器就会读错，导致盲人用户没法理解内容——而XHTML的闭合要求，刚好解决了这个问题。

我前阵子跟一个做了15年前端的老大哥聊天，他说：“当年学XHTML的时候，觉得那些规矩太麻烦，比如每个标签都要闭合，属性值要加引号，写代码的速度慢了一半。但现在做响应式网页、做SEO优化，才明白那些‘麻烦’都是为了后来的‘灵活’打基础——就像你学骑自行车得先练平衡，虽然慢，但学会了才能骑得更快。”

现在很多人觉得XHTML过时了，因为HTML5允许更灵活的写法（比如
不用闭合，属性值可以不加引号），但你仔细看HTML5的规范，里面好多内容都是从XHTML继承来的：比如语义化标签

、

、

，其实就是XHTML“结构优先”理念的延伸；比如标签，也是基于XHTML“适配所有设备”的思路做出来的。

如果你现在要改老网站的代码，或者做新网站，其实可以参考XHTML的标准——比如标签全部小写，所有标签闭合，属性值加引号，这样不管是浏览器还是搜索引擎，都能更准确地理解你的内容。我去年帮一个做儿童绘本的客户改网站，他们原来的页面是纯HTML写的，图片直接用宽度1000px，手机端打开要左右滑。我把代码改成XHTML的标准结构，加了viewport标签，再用CSS媒体查询调整图片宽度，结果手机端的转化率从2%涨到了8%——这就是XHTML的“规矩”带来的实际效果。

其实说来说去，XHTML 1.0的“新”，就是给网页标记定了个“底线”——就像你写文章得有逻辑，不能东一句西一句；做网页也得有规矩，不能想怎么写就怎么写。现在的网页行业能发展得这么快，能有响应式设计、语义化HTML、高效的SEO，其实都得感谢当年XHTML 1.0埋下的“严谨种子”。

---

XHTML 1.0给HTML定了哪些“不可商量”的规矩啊？

其实核心就四个关键规矩，都是针对当年HTML“太随性”的问题来的。首先标签必须全小写，再也不能写

这种大写形式，得老老实实用

；然后所有标签都得闭合，像换行的
得改成
，双标签比如

也必须有对应的

；接着属性值必须加引号，比如class=header得写成class="header"，哪怕值是数字也不能省；最后文档结构得完整，必须包含、、这三层，而且里一定要有

”结构。我之前帮健身教练朋友优化博客时，他原来的页面没有