Родственные связи тегов в HTML
В данном уроке мы разберем терминологию родственных связей тегов. Каждый тег, в зависимости от положения в HTML коде может быть либо родителем, либо потомком, либо и тем и другим одновременно.
Рассмотрим для примера следующий код:
<ul>
<li>paragraph <i>italic</i></li>
<li>paragraph <i>italic</i></li>
<li>paragraph <i>italic</i></li>
<li>paragraph <i>italic</i></li>
</ul>
В данном случае мы можем сказать, что теги
i
в этом коде являются потомками тегов
li
, а также являются потомками тега
ul
. При этом для каждого нашего тега
i
тег li
является непосредственным
родителем (отцом), а тег ul
- дедушкой.
Что можно сказать про наши теги li
?
Они являются потомками тега ul
и при
этом сами являются родительскими для тегов
i
. Ну, а тег ul
является родителем
тегам li
и тегам i
. При этом
для тегов li
наш тег ul
- непосредственный
родитель.
Дан следующий код:
<ul>
<li>text <a href="">link</a></li>
<li>text <a href="">link</a></li>
<li>text <a href="">link</a></li>
<li>text <a href=""><b>bold link</b></a></li>
</ul>
Расскажите какие родительские связи вы видите.
Дан следующий код:
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
</tr>
</table>
Расскажите какие родительские связи вы видите.
Дан следующий код:
<p>
This is a paragraph with text
<i><b>bold italic</b></i>
<a href="">link <i>italic</i></a>.
</p>
Какие потомки есть у абзаца? Какие непосредственные потомки есть у абзаца?
Дан следующий код:
<p>
<a href="">link <i><b>bold italic</b></i></a>
</p>
Расскажите, какие родители есть у тега b
.
Кто является его непосредственным родителем?