- HTML+CSS+JavaScript编程入门指南(全2册)
- 明日科技编著
- 974字
- 2025-02-24 08:03:37
2.2 文字
除标题文字外,在网页中普通的文字信息也不可缺少,而多种多样的文字装饰效果更可以让用户眼前一亮,记忆深刻。在网页的编码中,可以直接在<body>和</body>标签之间输入文字,这些文字可以显示在页面中,同时可以为这些文字添加具有装饰效果的标签,如斜体、下画线等。下面将详细讲解这些文字装饰标签。
2.2.1 文字的斜体、下画线、删除线

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

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

运行效果如图2.6所示。

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

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

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

运行效果如图2.7所示。

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

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

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


运行效果如图2.8所示。

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