<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>排版</title> <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css"> <!-- 5.处理兼容性的js文件 cssHack 条件注释法 --> <!--[if lt IE 9]> <script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script> <script src="bootstrap-3.3.5-dist/js/respond.min.js"></script> <![endif]--> <style> body{ padding:50px 100px; </style> </head> <body> <!-- 排版 --> <!-- 标题 --> <!-- h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 --> <h1>h1标题<small>small标签</small></h1> <h2>h2标题<span class="small">small类</span></h2> <h3>h3标题</h3> <span class="h4">.h4类样式</span> <span class="h5">.h5类样式</span> <span class="h6">.h6类样式</span> <!-- 页面主体 --> <!-- 全局 font-size 设置为 14px，line-height 设置为 1.428 <p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。 --> <P >Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</P> <!-- 中心内容 --> <!-- 通过添加 .lead 类可以让段落突出显示。 --> <p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <!-- 内联文本元素 --> Marked text:要突出显示一段文本，因为它与另一个上下文相关，请使用<mark> mark </mark>标记<br> 被删除的文本:被<del>删除</del>的文本<br> 无用文本:<s>无用文本</s><br> 插入文本:<ins>插入文本</ins><br> 带下划线的文本:<u>带下划线的文本</u><br> 小号文本: <!-- 对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。 --> <div>父级容器文本<br> <small>父级文本字体的85%</small><br> <span class="small">small类的子类文本</span><br> </div> 着重:<strong>强调</strong>一段文本<br/> 斜体:通过<em>斜体</em>强调一段文本<br/><br/> <!-- 在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。 --> <!-- 对齐 --> <p class="text-left">左对齐文本。</p> <p class="text-center">居中对齐文本。</p> <p class="text-right">右对齐文本</p> <p class="text-justify">两端对齐文本。</p> <p class="text-nowrap">不自动换行文本。</p> <!-- 改变大小写 --> <p class="text-lowercase">LOWERCASE TEXT.</p> <p class="text-uppercase">uppercased text</p> <p class="text-capitalize">capitalized text.</p><br><br> <!-- 缩略语 --> <!-- 略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针 --> <abbr title="提示信息">提示</abbr> <abbr title="这是html文本" class="initialism">html</abbr> <!-- 地址 --> <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<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> <!-- 引用 --> <!-- 在你的文档中引用其他来源的内容。 添加 <footer> 用于标明引用来源。 来源的名称可以包裹进 <cite>标签中。 --> <blockquote> <p>将任何 HTML 元素包裹在 blockquote 中即可表现为引用样式</p> <footer>引用来源 <cite>来源名称</cite></footer> <footer class="blockquote-reverse">引用来源 <cite>来源名称</cite></footer> </blockquote> <!-- 列表 --> <!-- 无序列表 --> <ul> <li>无序列表</li> <li>无序列表</li> <ul> <li>无序列表</li> <li>无序列表</li> </ul> </ul> <!-- 有序列表 --> <ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <!-- 无样式列表 --> <ul class="list-unstyled"> <li>无样式列表</li> <li>无样式列表</li> <li>无样式列表</li> </ul> <!-- 内联列表 --> <ul class="list-inline"> <li>内联列表</li> <li>内联列表</li> <li>内联列表</li> </ul> <!-- 描述 --> <!-- 带有描述的短语列表。 dl-horizontal 可以让 <dl> 内的短语及其描述排在一行 --> <dl> <dt>短语</dt> <dd>描述内容</dd> </dl> <dl class="dl-horizontal"> <dt>短语</dt> <dd>水平排列描述内容</dd> </dl> <dl class="dl-horizontal" text-overflow > <dt>短语</dt> <dd>水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容水平排列描述内容</dd> </dl> <!-- 自动截断 通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。 --> <!-- 代码 --> <!-- 内联代码 通过 <code> 标签包裹内联样式的代码片段。 --> For example, <code><section></code> should be wrapped as inline.<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> <!-- 代码块 多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。 还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。--> <pre class="pre-scrollable"><p>Sample text here</p><p>Sample text here</p><p>Sample text here</p><p>Sample text here</p><p>Sample text here</p><p>Sample text here</p><p>Sample text here</p><p>Sample text here</p></pre> <!-- 变量 通过 <var> 标签标记变量。 --> <var>y</var> = <var>m</var><var>x</var> + <var>b</var> <!-- 程序输出 通过 <samp> 标签来标记程序输出的内容。 --> <samp>This text is meant to be treated as sample output from a computer program.</samp> </body> </html>