关注我们

HTML - 文本格式化

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

加粗字体(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>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

斜体文字(i)

... 元素中出现的所有内容均以斜体显示，如下所示-

复制代码

<!DOCTYPE html>
<html>

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

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

下划线文字(u)

... 元素中出现的所有内容均带有下划线，如下所示-

复制代码

<!DOCTYPE html>
<html>

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

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

删除线文字(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>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

字体(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>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

上标文字(sup)

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

复制代码

<!DOCTYPE html>
<html>

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

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

下标文字(sub)

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

复制代码

<!DOCTYPE html>
<html>

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

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

插入文字(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>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

删除文字(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>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

较大文字(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>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

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

复制代码

<!DOCTYPE html>
<html>

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

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

</html>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

分组内容(div & span)

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

复制代码

<!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>

这将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-formatting.html

来源：LearnFk无涯教程网

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

复制代码

<!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>