浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？其实HTML早想到了这一点，HTML为这些特殊字符准备了专门的替代代码，如表2-14所示。
表2-14特殊字符标记代码
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
注意:
(1)有一些字符对HTML来讲是有特殊意义的，像小于号(<)是用来定义HTML头标签的。如果我们想在浏览器中显示这类字符就必须在HTML代码中插入特殊字符。
(2)特殊字符的代码通常由前缀“&”、字符名称和后缀为英文状态下的“;”组成。
(3)HTML会自动截去多余的空格，不管加多少空格，都被看做一个空格。
2.9.2分组元素
1.figure和figcaption元素
figure元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。其基本格式应用代码如下：
| <figure> <figcaption>北京鸟巢</figcaption> <p>拍摄者：北京鸟巢内容与资源组，拍摄时间：2015 年 12 月</p> <img src="images/niaochao.jpg" alt=""> </figure> |
2．hgroup元素
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中，其基本格式应用代码如下：
| <header> <hgroup> <h1>我的个人网站</h1> <h2>我的个人作品</h2> </hgroup> <p>开心快乐每一天</p> </header> |
2.9.3页面交互元素
1.details和summary元素
details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容, 其基本格式应用代码如下：
| <details> <summary>显示列表</summary> <ul> <li>列表1</li> <li>列表2</li> </ul> </details> |
2.progress元素
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。progress元素的常用属性值有两个，value：已经完成的工作量,max：总共有多少工作量, 其基本格式应用代码如下：
| <h1>我的工作进展</h1> <p><progress value="50" max="100" ></progress></p> |
3.meter元素
meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者对某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。
meter元素有多个常用的属性，如表2-15所示。
表2-15 meter元素常用属性
| 属性 | 说明 |
| high | 定义度量的值位于哪个点被界定为高的值。 |
| low | 定义度量的值位于哪个点被界定为低的值。 |
| max | 定义最大值，默认值是 1。 |
| min | 定义最小值，默认值是 0。 |
| optimum | 定义什么样的度量值是最佳的值。如果该值高于 high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。 |
| value | 定义度量的值。 |
meter元素，其基本格式应用代码如下：
| <h1>学生成绩列表</h1> <p> 小红：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter><br/> 小明：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter><br/> 小李：<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter><br/> </p> |
2.9.4 文本层次语义元素
1. time元素
time元素用于定义时间或日期，可以代表24小时中的某一时间。time元素有两个属性：
datetime：用于定义相应的时间或日期。取值为具体时间（例如：14:00）或具体日期（例如2019—04—01），不定义该属性时，由元素的内容给定日期 / 时间。
pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。
time元素，其基本格式应用代码如下：
| <p>我们早上<time>9:00</time>开始上班</p> <p>今年的<time datetime="2019—10—01">十一</time>我们准备去旅游</p> <time datetime="2019—04—01" pubdate="pubdate"> 本消息发布于2019年4月01日 |
2、mark元素
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。其基本格式应用代码如下：
| <h3>小苹果</h3> <p>我种下一颗<mark>种子</mark>，终于长出了<mark>果实</mark>，今天是个伟大日子。摘下星星送给你，拽下月亮送给你，让太阳每天为你升起。变成蜡烛燃烧自己，只为照亮你，把我一切都献给你，只要你欢喜。你让我每个明天都 变得有意义，生命虽短爱你永远，不离不弃。你是我的小呀<mark>小苹果儿</mark> 怎么爱你都不嫌多。红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火。你是我的小呀<mark>小苹果儿</mark> 就像天边最美的云朵。春天又来到了花开满山坡 种下希望就会收获。</p> |
3.cite元素
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。其基本格式应用代码如下：
| <p>也许愈是美丽就愈是脆弱,就像盛夏的泡沫。</p> <cite>——明晓溪《泡沫之夏》</cite></p> |
