5.3 设置文本格式_Dreamweaver CC中文版网页设计与制作从新手到高手-QQ阅读男生轻小说网

书名：Dreamweaver CC中文版网页设计与制作从新手到高手
作者名：吴东伟
本章字数：3754字
更新时间：2021-03-19 19:00:36

5.3 设置文本格式

对于网页中的文本，除了通过【属性】面板设置基本格式之外，还可以通过HTML样式、段落样式等功能，来设置文本格式，从而使页面内容更加美观，更具有层次感。

5.3.1 设置HTML样式

HTML样式是HTML 4引入的，它是一种新的首选的改变HTML元素样式的方式。通过HTML样式，可以通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义。

1. 下划线

下划线标签告诉浏览器把其中加标签的文本加下划线样式呈现给用户。对于所有浏览器来说，这意味着要把这段文字加下划线样式显示。

选择网页文本，执行【格式】|【HTML样式】|【下划线】命令，即可为所选文本添加下划线样式。

2. 删除线

<s></s>标签为删除线标签，告诉浏览器把其中加<s>标签的文本文字加删除线样式（文字中间一道横线）呈现给用户。

选择网页文本，执行【格式】|【HTML样式】|【删除线】命令，即可为所选文本添加删除线样式。

3. 打字型

<tt>标签呈现类似打字机或者等宽的文本效果。<tt>标签与<code>标签和<kbd>标签一样，<tt>标签和</tt>结束标签告诉浏览器，要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说，这个标签在文本的显示上就没有什么特殊效果了。

选择网页文本，执行【格式】|【HTML样式】|【打字型】命令，即可为所选文本添加打字型样式。

4. 强调/斜体

标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体方式呈现给大家，这个与HTML斜体效果相同。

选择网页文本，执行【格式】|【HTML样式】|【强调】命令，即可为所选文本添加强调样式。

提示

HTML样式中的“强调”和“斜体”具有相同的功能，用户只需执行两个命令中的一个命令即可。

5. 加强/粗体

标签用于强调文本，但它强调的程度更强一些。通常是用加粗的字体（相对于斜体）来显示其中的内容。

选择网页文本，执行【格式】|【HTML样式】|【加强】命令，即可为所选文本添加加强样式。

6. 代码

<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的开发人员已经习惯了编写源代码时，文本表示的特殊样式。

在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和用户来说，是十分熟悉的一种情况。

选择网页文本，执行【格式】|【HTML样式】|【代码】命令，即可为所选文本添加代码样式。

只应该在表示计算机程序源代码，或者其他机器可以阅读的文本内容上使用<code>标签。虽然<code>标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

7. 变量

<var>标签表示变量的名称，或者是由用户提供的值。<var>标签是计算机文档应用的另一个小窍门，这个标签经常与<code>和<pre>标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。

用<var>标签标记的文本通常显示为斜体。就像其他与计算机编程和文档相关的标签一样，<var>标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从文档中提取信息以及文档中提到的有用参数。

选择网页文本，执行【格式】|【HTML样式】|【变量】命令，即可为所选文本添加变量样式。

8. 范例

<samp>标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。

选择网页文本，执行【格式】|【HTML样式】|【范例】命令，即可为所选文本添加范例样式。

9. 键盘

<kbd>标签定义键盘文本。说到技术概念上的特殊样式时，就要提到<kbd>标签，它用来表示文本是从键盘上键入的。

除了执行【格式】|【HTML样式】|【键盘】命令，为所选文本添加键盘样式外，还可以直接在【代码】视图中输入有关键盘的代码，其具体代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<article>
  <header>
     <p>键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单。</p>
  </header>
</article>
</body>
</html>

<kbd>标签经常用在与计算机相关的文档和手册中，浏览器通常用等宽字体来显示该标签中包含的文本。

10. 引用

<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。

除了执行【格式】|【HTML样式】|【引用】命令，为所选文本添加引用样式外，还可以直接在【代码】视图中输入有关引用的代码，其具体代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<article>
  <header>
    <cite cite="http://www.dreamdu.com/xhtml/">一步步的教你学会HTML与XHTML</cite>
  </header>
</article>
</body>
</html>

通过上述代码，用户可以在浏览器中看到标签中所显示的效果。

用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊等等。如果引用的这些文档有联机版本，还应该把引用包括在一个<a>标签中，从而把一个超链接指向该联机版本。

<cite>标签还有一个隐藏的功能：它可以从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

11. 定义

<dfn>标签可标记那些对特殊术语或短语的定义。现在流行的浏览器通常用斜体来显示<dfn>标签中的文本。将来，<dfn>还可能有助于创建文档的索引或术语表。

除了执行【格式】|【HTML样式】|【定义】命令，为所选文本添加定义样式外，还可以直接在【代码】视图中输入有关定义的代码，其具体代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<article>
   <header>
     <p><dfn>梦之都</dfn>是一个单词,  更是一种向往!</p>
   </header>
</article>
</body>
</html>

通过上述代码，用户可以在浏览器中看到标签中所显示的效果。

12. 已删除

<del>标签是成对出现的，以<del>开始，</del>结束。<del>标签通常应同<ins>标签一同使用，表示被删除与被插入的文本。

除了执行【格式】|【HTML样式】|【已删除】命令，为所选文本添加已删除样式外，还可以直接在【代码】视图中输入有关已删除的代码，其具体代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<article>
   <header>
     <p>梦之都教程的网址<del title="del url" cite="http://www.dreamdu.com/" datetime="2013-10-21T08:08:03-05:00">http://www.dreamdu.com/xhtml/</del><ins>http://www.dreamdu.com/css/</ins>，原先<del>http://www.dreamdu.com/xhtml/</del>网址已经删除。</p>
   </header>
</article>
</body>
</html>

通过上述代码，用户可以在浏览器中看到标签中所显示的效果。

13. 已插入

<ins>标签也是成对出现的，以<ins>开始，</ins>结束。<ins>标签通常应连同<del>标签一同使用，表示被插入与被删除的文本。使用<ins>标签定义的文本通常带有下划线。

除了执行【格式】|【HTML样式】|【已插入】命令，为所选文本添加已插入样式外，还可以直接在【代码】视图中输入有关已插入的代码，其具体代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<article>
  <header>
   <p>学习网页设计，非常
      <del title="del_Text" cite="语法">
             有利学习
      </del>
      <ins>轻松、方便。</ins>
      ，原先
      <del>用户有方法</del>
      用户需要注重方法。
</p>
  </header>
</article>
</body>
</html>

通过上述代码，用户可以在浏览器中看到标签中所显示的效果。