En el idioma XHTML, todos sabemos que la etiqueta UL contiene Li, la etiqueta DL contiene reglas DT y DD-Nacting para estas etiquetas fijas son muy claras. Sin embargo, hay muchas etiquetas que son independientes y no están unidas, como H1, Div, P ... Entonces, ¿cuáles son las reglas de anidación para estas etiquetas? Hablemos de este tema hoy.
Cuando se trata de las reglas de anidación de las etiquetas XHTML, primero debemos saber que hay dos tipos de etiquetas XHTML, una se llama elemento de bloque , y el otro se llama elemento en línea (en línea, que muchas personas lo llaman: en línea, en línea, nivel de línea, etc.).
Los estándares de división para elementos de nivel de bloque y elementos integrados son muy simples. Pon las siguientes dos líneas de código en la etiqueta del cuerpo:
<Div style = border: 1px sólido rojo;> div1 </div>
<Div style = border: 1px sólido rojo;> div2 </div>
Efecto de representación del navegador:
Div1Div2Los dos divs presentados en la página ocupan dos filas de espacio. A menos que se les permita flotar o hacer otras configuraciones, nadie está uno al lado del otro. Todos ocupan sus propias hileras de espacios con demasiada dotación. Si ve una determinada etiqueta que tiene este fenómeno, puede llamarla: elemento de bloque (bloque) ;
Luego coloque las siguientes dos líneas de código en la etiqueta del cuerpo:
<span style = border: 1px sólido rojo;> span1 </span>
<span style = border: 1px sólido rojo;> span2 </span>
Efecto de representación del navegador:
span1 span2
Esta vez, dos tramos están organizados uno al lado del otro, y son amigables y amigables, amigables y armoniosos ... para etiquetar comportamientos como este, podemos llamarlos: elementos en línea ;
La diferencia entre elementos de nivel de bloque y elementos integrados: · Los elementos de nivel de bloque generalmente se utilizan para construir arquitectura del sitio web, diseño y contenido ... Estos trabajos grandes son elementos de nivel de bloque, que incluyen las siguientes etiquetas:div, ul, li, dl, dt, dd, h1 ~ h6, p, dirección ...
· Los elementos en línea generalmente se usan en ciertos detalles o partes del contenido del sitio web para enfatizar y distinguir estilos, superíndices, subíndices, puntos de anclaje, etc. Las siguientes etiquetas son elementos incrustados:a, span, fuerte, sub, sup, img ...
· Los elementos de bloque y los elementos integrados se pueden convertir entre sí , y el código de conversión es el siguiente:Pantalla: bloque; /* Convertir al elemento de bloque*/
Pantalla: en línea; /* Convertir a un elemento incrustado*/
· Las reglas de llamadas para CSS entre elementos de bloque y elementos integrados son diferentes (este artículo analiza la anidación de etiquetas, por lo que no explicaré este punto de conocimiento).Después de simplemente comprender los elementos de bloque y los elementos integrados, puede enumerar las reglas de anidación de las etiquetas XHTML :
1. Un elemento de bloque puede contener elementos en línea o ciertos elementos de bloque, pero un elemento en línea no puede contener elementos de bloque. Solo puede contener otros elementos en línea :<div> <h1> </h1> <p> </p> </div> - sí
<a href =#> <span> </span> </a> - sí
<span> <div> </div> </span> - incorrecto
2. Los elementos de nivel de bloque no se pueden colocar en <p> :<p> <ol> <li> </li> </ol> </p> - incorrecto
<p> <div> </div> </p> - incorrecto
3. Hay varios elementos especiales de nivel de bloque que solo pueden contener elementos integrados y no pueden contener elementos de nivel de bloque. Estas etiquetas especiales son:H1, H2, H3, H4, H5, H6, P, Dt.
4. La etiqueta Div se puede incluir en LI : este artículo no necesita aparecer por separado, pero muchas personas en Internet tienen algunas dudas sobre esto, por lo que lo explicaré brevemente aquí:Las etiquetas Li y Div son contenedores para cargar contenido, con igual estado y sin distinción entre niveles (por ejemplo: H1 y H2 con jerarquía estricta^_^). Debe saber que la etiqueta Li incluso puede acomodar a su padre u ol. ¿Por qué algunas personas piensan que Li no puede acomodar el próximo div? No tomes Li tan tacaño, no mires a Li tan delgado como es, en realidad Li tiene una gran mente ...
5. Los elementos de nivel de bloque y los elementos de nivel de bloque son paralelos, y los elementos en línea y los elementos en línea son paralelos:<div> <h2> </h2> <p> </p> </div> - sí
<div> <a href =#> </a> <span> </span> </div> - sí
<div> <h2> </h2> <span> </span> </div> - incorrecto