от Шарлийн Хан

За да видите XML данни като част от уеб страница, можете да използвате XSLT; браузърите не предоставят тази възможност сами по себе си.

Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

XML е език, използван за структуриране, съхраняване и обмен на данни. XSLT е друг език, който ви позволява да трансформирате вашите XML данни в други формати, като HTML.

Можете да използвате XSLT за показване на XML данни на HTML уеб страница. Използването на XML и XSLT за показване на вашите данни може да бъде полезно, тъй като ви позволява да структурирате данните по начин, който има смисъл за вашите специфични нужди.

Как да добавите примерни данни към XML файл

За да покажете XML данни на уеб страница, първо трябва да създадете XML файла и да добавите данни към него.

  1. Създайте нов файл, наречен data.xml.
  2. Вътре в XML файла декларирайте кодирането и XML версията:
     1.0 UTF-8?>
  3. Свържете XML файла с XSL файл със стилова таблица, който ще създадете в по-късна стъпка.
     текст/xsl xmlstylesheet.xsl?>
  4. Добавете данни към XML файла. XML съдържа структурирани данни и съхранява всяка точка от данни в отделен таг. Този пример включва основен таг, наречен игри. Вътре в игри етикет, съхранявайте всяка отделна игра в нейната собствена игра етикет. Съхранявайте данни за всяка игра, като например име и разработчик в отделни тагове.
     1.0 UTF-8?>
    текст/xsl xmlstylesheet.xsl?>
    <игри>
    <игра>
    <име>Последният от нас, част IIиме>
    <разработчик>Непослушно кучеразработчик>
    игра>
    <игра>
    <име>Призракът на Цушимаиме>
    <разработчик>Sucker Punch Productionsразработчик>
    игра>
    <игра>
    <име>Death Strandingиме>
    <разработчик>Kojima Productionsразработчик>
    игра>
    игри>

Как да използвате XSLT за четене на данни от XML файл

Създайте нов XSL файл, за да преминете през всяка точка от данни в XML страницата и да покажете данните.

  1. В същата папка като вашия XML файл създайте нов файл, наречен xmlstylesheet.xsl.
  2. Във файла декларирайте XSL версията и добавете основната структура на XSL тагове:
     1.0 UTF-8?>
    <xsl: таблица със стиловеверсия="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
    // Вашият код тук
    xsl: таблица със стилове>
  3. Вътре в основния XSL таг добавете a шаблон етикет. Това е мястото, където можете да добавите персонализиран HTML код за показване и стилизиране на вашите XML данни.
    <xsl: шаблонсъвпада="/">
    <html>
    <тяло>
    // Вашият HTML код тук
    тяло>
    html>
    xsl: шаблон>
  4. Вътре в етикета body използвайте xsl: за всеки селектор на етикети. Това ще действа като for-цикъл за преминаване през всеки игра етикет, вложен под игри етикет.
    <xsl: за всекиизберете="игри/игра">

    xsl: за всеки>
  5. Вътре в цикъла for-each покажете името и точките с данни за програмиста, като използвате xsl: стойност на селектор на етикети.
    <xsl: стойност наизберете="име" />
    <xsl: стойност наизберете="разработчик" />

Как да показвате данни на HTML уеб страница

Няма да можете да отворите XSLT или XML файла директно в браузъра, за да видите данните като част от уеб страница. Създайте нов HTML файл и изобразете данните с помощта на iframe етикет.

  1. В същата папка като вашите XML и XSL файлове създайте нов файл, наречен index.html.
  2. Добавете основната структура на HTML файл. Ако не сте използвали HTML преди, можете да освежите въвеждащи HTML концепции.
    html>
    <html>
    <глава>
    <заглавие>Пример за XML и XSLTзаглавие>
    глава>
    <тяло>


    тяло>
    html>
  3. Вътре в тяло етикет, използвайте an iframe етикет за връзка към XML файла и XSL файла:
    <h1>Пример за XML и XSLTh1>
    <стр>Следното съдържание се генерира от XML файл:стр>
    <iframesrc="data.xml"xslt="xmlstylesheet.xsl">iframe>
  4. Създайте нов файл, наречен styles.css.
  5. Във файла добавете малко CSS, за да оформите вашата уеб страница. Чувствайте се свободни да промените вашия CSS, като използвате други интересни CSS съвети и трикове.
    html,
    тяло {
    височина: 100%;
    марж: 0;
    }

    тяло {
    дисплей: гъвкав;
    justify-content: център;
    подравняване на елементи: център;
    flex-direction: колона;
    }

    p {
    margin-bottom: 24px;
    }

  6. Свържете вашия HTML файл с CSS стила, като добавите следното към HTML head тага.
    <връзкаотн="стилов лист"href="styles.css">
  7. Отворете вашия HTML файл с помощта на браузър, за да видите своите XML данни. Някои браузъри не поддържат XSLT, но някои браузъри като Firefox поддържат.

Показване на данни в HTML уеб страници

Има много начини за показване на данни в HTML уеб страници, XML и XSLT са едни от тях. Чувствайте се свободни да проучите другите начини, по които можете да направите това, като например съхраняване и показване на въведеното от потребителя чрез JavaScript.

Абонирайте се за нашия бюлетин

Коментари

ДялTweetДялДялДял
копие
електронна поща
Дял
ДялTweetДялДялДял
копие
електронна поща

Връзката е копирана в клипборда

Свързани теми

  • Програмиране
  • HTML
  • CSS
  • Уеб разработка

За автора

Шарлийн Хан (Публикувани 76 статии)

Шей работи на пълен работен ден като софтуерен разработчик и обича да пише ръководства, за да помогне на другите. Тя има бакалавърска степен по ИТ и предишен опит в осигуряване на качество и обучение. Шей обича игрите и свиренето на пиано.