6.4.3 增强的HTML元素

发表于 更新于 分类于 ， ， Waline： 本文字数： 5.2k 阅读时长 ≈ 5 分钟

6.4.3 增强的HTML元素

Bootstrap出于风格统一、美观的目的,可能对如下HTML元素进行了强化,但我们只要像以往一样使用这些HTML元素即可。

常见HTML元素

  • <mark>元素:用于显示HTML页面中需要重点”关注”的内容,就像看书时喜欢用荧光笔把某些重点内容标注出来一样。
  • <del>和<s>元素:浏览器通常会以中画线形式显示<del>或<s>包含的文本。其中<del>的语义表示文档中被删除的文本;<s>的语义表示文档中无用的文本。
  • <ins>和<u>元素:浏览器通常会以下画线形式显示<ins>或<u>包含的文本。其中<ins>还有额外的语义:用于定义文档中插入的文本。
  • <strong>和<b>元素:浏览器通常会以粗体字形式显示<strong>或<b>包含的文本。其中<strong>还有额外的语义:用于定义文档中需要强调的文本。此外也可在CSS样式中使用font-weight来实现更丰富的粗体字效果。
  • <em>或<i>元素:浏览器通常会以斜体字形式显示<em>或<i>包含的文本。其中<em>的语义表示文档中需要强调的文本;<i>标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
  • <abbr>元素:用于表示一个缩写。使用该元素时通常建议指定title属性,该属性用于指定该缩写所代表的全称。外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有”问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上。此外,Bootstrap还为缩略语定义了.initialism样式,可以让font-size变得稍微小些。
  • <address>元素:用于表示一个地址,让地址信息以最接近日常使用的格式显示出来。在每行结尾添加<br>可以保留需要的样式。
  • <blockquote>元素:用于定义一段长的引用文本。使用<blockquote>元素时可指定cite属性,该属性指定引用文本所引用的网址URL或出处。 Bootstrap建议添加<footer>用于标明引用来源,来源的名称可以放在<cite>标签内。此外,Bootstrap还提供了一个.blockquote-reverse样式,其可以让被引用的内容呈现右对齐的效果。
  • <code>元素:用于表示一段计算机代码。
  • <kbd>元素:用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中会经常使用该元素。
  • <samp>元素:用于标记程序输出的内容。
  • <pre>元素:用于表示该元素所包含的文本已经被进行了”预格式化”。也就是说,<pre>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被保留下来,但浏览器会处理<pre>元素内大部分HTML元素。Bootstrap推荐使用<pre>标签来包含大段代码。此外,Bootstrap还提供了.pre-scrollable样式,其作用是设置max-height为350px,并在垂直方向展示滚动条。
  • <var>元素:用于表示一个变量。浏览器通常会用斜体字显示<var>所包含的文本。

程序示例

下面的页面代码示范了前面几个HTML标签的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 增强的HTML元素 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <p>
            <mark>HTML 5</mark>是下一代的HTML规范，
            <mark>HTML 5</mark>即将把前端开发者从繁重的开发中释放出来。</p>
        <p>Android是一个
            <del>开发</del>
            <ins>开放</ins>式的手机、平板电脑操作系统
        </p>
        <p>Android是一个
            <s>开发</s>
            <u>开放</u>式的手机、平板电脑操作系统
        </p>
        <p>strong标签的效果：
            <strong>被强调的文本</strong>
        </p>
        <p>b标签的效果：
            <b>加粗文本</b>
        </p>
        <p>i标签的效果：
            <i>斜体文本</i>
        </p>
        <p>em标签的效果：
            <em>被强调的文本</em>
        </p>
        <p>
            <abbr title="Hyper Text Markup Language">HTML</abbr>。
        </p>
        天安门广场的地址是:
        <address>北京市
            <br> 东城区
            <br> 东长安街
            <br>
        </address>
        <blockquote cite="李义山诗集">
            锦瑟无端五十弦，一弦一柱思华年。
            <br> 庄生晓梦迷蝴蝶，望帝春心托杜鹃。
            <br> 沧海月明珠有泪，蓝田日暖玉生烟。
            <br> 此情可待成追忆，只是当时已惘然。
        </blockquote>
        <p>下面是右对齐的引用</p>
        <blockquote cite="李义山诗集" class="blockquote-reverse">
            锦瑟无端五十弦，一弦一柱思华年。
            <br> 庄生晓梦迷蝴蝶，望帝春心托杜鹃。
            <br> 沧海月明珠有泪，蓝田日暖玉生烟。
            <br> 此情可待成追忆，只是当时已惘然。
        </blockquote>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

下面的页面代码示范了另外几个HTML标签的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 增强的HTML元素 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <p>下面代码定义了一个Java类：
            <!-- 代码 -->
            <code>Cat</code>类
        </p>
        <!-- pre元素包含的内容是“预格式化”文本。 -->
        <pre>public class Cat
    {
        private int name = "garfield";
    }</pre>
        <p>可通过输入如下命令：
            <br>
            <!-- 键盘输入 -->
            <kbd>ls -l</kbd>
            <br> 在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。
            <br> 该命令可能产生如下输出:
            <br>
            <!-- 程序输出 -->
            <samp>
                -rw-r--r--. 1 root root 683 Aug 19 09:59 fkjava.png
                <br> drwxr-xr-x. 2 root root 4096 Jul 31 02:48 Desktop
                <br> drwxr-xr-x. 2 root root 4096 Jul 31 02:48 Documents
                <br> drwxr-xr-x. 4 root root 4096 Aug 16 02:55 Downloads
                <br>
            </samp>
        </p>
        <!-- 使用var定义变量 -->
        <var>i</var>、
        <var>j</var>、
        <var>k</var>通常用于作为循环计数器变量。
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

提示

由于上面这些元素是Bootstrap直接借用了HTML 5元素，因此读者可以通过《疯狂HTML 5/CSS 3/JavaScript讲义》第2章找到关于这些元素更详细的介绍。