XML 関連の知識を徹底的に学ぶ (1)_html/css_WEB-ITnose
XML ファイル形式は長い間使用されてきました。現在では、JSON や YAML などの新しいファイル形式の影響で、彼の人気はそれほど強くありません。しかし、XML は現在でも世界で最も広く使用されているファイル形式です。それを取り巻く概念や知識ポイントもたくさんあります。したがって、やはり総合的に理解する必要があると思います。
XMLXML は 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 を使用することに慣れています。
XSDXSD は 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中的定义,就会给出错误提醒。
XSLTXSLT全称为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>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格式的比较。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
