个性化阅读
专注于IT技术分析

html格式化 – HTML教程

上一章HTML教程请查看:html属性

如果你使用文字处理程序,你必须熟悉使文本加粗、斜体或下划线的能力,这只是10个选项中的3个,这些选项用于指示文本如何在HTML和XHTML中显示。

粗体文本

任何出现在<b>…</b>元素,以粗体显示,如下所示

例子

<!DOCTYPE html>
<html>

   <head>
      <title>粗体文本示例</title>
   </head>
    
   <body>
      <p>下面的文本字体为<b>粗体</b> 文本</p>
   </body>
    
</html>

斜体文本

任何出现在<i>…</i>元素以斜体显示,如下例所示

<!DOCTYPE html>
<html>

   <head>
      <title>斜体文本</title>
   </head>
    
   <body>
      <p>下面是一个 <i>斜体文本</i> 示例.</p>
   </body>
    
</html>

下划线

任何出现在<u>…<u>元素,用下划线显示,如下例所示

<!DOCTYPE html>
<html>

   <head>
      <title>下划线文本示例</title>
   </head>
    
   <body>
      <p>以下文字使用<u>下划线</u>字体。</p>
   </body>
    
</html>

删除线文本

任何出现在<strike>…<strike>元素显示为删除线,这是一条贯穿文本的细线,如下所示例子:

<!DOCTYPE html>
<html>

   <head>
      <title>删除线文本</title>
   </head>
    
   <body>
      <p>这里的文本使用<strike>删除线</strike>字体。</p>
   </body>
    
</html>

等宽字体

<tt>…</tt>元素的内容是用等宽字体的,大多数字体被称为可变宽度字体,因为不同的字母有不同的宽度(例如,字母“m”比字母“i”宽)。然而,在等宽字体中,每个字母都有相同的宽度。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>等宽字体示例</title>
   </head>
    
   <body>
      <p>以下文本使用<tt>等宽</tt>字体。</p>
   </body>
    
</html>

上标文本

<sup>…</sup>元素的文本作为上标,使用的字体大小与周围的字符大小相同,但显示的高度比其他字符高一半。例子

<!DOCTYPE html>
<html>

   <head>
      <title>上标字体示例</title>
   </head>
    
   <body>
      <p>这是一个 <sup>上标文本</sup> 示例.</p>
   </body>
    
</html>

下标文本

<sub>…</sub>元素的内容为下标文本,使用的字体大小与周围的字符相同,但显示的高度比其他字符低一半。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>下标文本示例</title>
   </head>
    
   <body>
      <p>这是一个 <sub>下标文本</sub> 示例.</p>
   </body>
    
</html>

插入文本

出现在<ins>…</ins>元素显示为插入的文本。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>插入文本示例</title>
   </head>
    
   <body>
      <p>我需要 <del>吃饭</del> <ins>睡觉</ins></p>
   </body>
    
</html>

已删除文本

出现在<del>元素,显示为已删除的文本。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>已删除文本示例</title>
   </head>
    
   <body>
      <p>我需要 <del>睡觉</del> <ins>吃饭</ins></p>
   </body>
    
</html>

大文本

<big>…</big>元素显示的字体比它周围的其他文本大一个,如下所示

例子

<!DOCTYPE html>
<html>

   <head>
      <title>大文本示例</title>
   </head>
    
   <body>
      <p>这是一个<big>使用大文本</big> 的示例.</p>
   </body>
    
</html>

小文本

<small>…</small>元素显示的字体比它周围的其他文本小一倍,如下所示

例子

<!DOCTYPE html>
<html>

   <head>
      <title>小文本示例</title>
   </head>

   <body>
      <p>以下文本使用<small>很小文本的</small>字体。</p>
   </body>

</html>

内容分组

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

例如,你可能希望将所有脚注放在<div>元素内的页面上,以指示<div>元素内的所有元素都与脚注相关。然后可以将样式附加到这个<div>元素,以便使用一组特殊的样式规则显示它们。

例子 <!DOCTYPE htm

<!DOCTYPE html>
<html>

   <head>
      <title>div标签示例</title>
   </head>
    
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">主页</a> | 
         <a href = "/about/contact_us.htm">联系</a> | 
         <a href = "/about/index.htm">关于</a>
      </div>

      <div id = "content" align = "left" bgcolor = "white">
         <h5>文章内容</h5>
         <p>这里是实际内容.....</p>
      </div>
   </body>
    
</html>

另一方面,<span>元素只能用于对内联元素进行分组,因此,如果你想将句子或段落的一部分组合在一起,可以使用<span>元素,如下所示。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Span标签示例</title>
   </head>
    
   <body>
      <p>这是一个 <span style = "color:green">span标签</span>的例子
         ,这里是一个<span style = "color:red">div标签</span>的例子</p>
   </body>
    
</html>

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

赞(0)
未经允许不得转载:srcmini » html格式化 – HTML教程

评论 抢沙发

评论前必须登录!