conteúdo incorporado HTML5

A incorporação de conteúdo no documento HTML pode tornar sua página mais rica.

O uso de elementos IMG pode ser incorporado nas imagens nos documentos HTML.

1) SRC: mostre o URL da imagem;

2) ALT: texto do equipamento;

3) Altura: a altura da imagem;

4) Largura: a largura da imagem;

5) UsoMemap: Defina a imagem como um mapeamento de imagem do cliente;

6) ISMAP: A imagem é definida como o mapeamento da imagem do servidor.

O seguinte apresenta especificamente a operação da imagem.

Uma imagem pode ser incorporada às propriedades SRC e ALT.

 <Img src = triathlon.png <img src = triathlon.png </a>

Dessa forma, depois de clicar na imagem, o navegador será navegado para o URL especificado pela propriedade HREF do elemento pai A. O atributo ismap para o elemento IMG cria um diagrama de resposta de partição ao lado do servidor:

 <A href = otherpage.html> <img src = triathlon.png </a>

Dessa forma, a posição dos cliques da imagem será anexada ao URL.

http: //bjpowernode/listings/otherpage.html?

O diagrama de resposta da partição do servidor geralmente significa que o servidor responde aos diferentes cliques do usuário na imagem na imagem.

O diagrama de resposta de partição do cliente suporta o usuário para navegar no navegador para diferentes URL, clicando em diferentes áreas de um determinado diagrama. Elementos da área.

O papel dos elementos do mapa é definir um mapeamento de imagem do cliente. Os elementos do mapa geralmente contêm atributos:

1) ID: ele deve definir o logotipo exclusivo para o rótulo do mapa;

2) Nome: Opcional, nome.

O elemento de área define a área no mapeamento da imagem, que é sempre aninhada no elemento do mapa. Os atributos do elemento de área são divididos em duas categorias.

1) HREF: O URL de que o navegador deve ser carregado após a clicada desta área;

2) ALT: conteúdo de substituição, atributos correspondentes ao elemento IMG;

3) Alvo: Exibir o contexto de navegação do URL, os atributos correspondentes do elemento base;

4) Rel: descreva a relação entre o documento atual e o documento de destino e os atributos correspondentes do elemento Link;

5) Mídia: Atributos médios e correspondentes do elemento de estilo;

6) Hreflang: o idioma do documento de destino;

7) Tipo: MIME TIPO DE DOCUMENTO DE TARVEIRO.

A segunda categoria contém atributos: Shape and Coords Atributos, que são usados ​​para indicar cada área de imagem que os usuários podem clicar. O valor do atributo de forma é o seguinte:

1) Rect: Representa uma área retangular. O atributo Coords correspondente deve ser composto por quatro separações inteiras (a, b, c, d) separadas por uma vírgula: a representa o lado esquerdo da borda esquerda e retângulo da imagem; do retângulo; D representa o lado inferior e o lado inferior do retângulo da imagem;

2) Círculo: representa uma área circular. Os atributos de coordenados devem ser compostos por três números inteiros separados por vírgula (a, b, c): a representa a distância da borda esquerda da imagem ao coração redondo;

3) Poly: representa um polígono. Os atributos de coordenação devem conter pelo menos seis números inteiros separados por vírgula, cada par de números representa um dos ápice do polígono;

4) Padrão: A área padrão, que cobre a imagem inteira. Não há necessidade de fornecer valor de coordenação.

O seguinte é um exemplo:

 <p> <img src = triathlon.png usemap =#mymap <nome do mapa = mymap> <rea href = swimpage.html shape = coords rety = 3,5,68,62 ml de forma = coordas de ret = 70,130,62 <rea href = outrospage.html forma = padrão </pap>

O script acima define que, se o usuário clicar na parte de nadar, o navegador será navegado para o swimpage.html

O elemento iframe pode ser incorporado em outro documento no documento HTML existente. O atributo suportado por este elemento é o seguinte:

1) SRC: URL do documento exibido no iframe;

2) srcdoc: especifica o conteúdo HTML da página exibida nas páginas exibidas no iframe;

3) Nome: O nome do iframe pode ser usado no alvo do contexto e outros elementos (como a, forma, botão, entrada e base).

4) Largura: defina a largura do iframe;

5) Altura: padrão a altura do iframe;

6) Sandbox: O limite adicional do conteúdo no iframe, o valor do suporte inclui:

----: aplique todas as restrições abaixo;

--- Allow-Some-orgin: Permitir que o conteúdo do IFRAME seja considerado a mesma fonte do restante do documento;

--- Navigação de permitir-se-top: permita o link para o contexto de navegação de nível superior, para que você possa substituir o documento inteiro atual por outro documento ou criar um novo rótulo e janela;

7) Semelhante: instruiu o navegador a exibir o conteúdo do iframe, como um componente geral do documento HTML principal; O uso deste atributo é o seguinte (a maioria dos navegadores deste atributo ainda não é suportada):

 <iframe src = Demo_iframe.htm sem costura> </frame>

Abaixo está um exemplo completo de iframe:

 <weweler> <h1> Coisas que eu gosto </h1> <dav> <ul> <li> <a href = frutits.html Target = myframe> frutas ilike </a> </li> <li> <a href = Atividades.html Target = MyFrame> Atividades iLike </a> </li> </ul> </av> </weweler> <iframe name = myframe width = 300 altura = 100/>

Os elementos do objeto e os elementos de incorporação são usados ​​para expandir a capacidade do navegador e adicionar suporte a plug -in.

O elemento incorporado define o conteúdo incorporado, os atributos de suporte são os seguintes:

1) Altura: defina a altura do conteúdo incorporado;

2) SRC: o URL do conteúdo;

3) Tipo: Defina o tipo MIME de conteúdo incorporado para que o navegador saiba como lidar com isso;

4) Largura: Defina a largura do conteúdo incorporado.

Quaisquer outros atributos que você aplicar serão considerados como um parâmetro de um plug -in ou conteúdo. Veja o exemplo abaixo:

 <incorporação src = http://www.youtube.com/v/qza60hcA9s?

O atributo DesfullScreen é usado acima para definir se deve ativar a função de visualização de tela cheia.

Os elementos do objeto também são usados ​​para definir um objeto incorporado, como: imagens, áudio, vídeo, pdf, flash, etc. Os elementos do objeto podem conter conteúdo sobressalente, que é exibido quando o conteúdo especificado não está disponível.

 <width do objeto = 560 altura = 349 dados = http: // titan/myiimaginaryfile> <nome do param = Valor da tela de perito = true/> </b> Não podemos exibir conteúdo </fess>

Se os recursos referenciados pelo atributo de dados não existirem, o conteúdo no elemento de objeto será exibido.

O elemento de progresso representa a barra de progresso. Os atributos de suporte incluem:

1) MAX: indica o valor máximo da tarefa;

2) Valor: Defina o progresso atual, entre os valores dos atributos 0 e Max;

3) Forma: uma ou mais formas que pertencem.

Quando o atributo max é omitido, o intervalo é de 0 a 1 e o atributo de valor usa números de ponto de flutuação para representar o progresso, como 0,3 indica 30%.

 <ID do progresso = MyProgress Value = 10 MAX = 100> </roids> <p> <botão Tipo = Valor do botão = 30> 30%</button> <Button Type = Button = 60> 60%</butt on> < Tipo de botão = Valor do botão = 90> 90%</butão> </p> <cript> varons varons = document.getElementsByTagName ('Botão'); .Length;

O exemplo dado acima demonstra os diferentes valores para exibir um botão diferente para exibir valores diferentes.

O elemento do medidor mostra um certo valor dentro de um determinado intervalo. Os atributos de suporte incluem:

1) Min e Max: Especifique o intervalo de apenas o escopo, você pode usar pontos flutuantes;

2) Baixo: especifique a faixa de baixo valor, a propriedade sob ele é considerada muito baixa;

3) Alta: especifique a faixa de alto valor, todos os valores acima dela são considerados muito altos;

4) ideal: especifique o melhor valor;

5) Valor: deve, o valor atual da medição;

6) Forma: uma ou mais formas que pertencem.

 <ID do medidor = Valor do myMeter = 90 min = 10 max = 100 baixa = 40 alta = 80ptimum = 60> </meter> <p> <botão Tipo = 30> 30%</button> utton Valor = 60> 60%< /Button> <Botão Tipo = Valor do botão = 90> 90%</botão> </p> <cript> VAR Botões = Document.getElementsByTagName); = 0;

Quando o valor do elemento do medidor é muito baixo e muito alto, e o melhor valor, o navegador os apresentará de maneiras diferentes