用XML和XSL生成动态页面完整教程|新手轻松掌握的动态页面制作方法

 
 番茄炒蛋
 
 
 番茄2个（中等大小）
 鸡蛋3个
 糖1小勺
 
 
 番茄顶部划十字，用开水烫1分钟，去皮切块
 鸡蛋加少许盐打散，热锅冷油炒至半熟盛出
 再加点油，放番茄块炒出沙，加少许水焖2分钟
 倒入鸡蛋翻炒均匀，加少许糖调味即可
 
 
 <!-
更多菜谱... >

然后用一个recipes.xsl文件定义样式，比如匹配每个就生成一个带边框的卡片，变成标题，变成食材列表。这样一来，加新菜只要在XML里加一个块，页面自动多一个卡片；要改所有卡片的边框颜色，只需要改XSL里的一行CSS——是不是比改10个HTML文件爽多了？

我做过个对比表，你看了更直观：

而且对于新手来说，XML和XSL都不用学复杂的后端语言——XML就是「带层级的文本」，只要会写 标签就能上手；XSL就是「带模板的HTML」，把你熟悉的HTML结构套上XSL的循环和取值标签就行。我当初学的时候，一开始把XML元素写成了番茄炒蛋菜名>，结果XSL死活匹配不到。后来查了W3School的XML规范（https://www.w3school.com.cn/xml/index.aspnofollow）才知道，XML元素名最好用英文小写，别用中文，比如比兼容性好——这小细节要是没注意，能卡你半小时。

新手从零做XML+XSL动态页面的3步实操

说了这么多，不如直接动手——我把小夏的菜谱页面流程拆成3步，你跟着做，1小时就能做出第一个动态页面。

第一步：写XML——把数据装成「结构化盒子」

XML的核心是「结构化」，简单说就是把你的数据分成「根-枝-叶」的层级：比如菜谱的根是（所有菜谱的容器），每个枝是（单篇菜谱），叶子是、这些具体内容。

新手不会错的模板：

比如小夏的XML文件（recipes.xml）：

 
 番茄炒蛋
 
 
 番茄2个（红透的，别用青番茄）
 鸡蛋3个（常温的，打散更均匀）
 细砂糖1小勺（提鲜，中和番茄的酸）
 盐少许（鸡蛋本身有咸味，别放多）
 
 
 番茄顶部划十字，用开水烫1分钟，剥掉皮切成1cm小块（去皮更细腻）
 鸡蛋打入碗里，加1勺温水、少许盐，顺时针打散（加温水炒出来更嫩）
 热锅冷油（油比平时多一点），倒入蛋液，炒至半熟立即盛出（别炒老）
 用锅里剩下的油，倒入番茄块，中小火炒5分钟，炒出沙（用铲子压一压番茄）
 倒入炒好的鸡蛋，加1小勺糖，翻炒均匀，再炒1分钟出锅
 
 
 <!-
可以加更多块 >

这里要注意：

我当初帮小夏写的时候，他一开始把食材写成了番茄2个，鸡蛋3个，没有拆成。结果XSL里没法把食材做成列表，只能显示成一段文字，看起来很乱。后来我让他拆成每个食材一个，这样XSL里用循环就能生成整齐的

列表——这就是「结构化」的威力。

第二步：写XSL——给数据穿「好看的衣服」

XSL的作用是「把XML数据转换成HTML页面」，核心是「模板匹配」：你告诉XSL“遇到就生成一个div卡片，遇到就生成h3标题”，它就会照着做。

我给你个新手能直接用的XSL模板（recipes.xsl）：

 <!-
匹配XML的根节点（/就是根） >
 
 
 
 

 
 .recipe-card { border: 1px solid #eee; border-radius: 8px; padding: 16px; margin: 16px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
 .recipe-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; }
 .recipe-card h3 { font-size: 18px; margin: 10px 0; }
 .recipe-card .ingredients { margin: 10px 0; padding-left: 20px; }
 .recipe-card .steps { margin: 10px 0; padding-left: 20px; }
 
 
 
 

 
小夏的拿手菜谱
 <!-
循环所有元素 >
 
 

 <!-
显示图片：取的src和alt属性 >
 
 
 
 
 <!-
显示菜名：取的内容 >
 

 <!-
显示食材列表：循环 >
 

 
食材：
 

 
 

 
 
 
 <!-
显示步骤列表：循环 >
 

 
做法：
 

 
 

 
 
 
 
 
 
 
 
 

这里的关键XSL标签：
：取XML元素的内容，比如select="name"就是取里的文字；
：循环XML元素，比如select="recipes/recipe"就是循环所有；
：给HTML元素加属性，比如给加src，就得用这个标签取的src属性。
我当初写XSL的时候，一开始不会加的src属性，直接写<img src="">，结果浏览器显示成了纯文本。后来查了XSL语法才知道，XSL里不能直接在属性里写，得用——这又是个新手坑，记下来省得你绕路。
第三步：把XML和XSL连起来——让页面「自动读数据」
最后一步超简单：给XML文件加一句「样式表引用」，告诉浏览器用哪个XSL文件来转换它。
打开你的XML文件（recipes.xml），在下面加一行：

这样一来，当你用浏览器打开recipes.xml时，浏览器会自动用recipes.xsl把XML转换成HTML页面——你可以试试：把recipes.xml和recipes.xsl放在同一个文件夹里，用Chrome打开XML文件，就能看到和小夏一样的菜谱卡片页面了！
要是你想让页面更灵活（比如在HTML页面里加载XML数据），可以用JavaScript，但新手先把基础流程走通——毕竟先完成再完美。我再提醒个小细节：XML和XSL文件的编码要一致，比如都用UTF-8，不然会乱码。我当初帮小夏做的时候，XML是UTF-8，XSL是GBK，结果页面显示成一堆问号，后来把两个文件都改成UTF-8才解决。
你要是按这3步做了，不管成没成，都可以在评论区告诉我——我当初第一次做的时候，折腾了2小时才显示出来，就因为XML少写了一个闭合标签，你说不定比我快！

其实现在大部分常用的浏览器，比如Chrome、Firefox或者Edge，都能正常显示XML+XSL生成的页面——毕竟这俩技术出来挺久了，现代浏览器早把兼容性做明白了。我之前帮邻居家孩子做他的动漫角色列表页面，用Chrome打开直接就是整整齐齐的卡片，Firefox里看也没差，甚至手机上的Edge浏览器打开都没问题，基本覆盖了九成以上的用户场景。
但要是碰到特别老的浏览器，比如IE8甚至更老的版本，就容易出幺蛾子——要么页面显示得乱七八糟，要么干脆把XML的标签直接露出来，变成一堆带尖括号的文字。新手刚开始学的时候真不用纠结这个，先把Chrome或者Firefox当主力测试工具就行，等你把基础流程摸熟了，真要兼容老浏览器再说。到时候可以试试用PHP在服务器端先把XML和XSL转成普通的HTML文件，再发给浏览器——不过这就得学点儿后端的东西了，慢慢来，先把眼前的事儿做好。

XML+XSL生成的页面能在所有浏览器正常显示吗？
大部分现代浏览器（比如Chrome、Firefox、Edge）都支持XML+XSL的转换，但一些老版本浏览器（比如IE8及以下）可能会有兼容性问题。新手做页面时， 用Chrome或Firefox测试，基本不会出问题。如果要兼容更老的浏览器，可以考虑用服务器端转换（比如PHP把XML+XSL转成HTML再输出），但新手先把基础流程走通就行。
修改XSL文件后，页面需要重新刷新吗？
要的！因为浏览器是实时用XSL转换XML的——你修改XSL后，只要保存文件，再刷新XML的浏览器页面，就能看到新的样式效果。比如你把菜谱卡片的边框颜色从灰色改成红色，改完XSL保存，刷新XML页面，立刻就能看到变化，不用重新上传或改其他文件。
XML里可以用中文当元素名吗？比如代替？
虽然XML语法允许用中文当元素名，但实际用的时候，很多浏览器或工具对中文元素的兼容性不好，容易出现“XSL匹配不到元素”“页面显示乱码”的问题。新手稳妥起见，还是用英文小写的元素名（比如、），简单又不容易踩坑。如果实在想标中文，可以在元素里加注释（比如<!-
这是菜名 >），不影响功能。
能在XML里加音频、视频之类的多媒体内容吗？
当然可以！XML只是存数据，不管你存的是图片、音频还是视频。比如要加一个菜谱的讲解音频，你可以在XML的里加一个，然后在XSL里用取这个src属性，生成HTML的标签（比如）。原理和加图片一样，只是把图片链接换成音频/视频链接就行。
如果XML里的数据很多（比如100篇菜谱），页面加载会很慢吗？
XML是纯文本文件，只要数据结构合理，加载速度其实很快——100篇菜谱的XML文件大概只有几KB到几十KB，比一张高清图片还小。如果数据真的特别大（比如上千篇），可以考虑把XML分成多个文件（比如按月份分），或者用JavaScript按需加载（比如先显示前20篇，点击“加载更多”再读后面的XML），但新手先不用考虑这么复杂，先把小数据量的页面做好再说。