![HTML+CSS+JavaScript编程入门指南(全2册)](https://wfqqreader-1252317822.image.myqcloud.com/cover/887/47378887/b_47378887.jpg)
2.2 文字
除标题文字外,在网页中普通的文字信息也不可缺少,而多种多样的文字装饰效果更可以让用户眼前一亮,记忆深刻。在网页的编码中,可以直接在<body>和</body>标签之间输入文字,这些文字可以显示在页面中,同时可以为这些文字添加具有装饰效果的标签,如斜体、下画线等。下面将详细讲解这些文字装饰标签。
2.2.1 文字的斜体、下画线、删除线
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/35_2.jpg?sign=1738866406-3zZZh9ipQKctKiQtFdA2csCHBHD2S9oW-0-9b6ee5e6923928495e59e82c9fa1f5de)
在浏览网页时,常常可以看到一些特殊效果的文字,如斜体字、带下画线的文字和带删除线的文字,而这些文字效果也可以通过设置HTML语言的标签来实现。
语法格式如下:
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/35_3.jpg?sign=1738866406-9q2d23DBQ3S9Y4UbJNbYOX9etlmxVSJk-0-31baa832bdbb3ee00dec3c879fd72718)
这几种文字装饰效果的语法类似,只是标签不同。其中,斜体字也可以使用标签<I>或<cite>标识。
接下来,使用<em>文字斜体标签、<u>文字下画线标签和<strike>文字删除线标签,为图书商品的推荐内容增添更多的文字特效,可以让读者眼前一亮,提高商品购买率。例如,如果商品打折,则可以为商品原来价格的文字添加<strike>删除线标签,表示不再以原来价格进行销售。具体代码如下(实例位置:资源包\MR\源码\02\03):
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/36_1.jpg?sign=1738866406-T87RsOicnpVCZ7U6mKc15cCPZvt0NvON-0-f728b9d1bc010e540197520ca75452f8)
运行效果如图2.6所示。
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/36_2.jpg?sign=1738866406-U5cfAPNA4FmR5VPOdeNJZNjWTKLnA0o8-0-b9858093f5c0c46e9cee717973f1ce1d)
图2.6 活用文字装饰标签的页面效果
2.2.2 文字的上标与下标
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/37_1.jpg?sign=1738866406-9ojadDZrSBMVudSaigAtX4iGcUUqD3ed-0-0dd1af7d57899d7f33de13670a586e43)
除设置不同的文字装饰效果外,有时还需要设置一种特殊的文字装饰效果,即上标和下标。上标和下标经常会在数学公式或方程式中出现。
语法格式如下:
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/37_2.jpg?sign=1738866406-BuK5fARPyGa1P8rddcnpQT0ZdoQbF6Lc-0-2268ee5f81b55e10db46b37f3baa1f6f)
在该语法中,上标标签和下标标签的使用方法基本相同,只需要将文字放在标签中间即可。
接下来,使用<sup>上标标签和<sub>下标标签,实现数学方程式的网页展示。首先将数学方程式中的数字符号全部输入,比如输入方程式“X3+9X2-3=0”,然后将需要置上或置下的数字符号放入上标或下标标签中。具体代码如下(实例位置:资源包\MR\源码\02\04):
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/37_3.jpg?sign=1738866406-yGFUSfkwTqQNOochzrKhP0K69smJR5Gc-0-5bc205884acc43b53d45ed35e1689411)
运行效果如图2.7所示。
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/37_4.jpg?sign=1738866406-R2tItrRXds2QnCm6fZcHEHtoEGlh9Uam-0-902c965b38513355d96c7e54d15f260a)
图2.7 使用上标和下标标签的界面效果
2.2.3 特殊文字符号
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/38_1.jpg?sign=1738866406-IG1SjOo3QtmLNADkEdFtnkjxHgCtjylF-0-d064cd39a41fdc6136571348a60d6549)
在网页的制作过程中,特殊文字符号(如引号、空格等)也需要使用代码进行控制。一般情况下,特殊文字符号的代码由前缀“&”、字符名称和后缀分号“;”组成。其使用方法与空格符号类似,具体如表2.2所示。
表2.2 特殊文字符号的使用方法
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/38_2.jpg?sign=1738866406-j5LSq5V7o7Nh43qCTy6OtJ1vS4CcHeun-0-347d671eec54924eee3a8d59db273601)
下面巧用特殊文字符号,绘制出一幅可爱小狗的字符画,用来表示未找到的内容,或者错误的页面内容。在真正的网页设计中,需要设计出应对网页出错或未找到网页的解决方案页面,俗称“404页面”。利用字符画的趣味表现手法,可以进一步提高用户体验。具体代码如下(实例位置:资源包\MR\源码\02\05):
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/38_3.jpg?sign=1738866406-WAN9VwK6ycVS8MoAcKmVaDRg3grh2cof-0-f91ea329a15f2fb161d8778a84fdf8eb)
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/39_1.jpg?sign=1738866406-aSNUr29PU14aHo6G2WigWDcQ0FViUsc0-0-c3a466a395c20b64aefb654a55c673ac)
运行效果如图2.8所示。
![](https://epubservercos.yuewen.com/E0C79D/26763708101338706/epubprivate/OEBPS/Images/39_2.jpg?sign=1738866406-HvLyf4zNDhzyuMuF6B502cFmZXaP3B86-0-bac0e7d848a0d06027a1150a7dd3b325)
图2.8 小狗字符画的页面效果