html文档结构简单介绍

快乐打工仔 分类:实例代码

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

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

看如下代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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。

html文档结构简单介绍

回复

我来回复
  • 暂无回复内容