master

分支 (1)

管理

管理

master

bootstrap
/
demo1.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>示例1</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<div class="container">
			<div class="h1 text-center">文章标题</div>

			<!--.lead 类可以让段落突出显示-->
			<p class="lead">
				这个协议在使用中场景中的流程怎么样的呢？
				通常由http客户端发起一个<ins>ins标签，插入文本</ins>请<u>u标签，为文本添加下划线</u>求比如用手机浏览器打开一个视频网站，那么就创建了一个到服务器指定端口，一般是80默认端口，这个一个tcp的链接。
				tttp服务器<small>small标签，小号文本，85%大小</small>在端口<strong>strong标签，着重</strong>监听客户<em>em标签，斜体</em>端的请求，一旦收到请求服务器就会<mark>mark</mark>向客户端返回一个状态，<del>del标签</del>比如200的一个状态码，<s>s标签，无用文本</s>同时返回内容比如请求的文件，错误的信息
			</p>

			<p class="text-lowercase">TEXT-lowercase 转小写</p>
			<p class="text-uppercase">text-uppercase 转大写</p>
			<p class="text-capitalize">text-capitalize 首字母大写</p>
			<p>
				<abbr title="我是缩略语，鼠标移上去可以看全部内容">基本缩略语</abbr>
				<abbr title="HyperText Markup Language" class="initialism">HTML，首字母缩略语</abbr>
			</p>

			<address>
			  <strong>Twitter, Inc.</strong><br>
			  1355 Market Street, Suite 900<br>
			  地址：San Francisco, CA 94103<br>
			  <abbr title="Phone">P:</abbr> (123) 456-7890
			</address>

			<address>
			  <strong>Full Name</strong><br>
			  <a href="mailto:#">first.last@example.com</a>
			</address>

			<blockquote>
			  <p>引用：默认样式引用Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			</blockquote>

			<blockquote>
			  <p>引用：多行样式引用Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
			</blockquote>

			<blockquote class="blockquote-reverse">
			  通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
			</blockquote>

			<ul>
			  <li>ul li 无序列表</li>
			  <li>ul li 无序列表</li>
			  <li>ul li 无序列表</li>
			  <li>ul li 无序列表</li>
			</ul>
			<ul class="list-unstyled">
			  <li>ul li 无序列表，移除默认list-style样式</li>
			  <li>ul li 无序列表，移除默认list-style样式</li>
			  <li>ul li 无序列表，移除默认list-style样式</li>
			  <li>ul li 无序列表，移除默认list-style样式</li>
			</ul>

			<ol>
			  <li>ol li 有序列表</li>
			  <li>ol li 有序列表</li>
			  <li>ol li 有序列表</li>
			  <li>ol li 有序列表</li>
			</ol>

			<ul class="list-inline">
			  <!--<li>内联列表，通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行</li>
			  <li>内联列表，通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行</li>-->
			</ul>

			<dl>
			  <dt>带有描述的短语列表。</dt>
			  <dd>.带有描述的短语列表。.</dd>
			</dl>


			<code>&lt;section&gt;</code> 通过 code 标签包裹内联样式的代码片段<br />

			通过 kbd 标签标记用户通过键盘输入的内容To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
			To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
			<br />

			<pre>多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
			<pre class="pre-scrollable">垂直方向展示滚动条，多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

			变量使用：<var>y</var> = <var>m</var><var>x</var> + <var>b</var> <br />

			<samp>通过 <samp> 标签来标记程序输出的内容。This text is meant to be treated as sample output from a computer program.</samp>

		</div>
	</body>
</html>