HTML - 格式介绍 首页HTMLHTML - 格式

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

加粗字体(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一起使用,以允许您将样式附加到页面的一部分。

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 请将遇到的问题写入评论区中,大家一起进步。

祝学习愉快!(您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记