検索
ホームページウェブフロントエンドhtmlチュートリアルXML 関連の知識を徹底的に学ぶ (1)_html/css_WEB-ITnose

XML ファイル形式は長い間使用されてきました。現在では、JSON や YAML などの新しいファイル形式の影響で、彼の人気はそれほど強くありません。しかし、XML は現在でも世界で最も広く使用されているファイル形式です。それを取り巻く概念や知識ポイントもたくさんあります。したがって、やはり総合的に理解する必要があると思います。

XML

XML は eXtensible Markup Language の略で、拡張可能なマークアップ言語です。データを送信および保存するように設計されています。

XML と HTML は似ているように見えるかもしれませんが、設計目的は異なります。

XML はデータの送信と保存に使用され、主にデータの内容に焦点を当てます。

HTML はデータを表示するために使用され、主にデータがどのように見えるかに重点を置いています。

table タグなどの HTML タグは事前に定義されており、ブラウザーはその意味を認識します。

XML タグは事前定義されていません。タグを自分でデザインし、タグの意味を記述する必要があります。 XML 内のタグで XSLT ファイルが使用されていない場合、ブラウザでは単純なテキスト形式でのみ表示されます。

多くの人は、HTML が XML ファイルのサブセットであると考えています。実際、HTML の実装は XML の構文に厳密に従っていないため、この見方は間違っています。たとえば、XML では、各タグに終了タグが必要であること、XML タグでは大文字と小文字が区別されること、XML 内のタグに追加される属性は引用符で囲む必要があることなど、HTML はこれらの構文要件を満たしていません。

XML の例をご覧ください。

book.xml

1234567
<?xml version="1.0" encoding="ISO-8859-1"?> <book>  <name>Effective JavaScript</name>  <category>Program Language</category>  <author>Bowen</author>  <description>This book is about JavaScript Language.</description> </book> 

これは単純な XML ファイルです。最初の行には、XML バージョンとエンコード タイプが記述されています。次はルート ノード ブックで、これには多くの子ノードを含めることができます。

XML 名前空間

XML タグは HTML のように事前に定義されていないため、2 つの XML 内で同じ名前のタグが異なる意味を持つ可能性が非常に高くなります。その場合、XML と他の操作をマージするときに競合が必然的に発生します。解決策は、XML タグに名前空間 (つまり、名前空間) を追加することです。各名前空間はプレフィックスを指定できます。これらのプレフィックスは、同じ名前のタグを区別します。

ここに別の XML ファイルがあるとします。

anotherBook.xml

123456
<?xml version="1.0" encoding="ISO-8859-1"?> <book>  <name>Rework</name>  <page>120</page>  <publishDate>2013-10-08</publishDate> </book> 

これら 2 つの XML ノードを同じ XML ファイルにマージする場合、名前空間を追加しないと競合が発生します。これは、同じ名前のタグが含まれているためです。 、およびその子ノードの構造は同じではありません。次に、それに名前空間を付けてマージします。

combine.xml

1234567891011121314
<root> <ns1:book xmlns:ns1="http://www.huangbowen.net/ns1">  <ns1:name>Effective JavaScript</name>  <ns1:category>Program Language</category>  <ns1:author>Bowen</author>  <ns1:description>This book is about JavaScript Language.</description> </book>  <ns2:book xmlns:ns2="http://www.huangbowen.net/ns2">  <ns2:name>Rework</name>  <ns2:page>120</page>  <ns2:publishDate>2013-10-08</publishDate>  </book> </root> 

xmlnsはxml名前空間の略称です。引用符の後にはタグのプレフィックスが続きます。このプレフィックスは、xmlns="http://www.huangbowen.net/ns1" のように省略できます。これは、プレフィックスなしでタグにデフォルトの名前空間を自動的に適用することと同じです。ネームスペースの URI はネームスペースの一意の識別子を提供するだけであり、XML パーサーは情報を取得するためにこの URI にアクセスしないことに注意してください。多くの企業は、名前空間の関連情報を説明する Web ページとしてこの URI を使用することに慣れています。

XSD

XSD は XML Schema Definition の略で、XML 構造定義言語です。各 XSD ファイルは、XML ファイルの構造定義です。 XML のタグは事前定義されていないため、誰もが独自の XML 構造ドキュメントを作成できます。他の人に自分の標準に従って XML ファイルを作成してもらいたい場合は、XSD ファイルを使用して自分の標準を記述することができます。

これは、この記事のサンプル book.xml ファイルの XSD ファイルです。

book.xsd

12345678910111213
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"  xmlns:xs="http://www.w3.org/2001/XMLSchema">  <xs:element name="book">  <xs:complexType>  <xs:sequence>  <xs:element type="xs:string" name="name"/>  <xs:element type="xs:string" name="category"/>  <xs:element type="xs:string" name="author"/>  <xs:element type="xs:string" name="description"/>  </xs:sequence>  </xs:complexType>  </xs:element> </xs:schema> 

上記からわかるように、実際には、XSD ファイル自体は XML ファイルです。たとえば、各タグは XML 構文に従う必要があります。終了タグ (ルート ノードのみである必要があります) など。

そのスキーマ参照情報を XML ファイルに追加できます。

book.xml

1234567
<?xml version="1.0" encoding="ISO-8859-1"?> <ns1:book xmlns:ns1="http://www.huangbowen.net/ns1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:targetLocation="http://www.huangbowen.net/book.xsd">  <ns1:name>Effective JavaScript</name>  <ns1:category>Program Language</category>  <ns1:author>Bowen</author>  <ns1:description>This book is about JavaScript Language.</description> </book> 

在IDE中,如果你的XML节点没有遵守你引用的Schema中的定义,就会给出错误提醒。

XSLT

XSLT全称为EXtensible Stylesheet Language Transformations。 XSLT用于将XML文档转换为XHTML或其他XML文档。

在讲XSLT之前我们先讲讲XSL。XSL全称为Extensible Stylesheet Language,即可扩展样式表语言。众所周知,CSS是HTML文件的样式表,而XSL则是XML文件的样式表。XSL文件描述了XML文件应该如何被显示。

其实XSL不仅仅是样式表语言,它主要包含3部分:

XSLT - 用来转换XML文档

XPath - 查询和操作XML文档中的节点

XSL-FO - 格式化XML文档

XSLT使用XPath来查找XML中的元素。

XSLT通过一个xml文件来定义源xml文件与目标文件之间的转换关系。该xml文件必须以作为根节点。

对于本文的示例book.xml,如果我们使用浏览器打开显示效果如下。

现在我们创建一个XSLT文件将其转换为一个HTML文件。

book.xsl

12345678910111213141516171819202122232425262728293031
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  <xsl:template match="/">  <html>  <body>  <h2 id="My-Book">My Book</h2>  <table border="1">  <tr>  <td>name</td>  <td><xsl:value-of select="book/name" /></td>  </tr>  <tr>  <td>category</td>  <td><xsl:value-of select="book/category" /></td>  </tr>  <tr>  <td>author</td>  <td><xsl:value-of select="book/author" /></td>  </tr>  <tr>  <td>description</td>  <td><xsl:value-of select="book/description" /></td>  </tr>  </table>  </body>  </html> </xsl:template>  </xsl:stylesheet> 

然后我们在book.xml文件中加入对这个XSLT文件的引用。

book.xml

12345678
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="book.xsl"?> <book>  <name>Effective JavaScript</name>  <category>Program Language</category>  <author>Bowen</author>  <description>This book is about JavaScript Language.</description> </book> 

接下来我们再用浏览器打开book.xml文件,发现显示变成了这样。是不是很神奇?

注意如果你使用chrome打开该book.xml文件,请设置chrome的--allow-file-access-from-files属性,这样chrome才允许加载本地的xsl文件。解决方案看这里:http://stackoverflow.com/questions/3828898/can-chrome-be-made-to-perform-an-xsl-transform-on-a-local-file

OK,这篇文章讲的够多了,下篇接着讲XPath,XML to Object以及XML文档格式与近来风头强劲的JSON、YAML格式的比较。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScript:例と実用的なアプリケーションHTML、CSS、およびJavaScript:例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1)ラング属性をタグに設定します。 2)多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3)「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか?HTML属性の目的は何ですか?May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか?HTMLでリストを作成するにはどうすればよいですか?May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists:1)forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2)

HTMLアクション:Webサイト構造の例HTMLアクション:Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1)Webサイト構造などのタグを使用し、定義します。 2)例は、ブログとeコマースのウェブサイトの構造を示しています。 3)誤ったラベルネスティングなどの一般的な間違いを避けてください。 4)HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか?HTMLページに画像を挿入するにはどうすればよいですか?May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1)usealttextforaccessibilityandseo.2)emplencesrcsetForresponsiveimages.3)applylazyloadingwithloading = "lazy" tooptimizeperformance.4)

HTMLの目的:Webブラウザがコンテンツを表示できるようにするHTMLの目的:Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか?Web開発にとってHTMLタグが重要なのはなぜですか?May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1)theydefineLayout、semantics、and-interactivity.2)semanticagsimprovecessibility.3)opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。