html@格式化

Sky小明同学

于 2023-01-31 09:37:04 发布

阅读量100

点赞数

文章标签： html

本文链接：https://blog.csdn.net/2303_76208315/article/details/128811973

版权

如果使用文字处理程序，则必须熟悉使文本变为粗体，斜体或带下划线的能力; 这些只是十个可用选项中的三个，用于指示文本在HTML和XHTML中的显示方式。

加粗字体

...元素中出现的任何内容都以粗体显示，如下所示 −

例子

<!DOCTYPE html>
<html>

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

这将产生以下结果 −

The following word uses a bold typeface.

斜体文字

...元素中出现的任何内容都以斜体显示，如下所示 −

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

这将产生以下结果 −

The following word uses an italicized typeface.

带下划线的文字

...元素中出现的任何内容都会以下划线显示，如下所示−

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

这将产生以下结果 −

The following word uses an underlined typeface.

罢工文本

<strike>...</strike>元素中出现的任何内容都带有删除线，这是一条细线，如下图所示−

例子

<!DOCTYPE html>
<html>

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

这将产生以下结果 −

The following word uses a ~~strikethrough~~ typeface.

Monospaced字体

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

例子

<!DOCTYPE html>
<html>

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

这将产生以下结果 −

The following word uses a monospaced typeface.

上标文本

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

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

这将产生以下结果 −

The following word uses a superscript typeface.

下标文本

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

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

这将产生以下结果 −

The following word uses a subscript typeface.

插入的文字

<ins>...</ins>元素中出现的任何内容都显示为插入的文本。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

这将产生以下结果 −

I want to drink cola wine

删除文字

<del>...</del>元素中出现的任何内容都将显示为已删除的文本。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

这将产生以下结果 −

I want to drink cola wine

更大的文字

<big>...</big>元素的内容显示的字体大小比其周围文本的其余部分大，如下所示 −

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

这将产生以下结果 −

The following word uses a big typeface.

较小的文字

...元素的内容显示的字体大小小于其周围文本的其余部分，如下所示−

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

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

</html>

这将产生以下结果 −

The following word uses a small typeface.

分组内容

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

例如，您可能希望将所有脚注放在

元素中的页面上，以指示该元素中的所有元素都与脚注相关。然后，您可以将样式附加到此元素，以便它们使用一组特殊的样式规则显示。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>

      <div >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

这将产生以下结果 −

Content Articles

Actual content goes here.....

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

例子

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

这将产生以下结果 −

This is the example of span tag and the div tag alongwith CSS

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