目录导航

在HTML中,逻辑样式标签指定所包含的文本具有特定的含义,上下文或用法。 例如,ABBR标签向Web浏览器传达了包含在该标签内的文本的缩写。浏览器根据标签的含义更改文本的外观。

使用逻辑样式标签而不是物理样式标签的优点是,与标签有关的含义可以更精确地传达给用户。

1. HTML逻辑样式标签列表

下表列出并描述了用于格式化HTML文档中文本格式的所有逻辑样式标签:

标签 描述
ABBR 在网页上显示缩写
CODE 引用程序代码
SAMP 在网页上显示示例程序输出
KBD 指键盘按键
EM 强调文字
STRONG 通过增加粗体来强调文本
DFN 在网页上显示新术语
Q 在网页上显示简短引用
BLOCKQUOTE 在网页上显示长引用
INS 显示插入的文字
DEL 显示已删除的文本
VAR 表示一个变量
BDO 改变文字方向

HTML逻辑样式标签属性

下表列出并描述了与逻辑样式标签一起使用以格式化HTML文档中的文本格式的所有属性:

属性 描述
class 指示标签的类名
dir 指示文本的方向性,例如从左到右或从右到左
id 指示标签的唯一ID
lang 指示标签中内容的语言代码
style 指示标签的内联样式
title 指示标签的标题

除了上述属性外,还有一些其他属性,例如citedatetime,它们只能与INSDEL标记一起使用。 INSDEL标签用于在HTML文档中通过在内容上划线和删除内容来显示内容的插入。 cite属性用于指示插入和删除的原因。 cite属性的值是通用资源定位符(URL),它指向描述插入或删除的文本的其他文档

datetime属性用于指示插入或删除的时间。 此属性采用单个值,该值是编码的日期和时间戳。 datetime属性值的格式必须为YYYY-MM-DDThh:mm:ssTZD

datetime值属性的组成部分
下表显示了datetime值属性的组成部分:

组成部分 描述说明
YYYY 表示年份,例如:1998或2020
MM 表示月份,例如01表示1月
DD 表示日期,例如01到31
T 指定下一部分显示时间
hh 以24小时制表示小时
mm 表示分钟,00到59
ss 表示秒,00到59
TZD 指示时区指示符(TZD)

现在,让我们学习一些重要的标签。

2. HTML MARK标签

HTML MARK标记用于标记或突出显示HTML文档中的文本。

注意:默认情况下,MARK标记显示带有黄色背景色的文本

HTML MARK标记属性
下表列出并描述了可与MARK标记一起使用以格式化HTML文档中的文本格式的属性:

属性 描述说明
class 指示MARK标签的类名
id 表示MARK标签的唯一ID
style 指示MARK标签的内联样式
title 指示MARK标签的标题

下面是HTML MARK标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML格式化文本例</h2>            
    <p>这是一行<mark>mark或高亮</mark>文本</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
 HTML MARK标签

3. HTML STRONG标签

HTML STRONG标记用于以粗体强调重要文本。此标记增加了文本的字体粗细,并使文本显示为粗体。以便帮助我们识别HTML文档中的重要文本内容。

HTML STRONG标记属性
下表中列出了STRONG标记中的属性:

属性 描述说明
class 指示STRONG标记的类名称
id 指示STRONG标记的唯一ID
style 指示STRONG标记的内联样式
title 指示STRONG标签的标题

下面是HTML STRONG标记的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML格式化文本例</h2>            
    <p>这是一行 <strong>strong标签(重要)</strong>文本</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML STRONG标签

HTML CODE标签

HTML CODE标记用于表示HTML文档中的计算机语言代码。因此,如果要在网页上显示一些文章,其中包含一些程序的文本和代码,则可以在CODE标记中编写程序代码,以便文章的阅读者可以区分常规文本和代码 。

HTML CODE标签属性
下表显示了CODE标记的属性:

属性 描述说明
class 指示STRONG标记的类名称
id 指示STRONG标记的唯一ID
style 指示STRONG标记的内联样式
title 指示STRONG标签的标题

下面是HTML CODE标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML格式化文本例</h2>            
    <p>这是一行 <code> code标签 </code> 文本</p>
    <p><code>var text = $("#id").val();</code></p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML code标签

4. HTML SMALL标签

HTML SMALL标记用于将文本显示为旁注或小字体。小字体包括免责声明,法律限制和版权。

HTML SMALL标记属性
下表显示了SMALL标签的属性:

属性 描述说明
class 指示STRONG标记的类名称
id 指示STRONG标记的唯一ID
style 指示STRONG标记的内联样式
title 指示STRONG标签的标题

下面是用于格式化HTML文档中文本格式的HTML SMALL标记示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML格式化文本例</h2>            
    <p>这是一行 <code> small标签 </code> 文本</p>
    <p><small>var text = $("#id").val();</small></p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML SMALL标签