本文详细介绍如何使用HTML和CSS进行高效排版，包括标题、段落、内联元素、列表、引用等各类元素的使用技巧，以及文本对齐、大小写调整、缩略语处理等细节设置。
标题
h1 ~ h6.h1 ~ h6small.small
<!-- 标题 -->
<h1>h1. 标题</h1>
<h2>h2. 标题</h2>
<h3>h3. 标题</h3>
<h4>h4. 标题</h4>
<h5>h5. 标题
<small>副标题</small>
</h5>
<h6>h6. 标题<span class="small">副标题</span></h6>
中心内容
.lead
<p class="lead">通过添加 <code>.lead</code> 类可以让段落突出显示。</p>
内联文本元素
markdelsstrongemusmall
<!-- 内联文本元素 -->
<p>
<mark>标记</mark>
</p>
<p>
<del>对于被删除的文本使用 <code>del</code> 标签。</del>
</p>
<p><s>对于没用的文本使用 <code>s</code> 标签。</s></p>
<p>
<ins>
额外插入的文本使用 <code>ins</code> 标签。
</ins>
</p>
<p>
<u>
为文本添加下划线，使用 <code>u</code> 标签。
</u>
</p>
<p>
<small>
对于不需要强调的inline或block类型的文本，使用 <code>small</code> 标签包裹
</small>
</p>
<p>
<strong>
通过增加 font-weight 值强调一段文本
</strong>
</p>
<p>
<em>
用斜体强调一段文本。
</em>
</p>
地址
address
<!-- 地址 -->
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
(123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
对齐
.text-left.text-righttext-centertext-justifytext-nowrap
<p class="text-left lead">左对齐</p>
<p class="text-right lead">右对齐</p>
<p class="text-center lead">居中对齐</p>
<p class="text-justify lead">两端对齐</p>
<p class="text-nowrap lead" style="width: 10px; background-color: orange;">不换行</p>
改变大小写
.text-lowercase.text-uppercase.text-capitalize
<!-- 改变大小写 -->
<P class="text-lowercase">LOWER CASE</P>
<P class="text-uppercase">upper case</P>
<p class="text-capitalize">capitalize</p>
缩略语
abbr
<!-- 缩略语 -->
<p>
<abbr title="World Wide Web">WWW</abbr>
</p>
首字母缩略语
.initialism
<!-- 首字母缩略语 -->
<p>
<abbr title="HyperText Markup Language" class="initialism">html</abbr>
</p>
引用
blockquote.blockquote-reverse
<!-- 引用 -->
<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">
<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>
列表
无序列表
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
有序列表
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
样式
.list-unstyled.list-inline
<!-- 无序列表
list-unstyled 只是针对直接子元素的，由于CSS的冲突样式规则中的选中和继承，
如果后续的列表也要移除样式，只能再声明一次
-->
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
描述列表
.dl-horizontal
<!-- 描述列表 -->
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus.
</dd>
</dl>
总体
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>03排版</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body style="background-color: #ccc;">
<pre class="pre-scrollable">
排版
标题
h1 ~ h6
.h1 ~ .h6
small
.small
中心内容
.lead
内联文本元素
mark
del
s
em
strong
small
地址
address
对齐
.text-left
.text-right
.text-center
.text-justify
.text-nowrap
改变大小写
.text-lowercase
.text-uppercase
.text-capitalize
缩略语
abbr
首字母缩略语
.initialism
引用
blockquote
.blockquote-reverse
列表
.list-unstyled
.list-inline
描述列表
.dl-horizontal
</pre>
<!-- 标题 -->
<h1>h1. 标题</h1>
<h2>h2. 标题</h2>
<h3>h3. 标题</h3>
<h4>h4. 标题</h4>
<h5>h5. 标题
<small>副标题</small>
</h5>
<h6>h6. 标题<span class="small">副标题</span></h6>
<!-- 中心内容 -->
<p class="lead">通过添加 <code>.lead</code> 类可以让段落突出显示。</p>
<!-- 内联文本元素 -->
<p>
<mark>标记</mark>
</p>
<p>
<del>对于被删除的文本使用 <code>del</code> 标签。</del>
</p>
<p><s>对于没用的文本使用 <code>s</code> 标签。</s></p>
<p>
<ins>
额外插入的文本使用 <code>ins</code> 标签。
</ins>
</p>
<p>
<u>
为文本添加下划线，使用 <code>u</code> 标签。
</u>
</p>
<p>
<small>
对于不需要强调的inline或block类型的文本，使用 <code>small</code> 标签包裹
</small>
</p>
<p>
<strong>
通过增加 font-weight 值强调一段文本
</strong>
</p>
<p>
<em>
用斜体强调一段文本。
</em>
</p>
<!-- 地址 -->
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
(123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
<!-- 对齐 -->
<p class="text-left lead">左对齐</p>
<p class="text-right lead">右对齐</p>
<p class="text-center lead">居中对齐</p>
<p class="text-justify lead">两端对齐</p>
<p class="text-nowrap lead" style="width: 10px; background-color: orange;">不换行</p>
<!-- 改变大小写 -->
<P class="text-lowercase">LOWER CASE</P>
<P class="text-uppercase">upper case</P>
<p class="text-capitalize">capitalize</p>
<!-- 缩略语 -->
<p>
<abbr title="World Wide Web">WWW</abbr>
</p>
<!-- 首字母缩略语 -->
<p>
<abbr title="HyperText Markup Language" class="initialism">html</abbr>
</p>
<!-- 引用 -->
<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">
<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>
<!-- 无序列表
list-unstyled 只是针对直接子元素的，由于CSS的冲突样式规则中的选中和继承，
如果后续的列表也要移除样式，只能再声明一次
-->
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
<!-- 描述列表 -->
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus.
</dd>
</dl>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
