最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

4. 认识html文档的基本结构

HTML语言学习 林雍岷 203浏览

HTML文档的基本结构,HTML文档具有树状性质,因为元素嵌套在其它元素内。每个HTML文档实际上可以称为文档树,像家谱一样描述文档树中的元素。有祖先,后代,父母,孩子和兄弟姐妹,了解文档树形结构很重要,因为CSS选择器使用文档树。

html树形结构

所有的CSS语句都是基于各个标记之间的父子关系,为了更好的理解父子关系,我们看下html文档的结构,各个标记之间呈现“树”型关系,处于最上端<html>标记称之为“根”,它是所有标记的源头,往下层层包含。在每一个分支中,上层标记为其下层标记的“父”标记,相应的下层标记为上层标记的“子”标记。如下图<p>标记是<body>标记的子标记,同时它也是<em>的父标记。

下面这些示例使用HTML文档,为了简洁起见,文档省略<head>部分。

<body>
<section>
<h1>标题</h1>
<p>这是段落内容</p>
<p>第二段落内容<a href="#">这是一个链接</a></p>
</section>
<aside>
<h2>边栏</h2>
<ul>
<li>一个<strong>重要</strong>清单项目</li>
<li>另外一个清单项目</li>
</ul>
</aside>
</body>

我们正在考虑选择这些被包含在body内的元素,让我们将上述这段代码配置为树形结构图。body是一切标签的开始,这是其它所有标签的根,所以它显示在我们流程图的顶部。

现在看一下我们的HTML,并思考一下主体的子辈在哪里。主体部分有两个子辈,section和aside,子辈直接是后代,是其父母辈的后代,中间没有其它标签。 我们可以使用层级结构描绘这种关系,body是父辈,section和aside是子辈。

4. 认识html文档的基本结构 html树形结构

让我们继续往下看,section和aside是否还有子辈,子辈在哪里,子辈是否还有子辈?

让我们从section部分的代码进行分析, 一个h1,两个p段落,共有三个子辈。需要注意的是第二个p段落里面有一个a标签是该段落p的子辈。如果我们用家谱图展示看起来像下图:

4. 认识html文档的基本结构 html树形结构

让我们开始从aside部分的代码进行分析,确定父辈和子辈,子辈是否还有子辈?aside是父辈,h2,ul是aside的子辈,ul有两个li子辈,其中一个li有一个strong子辈, 如下图 :

4. 认识html文档的基本结构 html树形结构

一旦HTML绘制成上述树形结构图,我们可以轻松地描述标签之间的关系,例如h1和两个p是什么关系?

Sibling( 兄弟 )关系

同一层级的html兄弟姐妹元素节点共同享一父元素,下图红色虚线框住的h1和p是同辈关系(兄弟姐妹),它们的父级是section, 如下图

 Sibling( 兄弟 )关系

Parent and Child( 父子)关系

让我们看看aside下面li和strong的关系,li是父辈,strong是子辈,如下图:

4. 认识html文档的基本结构 html树形结构

Ancestor and Descendant(祖先后代)关系

那么body和li之间是什么关系呢?body是祖辈,li是后辈, 下图所示:

4. 认识html文档的基本结构 html树形结构

section和h2是两个不相关的标签,他们之间没有特别的继承关系, 下图所示 :

4. 认识html文档的基本结构 html树形结构

综上所述,HTML文档具有树状性质,从上述图标我们看到元素嵌套在其它元素内。此文中,我们使用父母,子女,祖先,后代和兄弟姐妹之类的术语来学习html树形结构。html文件结构关系图谱我们必须要懂,在javascript编码中会频繁使用到。

转载请注明:林雍岷 » 4. 认识html文档的基本结构