На языке XHTML мы все знаем, что тег UL содержит LI, тег DL содержит правила DT, а DD для этих фиксированных тегов очень ясны. Тем не менее, есть много тегов, которые являются независимыми, и они не связаны вместе, такие как H1, Div, P ... так каковы правила гнездования для этих тегов? Давайте поговорим об этой теме сегодня.
Когда дело доходит до правил гнездования тегов XHTML, мы должны сначала знать, что существуют два типа тегов XHTML, один называется элементом блока , а другой называется встроенным элементом (встроенный, который многие люди называют: встроенным, встроенным, уровнем линии и т. Д.).
Стандарты дивизии для элементов на уровне блоков и встроенных элементов очень просты. Пожалуйста, поместите следующие две строки кода в тег тела:
<div style = граница: 1px solid red;> div1 </div>
<div style = граница: 1px твердый красный;> div2 </div>
Эффект рендеринга браузера:
div1div2Два DOV, представленные на странице, занимают два ряда пространства. Если им не разрешено плавать или делать другие настройки, никто не находится рядом друг с другом. Все они слишком занимают свои собственные ряды пространств. Если вы видите определенный тег с этим явлением, вы можете назвать его: Block Element (Block) ;
Затем поместите следующие две строки кода в тег тела:
<span style = граница: 1px solid red;> span1 </span>
<span style = граница: 1px solid red;> span2 </span>
Эффект рендеринга браузера:
SPAN1 SPAN2
На этот раз два пролета расположены рядом, и они дружелюбны, дружелюбны, дружелюбны и гармоничны ... Для такого маркировки, как это, мы можем назвать их: встроенные элементы ;
Разница между элементами уровня блока и встроенными элементами: · Элементы на уровне блоков обычно используются для создания архитектуры, макета и содержимого веб-сайта ... Эти тесные задания являются элементами уровня блока, которые включают следующие теги:div, ul, li, dl, dt, dd, h1 ~ h6, p, адрес ...
· Встроенные элементы обычно используются в определенных деталях или в частях содержания веб -сайта, чтобы подчеркнуть и различать стили, суперкрипты, подписки, точки привязки и т. Д.A, SPAN, SORNE, SUB, SUP, IMG ...
· Блок -элементы и встроенные элементы могут быть преобразованы друг в друга , а код преобразования выглядит следующим образом:дисплей: блок; /* преобразовать в элемент блока*/
дисплей: inline; /* Конвертировать в встроенный элемент*/
· Призывные правила для CSS между элементами блока и встроенным элементом различны (в этой статье обсуждается гнездование метки, поэтому я не буду объяснять эту точку знания).После простого понимания элементов блока и встроенных элементов вы можете перечислить правила гнездования тегов XHTML :
1. Блок -элемент может содержать встроенные элементы или определенные элементы блока, но встроенный элемент не может содержать элементы блока. Он может содержать только другие встроенные элементы :<div> <h1> </h1> <p> </p> </div> - да
<a href =#> <pan> </span> </a> - Да
<pan> <div> </div> </span> - неправильно
2. Элементы уровня блока не могут быть помещены в <p> :<p> <ol> <li> </li> </ol> </p> - неправильно
<p> <div> </div> </p> - неправильно
3. Существует несколько специальных элементов уровня блока, которые могут содержать только встроенные элементы и не могут содержать элементы уровня блока. Эти специальные теги:H1, H2, H3, H4, H5, H6, P, Dt.
4. Тэг div может быть включен в LI - эта статья не должна быть указана отдельно, но у многих людей в Интернете есть некоторые сомнения по этому поводу, поэтому я кратко объясню это:Теги LI и DIV представляют собой контейнеры для загрузки содержимого, с равным статусом и отсутствием различий между уровнями (например: H1 и H2 со строгой иерархией^_^). Вы должны знать, что тег LI может даже вместить его родительский UL или OL. Почему некоторые люди думают, что Ли не может вместить следующий див? Не берите Ли такого скучного, не смотрите на Ли так же худой, на самом деле, у Ли есть большой ум ...
5. Элементы уровня блока и элементы уровня блока параллельны, а встроенные элементы и встроенные элементы параллельны:<div> <h2> </h2> <p> </p> </div> - да
<div> <a href =#> </a> <pan> </span> </div> - да
<div> <h2> </h2> <pan> </span> </div> - неправильно