HTML示例04---文字

最新推荐文章于 2024-09-05 21:31:46 发布

rs勿忘初心

最新推荐文章于 2024-09-05 21:31:46 发布

阅读量894

点赞数 1

文章标签： html 文字斜体、下划线、删除线文字上标与下标

本文链接：https://blog.csdn.net/sinat_33718563/article/details/87511721

版权

前端基本知识点专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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

一、文字的斜体、下划线、删除线

1.说明

语法格式如下：

<em>斜体内容</em>
<u>带下划线的文字</u>
<strike>带删除线的文字</strike>

其中，斜体字也可以使用<I>标记或<cite>标记。

2.代码

注：需要注意的是代码中图片地址需要换成你自己指定图片的地址，也就是img src=.....位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>斜体、下划线、删除线</title>
</head>
<body>
<h1 align="center"><img src="../images/百年孤独.png" alt="百年孤独"></h1>
<h5 align="center">书名：<em>《百年孤独》</em></h5>
<h5 align="center">作者：马尔克斯</h5>
<h5 align="center">出版社：人民邮电出版社</h5>
<h5 align="center"><u>出版时间：2017年1月</u></h5>
<h5 align="center">页数：463页</h5>
<!--<h5 align="center">原价：<strike>25.00</strike>元 促销价格：20.00元</h5>-->
<!--<strike>删除线内容</strike>方式可用，但会提示这种方式已弃用，不建议使用，可以替换为下面的方式，效果是一样的-->
<h5 align="center">原价：<span style="text-decoration: line-through;">25.00</span>元 促销价格：20.00元</h5>
</body>
</html>

3.运行效果

二、文字的上标与下标

1.说明

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

语法格式如下：

<sup>上标标记内容</sup>
<sub>下标标记内容</sub>

示例：使用<sup>上标标记和<sub>下标标记，实现数学方程的网页展示。首先将数学方程式中数学富豪全部输入，比如输入方程式“X3+9X2-3=0”，然后将需要置上或置下的数字符号放入上标或下标标记中。具体代码如下：

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上标和下标</title>
</head>
<body>
<h1 align="center">上标和下标标记</h1>
<h3 align="center">在数学计算中：</h3>
<!--使用上标标记，将文字置上-->
<h3 align="center">X<sup>3</sup>+9X<sup>2</sup>-3=0</h3>
<!--使用下标标记，将文字置下-->
<h3 align="center">3X<sub>1</sub>+2X<sub>2</sub>=10</h3>
</body>
</html>

3.运行结果

三、特殊文字符号

1.说明

在网页的制作过程中，特殊的符号（如引号、空格等）也需要使用代码进行控制。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀分号“;”组成，如：

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊文字符号</title>
</head>
<body>
<!--表示文章标题-->
<h1 align="center">汪汪！你想找的页面让我吃喽</h1>
<!--普通标题文本-->
<h3>
.---.
_.'__   '.
    hi,
   你好.
(____|_____)
</h3>
<!--pre元素可定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现等宽字体-->
<pre align="center">
.---.
_.'__   '.
    hi,
   你好.
(____|_____)
</pre>
</body>
</html>

3.运行结果