1 HTML中的语义化标签
| 标签 |
说明 |
| mark |
标记 |
| del |
删除 |
| u |
下划线 |
| s |
无用文本 |
| small |
小号文本，父容器的85% |
| strong |
强调 |
| address |
地址 |
| code |
内联代码 |
| kbd |
用户输入 |
| pre |
原样输出 |
| samp |
程序输出 |
| var |
变量 |
| blockquote |
引用 |
| abbr |
缩略语 |
<abbr title="鼠标悬停后显示的内容">缩略语</abbr>
引用右对齐：class=“blockquote-reverse”
2 Bootstrap中的排版类
2.1 显示
| class类 |
说明 |
| lead |
段落突出显示 |
| small |
小文本，父文本大小的85% |
2.2 对齐
| class类 |
说明 |
| text-left |
左对齐 |
| text-right |
右对齐 |
| text-center |
居中对齐 |
| text-justify |
超出屏幕的文字部分自动换行 |
| text-nowrap |
超出屏幕的部分不换行 |
2.3 大小写
| class类 |
说明 |
| text-lowercase |
文本小写 |
| text-uppercase |
文本大写 |
| text-capitalize |
单词首字母大写 |
3 样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>1 HTML中的语义化标签</h1>
<dl class="dl-horizontal">
<dt>mark</dt>
<dd><mark>被标记的文本</mark></dd>
<dt>del</dt>
<dd><del>被删除的文本</del></dd>
<dt>u</dt>
<dd><u>下划线文本</u></dd>
<dt>s</dt>
<dd><s>无用文本</s></dd>
<dt>small</dt>
<dd><small>小号文本</small></dd>
<dt>strong</dt>
<dd><strong>强调</strong></dd>
<dt>em</dt>
<dd><em>斜体</em></dd>
<dt>address</dt>
<dd><address>地址</address></dd>
<dt>code</dt>
<dd><code>内联代码</code></dd>
<dt>kbd</dt>
<dd><kbd>用户输入</kbd></dd>
<dt>pre</dt>
<dd><pre>原样输出</pre></dd>
<dt>samp</dt>
<dd><samp>程序输出</samp></dd>
<dt>var</dt>
<dd><var>变量</var></dd>
<dt>引用</dt>
<dd>
<blockquote class="blockquote-reverse">
<p>这里引用了康老师的一句名言</p>
</blockquote>
</dd>
<dt>缩略语</dt>
<dd><abbr title="鼠标悬停后显示的内容">缩略语</abbr></dd>
</dl>
<h1>2 Bootstrap中的排版类</h1>
<h2>2.1 显示</h2>
<dl class="dl-horizontal">
<dt>lead</dt>
<dd>
<p class="lead">lead突出显示</p>
</dd>
<dt>small</dt>
<dd>
<p class="small">small小文本</p>
</dd>
</dl>
<h2>2.2 对齐</h2>
<dl class="dl-horizontal">
<dt>text-left</dt>
<dd>
<p class="text-left">左对齐</p>
</dd>
<dt>text-right</dt>
<dd>
<p class="text-right">右对齐</p>
</dd>
<dt>text-center</dt>
<dd>
<p class="text-center">居中对齐</p>
</dd>
<dt>text-justify</dt>
<dd>
<p class="text-justify">超出屏幕的文字部分自动换行</p>
</dd>
<dt>text-nowrap</dt>
<dd>
<p class="text-nowrap">超出屏幕的部分不换行</p>
</dd>
</dl>
<h2>2.3 大小写</h2>
<dl class="dl-horizontal">
<dt>text-lowercase</dt>
<dd>
<p class="text-lowercase">文本小写HTML</p>
</dd>
<dt>text-uppercase</dt>
<dd>
<p class="text-uppercase">文本大写html</p>
</dd>
<dt>text-capitalize</dt>
<dd>
<p class="text-capitalize">首字母大写html</p>
</dd>
</dl>
</body>
</html>
显示：
