搜尋
首頁web前端html教學使用 XSLT 作为 HTML 的样式表_html/css_WEB-ITnose

简介

  当听到样式表这个词时,您可能会想到 CSS 样式表。XSLT 样式表通常用于 XML 转换,比如在 Web 服务之间映射数据。因为 XSLT 非常适合此用途,所以创建了顶层元素 别名,虽然这很少使用。这种 XSLT 转换的输入结构与输出结构有很大的不同。最重要的是,命名空间的不同。

  XSLT 样式表的输入结构与输出结构相似,但却更简单些。其中已经扩充了一些标记,但大部分标记只是原样复制到输出。输入和输出的命名空间是相同的 (HTML)。输入文档也可以包含样式表指令(比如创建脚注),这些指令属于另一个命名空间,不会传递到输出中。

常用缩略语

CSS:级联样式表 XHTML:可扩展超文本标记语言 XPath:XML 路径语言 XSLT:可扩展样式表语言转换

  在本文中,我们将学习如何使用 XSLT 样式表扩充 XHTML 文档。文中的示例展示了如何使用指令,如何引用其他源文档的部分,以及如何使用链接在主文档中导航。此外,我们还探索了页面的解释和编译之间的区别。

CSS 样式表的局限性

  XSLT 样式表不会阻止您使用其他技术,比如 JavaScript 或 CSS。CSS 适用于字体、加粗、颜色、间距等。它不适合将来自不同位置的信息组合在一起,比如脚注、模块或生成一个目录。这正是 XSLT 的用武之地,它补充而不是替代了 CSS。

XSLT 用途示例

  实际上,您可以将 XSLT 代码集中在一个文件中。为了简单起见,本文中的每个示例均位于一个独立的 XSLT 文件中,除了一些必要的代码。清单 1 给出了必需的代码。

  清单 1. 必需的代码(位于 samples/common.xml 中)

     xmlns = " http://www.w3.org/1999/xhtml"

     xmlns:h = " http://www.w3.org/1999/xhtml"

     xmlns:a = " http://sourceforge.net/projects/arbalo/"

     xmlns:s = " http://www.w3.org/1999/XSL/Transform"

     exclude-result-prefixes = "a h"

     version = "1.0"

    

        

            

            

                 http-equiv = "content-type"

                 content = "text/html;charset=UTF-8" />

            

                 href = "common.css"

                 rel = "stylesheet"

                 type = "text/css" />

         s:copy >

     s:template >

     

    

        

            

            

         s:copy >

     s:template >

s:stylesheet >

  XHTML 的命名空间定义了两次:默认定义和 h:。默认命名空间用于编写输出 XHTML 标记,其中应该避免使用命名空间前缀。h: 用在 XPath 表达式中。

  本文使用 XSLT 1.0 版本。目前,大部分浏览器都无法解释 XSLT 2.0。但是,如果 XSLT 运行在服务器上,那么它可能是一个实用的选择。XSLT 2.0 还提供了:

XPATH 2.0(if…then…else 和许多内置的函数) 内置和用户编写的 XPATH 函数 分组

  在 清单 1 中:

s:template match="head" 扩充了源文档的 head 一节,添加了一个 CSS 样式表的链接。即使 UTF-8 是在 XML 中的默认编码,一些浏览器也需要内容类型才能呈现它。 s:template match="*" 是默认的详细副本。原则上,所有内容都会复制到目标文档中。如果遗漏了此模板,只会将标记的文本内容复制到目标文档。不会复制处理指令节点。

  本文中的所有其他示例都是导入 common.xsl 的独立文件。

扩充

  通过扩充,添加了一个未在源文档中显式请求的特性。一个示例是 清单 1 中的 CSS 样式表的链接。尝试另一个示例,向每个内部链接添加一个小箭头 (^ v),指明目标在它之前还是之后。清单 2 给出了该样式表。

  清单 2. 样式表(在 samples/linkUpDown.xsl 中)

     xmlns = " http://www.w3.org/1999/xhtml"

     xmlns:h = " http://www.w3.org/1999/xhtml"

     xmlns:s = " http://www.w3.org/1999/XSL/Transform"

     version = "1.0"

    

    

        

            

            

            

                

                     ^ s:text >

                 s:when >

                

                     v s:text >

                 s:when >

             s:choose >

            

         s:copy >

     s:template >

s:stylesheet >

  首先,导入清单 2 中的通用样式表。模板与内部链接(以 '#' 开头)相匹配。如果链接指向的锚点位于链接之前,那么使用一个向上箭头扩充该链接(如果情况相反,则使用向下箭头)。

  s:copy-of 和 s:apply-templates 可确保不会沿途丢下任何内容。

  清单 3 给出了一个示例文档(其中包含内部链接),它经过了清单 2 中的样式表进行扩充。

  清单 3. 源文档(在 samples/linkUpDown.xml 中)

xml-stylesheet href = "linkUpDown.xsl" type = "text/xsl" ?>

 

    

    

        

         This link goes downward. a > p >

        

         Reduce the size of the window to verify the link really works. p >

        

        

         This link goes upward. a >

         p >

     body >

html >      

  目标文档看起来相同,除了清单 4 中的条目。

  清单 4. 目标文档(在 samples/linkUpDown.html 中)

… v downwards. a > …

    … ^ upwards. a > …

指令

  您可以在源文档中添加一些指令,告诉样式表执行何种操作。它们属于另一个命名空间(在本例中为前缀 a:),不会被复制到目标文档。

  在清单 5 中,源文档中任何地方的指令标记 a:ref 都会创建一个脚注。

  清单 5. 样式表(在 samples/footnote.xsl 中)

     xmlns = " http://www.w3.org/1999/xhtml"

     xmlns:a = " http://sourceforge.net/projects/arbalo/"

     xmlns:h = " http://www.w3.org/1999/xhtml"

     xmlns:s = " http://www.w3.org/1999/XSL/Transform"

     version = "1.0"

    

    

        

            

            

            

                

             s:if >

         s:copy >

     s:template >

    

    

        

             name = "number"

             select = "count(preceding::a:ref) + 1" />

         a >

        

            

         a >

     s:template >

    

    

        

        

            

            

                 a >

                

                    

                 a >

                

             p >

         s:for-each >

     s:template >

s:stylesheet >

  使用源文档中的 a:references 指令,名为 references 的模板会在模板与该指令匹配的地方分配脚注。如果缺少这样一个指令,第一个与 body 匹配的模板会在 body 的末尾分配脚注,方法是调用名为 references 的相同模板。在两种情况下,都会列出脚注的内容,并生成一个由向上箭头表示的向上链接。

  第二个模板(匹配 a:ref)使用向下箭头创建脚注的链接。脚注具有编号。这里忽略了它的内容。

  class="footnote" 属性在 XSLT 转换之后由一个 CSS 样式表解析,该样式表链接在 XSLT 样式表 common.xsl 中。

  清单 6 中的源文档使用 a:ref 指令创建脚注。

  清单 6. 源文档(在 samples/footnote.xml 中)

xml-stylesheet href = "footnote.xsl" type = "text/xsl" ?>

     xmlns = " http://www.w3.org/1999/xhtml"

     xmlns:a = " http://sourceforge.net/projects/arbalo/"

    

    

        

             This example looks a little scientific

            

                 From Latin

                 scientia em >

             a:ref >

             and academic

             From Greek akademia a:ref >.

         p >

        

             Do you know why?

            

                 It uses

                 footnotes em >.

             a:ref >

         p >

         Reduce size of window to verify links are generated. p >

         

     

     body >

html >

  目标文档将脚注列表包含在底部,如清单 7 所示。

  清单 7. 目标文档(在 samples/footnote.html 中)

     xmlns = " http://www.w3.org/1999/xhtml"

    xmlns:h = " http://www.w3.org/1999/xhtml"

    xmlns:a = " http://sourceforge.net/projects/arbalo/" >

    head >

   

       This example looks a little scientific

          v 1 a >

          and academic.

          v 2lt;/a>

       p >

       Do you know why?

          v 3 a >

       p >

       Reduce size of window to verify links are generated. p >

       br/>

   

    ^1 a >

       From Latin

       scientia em >

    p >

   

       ^2 a >From Greek akademia p >

    ^3 a >

       It uses

       footnotes em >.

    p >

    body >

html >

突破源文档的边界

  也可引用其他源文档的其中一些部分。a:include 指令包含一个可能属于另一个源文档的元素并转换它,如清单 8 所示。

  清单 8. 样式表(在 samples/include.xsl 中)

     xmlns = " http://www.w3.org/1999/xhtml"

     xmlns:a = " http://sourceforge.net/projects/arbalo/"

     xmlns:s = " http://www.w3.org/1999/XSL/Transform"

     version = "1.0"

    

    

        

            

                

                     select = "document(@src)//*[@id=current()/@refid]" />

             s:when >

            

                

select = "document(//a:default[1]/@src)//*[@id=current()/@refid]" />

             s:when >

            

                

                     select = "//*[@id=current()/@refid]" />

             s:when >

         s:choose >

     s:template >

s:stylesheet >

  源文档中的一个 a:include 指令引用源元素的 id。包含该元素的文档可在一个 src 属性中命名。如果缺少该属性,将使用 a:default 指令的 src 属性。如果在任何地方都没有 src 属性,则使用同一个源文档。因此,refid 会引用 id 来避免无限的递归。

  导入的元素可能具有一种复杂的类型,并在包含 (apply-templates)之后进行转换。清单 9、清单 10 和清单 11 给出了示例。

  清单 9. 源文档(在 samples/include.xml 中)

xml-stylesheet href = "include.xsl" type = "text/xsl" ?>

     xmlns = " http://www.w3.org/1999/xhtml"

     xmlns:a = " http://sourceforge.net/projects/arbalo/" >

    

        

     head >

    

         The following text is included: p >

        

        

         double p >

        

        

     body >

html >

  清单 10. 源文档的部分(在 samples/includeY.xml 中)

I'm the included em > h2 h2 >

I'm the included em > h1 h1 >

  清单 11. 目标文档(在 samples/include.html 中)

         The following text is included: p >

         I'm the included em > paragraph. p >

         I'm the included em > h1 h1 >

         double p >

         I'm the included em > h2 h2 >

         double p >

     body >

html >

主文档和导航

  如果您有一个包含多个页面的演示,有一个主文档包含页面标题及其链接。您可以生成完整的导航,从每个页面到任何其他页面,以及到前一个和后一个页面。这些细节不属于本文的介绍范围,但 参考资料 中提供了使用主文档的 HTML 演示的链接。可将 .xml 替换为 .html 来获得编译后的版本。让浏览器向您显示 .xml 的整洁源代码。您会对它生成的源代码量感到惊奇。

解释与编译的对比

  解释意味着页面为 XML 格式(其文件扩展名为 .xml,其内容类型为文本/xml 或应用程序/xml),并且处理指令所引用的 XSLT 样式表可在浏览器中执行。

  编译意味着浏览器看到的是 HTML(其文件扩展名为 .html,内容类型为文本/html),它是在请求页面之前从您的开发环境中或服务器上的 XML 转换而来的。Xalan 和 Saxon 都是著名的 XSLT 处理器。

  解释是未来的发展方向。所有现代浏览器都支持 XSLT,并且它具有一些优点:

当测试时,您会立即获得结果。只需在您测试的每个浏览器中按下 F5,即可反映源页面、CSS 和 XSLT 样式表的更改。 要传递给客户端的信息量减少了。 客户端看到的是一个干净、整洁的网页,因为还未生成扩充内容。

  但也要注意一些缺点:

有一些旧浏览器可能不支持 XSLT。如果向一个受控的环境(内部网)发布页面,就不会出现问题。 一些现代浏览器禁止 XSLT 样式表引用另一个目录中的另一个样式表。 将 XSLT 域其他功能相结合(比如 SVG 或 iframe)可能在一些浏览器中导致问题。 因为大部分浏览器都不支持 XSLT 2.0 或即将推出的 3.0,所以您无法使用新功能。没有 XPath 2.0 if () then … else,也没有用户编写的 XPath 功能。

  无论进行编译还是解释,页面的其他转换 (CSS、JavaScript) 都会在 XSLT 转换之后执行。

结束语

  在本文中,您学习了如何使用 XSLT 样式表来扩充 XHTML 文档。您可以使用本文中的示例作为起点,构建您自己的 XSLT 样式表。

下载

  文章和XML示例

关于作者

  Jürgen M. Regel 是位于德国汉诺威的 TUI InfoTec GmbH 的 Architecture Management & Software Engineering 部门的一名高级软件工程师。他主要研究旅游行业中的企业应用程序集成 (EAI)。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存,這玩意兒,說簡單也簡單,說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章,結果用戶打開還是老版本,這滋味,誰受得了?這篇文章,咱就來扒一扒這背後的彎彎繞繞,以及如何優雅地解決這個問題。讀完之後,你就能輕鬆應對各種緩存難題,讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存,說白了就是瀏覽器或者服務器為了提高訪問速度,把一些靜態資源(比如圖片、CSS、JS)或者頁面內容存儲起來。下次訪問時,直接從緩存裡取,不用再重新下載,速度自然快。但這玩意兒,也是個雙刃劍。新版本上線,

如何使用HTML5表單驗證屬性來驗證用戶輸入?如何使用HTML5表單驗證屬性來驗證用戶輸入?Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

如何高效地在網頁中為PNG圖片添加描邊效果?如何高效地在網頁中為PNG圖片添加描邊效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS為網頁中添加有效的PNG邊框。 它認為,與JavaScript或庫相比,CSS提供了出色的性能,詳細介紹瞭如何調整邊界寬度,樣式和顏色以獲得微妙或突出的效果

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?HTML5中跨瀏覽器兼容性的最佳實踐是什麼?Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

< datalist>的目的是什麼。 元素?< datalist>的目的是什麼。 元素?Mar 21, 2025 pm 12:33 PM

本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

> gt;的目的是什麼 元素?> gt;的目的是什麼 元素?Mar 21, 2025 pm 12:34 PM

本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

我如何使用html5< time> 元素以語義表示日期和時間?我如何使用html5< time> 元素以語義表示日期和時間?Mar 12, 2025 pm 04:05 PM

本文解釋了HTML5< time>語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

< meter>的目的是什麼。 元素?< meter>的目的是什麼。 元素?Mar 21, 2025 pm 12:35 PM

本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。