1.1 什么是XHTML及其发展历程
XHTML像是HTML的严格版表亲。它把HTML的灵活性和XML的严谨性结合在一起。大约在2000年左右，W3C推出了XHTML 1.0标准，那时候网页开发正从混乱走向规范。
我记得第一次接触XHTML时，感觉它就像给野马套上了缰绳。早期的HTML太自由了，标签可以不闭合，属性可以不用引号。这种自由在浏览器兼容性上造成了无数问题。XHTML的出现就是为了解决这些混乱。
从XHTML 1.0到XHTML 1.1，再到后来的XHTML 2.0草案，这个规范一直在演进。虽然XHTML 2.0最终没有成为主流，但它对后来HTML5的标准化产生了深远影响。现在回头看，XHTML就像是网页标准化的一个重要过渡阶段。
1.2 XHTML与HTML的主要区别
最明显的区别在于严格性。HTML允许你写松散的代码，而XHTML要求一切都必须规规矩矩。比如说，在HTML里你可以写<br>，但在XHTML里必须写成<br />。
标签必须正确嵌套这个要求让我印象深刻。早些年我经常犯这样的错误：先写<strong>再写<em>，闭合的时候却反过来。在XHTML里，这种嵌套错误是绝对不允许的。
属性值必须用引号括起来，即使是数字也不例外。<input type=text>在HTML里可能没问题，但在XHTML里必须写成<input type="text" />。这种严格要求确实让代码更加清晰易读。
还有一个容易被忽略的区别：XHTML对大小写敏感。所有标签和属性都必须使用小写字母，而HTML在这方面要宽松得多。
1.3 XHTML的基本语法规则
每个XHTML文档都必须以DOCTYPE声明开头。这个声明告诉浏览器你使用的是哪种文档类型。我记得刚开始时经常忘记写这个声明，结果验证时一堆错误。
所有标签都必须闭合。对于像<img>这样的空标签，需要在右括号前加上斜杠：<img src="image.jpg" alt="示例图片" />。这个习惯一旦养成，写出来的代码确实更加规范。
属性必须有值，而且不能省略。在HTML里可以写<input disabled>，但在XHTML里必须写成<input disabled="disabled" />。这种要求虽然看起来繁琐，但让代码的逻辑更加清晰。
标签必须正确嵌套，不能交叉。<strong><em>文本</strong></em>这种写法在XHTML里是绝对不允许的。必须按照<strong><em>文本</em></strong>这样的顺序来写。
这些规则刚开始可能会觉得束缚，但用久了就会发现它们让代码更加可预测、更容易维护。就像学习任何新技能一样，最初的适应期过去后，你会感激这些规范带来的好处。
2.1 创建规范的XHTML文档
开始创建XHTML文档时，DOCTYPE声明是第一步。我习惯用XHTML 1.0 Strict的声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。这个声明必须放在文档最开头，任何字符都不能出现在它前面。
接着是根元素，必须包含xmlns属性：<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">。记得有次我忘了写xmlns属性，整个文档验证时全部报错。这个属性告诉处理器文档使用的是XHTML命名空间。
head部分需要包含完整的元数据。title标签必不可少，meta标签也要正确闭合。字符集声明特别重要，我一般用<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />。使用UTF-8编码能避免很多中文显示问题。
body部分的所有标签都必须正确嵌套和闭合。段落要用<p>...</p>包裹，列表要完整包含<ul><li>...</li></ul>。空标签如br、img、hr都需要自闭合，记得在右括号前加斜杠。
2.2 常见的XHTML标签使用示例
标题标签从h1到h6必须按层级使用。我见过有人直接用h3当主标题，这在XHTML里不符合语义化要求。正确的做法是：<h1>主标题</h1><h2>次级标题</h2>，保持层级结构清晰。
链接标签的href属性必须用引号括起来：<a href="page.html" title="链接说明">链接文本</a>。title属性虽然不是强制要求，但加上它能提升可访问性。记得有次我忘了写引号，链接完全失效了。
图片标签必须包含alt属性：<img src="photo.jpg" alt="图片描述" width="300" height="200" />。即使图片纯装饰性，也要写alt=""。这个细节对屏幕阅读器用户很重要。
列表标签的使用要完整。无序列表：<ul><li>项目一</li><li>项目二</li></ul>。有序列表：<ol><li>第一步</li><li>第二步</li></ol>。每个li都必须被ul或ol包裹，不能单独存在。
表单元素需要正确闭合和属性赋值。输入框：<input type="text" name="username" id="username" />。下拉菜单：<select name="city"><option value="1">北京</option></select>。每个属性值都要用引号，布尔属性要写成disabled="disabled"。
2.3 XHTML与CSS的完美结合
XHTML的结构化特性让它与CSS配合得天衣无缝。所有样式都应该写在外部CSS文件中，通过link标签引入：<link rel="stylesheet" type="text/css" href="style.css" />。这种分离让代码更易于维护。
class和id属性的使用要规范。class用于多个元素的样式：<div class="content-box">...</div>。id用于唯一元素：<div id="header">...</div>。记得有次我把id重复使用了，CSS完全乱了套。
盒模型在XHTML中表现得特别稳定。因为所有标签都正确闭合，浏览器渲染时不会出现意外的布局问题。padding、margin、border这些属性在规整的XHTML结构上效果更加可预测。
语义化标签配合CSS能创建出既美观又 accessible 的页面。用h1-h6定义标题层级，用p标签包裹段落，用ul/ol创建列表。这些标准元素让CSS选择器的使用更加精准高效。
2.4 XHTML文档验证与调试技巧
W3C的在线验证器是检查XHTML合规性的好工具。把网址或代码粘贴进去，它能指出所有语法错误。我经常在项目完成后用这个工具做最终检查，总能发现一些自己忽略的细节。
浏览器开发者工具是调试利器。在Firefox或Chrome里按F12，可以查看元素是否正确嵌套，属性是否书写规范。有次我发现页面布局错乱，检查后发现是个没闭合的div标签。
代码编辑器的语法高亮功能很有帮助。现代编辑器如VS Code能实时提示标签未闭合、属性未加引号等问题。这个实时反馈让我在编码阶段就能避免大部分语法错误。
逐步验证法很实用。先验证文档结构，确保html、head、body都正确。再验证各个区块，检查div、p等容器标签。最后验证具体内容，确认img、a等标签的属性是否完整。
养成验证习惯后，代码质量明显提升。虽然XHTML的严格性最初让人觉得束缚，但这种 discipline 最终会变成一种本能。写出的代码不仅在当前浏览器表现良好，对未来兼容性也更有保障。