Para exibir dados XML como parte de uma página da Web, você pode utilizar XSLT; os navegadores não fornecem esse recurso por conta própria.
XML é uma linguagem usada para estruturar, armazenar e trocar dados. XSLT é outra linguagem que permite transformar seus dados XML em outros formatos, como HTML.
Você pode usar XSLT para exibir dados XML em uma página da Web HTML. Usar XML e XSLT para exibir seus dados pode ser útil, pois permite que você estruture os dados de uma forma que faça sentido para suas necessidades específicas.
Como adicionar dados de exemplo a um arquivo XML
Para exibir dados XML em uma página da Web, primeiro você precisa criar o arquivo XML e adicionar dados a ele.
- Crie um novo arquivo chamado dados.xml.
- Dentro do arquivo XML, declare a codificação e a versão do XML:
1.0 UTF-8?> - Vincule o arquivo XML a um arquivo de folha de estilo XSL, que você criará em uma etapa posterior.
texto/xsl xmlstylesheet.xsl?> - Adicione dados ao arquivo XML. XML contém dados estruturados e armazena cada ponto de dados em uma tag separada. Este exemplo inclui uma tag raiz chamada jogos. Dentro de jogos tag, armazene cada jogo individual dentro de seu próprio jogo marcação. Armazene dados para cada jogo, como o nome e desenvolvedor em etiquetas separadas.
1.0 UTF-8?>
texto/xsl xmlstylesheet.xsl?>
<jogos>
<jogo>
<nome>O Último de Nós Parte IInome>
<desenvolvedor>cão impertinentedesenvolvedor>
jogo>
<jogo>
<nome>fantasma de tsushimanome>
<desenvolvedor>Sucker Punch Produçõesdesenvolvedor>
jogo>
<jogo>
<nome>Death Strandingnome>
<desenvolvedor>Kojima Productionsdesenvolvedor>
jogo>
jogos>
Como usar XSLT para ler dados do arquivo XML
Crie um novo arquivo XSL para percorrer cada ponto de dados na página XML e exibir os dados.
- Na mesma pasta do seu arquivo XML, crie um novo arquivo chamado xmlstylesheet.xsl.
- Dentro do arquivo, declare a versão XSL e adicione a estrutura básica da tag XSL:
1.0 UTF-8?>
<xsl: folha de estiloversão="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Seu código aqui
xsl: folha de estilo> - Dentro da tag XSL principal, adicione um modelo marcação. É aqui que você pode adicionar código HTML personalizado para exibir e estilizar seus dados XML.
<xsl: modelocorresponder="/">
<html>
<corpo>
// Seu código HTML aqui
corpo>
html>
xsl: modelo> - Dentro da tag body, use o xsl: para-cada seletor de tags. Isso funcionará como um loop for para percorrer cada jogo tag aninhada abaixo da jogos marcação.
<xsl: para-cadaselecionar="jogos/jogo">
xsl: para-cada> - Dentro do loop for-each, exiba o nome e os pontos de dados do desenvolvedor, usando o xsl: valor-de seletor de tags.
<xsl: valor-deselecionar="nome" />
<xsl: valor-deselecionar="desenvolvedor" />
Como exibir dados em uma página da Web HTML
Você não poderá abrir o arquivo XSLT ou XML diretamente no navegador para visualizar os dados como parte de uma página da web. Crie um novo arquivo HTML e renderize os dados usando um iframe marcação.
- Na mesma pasta que seus arquivos XML e XSL, crie um novo arquivo chamado index.html.
- Adicione a estrutura básica de um arquivo HTML. Se você nunca usou HTML antes, você pode retocar conceitos introdutórios de HTML.
html>
<html>
<cabeça>
<título>Exemplo de XML e XSLTtítulo>
cabeça>
<corpo>
corpo>
html> - Dentro de corpo marca, use um iframe tag para vincular ao arquivo XML e ao arquivo XSL:
<h1>Exemplo de XML e XSLTh1>
<p>O seguinte conteúdo é gerado a partir de um arquivo XML:p>
<iframeorigem="dados.xml"xslt="xmlstylesheet.xsl">iframe> - Crie um novo arquivo chamado estilos.css.
- Dentro do arquivo, adicione algum CSS para estilizar sua página da web. Sinta-se à vontade para modificar seu CSS usando outros recursos interessantes Dicas e truques de CSS.
html,
corpo {
altura: 100%;
margem: 0;
}corpo {
exibição: flexível;
justificar-conteúdo: centro;
itens de alinhamento: centro;
flex-direction: coluna;
}p {
margem inferior: 24px;
} - Vincule seu arquivo HTML ao estilo CSS adicionando o seguinte à tag head do HTML.
<linkrele="folha de estilo"href="estilos.css"> - Abra seu arquivo HTML usando um navegador para visualizar seus dados XML. Alguns navegadores não suportam XSLT, mas alguns navegadores como o Firefox suportam.
Exibir dados em páginas da Web HTML
Existem muitas maneiras de exibir dados em páginas da Web HTML, sendo XML e XSLT uma delas. Sinta-se à vontade para explorar outras maneiras de fazer isso, como armazenar e exibir a entrada do usuário usando JavaScript.