XHTML MP教程，如何快速入门与实战应用？-建站教程-锦华智联科技

虽然如今它已被更现代的 HTML5 和响应式设计所取代，但了解 XHTML MP 对于维护旧系统、理解移动 Web 发展历史以及掌握 Web 基础都非常有价值。

XHTML MP (XHTML Mobile Profile) 完整教程

什么是 XHTML MP？

XHTML MP (XHTML Mobile Profile)，全称为 XHTML Mobile Profile，是一种基于 XML 的标记语言，专门为移动设备（如早期的手机、PDA）设计，它是 WAP 2.0 规范的一部分，旨在取代旧的 WML (Wireless Markup Language)。

核心目标：

标准化： 提供一个基于 Web 标准（XHTML）的移动 Web 开发方案。
可访问性： 确保内容在各种小型屏幕、低处理能力的设备上都能良好显示。
兼容性： 在不同厂商的移动浏览器上提供更一致的用户体验。

你可以把它理解为 XHTML 的一个“精简瘦身版”,专为移动设备裁剪。

XHTML MP 的核心特点

基于 XML： 所有 XHTML MP 文件都必须是格式良好的 XML 文档，这意味着标签必须闭合（你好，而不是 你好）,并且属性值必须用引号括起来。
严格的语法： 继承了 XHTML 的严格语法规则，比传统的 HTML 更加严谨,这有助于减少浏览器解析错误。
标签集受限： 只包含一组经过精心挑选的标签，这些标签被认为在移动设备上最有用，不支持复杂的表格、框架、脚本等。
支持 CSS： 支持 CSS（Cascading Style Sheets）的一个子集，用于进行简单的页面布局和样式设计,但支持的功能非常有限。
字符编码： 强烈推荐使用 UTF-8 字符编码,以确保能正确显示中文字符等。

与 XHTML Basic 和 HTML 的关系

理解它们之间的关系很重要：

HTML (HyperText Markup Language): 最完整的标记语言，用于桌面浏览器，功能强大,但很多特性在移动设备上不适用或性能开销大。
XHTML Basic: WAP 2.0 的基础标记语言，它是一个最小化的 XHTML 模块集合，定义了所有 XHTML 家族共通的核心功能，XMP MP 基于 XHTML Basic,并额外增加了一些模块。
XHTML MP (XHTML Mobile Profile): 是 XHTML Basic 的一个超集，它在 XHTML Basic 的基础上，增加了一些在移动设备上特别有用的模块，
- Forms Module: 提供了更丰富的表单元素（如 select, input 的多种类型）。
- Style Sheet Attribute Module: 允许在标签内使用 style 属性（虽然不推荐，但早期很常见）。
- Presentation Module: 提供了一些基本的文本格式化标签（如 , , , <big>, ）。

简单总结： HTML (最全) → XHTML Basic (最简核心) → XHTML MP (XHTML Basic + 移动常用功能)

开发环境准备

开发 XHTML MP 页面非常简单,你只需要：

文本编辑器： 任何文本编辑器都可以，如 VS Code, Sublime Text, Notepad++, 甚至记事本。
浏览器： 为了测试，你可以使用一些现代浏览器的开发者工具来模拟移动设备视图（如 Chrome DevTools 的设备模拟器），虽然不完全准确,但可以帮你检查布局和基本错误。
（可选）WAP 模拟器： 为了获得最真实的体验，可以使用一些旧的 WAP 模拟器，如 Opera Mobile Emulator (旧版本) 或一些手机厂商提供的 SDK。

基本语法与结构

一个标准的 XHTML MP 文件结构如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <!-- 页面内容 -->
    </body>
</html>

结构解析：

<?xml ... ?>: XML 声明，指定版本和字符编码。必不可少。
<!DOCTYPE ...>: 文档类型声明，告诉浏览器这个页面遵循 XHTML MP 1.0 规范。必不可少。
<html xmlns="...">: 根元素，xmlns 属性声明了 XHTML 命名空间。
<head>: 文档头部，包含页面的元信息。
- <title>: 页面标题，非常重要,会显示在手机的任务栏或书签中。
<body>: 文档主体,包含所有可见内容。

常用标签详解

XHTML MP 的标签集很小,以下是最常用的部分：

文本结构

描述	示例
`<h1>` - `<h6>`	标题，从最重要到最不重要	`<h1>一级标题</h1>`
`<p>`	段落	`<p>这是一个段落。</p>`
`<br />`	换行符（自闭合标签）	`<p>第一行<br />第二行</p>`
`<hr />`	水平分割线（自闭合标签）	`<hr />`

文本格式化

描述	示例
`<b>`	粗体文本	`<p>这是<b>粗体</b>文本。</p>`
`<i>`	斜体文本	`<p>这是<i>斜体</i>文本。</p>`
`<u>`	下划线文本	`<p>这是<u>下划线</u>文本。</p>`
`<strong>`	表示重要的文本（通常渲染为粗体）	`<p><strong>警告！</strong></p>`
`<em>`	表示强调的文本（通常渲染为斜体）	`<p>这真是个<em>好主意</em>。</p>`
`<big>`	显示比当前字体大的文本	`<p>这是<big>大号</big>文本。</p>`
`<small>`	显示比当前字体小的文本	`<p>这是<small>小号</small>文本。</p>`

列表

描述	示例
`<ul>`	无序列表	`<ul><li>项目1</li><li>项目2</li></ul>`
`<ol>`	有序列表	`<ol><li>第一步</li><li>第二步</li></ol>`
`<li>`	列表项	`<li>列表内容</li>`

链接

描述	示例
`<a>`	超链接	`<a href="http://www.example.com">访问网站</a>`
	`accesskey` 属性：为链接指定一个快捷键。	`<a href="next.html" accesskey="5">下一页 (按5)</a>`

图像

描述	示例
`<img />`	图像（自闭合标签）	`<img src="logo.gif" alt="公司Logo" width="100" height="50" />`
	`src`: 图像路径。
	`alt`: 替代文本，图像无法显示时显示。非常重要。
	`width`, `height`: 图像的宽度和高度（单位为像素）。强烈建议设置，以避免页面布局抖动。

表格

描述	示例
`<table>`	表格	`<table border="1"><tr>...</tr></table>`
`<tr>`	表格行	`<tr><td>数据</td></tr>`
`<td>`	表格数据单元格	`<td>单元格内容</td>`
`<th>`	单元格	`<th>标题</th>`

注意： 移动设备上的表格体验很差，应尽量避免使用复杂的表格布局,只用于展示真正的表格数据。

CSS 支持

XHTML MP 支持 CSS，但主要是 CSS Level 1 的一部分,并有一些移动设备的限制。

如何引入 CSS？

内联样式 (不推荐): 直接在标签内使用 style 属性。
```
红色大号文本
```
这种方式不利于维护,但在非常简单的页面中可以使用。

内部样式表 (推荐): 在 <head> 标签中使用 <style>

<head>
    <title>样式示例</title>
    <style type="text/css">
        body { font-family: sans-serif; }
        h1 { color: #003366; }
        .highlight { background-color: #ffffcc; }
    </style>
</head>



外部样式表 (推荐): 链接到一个外部 .css 文件。
<head>
    <title>样式示例</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>


CSS 支持的限制

单位： 像素 是最可靠的单位，百分比、em 等支持可能不稳定。
选择器： 支持简单的类型选择器、类选择器、ID 选择器，不支持复杂的选择器（如后代选择器 p a 在某些旧浏览器中可能不支持）。
属性： 许多现代 CSS 属性（如 flexbox, grid, box-shadow, media queries）都不支持,只支持最基础的布局和文本样式属性。


最佳实践与注意事项


为小屏幕设计：

保持页面简洁： 每页内容尽量少,信息密度要低。
避免横向滚动： 页面宽度应控制在设备屏幕宽度内。
使用短文本： 标题和链接要简短明了。



导航清晰：

提供明确的返回首页或上一页的链接。
使用有意义的链接文本，而不是“点击这里”。



图像优化：

使用适合移动设备的图像格式（如 GIF, PNG）。
务必设置 width 和 height 属性,防止页面加载时因图片大小未知而布局错乱。
图像文件要尽可能小,以减少加载时间和流量消耗。



测试，测试，再测试：
在不同的模拟器和真实设备上进行测试，不同手机浏览器对 XHTML MP 的支持程度有细微差别。

使用 DOCTYPE 和编码： 始终在文档开头声明正确的 DOCTYPE 和 UTF-8 编码。



一个完整的示例
这是一个简单的 XHTML MP 页面示例，包含了标题、段落、链接、列表和样式。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>欢迎来到我的移动网站</title>
    <style type="text/css">
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            margin: 5px;
        }
        h1 {
            color: #005599;
            border-bottom: 1px solid #ccc;
        }
        a {
            color: #003366;
        }
        .menu {
            background-color: #e9e9e9;
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>移动首页</h1>
    <p>欢迎访问我的 XHTML MP 示例网站！这是一个为早期手机设计的页面。</p>
    <div class="menu">
        <h2>菜单</h2>
        <ul>
            <li><a href="news.html">新闻</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="contact.html">联系方式</a></li>
        </ul>
    </div>
    <p>最新动态：</p>
    <ol>
        <li>网站正式上线</li>
        <li>推出新功能</li>
    </ol>
    <p>
        <a href="http://www.wapforum.org" accesskey="1">访问 WAP 论坛 (按1)</a>
    </p>
    <hr />
    <p align="center">© 2025 我的移动网站</p>
</body>
</html>

现代替代方案与总结
为什么 XHTML MP 过时了？

智能手机的崛起： iPhone 和 Android 等智能手机的出现，拥有强大的浏览器和大的触摸屏，完全有能力渲染完整的 HTML 和 CSS。
响应式 Web 设计 (RWD)： 现代开发采用 RWD 技术，一套 HTML 代码通过 CSS Media Queries 可以自动适配从手机到桌面等各种屏幕尺寸，无需为移动设备开发独立的、功能受限的版本。
功能更强大： HTML5 提供了丰富的语义化标签、多媒体支持、本地存储、离线应用等功能，是 XHTML MP 无法比拟的。

现代替代方案：

响应式 Web 设计 (Responsive Web Design)： 这是目前的主流方案，使用流式布局、弹性图片和 CSS Media Queries 来构建一个“一次开发，处处运行”的网站。
渐进式增强 (Progressive Enhancement)： 先为所有设备提供核心内容的 HTML 和 CSS 基础,然后逐步为高级浏览器添加更丰富的功能和样式。


XHTML MP 是移动 Web 发展史上一个重要的里程碑，它将 Web 标准引入了移动领域,推动了早期移动互联网的普及。
虽然今天你几乎不需要用它来开发新项目，但学习 XHTML MP 有助于你：

理解移动 Web 的历史和演进。
掌握 Web 开发的基础（语义化、结构、分离内容与样式）。
更好地维护一些遗留的移动项目。

希望这份教程能帮助你全面了解 XHTML MP！

XHTML MP教程，如何快速入门与实战应用？