
2.2 文字
除了标题文字,在网页中普通的文字信息也不可缺少,而多种多样的文字装饰效果可以让用户眼前一亮,记忆深刻。在网页的编码中,可以直接在<body>标签和</body>标签之间输入文字,这些文字可以显示在网页中,同时可以为这些文字添加装饰效果的标签,如斜体、下画线等。下面详细讲解这些文字装饰标签。
2.2.1 文字的斜体、下画线、删除线

在浏览网页时,常常可以看到一些特殊效果的文字,如斜体字、带下画线的文字和带删除线的文字,这些文字效果可以通过设置HTML的标签来实现,其语法格式如下:

以上这几种文字装饰效果的语法类似,只是标签不同。其中,斜体字也可以使用标签<I>或<cite>来实现。
接下来,使用<em>文字斜体标签、<u>文字下画线标签和<strike>文字删除线标签,为图书商品的推荐内容增添更多文字特效,以让读者眼前一亮,提高商品购买率。例如,如果商品打折,则可以将商品原来价格的文字添加<strike>文字删除线标签,表示不再以原来的价格销售。具体代码如下:

执行上面的代码,效果如图2.6所示。

图2.6 活用文字装饰的网页效果
2.2.2 文字的上标与下标

除了设置常见的文字装饰效果,有时还需要为文字设置一种特殊的装饰效果,即上标和下标。上标或下标经常会在数学公式或方程式中出现,其语法格式如下:

在该语法中,上标标签和下标标签的使用方法基本相同,只需将文字放在标签中间即可。
接下来,使用<sup>上标标签和<sub>下标标签实现数学方程式的网页展示。首先将数学方程式中的数字符号全部输入,如输入方程式“X3+9X2-3=0”,然后将需要设置为上标或下标的数字符号放入上标标签或下标标签中。具体代码如下:

执行上面的代码,效果如图2.7所示。

图2.7 上标和下标标签的界面效果
2.2.3 特殊文字符号

在网页的制作过程中,特殊符号(如引号)也需要使用代码进行控制。一般情况下,特殊符号的代码由前缀“&”、字符名称和后缀分号“;”组成,具体如表2.2所示。
表2.2 特殊符号的表示

下面通过一个实例,巧用特殊符号绘制一幅可爱小狗的字符画,用来表示未找到的内容,或者是错误的网页内容。在真正的网页设计中,需要设计应对网页出错或未找到网页的解决方案网页,俗称“404网页”。利用字符画的趣味表现手法,可以进一步提高用户的使用体验。具体代码如下:


本实例的运行效果如图2.8所示。

图2.8 小狗字符画的网页效果