mozilla
Os seus resultados da pesquisa

    <figure>

    Introduced in HTML5

    Resumo

    O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda (<figcaption>), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

    Notas de uso:

    • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
    • Uma legenda pode ser associada com o elemento <figure> inserindo o elemento <figcaption>  dentro dele (no inicio ou no fim).

    Atributos

    Este elemento só inclui os atributos globais.

    Exemplos

    Exemplo 1

    <!-- Apenas uma imagem-->
    <figure>
    	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
    </figure>
    <p></p>
    <!-- Imagem com legenda -->
    <figure>
    	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">	
    	<figcaption>Legenda para a imagem impressionante</figcaption>
    </figure>
    <p></p>
    
    MDN Logo

     

    MDN Logo

    Imagem1. MDN Logo

     

    Example 2

        <figure>
          <figcaption>Obtenha os detalhes do browser usando navigator</figcaption>
            <pre>
              function NavigatorExample(){
              var txt;
              txt = "Browser CodeName: " + navigator.appCodeName;
              txt+= "Browser Name: " + navigator.appName;
              txt+= "Browser Version: " + navigator.appVersion ;
              txt+= "Cookies Enabled: " + navigator.cookieEnabled;
              txt+= "Platform: " + navigator.platform;
              txt+= "User-agent header: " + navigator.userAgent;
              }            
            </pre>
    

    Obtenha os detalhes do browser usando navigator

              function NavigatorExample(){
              var txt;
              txt = "Browser CodeName: " + navigator.appCodeName;
              txt+= "Browser Name: " + navigator.appName;
              txt+= "Browser Version: " + navigator.appVersion ;
              txt+= "Cookies Enabled: " + navigator.cookieEnabled;
              txt+= "Platform: " + navigator.platform;
              txt+= "User-agent header: " + navigator.userAgent;
              }            
     

    Exemplo 3

    <figure>
          <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
          <p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p>
        </figure>
    
    
    
    Edsger Dijkstra :-

    "Se o debugging é o processo de remoção de bugs de software, 
    então programação deve ser o processo de colocá-los"

    Especificações

    Especificação Status Comentário
    WHATWG HTML Living Standard Living Standard  
    HTML5 Candidate Recommendation  

    Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Suporte Básico 8 4.0 (2.0) 9.0 11.10 5.1
    Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Suporte Básico 3.0 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

    Veja Também

    Etiquetas do documento e colaboradores

    Contribuíram para esta página: Graffitti, teoli
    Última atualização por: teoli,