0%

6.4.3 增强的HTML元素

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-height350px,并在垂直方向展示滚动条。
  • <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章找到关于这些元素更详细的介绍。

原文链接: 6.4.3 增强的HTML元素