
Un elemento html figure es contenido independiente por derecho propio, y generalmente se usa junto con un signo (a través de la etiqueta <figcaption>
), y generalmente se refiere a una unidad indivisible de información.
Etiqueta html figure
Clasificaciones de contenido | Elemento organizativo. |
---|---|
Contenido permitido | Contenido reglamentario seguido de elemento <figcaption> , elemento <figcaption> seguido de contenido reglamentario o simplemente contenido reglamentario. |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte contenido normativo. |
Interfaz DOMO | HTMLElement |
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
8 | 4.0 | Soportado | 5.1 | 11.10 |
Características
En este elemento se pueden utilizar propiedades globales.
Descripción de Uso
- Un elemento
<figure>
suele representar una imagen, gráfico, diagrama, código fuente, etc. Referido dentro del contenido principal de la página, pero el elemento se puede mover a otra parte del documento oa una extensión sin que el contenido principal se vea afectado. - El elemento no aparece
<figure>
en el diseño general del documento. - La bandera se agrega al elemento
<figure>
creando el elemento<figcaption>
dentro de él, y es su primer o último hijo.
Ejemplos de uso del html figure
Ver Imagen
Este ejemplo usa el elemento <figure>
dos veces, la primera vez muestra un logotipo y la segunda vez muestra un logotipo con un banner de texto:
<! - Solo logotipo -> < figure > < img src = "logo-bigcode.jpg" alt = "Logo de BigCode" > </ figure > < p > </ p > <! - Logotipo con banner de texto -> < figure > < img src = "logo-bigcode.jpg" alt = "Logotipo de BigCode" > < figcaption > Esta icon es el logo de BigCode </ figcaption > </ figure >
Mostrar Código
Para este ejemplo, el elemento <figure>
(con un banner a través del elemento <figcaption>
) se utilizará para mostrar el código:
< figure > < figcaption > obtener información del navegador </ figcaption > < pre > function NavigatorExample () { var txt; txt = "Browser CodeName:" + navigator.appCodeName; txt + = "Nombre del navegador:" + navigator.appName; txt + = "Versión del navegador:" + navigator.appVersion; txt + = "Cookies habilitadas:" + navigator.cookieEnabled; txt + = "Plataforma:" + navigator.platform; txt + = "Encabezado de agente de usuario:" + navigator.userAgent; } </ pre > </ figure >
Ver Cita
Este ejemplo usa el elemento <figure>
para mostrar una cita, con el elemento <cite>
para indicar la fuente del nombre de la cita dentro del elemento <figcaption>
:
< figure > < figcaption > < cite > Informática </ cite > </ figcaption > < q > Si el refinamiento es el proceso de eliminar errores, entonces la programación es el proceso de agregar errores. </ q > </ figure >
Formato predeterminado
La mayoría de los navegadores muestran el elemento <figure>
estableciendo la propiedad display
en block
, y estableciendo el valor de margin-top
y margin-bottom
to 1em
; el valor de margin-left
y margin-right
to 40px
:
figure { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; }
- Introducción al Lenguaje de Programación HTML
- Elemento HTML
- Elemento base en HTML
- Elemento head en HTML
- Elemento link en HTML
- Elemento meta en HTML
- Elemento style en HTML
- Elemento title en HTML
- Elemento body en HTML
- Elemento address en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento footer en HTML
- Elementos h1 al h6 en HTML
- Elemento header en HTML
- Elemento section en HTML
- Elemento blockquote en HTML
- Elemento nav en HTML
- Elemento dd en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento hr en HTML
- Elemento li en HTML
- Elemento main en HTML
- Resumen General de Listas en HTML
- Elemento ol en HTML
- Elemento p en HTML
- Descripción de las Etiquetas HTML
- Qué son los Atributos HTML
- Elemento ul en HTML
- Elemento a en HTML
- Elemento pre en HTML
- El Texto en HTML
- Elemento abbr en HTML
- Elemento b en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento br en HTML
- Elemento cite en HTML