HTML文本格式化

/ / HTML文本格式化

如果使用文字处理程序,则必须熟悉使文本变为粗体,斜体或带下划线的函数;

加粗字体(b)

<b> ... </b>元素中出现的所有内容均以粗体显示,如下所示-

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

斜体文字(i)

<i> ... </i>元素中出现的所有内容均以斜体显示,如下所示-

<!DOCTYPE html>
<html>

   <head>
      <title>斜体文字 Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

下划线文字(u)

<u> ... </u>元素中出现的所有内容均带有下划线,如下所示-

<!DOCTYPE html>
<html>

   <head>
      <title>带下划线的文字 Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

删除线文字(strike)

<strike> ... </strike>元素中出现的所有内容都带有删除线,删除线是穿过文本的细线,如下所示-

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

字体(tt)

<tt> ... </tt>元素的内容以等宽字体书写,大多数字体被称为可变宽度字体,因为不同的字母具有不同的宽度(例如,字母“ m”比字母“ i”宽)。 但是,在Monospaced字体中,每个字母具有相同的宽度。

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

上标文字(sup)

<sup> ... </sup>元素的内容用上标书写; 所使用的字体大小与周围的字符相同,但是显示为比其他字符高半个字符。

<!DOCTYPE html>
<html>

   <head>
      <title>上标文字 Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

下标文字(sub)

<sub> ... </sub>元素的内容用下标书写; 所使用的字体大小与其周围的字符相同,但是显示为在其他字符下方半个字符的高度。

<!DOCTYPE html>
<html>

   <head>
      <title>下标文字 Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

插入文字(ins)

<ins> ... </ins>元素中出现的所有内容均显示为插入的文本。

<!DOCTYPE html>
<html>

   <head>
      <title>插入文字 Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

删除文字(del)

<del> ... </del>元素中出现的所有内容均显示为已删除的文本。

<!DOCTYPE html>
<html>

   <head>
      <title>删除文字 Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

较大文字(big)

<big> ... </big>元素的内容显示为比周围的其余文本大一号字体,如下所示-

<!DOCTYPE html>
<html>

   <head>
      <title>较大的文字 Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

较小文字(small)

<small> ... </small>元素的内容显示为比周围的其余文本小一个字体,如下所示-

<!DOCTYPE html>
<html>

   nm fn u<title>较小的文字 Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

这将产生以下输出-

无涯教程网

分组内容(div & span)

<div>和<span>元素允许您将几个元素组合在一起以创建页面的节或子节。

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id="menu" align="middle" >
         <a href="/index.htm">HOME</a> | 
         <a href="/about/contact_us.htm">CONTACT</a> | 
         <a href="/about/index.htm">ABOUT</a>
      </div>

      <div id="content" align="left" bgcolor="white">
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

另一方面,<span>元素只能用于对内联元素进行分组。 因此,如果您希望将句子或段落的一部分归为一组,则可以使用<span>元素,如下所示。

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style="color:green">span tag</span>
         and the <span style="color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

这将产生以下输出-

无涯教程网

这些标签通常与CSS一起使用,以允许您将样式附加到页面的一部分。

祝学习愉快! (发现内容有误?请选中要编辑的内容 -> 右键 -> 修改 -> 提交!帮助我们改进教程质量)

精选教程推荐

👇 以下精选教程可能对您有帮助,拓展您的技术视野

Claude Code 工程化实战 -〔黄佳〕

AI重塑测试开发系统实践 -〔陈磊〕

玩转AI创意写作 -〔于菁健〕

超级访谈:对话毕玄 -〔毕玄〕

计算机基础实战课 -〔彭东〕

大厂设计进阶实战课 -〔小乔〕

Django快速开发实战 -〔吕召刚〕

研发效率破局之道 -〔葛俊〕

OpenResty从入门到实战 -〔温铭〕

📝 好记忆不如烂笔头,留下您的学习笔记吧!

暂无学习笔记,成为第一个分享的人吧!

您的笔记将帮助成千上万的学习者