HTML - 文本格式化

HTML - 文本格式化 首页 / 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>

这将产生以下输出-

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

来源:LearnFk无涯教程网

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

这将产生以下输出-

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

来源:LearnFk无涯教程网

下划线文字(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>

这将产生以下输出-

链接: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)

<sup> ... </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)

<sub> ... </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无涯教程网

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

这将产生以下输出-

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

来源:LearnFk无涯教程网

分组内容(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>

这将产生以下输出-

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

来源:LearnFk无涯教程网

另一方面,<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>

这将产生以下输出-

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

来源:LearnFk无涯教程网

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

从0开始做增长 -〔刘津〕

全栈工程师修炼指南 -〔熊燚(四火)〕

DevOps实战笔记 -〔石雪峰〕

Java业务开发常见错误100例 -〔朱晔〕

图解 Google V8 -〔李兵〕

Selenium自动化测试实战 -〔郭宏志〕

Spark核心原理与实战 -〔王磊〕

如何落地业务建模 -〔徐昊〕

编程高手必学的内存知识 -〔海纳〕

好记忆不如烂笔头。留下您的足迹吧 :)