XML is a meta-markup language that does not contain many fixed tags, providing more flexibility for Web developers. When we use HTML, the tag is just a simple display of the content, but it is not associated with the content, which makes further processing of the document inconvenient. For example, to indicate your resume, the HTML representation is as follows:
<HTML>
<Body>
<Table border = 1 cellspacing = 0>
<TH> name <TD> Yu Xichu <TH> gender <TD> male <TH> birthday <TD> 1977.5
<Tr>
<TH> skills <TD colspan = 5> database design and maintenance, web development
</Table>
</Body>
</Html>
| Name | Yu Xichu | Gender | Male | Birthday | 1977.5 |
|---|---|---|---|---|---|
| Skills | Database design and maintenance, web development | ||||
Here, we cannot know what the content of th and TD indicates. If XML is used, the corresponding document (File Name: resume. XML) can be written as follows:
<? XML version = "1.0" encoding = "gb2312"?>
<Resume>
<Name> Yu Xichu </Name>
<Sex> male </sex>
<Birthday> 1977.5 </birthday>
<Skill> database design and maintenance and web development </skill>
</Resume>
Note:
Version ── specifies the XML document version, which can only be 1.0;
Encoding -- specifies the encoding type of the XML document. The value here is "gb2312", that is, "simplified Chinese ".
In comparison, we can use XML to customize the tag and use the tag to indicate the meaning of the content. In this way, it is very convenient to process documents on the Internet, and we will not be confused by a large number of formats when reading source files.
However, because XML does not specify the display mode for the tag, if we view the above two documents in the browser (ie5.0 or an updated version is recommended ), we will see that the XML document is not displayed as a table. Can't we display documents like HTML? The answer is no. Take personal experience as an example. Create another format file to show the display format of each tag. The content is as follows (the file name is resume.css ):
Resume {display: block ;}
Name {display: block; font-size: 120% ;}
Sex {display: block; text-indent: 2em}
Birthday {display: block; text-indent: 2em}
Skill {display: block; text-indent: 2em}
Note:
The above are CSS styles. It is recommended that you refer to the relevant materials to familiarize yourself with CSS and use it later. We will not describe it here because of the length relationship. After you create the resume.css file, add the following text to the first line of your resume. xml file:
<? XML-stylesheet type = "text/CSS" href = "resume.css"?>
Note:
Here, an external CSS style file is referenced. The type specifies the style type (the value can be text/CSS or text/XSL) and the href specifies the file path.
Save the file, and then open the file with ie5.0. How is it? The format is different. It seems that the content of the document is not satisfactory, but the display effect is much worse than that of the HTML document. Can the XML document be displayed only in this way ?!
Tip:
1. to better understand and master XML, we recommend that you familiarize yourself with the syntax of HTML 4.0 and CSS 2.0. Master at least one of JavaScript and VBScript; programming experience, understanding of database theory and SQL can benefit everyone from learning XML.
2. tags in the XML document must appear in pairs. If it is an empty tag, it must end with a tag with the same name as "/", or use this <xml_mark/> to indicate an empty tag.
3. XML and the XSL document to be introduced below. attribute values must be enclosed by double quotation marks (") or single quotation marks.
4. the XML document must be a good structure (the XSL document is also a type of XML document). That is to say, the tag must have an end tag, which can be nested but not cross-organized. For example:
<Outer> <inner> </inner> <inner/> </outer>
Is legal, and the following form
<Outer> <inner> </outer> </inner>
It is incorrect. If an XML document fails during browsing, most of them violate the rules mentioned above.
In the previous phase, we talked about formatting XML documents with CSS (stacked style sheets), which is not very satisfactory. In fact, CSS is more suitable for formatting HTML tags, just because it is simple to use in the above example.
XML is only a data file in more cases. How can we convert it into an HTML file that we see on a daily basis? If we compare XML files to structured raw materials, then XSL is like "sieve" and "model". The sieve selects the desired raw materials and then forms the final product through the model: HTML.
This model is roughly like this: we first design the page for performance, and then "dig out" the part where we need to get data from XML to fill the content ", then, use the XSL statement to screen out the relevant data from the XML for filling. In other words: This XSL is actually a "shell" of HTML. XML data uses this "shell" to generate "traditional" HTML.
XML is a tree structure when it is expanded. We refer to the custom labels in the tree structure as nodes, and there are parent-child and sibling relationships between nodes, we need to access the node from the root node to "/" layer by layer.
In the XSL shell, we need to use the model query language provided by XSL to extract relevant data from the original XML. The so-called model query language is a specific statement that extracts data from XML using the corresponding pattern matching rule expression, that is, the "sieve" mentioned above ".
According to Microsoft's "XSL developer Guide", we can roughly divide the pattern language into three types:
Select mode:
<XSL: For-each>, <XSL: value-of>, and <XSL: Apply-templates>
Test Mode:
<XSL: If> and <XSL: When>
Matching mode:
<XSL: Template>
We will introduce it separately now.
1. Select Mode
The select mode statement extracts data from XML, which is a simple method for getting data. All the tags have a select attribute and select the specific ending name data in XML.
1. <XSL: For-each>
For example, the XML contains the following data:
<Author>
<Name> Xiao Yu </Name>
<Name> Chunhua </Name>
<Name> Qiu Shi </Name>
</Author>
Do we need to read the names of these three authors one by one using the "author/Name" method? Can there be multiple such names? How nice it is to use a procedural statement to read data cyclically!
Right. XSL provides such a program-language statement: <XSL: For-each>
The method for reading the names of the three authors is as follows:
<XSL: For-each select = "author/Name">
......
</XSL: For-each>
Select, as its name implies, can select a unique tag in XML or a type of the same tag, which is called a node set.
Syntax:
<XSL: For-each select = "pattern" Order-by = "sort-criteria-list">
Attribute:
1. Select
The context is queried Based on the XSL style to determine which node sets (meeting the select condition) use this style description. As a simplified representation, if you want to format the display method of a marked content in the document, select can be equal to the tag name of this element. For example, to format the tag xml_mark, it can be expressed as follows:
<XSL: For-each select = "xml_mark">
<! -- Style definition -->
</XSL: For-each>
2. Order-
Separated by semicolons. Add the plus sign (+) before the list element to sort the content of the tag in ascending order, and add the minus sign (-) to sort the content in reverse order. As a simplified representation, the sorting standard list is the sequence of sub-tags specified by the SELECT statement. Each tag is separated.
2. <XSL: value-of>
<XSL: For-each> mode only selects nodes and does not retrieve node values. For example, if a monkey only crawls to a branch of a tree, then <XSL: value-of> to pick the "fruits of victory!
Syntax:
<XSL: value-of select = "pattern"> extract the value of a node.
Attribute:
Select is the XSL style that matches the current context. To put it simply, if you want to insert an XML tag (assuming the xml_mark tag) somewhere in the XSL document, it can be expressed as follows:
<XSL: value-of select = "xml_mark"> </XSL: value-of>
Or
<XSL: value-of select = "xml_mark"/>
Example:
Here, we need to make some modifications to the document (my resume. XML) as an example of the above-mentioned resume. Specifically, we need to refer to the second line:
<? XML-stylesheet type = "text/CSS" href = "resume.css"?>
To:
<? XML-stylesheet type = "text/XSL" href = "resume. XSL"?>
Create a new file: resume. XSL with the following content:
<? XML version = "1.0" encoding = "gb2312"?>
<HTML xmlns: XSL = "http://www.w3.org/TR/WD-xsl">
<Head>
<Title> resume </title>
</Head> <body>
<XSL: For-each select = "resume">
<P/>
<Table border = "1" cellspacing = "0">
<Caption style = "font-size: 150%; font-weight: bold">
Resume
</Caption>
<Tr>
<TH> name </Th> <TD> <XSL: value-of select = "name"/> </TD>
<TH> gender </Th> <TD> <XSL: value-of select = "sex"/> </TD>
<TH> birthday </Th> <TD> <XSL: value-of select = "Birthday"/> </TD>
</Tr>
<Tr>
<TH> skills </Th> <TD colspan = "5"> <XSL: value-of select = "skill"/> </TD>
</Tr>
</Table>
</XSL: For-each>
</Body>
</Html>
After completing these steps, let's take a look at the results of our hard work. How can this problem be solved? Good results. It's cool. Now we make further modifications to the file (my resume. XML:
1. Add a new tag <document> before the tag <resume>;
2. copy and paste the content (including this pair of tags) between <resume> </resume> and end with <document>.
3.use notepad.exe to open the file resume. XSL: Add text after the mark <HTML>: <XSL: For-each select = "document">; add text before the mark
4. open the file (resume. XML) in the browser ). What do you see? Two resumes!
In this way, we can use XML to write documents with separated content and Styles! Of course, XSL files are more complex than common HTML files, but once completed, they can be used to format all similar XML documents.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
