html文档结构简单介绍

2023-12-04 13:48:08 前端笔记 38 14

本章节简单介绍一下html文档结构，此结构与css控制页面样式和javascript操控页面结构都有着直接的关系。

html文档结构可以看做为一个层级树，此树有一个唯一的祖先元素，那就是HTML根元素，然后各元素依次向下排列。

看代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>实例</title>
</head>
<body>
<h1>css教程<em>html结构</em></h1>
<p><acronym title="Cascading Style Sheets，层叠样式表">CSS</acronym>是一种标记性语言。</p>
<ol>
  <li>CSS的<em>优缺点</em></li>
  <li>CSS的使用方法
    <ul>
      <li>内联式样式</li>
      <li>嵌入式样式表</li>
      <li>外部样式表</li>
    </ul>
  </li>
  <li><strong>基本</strong>样式规则</li>
</ol>
<p>CSS通过与HTML的文档结构相对应的<a href="#">选择器（<em>selector</em>）</a>达到控制页面表现。</p>
</body>
</html>

上面的代码的文档结构图示:

进一步说明:

css选择器进行匹配的时候，大多数都是基于元素之间的包含关系，也可以说是"父子"关系。如果A元素包含B元素，那么A元素就是B元素的父元素，自然，B元素就是A元素的子元素。HTML结构树中的每一个元素都处于这种父子关系之中。

由"父子"关系我们也可以扩展到"祖辈"和"后代"的关系，比如li虽然不是body的直接子元素，但是li元素是body的后代元素。

具有同一个父元素的元素是兄弟关系，比如上图中的meta和title。