<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用样式</title>
<link rel="stylesheet" type="text/css"
href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
1.列表
无序列表(<ul><li>......</li></ul>)
有序列表(<ol><li>......</li></ol>)
定义列表(<dl><dt>......</dt><dd>......</dd></dl>)
2.代码
2.1 使用<code></code>来显示单行内联代码
2.2 使用<pre></pre>来显示多行代码
样式：pre-scrollable(height,max-height高度固定，为340px，超过存在滚动条)
2.3 使用<kbd></kbd>来显示用户输入代码，如快捷键
3.表格
3.1 基础样式(.table)
3.2 斑马线表格(.table-striped)
3.3 带边框的表格(.table-bordered)
3.4 鼠标悬停高亮表格(.table-hover)
3.5 紧凑型表格(.table-condensed)，单元格没内距或者内距较其它表格的内距小
-->
<!--无序 列表-->
<ul>
<li>无序列表一</li>
<li>无序列表二</li>
</ul>
<!--有序 列表-->
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
</ol>
<!--定义列表-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表是一种样式表语言</dd>
</dl>
<hr/>
<!--去点列表-->
<ul class="list-unstyled">
<li>无序列表一</li>
<li>无序列表二</li>
</ul>
<hr/>
<!--内联列表-->
<ul class="list-inline">
<li>后端</li>
<li>前端</li>
<li>移动开发</li>
</ul>
<hr/>
<!--自定义列表 内联列表-->
<dl class="dl-horizontal">
<dt>ls 指令</dt>
<dd>默认浏览当前目录下的文件信息</dd>
<dt>pwd 指令</dt>
<dd>查看当前所在路径 </dd>
</dl>
<hr/><br>
<!--使用<code></code>来显示单行内联代码-->
这是一行代码<br/>
<code>这是一行代码</code>
<hr/>
<!--快捷键-->
<p>使用ctrl + s 保存内容</p>
<p>使用<kbd>ctrl</kbd> + <kbd>s</kbd> 保存内容</p>
<hr/>
<!--多行代码-->
<!--代码会保留原本的格式，包括空格和回车-->
<pre>
public class Helloword{
public void main(String[] args){
System.out.println("Hello World!!!");
}
}
</pre>
<!--如果要显示Html代码，需要使用字符实体-->
<pre>
<h2>你好</h2>
</pre>
<!--当长度超过指定值，可以添加滚动条-->
<pre class="pre-scrollable">
<ol>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
<li>滚动条出来......</li>
</ol>
</pre>
<hr/>
<!--表格-->
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="success">
<td>面向对象</td>
<td>Oracle</td>
<td>特效</td>
</tr>
<tr class="warning">
<td>继承</td>
<td>MySQL</td>
<td>Ajax</td>
</tr>
<tr class="active">
<td>IO流</td>
<td>DB2</td>
<td>函数</td>
</tr>
</table>
</body>
</html>