Using XSLT as a stylesheet for HTML_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

Introduction

Commonly used abbreviations

< >

Directives

Break the boundaries of the source document

The following text is included:

< h1 id = "y1" >I'm the included h1</ h1 >

Home

Web Front-end

HTML Tutorial

Using XSLT as a stylesheet for HTML_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:07 PM

Introduction

When you hear the word style sheet, you probably think of CSS style sheets. XSLT stylesheets are commonly used for XML transformations, such as mapping data between Web services. Because XSLT is well suited for this purpose, an alias for the top-level element was created, although this is rarely used. The input structure of this XSLT transformation is very different from the output structure. Most importantly, the namespaces are different.

The input structure of an XSLT stylesheet is similar to the output structure, but simpler. Some tags have been augmented, but most are simply copied to the output as-is. The input and output namespaces are the same (HTML). Input documents can also contain stylesheet directives (such as creating footnotes) that belong to another namespace and are not passed to the output.

Commonly used abbreviations

CSS: Cascading Style Sheets XHTML: Extensible Hypertext Markup Language XPath: XML Path Language Enrich XHTML documents with XSLT stylesheets. Examples show how to use directives, how to reference parts of other source documents, and how to use links to navigate within the main document. Additionally, we explore the difference between interpretation and compilation of pages.

Limitations of CSS Stylesheets

　XSLT stylesheets do not prevent you from using other technologies, such as JavaScript or CSS. CSS works with fonts, bolding, colors, spacing, and more. It is not suitable for combining information from different locations, such as footnotes, modules or generating a table of contents. This is where XSLT comes in, complementing rather than replacing CSS.

Examples of XSLT usage

　You can actually concentrate your XSLT code in a single file. For simplicity, each example in this article is in a separate XSLT file, except for some necessary code. Listing 1 shows the necessary code.

Listing 1. Required code (located in samples/common.xml)

< s:stylesheet

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"

s:template match = "h:head" > < s:copy > 🎜> < link

href = "common.css"

rel = "stylesheet"

type = "text/css" />

s:copy > < s:copy >

< s:copy-of select = "@*" />

< s:apply-templates />

The XHTML namespace is defined twice: the default definition and h:. The default namespace is used for writing output XHTML markup, where namespace prefixes should be avoided. h: used in XPath expressions.

This article uses XSLT version 1.0. Currently, most browsers cannot interpret XSLT 2.0. However, if XSLT is running on a server, it may be a practical option. XSLT 2.0 also provides:

XPATH 2.0 (if…then…else and many built-in functions) Grouping of built-in and user-written XPATH functions

In Listing 1: The head section of the source document has been expanded to include a link to the CSS style sheet. Even though UTF-8 is the default encoding in XML, some browsers require a content type to render it. s:template match="*" is the default verbose copy. In principle, all content is copied to the target document. If this template is omitted, only the marked text content will be copied to the target document. Processing instruction nodes are not copied.

All other examples in this article are standalone files that import common.xsl.

Augmentation

With an augmentation, a feature is added that is not explicitly requested in the source document. An example is the link to the CSS stylesheet in Listing 1. Try another example and add a small arrow (^ v) to each internal link to indicate whether the target precedes or follows it. Listing 2 shows the style sheet.

Listing 2. Style sheet (in samples/linkUpDown.xsl)

< s:stylesheet

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:import href = "common.xsl" />

< s:template match = "h:a[starts-with(@href,'#')]" >

< s:copy >

< s:copy-of select = "@*" />

< s:variable name = "name" select = "substring-after(@href,'#')" />

< s:choose >

< s:when test = "preceding::h:a[@name=$name]" >

< s:text >^

< s:when test = "following::h:a[@name=$name]" >

< s:text >v

< s:apply-templates />

< s:stylesheet <🎜> <🎜> 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" <🎜 > <🎜> > "name" select = "substring-after(@href,'#')" /> :h:a[@name=$name]" > < ; <🎜> <🎜> < 🎜> <🎜 > >

First, import the common style sheet in Listing 2. Templates match internal links (starting with '#'). If the link points to an anchor that precedes the link, then expand the link with an up arrow (or a down arrow if the opposite is true).

s:copy-of and s:apply-templates ensure that nothing is dropped along the way.

Listing 3 shows an example document (with internal links) augmented with the stylesheet in Listing 2.

　Listing 3. Source document (in samples/linkUpDown.xml)

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

< head />

< body >

< a name = "a" />

This link goes < a href = "vb" >downward.

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

< a name = "b" />

This link goes < a href = "^a" >upward.

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

< >

< > < = "b" />

… < a href = "#b" >v downwards. …

… < a href = "#a" >^ upwards. …

The target documents look the same, except for the entries in Listing 4. Listing 4. Target document (in samples/linkUpDown.html)

… < a href = "#b" >v downwards. … … < a href = "#a" >^ upwards. …

Directives

You can add some directives to the source document to tell the stylesheet what to do. They belong to another namespace (in this case the prefix a:) and are not copied to the target document.

In Listing 5, the directive tag a:ref anywhere in the source document creates a footnote.

Listing 5. Style sheet (in samples/footnote.xsl)

< s:stylesheet

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:import href = "common.xsl" />

< s:template match = "h:body" >

🎜>

descendant::a:references)" >

> :template match = "a:ref" >

< s:variable

name = "number"

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

< a name = "ref-{$number}" >

< a class = "footnote" href = " #reference-{$number}" >

;

; > < s:template match = "a:references" name = "references" > a:ref" >

< s:variable name = "number" select = "count(preceding::a:ref) 1" />

< a name = "reference-{$number}" >

< a class = "footnote" href = "#ref-{$number}" >

< s:value-of select = "concat(' ^',$number)" />

< s:apply-templates />

Using the a:references directive in the source document, a template named references will assign footnotes where the template matches that directive. If such a directive is missing, the first template matching body will assign a footer at the end of body by calling the same template named references. In both cases, the content of the footnote is listed and an upward link, represented by an upward arrow, is generated.

The second template (matching a:ref) creates a link to the footnote using a down arrow. Footnotes are numbered. Its content is ignored here.

The class="footnote" attribute is parsed after the XSLT transformation by a CSS stylesheet linked in the XSLT stylesheet common.xsl.

The source document in Listing 6 uses the a:ref directive to create footnotes.

Listing 6. Source document (in samples/footnote.xml)

< html

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

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

< head />

< body >

This example looks a little scientific

< a:ref >

From Latin

scientia

and academic

< a:ref >From Greek akademia.

Do you know why?

< a:ref >

It uses

footnotes.

Reduce size of window to verify links are generated.

🎜 > From Latin and academic a:ref >From Greek akademia. 🎜> >

The target document contains a list of footnotes at the bottom, as shown in Listing 7.

Listing 7. Target document (in samples/footnote.html)

< html

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

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

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

< head >< link type = "text/css" rel = "stylesheet" href = "common.css" />

< body >

This example looks a little scientific

< a name = "ref-1" />< a href = "#reference-1" class = "footnote" >v 1

and academic.

< a name = "ref-2" />< a href = "#reference-2" class = "footnote" >v 2lt;/a>

Do you know why?

< a name = "ref-3" />< a href = "#reference-3" class = "footnote" >v 3

Reduce size of window to verify links are generated.

br/>

< hr />

< a name = "reference-1" />< a href = "#ref-1" class = "footnote" > ^1

From Latin

scientia

< a name = "reference-2" />

< a href = "#ref-2" class = "footnote" > ^2From Greek akademia

< a name = "reference-3" />< a href = "#ref-3" class = "footnote" > ^3

It uses

footnotes.

< html <🎜> <🎜> xmlns = " http://www.w3.org/1999/xhtml" <🎜> <🎜> xmlns:h = " http://www. w3.org/1999/xhtml" <🎜> <🎜> xmlns:a = " http://sourceforge.net/projects/arbalo/" > < head >< link type = "text/css" rel = "stylesheet" href = "common.css" /> < body > This example looks a little scientific < a name = "ref-1" />< a href = "#reference-1" class = "footnote" >v 1 href = "#reference-3" class = "footnote" >v 3 verify links are generated. br/> < a name = "reference-1" />< a href = "#ref-1" class = "footnote" > ^1 From Latin 🎜> ; a name = "reference-3" />< a href = "#ref-3" class = "footnote" > ^3 It uses 🎜>

Break the boundaries of the source document

You can also quote some parts of other source documents. The a:include directive takes an element that might belong to another source document and transforms it, as shown in Listing 8.

　Listing 8. Style sheet (in samples/include.xsl)

< s:stylesheet

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"

< s:import href = "common.xsl" />

< s:template match = "a:include" >

< s:choose >

< s:when test = "0!=string-length(@src)" >

< s:apply-templates

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

< s:when test = "not(@src) and //a:default[1]/@src" >

< s:apply-templates

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

< s:when test = "0=string-length(@src) or not(//a:default[1]/@src)" >

< s:apply-templates

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

< s:stylesheet <🎜> <🎜> 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]" /> "not(@src) and //a:default[1]/@src" > [1]/@src)//*[@id=current()/@refid]" /> test = "0=string-length(@src) or not(//a:default[1]/@src)" > = "//*[@id=current()/@refid]" /> >

An a:include directive in the source document references the id of the source element. The document containing this element can be named in a src attribute. If this attribute is missing, the src attribute of the a:default directive will be used. If there is no src attribute anywhere, the same source document is used. Therefore, refid will refer to id to avoid infinite recursion.

The imported element may have a complex type and be converted after including (apply-templates). Listing 9, Listing 10, and Listing 11 give examples.

Listing 9. Source document (in samples/include.xml)

< html

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

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

< head >

< a:default src = "includedY.xml" />

< body >

The following text is included:

< a:include refid = "x" src = "includedX.xml" />

< a:include refid = "y1" />

double

< a:include refid = "y2" />

< a:include refid = "i" src = "" />

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

; p >The following text is included:

< h2 id = "y2" >I'm the included h2

< h1 id = "y1" >I'm the included h1

< a:include refid = "x" src = "includedX.xml" /> < a:include refid = "y1" /> > 🎜>

　Listing 10. Part of the source document (in samples/includeY.xml)

< h2 id = "y2" >I'm the included h2 < h1 id = "y1" >I'm the included h1

　　清单 11. 目标文档（在 samples/include.html 中）

< body >

The following text is included:

I'm the included paragraph.

< h1 id = "y1" >I'm the included h1

double

< h2 id = "y2" >I'm the included h2

double

< body >

The following text is included:

I'm the included paragraph.

< h1 id = "y1" >I'm the included h1

double

< h2 id = "y2" >I'm the included h2

double

主文档和导航

　　如果您有一个包含多个页面的演示，有一个主文档包含页面标题及其链接。您可以生成完整的导航，从每个页面到任何其他页面，以及到前一个和后一个页面。这些细节不属于本文的介绍范围，但参考资料中提供了使用主文档的 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)。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1670

CakePHP Tutorial

1428

Laravel Tutorial

1329

PHP Tutorial

1274

C# Tutorial

1256

Related knowledge

HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML, CSS, and JavaScript: Web Development Trends Apr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

The Future of HTML: Evolution and Trends in Web Design Apr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML: Building the Structure of Web Pages Apr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

HTML vs. CSS vs. JavaScript: A Comparative Overview Apr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML vs. CSS and JavaScript: Comparing Web Technologies Apr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML: Is It a Programming Language or Something Else? Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

What is the difference between , tags and , tags? Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

See all articles

Using XSLT as a stylesheet for HTML_html/css_WEB-ITnose

Introduction

Commonly used abbreviations

< >

Directives

Break the boundaries of the source document

< p >The following text is included:

< h1 id = "y1" >I'm the < em >included h1

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics