Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use XSLT as a HTML stylesheet, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Brief introduction

When you hear the word stylesheet, you may think of CSS stylesheet. XSLT stylesheets are typically used for XML transformations, such as mapping data between Web services. Because XSLT is well suited for this purpose, aliases for top-level elements are created, although this is rarely used. The input structure of this XSLT transformation is very different from the output structure. Most importantly, the difference in namespaces.

The input structure of the XSLT stylesheet is similar to the output structure, but simpler. Some tags have been expanded, but most of them are just copied to the output as is. The input and output namespaces are the same (HTML). The input document can also contain stylesheet instructions (such as creating footnotes) that belong to another namespace and are not passed to the output.

Common abbreviations

CSS: cascading style sheets

XHTML: an Extensible Hypertext markup language

XPath:XML path language

XSLT: extensible stylesheet language transformation

In this article, we will learn how to use XSLT stylesheets to augment XHTML documents. The examples in this article show how to use instructions, how to reference parts of other source documents, and how to use links to navigate through the main document. In addition, we explored the difference between page interpretation and compilation.

Limitations of CSS style sheets

XSLT stylesheets do not prevent you from using other technologies, such as JavaScript or CSS. CSS is suitable for font, bold, color, spacing and so on. It is not suitable for combining information from different locations, such as footnotes, modules, or generating a directory. This is the opportunity for XSLT to use its talents, which complements rather than replaces CSS.

Example of XSLT usage

In fact, you can centralize the XSLT code in one file. For simplicity, each example in this article is located in a separate XSLT file, except for some necessary code. Listing 1 shows the required code.

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

XML/HTML Code copies content to the clipboard

The namespace of XHTML is defined twice: the default definition and h:. The default namespace is used to write output XHTML tags, 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 choice. XSLT 2.0 also provides:

XPATH 2.0 (if … Then... Else and many built-in functions)

Built-in and user-written XPATH functions

Grouping

In listing 1:

The s:template match= "head" extends the head section of the source document by adding a link to the CSS stylesheet. Even if UTF-8 is the default encoding in XML, some browsers need a content type to render it.

S:template match= "*" is the default detailed copy. In principle, everything is copied to the target document. If this template is omitted, only the text content of the tag is copied to the target document. The processing instruction node is not copied.

All the other examples in this article are standalone files that are imported into common.xsl.

Expand

By extension, a feature that is not explicitly requested in the source document has been added. An example is a link to the CSS stylesheet in listing 1. Try another example by adding a small arrow (^ v) to each internal link to indicate whether the target is before or after it. Listing 2 shows the stylesheet.

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

XML/HTML Code copies content to the clipboard

^

V

First, import the generic stylesheet in listing 2. The template matches the internal link (starting with'#'). If the anchor point that the link points to is in front of the link, expand the link with an up arrow (if the opposite is true, use the down arrow).

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

Listing 3 shows a sample document (with internal links) that is expanded by the stylesheet in listing 2.

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

XML/HTML Code copies content to the clipboard

This link goes downward.

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

This link goes upward.

The target document looks the same, except for the entry in listing 4.

Listing 4. Target document (in samples/linkUpDown.html)

XML/HTML Code copies content to the clipboard

... V downwards. ...

... ^ upwards. ...

Instruction

You can add instructions 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 instruction tag a:ref anywhere in the source document creates a footnote.

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

XML/HTML Code copies content to the clipboard

This example looks a little scientific

From Latin

Scientia

And academic

From Greek akademia.

Do you know why?

It uses

Footnotes.

Reduce size of window to verify links are generated.

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

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

XML/HTML Code copies content to the clipboard

This example looks a little scientific

V 1

And academic.

V 2ltposition a >

Do you know why?

V 3

Reduce size of window to verify links are generated.

Br/ >

^ 1

From Latin

Scientia

^ 2From Greek akademia

^ 3

It uses

Footnotes.

Break through the boundaries of the source document

You can also reference parts of other source documents. The a:include directive contains an element that might belong to another source document and converts it, as shown in listing 8.

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

XML/HTML Code copies content to the clipboard

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

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

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

XML/HTML Code copies content to the clipboard

The following text is included:

Double

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

XML/HTML Code copies content to the clipboard

I'm the included h3

I'm the included h2

Listing 11. Target document (in samples/include.html)

XML/HTML

The following text is included:

I'm the included paragraph.

I'm the included h2

Double

I'm the included h3

Double

Main document and navigation

If you have a presentation that contains multiple pages, there is a main document that contains the page title and its links. You can generate complete navigation, from each page to any other page, as well as to the previous and subsequent pages. These details are beyond the scope of this article, but links to HTML demos using the main document are provided in Resources. You can replace .xml with .html to get the compiled version. Let the browser show you the clean source code of .xml. You will be surprised at the amount of source code it generates.

Comparison between interpretation and compilation

Interpretation means that the page is in XML format (its file extension is .xml, its content type is text / xml or application / xml), and the XSLT stylesheet referenced by the processing instruction can be executed in the browser.

Compilation means that the browser sees HTML (with a file extension of .html and a content type of text / html), which is converted from XML in your development environment or on the server before requesting the page. Xalan and Saxon are both famous XSLT processors.

Explanation is the direction of future development. All modern browsers support XSLT, and it has some advantages:

When you test, you will get the results immediately. Simply press F5 in each browser you test to reflect changes to the source page, CSS, and XSLT stylesheets.

The amount of information to be passed to the client is reduced.

What the client sees is a clean and tidy web page because the expanded content has not yet been generated.

However, we should also pay attention to some shortcomings:

Some older browsers may not support XSLT. If you publish a page to a controlled environment (intranet), there will be no problem.

Some modern browsers prohibit XSLT stylesheets from referencing another stylesheet in another directory.

Combining other features of the XSLT domain, such as SVG or iframe, can cause problems in some browsers.

Because most browsers don't support XSLT 2.0 or the upcoming 3.0, you can't use the new features. There is no XPath 2.0 if () then... Else, and there is no user-written XPath function.

Whether compiled or interpreted, other transformations of the page (CSS, JavaScript) are performed after the XSLT transformation.

Concluding remarks

In this article, you learned how to use XSLT stylesheets to augment XHTML documents. You can use the examples in this article as a starting point to build your own XSLT stylesheet.

On how to use XSLT as a HTML stylesheet to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.