3-22 上标<sup>和下标<sub>元素
<sup>元素是上标元素，最常用作数学的次方，例如，X3代表X的三次方。
<sub>元素是下标元素，最常用作化学符号，例如，水的化学符号H2O。
程序实例ch3_25.html：sup和sub元素的应用。
执行结果
3-23 输出特殊字符
在设计HTML文件时难免会遇上需要输出空格符或特殊字符的情况，下表是常见的特殊字符及其处理方式。
常见特殊字符及HTML处理方式
程序实例ch3_26.html：测试实体名称和以编码方式输出空格的方法。
执行结果
上述程序第9行“明志科大”与“视觉传达系”字符串间没有空格，第10行笔者测试空一格，第11行笔者测试空2格，读者可以自行比较它们之间的差异。
程序实例ch3_27.html：常见特殊符号输出的应用，所有特殊符号均使用实体名称和编码来输出。
执行结果
3-24 HTML的树状结构
相信读者学习到此已经具备了一定的HTML程序设计基础了，在结束本节前，笔者想总结一下HTML文件的结构知识。其实HTML文件就是一个树状的文件结构，整个文件的根部就是<html>元素，在这个根部底下分别是<head>元素和<body>元素，而这两个元素底下又有其他元素。我们通常使用下列名词定义元素之间的关系。
父元素：假设A元素包含B元素，则称A元素是B元素的父元素。例如，我们可以说<html>元素是<head>和<body>元素的父元素。
子元素：假设A元素包含B元素，则称B元素是A元素的子元素。例如，我们可以说<head>和<body>元素是<html>元素的子元素。
在继续解释之前，笔者想举一个更详细的实例来说明HTML的树状结构。
程序实例ch3_28.html：HTML树状结构的说明。
执行结果
这个程序的重点并不是上述执行结果，而是意图呈现整个树状结构。如果我们将上述程序依树状结构分析，可以绘制出下图。
由上图可知父、子元素又衍生出下列关系：
子孙元素：若是A元素是B元素的父元素，则所有B元素的更下层元素皆是A元素的子孙元素。以上图为例，<meta>、<title>、<header>、<section>、<footer>、<h1>、<p>和<small>皆是<html>的子孙元素。
祖先元素：若是A元素是B元素的父元素，则所有A元素的更上层元素皆是B元素的祖先元素。以上图为例，<body>元素是<h1>、<h2>、<p>和<small>的祖先元素。
手足元素：若是A元素是B元素和C元素的父元素，则B元素和C元素是手足元素。<header>、<section>和<footer>彼此之间是手足元素。
上述关系是学习HTML布局区块观念和各元素间衍生继承关系的重要知识。