Análise das regras de nidificação para tags XHTML

No idioma XHTML, todos sabemos que a tag UL contém Li, a tag DL contém regras de Necking DT e DD para essas tags fixas são muito claras. No entanto, existem muitas tags independentes e não estão ligadas, como H1, Div, P ... Então, quais são as regras de nidificação para essas tags? Vamos falar sobre este tópico hoje.

Quando se trata das regras de ninho das tags XHTML, devemos primeiro saber que existem dois tipos de tags xhtml, um é chamado de elemento de bloco e o outro é chamado de elemento embutido (embutido, que muitas pessoas chamam: embutido, embutido, nível de linha etc.).

Os padrões de divisão para elementos no nível do bloco e elementos incorporados são muito simples. Coloque as duas linhas de código a seguir na etiqueta corporal:

<div estilo = borda: 1px vermelho sólido;> div1 </div>

<div estilo = borda: 1px vermelho sólido;> div2 </div>

Efeito de renderização do navegador:

Div1div2

Os dois divs apresentados na página ocupam duas fileiras do espaço. A menos que eles possam flutuar ou fazer outras configurações, ninguém fica próximo um do outro. Todos eles ocupam suas próprias fileiras de espaços muito dominadoras. Se você vir uma determinada tag tendo esse fenômeno, pode chamá -lo: elemento de bloco (bloco) ;

Em seguida, coloque as duas linhas de código a seguir na etiqueta corporal:

<Span Style = Border: 1px Solid Red;> Span1 </span>

<span style = borda: 1px Solid Red;> span2 </span>

Efeito de renderização do navegador:

span1 span2

Desta vez, dois vãos são organizados lado a lado e são amigáveis ​​e amigáveis, amigáveis ​​e harmoniosos ... por comportamentos de rotulagem como este, podemos chamá -los: elementos embutidos ;

A diferença entre elementos no nível do bloco e elementos incorporados:

· Elementos no nível do bloco geralmente são usados ​​para criar arquitetura, layout e conteúdo de transporte ... esses trabalhos de amarração são elementos no nível do bloco, que incluem as seguintes tags:

div, ul, li, dl, dt, dd, h1 ~ h6, p, endereço ...

· Os elementos embutidos são geralmente usados ​​em determinados detalhes ou partes do conteúdo do site para enfatizar e distinguir estilos, superestritos, subscritos, pontos de ancoragem etc. As seguintes tags são todos elementos incorporados:

a, span, forte, sub, sup, img ...

· Elementos de bloqueio e elementos incorporados podem ser convertidos um ao outro , e o código de conversão é o seguinte:

exibição: bloco; /* Converta em elemento de bloqueio*/

exibição: embutido; /* Converta para um elemento incorporado*/

· As regras de chamada para o CSS entre os elementos do bloco e os elementos incorporados são diferentes (este artigo discute o ninho de etiquetas, para que não explique esse ponto de conhecimento).

Depois de simplesmente entender os elementos do bloco e os elementos incorporados, você pode listar as regras de ninho das tags XHTML :

1. Um elemento de bloco pode conter elementos embutidos ou certos elementos de bloco, mas um elemento embutido não pode conter elementos de bloco. Ele só pode conter outros elementos embutidos :

<div> <h1> </h1> <p> </p> </div> - Sim

<a href =#> <span> </span> </a> - Sim

<span> <div> </div> </span> - errado

2. Os elementos no nível do bloco não podem ser colocados em <p> :

<p> <ol> <li> </li> </ol> </p> - errado

<p> <div> </div> </p> - errado

3. Existem vários elementos especiais no nível do bloco que podem conter apenas elementos incorporados e não podem conter elementos no nível do bloco. Essas tags especiais são:

H1, H2, H3, H4, H5, H6, P, DT.

4. A tag div pode ser incluída em Li - este artigo não precisa ser listado separadamente, mas muitas pessoas na internet têm algumas dúvidas sobre isso, então explicarei brevemente aqui:

As tags Li e Div são recipientes para carregar conteúdo, com status igual e nenhuma distinção entre os níveis (por exemplo: H1 e H2 com hierarquia estrita^_^). Você deve saber que a etiqueta LI pode até acomodar seus pais ou OL. Por que algumas pessoas pensam que Li não pode acomodar a próxima div? Não tome li tão mesquinho, não olhe para Li tão magro quanto é, na verdade Li tem uma mente grande ...

5. Os elementos no nível do bloco e os elementos no nível do bloco são paralelos, e os elementos embutidos e os elementos embutidos são paralelos:

<div> <h2> </h2> <p> </p> </div> - Sim

<div> <a href =#> </a> <span> </span> </div> - sim

<div> <h2> </h2> <span> </span> </div> - errado