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>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>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元素