首页 > web前端 > html教程 > HTML 文本格式标签

HTML 文本格式标签

王林
发布: 2024-09-04 16:16:32
原创
919 人浏览过

格式化文本是现代互联网网页的重要组成部分;即使我们仅限于使用基于文本的网络浏览器,也可以使用文本格式(例如大小、方向等)。通过现代 HTML 修订版,可以使用大量 HTML 标签来使文本外观符合您的喜好。

使用 HTML 标签格式化文本

下面我们将讨论一些用于格式化文本的重要 HTML 标签:

1.将 HTML 中的文本格式设置为粗体

HTML 有两个不同的标签可将文本设置为粗体外观。一个是。另一个是同时两者产生相似的输出。 tag是一个物理标签,仅用于以粗体显示文本,并且在浏览器中不会添加任何重要性值。

示例

代码:

<!DOCTYPE>
<html>
<body>
<p> <b>Here is some text in bold. </b></p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

<强>另一方面,标签被视为逻辑标签,它用于通知浏览器标签中的文本具有一定的逻辑重要性。

示例

代码:

<!DOCTYPE>
<html>
<body>
<p> <strong>This is an important content formatted using the strong tag </strong>, and this is just
normally formatted text</p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

2.在 HTML5 中将文本设置为斜体

就像将文本设置为粗体一样,您可以使用 标签和 标签在 HTML5 上将文本设置为斜体。

使用 ;就像使用 一样,文本物理显示为斜体,标签 同时还将文本显示为斜体,让浏览器知道它具有语义重要性。

示例

代码:

<!DOCTYPE>
<html>
<body>
<p> <i> This is the first para in italic text. </i></p>
<p> <em> This content is made italics with the em tag</em>, This is normal text </p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

3.使用 HTML 代码突出显示文本

如果您想使用荧光笔效果突出显示某些文本,则可以使用标签 可以使用;使用默认 CSS,该标签会将文本背景设为黄色,帮助您轻松吸引访问者对该文本的注意力。

示例

代码:

<!DOCTYPE>
<html>
<body>
<h3> This text uses <mark> Mark</mark> tag to highlight text on the page </h3>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

4. HTML 中的文本下划线

HTML 标签 可用于在文本中添加下划线。请注意不要在蓝色文本中使用下划线,因为它可能会让访问者误以为该文本是链接。

示例

代码:

<!DOCTYPE>
<html>
<body>
<p> <u> This is Text with underline tag. </u> </p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

5.带删除线的文本

如果您需要在文本中绘制水平线,请标记 可以使用。淹没的线很细,因此仍然可以轻松阅读它所跨越的文本。

 示例 

代码:

<!DOCTYPE>
<html>
<body>
<p> <strike> Here is a sentence with strike through text </strike>. </p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

6.在 HTML 中以等宽字体书写

当您想要引用某些内容或想要在浏览器中显示某些代码时,使用等宽字体会很有用。等宽字体代码,顾名思义,使每个字符的宽度相同。要在浏览器上获取它,我们必须使用 标签。

 示例

代码:

<!DOCTYPE>lt;html>
<body>
<p> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt> </p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

7. HTML 中的下标文本

在数学和化学中,在许多情况下使用下标是绝对要求。在一般写作中,您也可能会遇到适合使用下标文本的情况。在 HTML 中, 下的任何文本都可以包含在 中。标签将在浏览器中用作下标。

示例

代码:

<!DOCTYPE>
<html>
<body>
<p> This is normal text <sub>Notice something different with this text? </sub> </p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

8.已删除 HTML5 中的文本

;标签用作告诉浏览器文本内的文本已删除的逻辑方式。请记住,对于用户来说,显示的文本与删除线标签中的标签相同,这意味着它以删除线格式显示。

 示例 

代码:

<!DOCTYPE>
<html>
<body>
<p> This is normal text <del> This is text between del tag. </del> </p>
</body>
</html>
登录后复制

输出:

HTML 文本格式标签

9. Superscript Text formatting in HTML5

Text in tag is shown in superscript. This is useful in math, chemistry and other places where math is involved. You can use the tag when citing with adding in-page links with too.

Example

Code:

<!DOCTYPE>
<html>
<body>
<p> This is Normal text<sup> This text is in superscript. </sup> </p>
</body>
</html>
登录后复制

Output:

HTML 文本格式标签

10. Making Text size larger with HTML formatting

In cases where you need some text in a larger size on the screen, but you don’t want to use a heading or increase the font size with a tag, use content between this tag will be displayed in noticeably larger text size.

Example

Code:

<!DOCTYPE>
<html>
<body>
<p> This is Normal text <big> This text in in larger size. </big> </p>
</body>
</html>
登录后复制

Output:

HTML 文本格式标签

11. Making Text smaller with HTML

Like the tag , you can use to make text smaller on the screen without using CSS or headings.

Example

Code:

<!DOCTYPE>
<html>
<body>
<p> This is Normal text <small> the size of this text is smaller </small> </p>
</body>
</html>
登录后复制

Output:

HTML 文本格式标签

Conclusion

Now that you have learned how the formatting of text in HTML works, you should be able to design pages with correct and professional-looking text layout and formatting. It would help if you used normal text and formatting where possible; using custom formatting only when needed gives your pages a neat look. The normal text size is important too, too small, and the readably will be affected negatively, and if it is too large, there will be less information on the screen at once.

以上是HTML 文本格式标签的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板