Directorio de artículos
Uno, etiqueta cerrada y etiqueta vacía
Desde la perspectiva del cierre, las etiquetas en HTML se pueden dividir en etiquetas cerradas y etiquetas vacías. La mayoría de las etiquetas en HTML son etiquetas cerradas y las otras pocas son etiquetas vacías.
Las etiquetas vacías comunes son
- <entrada />
- <img /> 、
- <área /> 、
- <base /> 、
- <enlace /> 等。
2. Características de posición (elementos a nivel de bloque, elementos en línea, elementos de bloque a nivel de línea)
Las características de ubicación se clasifican y los elementos se dividen en tres categorías: elementos a nivel de bloque, elementos en línea y elementos de bloque a nivel de línea (también llamados elementos de línea a nivel de bloque).
Cuadra
**Características: **
- Puede establecer los márgenes de ancho, alto, interior y exterior;
- Línea exclusiva (es decir, hay saltos de línea antes y después);
- Si el elemento a nivel de bloque no establece el ancho y el alto, el ancho se predetermina al ancho del elemento principal . La altura se llena automáticamente de acuerdo con el tamaño del contenido .
Elementos comunes a nivel de bloque:
div, p, h1, h2 ... hn, ol, ul, dl, li, form, table
Elementos de nivel de línea (en línea)
Características:
- El ancho, la altura, los márgenes interior y exterior superior e inferior no se pueden configurar. (Los ajustes de margen interior y exterior izquierdo y derecho son válidos)
- Su ancho y alto se rellenan automáticamente con su contenido .
- Otros elementos de nivel de fila están en la misma línea ;
Elementos comunes a nivel de fila:
- un (ancla)
- b (negrita)
- yo (cursiva)
- span (contenedor en línea de uso común para definir el bloque dentro del texto)
- etiqueta (etiqueta de definición de elemento de entrada (marca))
Bloque en línea
Características:
- Puede establecer el ancho y el alto, los márgenes interior y exterior;
- Pueden ser otros elementos en línea, línea de coexistencia de elementos en línea ;
Elementos en línea comunes:
entrada, img
En tercer lugar, la transformación entre elementos
Puede cambiar la visualización de los elementos en el estilo en línea o en el estilo CSS para convertir los tres elementos.
- display: block; (convierte el elemento en un elemento a nivel de bloque)
- display: inline; (convierte el elemento en un elemento de nivel de línea)
- display: inline-block; (cambia el elemento a un elemento de bloque de nivel de línea)
Cuatro elementos reemplazables
¿Qué son los elementos reemplazables? Como sugiere el nombre, es el elemento que será reemplazado.
<img src=xxx.jpg>
No escribimos nada en la etiqueta img. El navegador descarga la imagen dada por el atributo src y reemplaza la etiqueta img con el recurso de imagen, y el navegador no conoce el ancho y alto de la imagen antes de descargar. Por lo tanto, el elemento reemplazable es especial, y su ancho y alto están determinados por el contenido que carga. (Por supuesto que CSS puede anular su estilo)
ejemplo
<img src="xxx.jpg">
Si la imagen se muestra en la página, es el ancho y el alto de la imagen en sí.
<img width="80" height="80" src="xxx.jpg">
En este momento, el elemento se muestra con un ancho y alto de 80 píxeles.
Si usamos CSS para sobrescribir su estilo:
img {
width: 60px;
height: 60px;
}
La visualización de este elemento es de 60 píxeles.
可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
Los elementos reemplazables típicos son:
-
<iframe>
-
<video>
-
<embed>
-
<img>
Algunos elementos se tratan como elementos reemplazables solo en determinadas circunstancias, por ejemplo: -
<opción>
-
<audio>
-
<lienzo>
-
<objeto>
-
La
especificación HTML <applet> también dice que el elemento <input> se puede reemplazar, porque el elemento <input> del tipo "image" se reemplaza como un <img>. Pero otras formas de elementos de control, incluidos otros tipos de elementos <input>, se enumeran explícitamente como elementos no reemplazados.
Enlace a este artículo: https://blog.csdn.net/qq_39903567/article/details/115283580