Day-3 文字排版

文字排版

1. Bootstrap 4 默认设置
2. < h1 > ~ < h6 >样式
3. 标题类：Display
4. < small > 、< mark > 、< abbr >
5. < blockquote > 、< dl >
6. < code >、< kbd >、< pre >
7. 排版类

1. Bootstrap 4 默认设置

font-size 为 16px，line-height 为 1.5。所有的 < p >元素 margin-top: 0 、 margin-bottom: 16px。

2. < h1 > ~ < h6 >样式

知识点：h1大小为40px
h2大小为32px
h3大小为28px
h4大小为24px
h5大小为20px
h6大小为16px

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script><script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><h1>h1大小为40px</h1><h2>h2大小为32px</h2><h3>h3大小为28px</h3><h4>h4大小为24px</h4><h5>h5大小为20px</h5><h6>h6大小为16px</h6></div></body>
</html>

运行结果：

3. 标题类：Display

知识点：1. 可以用四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

2. Display 标题可以输出更大更粗的字体样式。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script><script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1></div></body>
</html>

运行结果：

4. < small > 、< mark > 、< abbr >

知识点：1. < small > 元素用于创建字号更小的颜色更浅的文本

2. < mark > 为黄色背景及有一定的内边距

3. < abbr > 为显示在文本底部的一条虚线边框

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script><script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container">    <!-- small --><h1>h1 标题 <small>副标题</small></h1><h2>h2 标题 <small>副标题</small></h2><h3>h3 标题 <small>副标题</small></h3><h4>h4 标题 <small>副标题</small></h4><h5>h5 标题 <small>副标题</small></h5><h6>h6 标题 <small>副标题</small></h6><!-- mark --><p>使用 mark 元素来 <mark>高亮</mark> 文本。</p><!-- abbr --><p>每天一<abbr title="蔷薇科植物">苹果</abbr>，疾病远离我。 </p></div></body>
</html>

运行结果：

5. < blockquote > 、< dl >

知识点：1. < blockquote > ：标记长的引用

2. 对于引用的内容可以在 < blockquote > 上添加 .blockquote 类

3. < dl > 标签定义了定义列表；< dt >定义列表中的项目；< dd > 定义列表中的项目。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script><script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><!-- blockquote  --><blockquote class="blockquote"><p>业精于勤，荒于嬉；行成于思，毁于随。</p><footer class="blockquote-footer">韩愈</footer></blockquote><!-- dl --><dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>  </div></body>
</html>

运行结果：

6. < code >、< kbd >、< pre >

知识点：1. < code >：代码片段
2. < kbd >：用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。
3. < pre >：被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。常用来表示计算机的源代码。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script><script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><!-- code --><p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p><!-- kbd --><p>用快捷键<kbd>ctrl + c</kbd>进行复制</p><!-- pre --><pre>
What's your name ?
My name is
Han MeiMei.</pre></div></body>
</html>

运行结果：

7. 排版类

知识点：1. .font-weight-bold / .font-weight-normal / .font-weight-light / font-italic 加粗文本 / 普通文本 / 更细的文本 / 斜体文本

2. .text-left / .text-center / .text-right 左对齐 / 居中 / 右对齐

3. .text-justify / .text-nowrap 设定文本对齐,段落中超出屏幕部分文字自动换行 / 段落中超出屏幕部分不换行

4. .text-lowercase / uppercase / capitalize 设定文本小写 / 大写 / 单词首字母大写

5. .small 指定更小文本 (为父元素的 85% )

6. .lead 让段落更突出

7. .initialism 显示在 < abbr > 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

8. .list-unstyled 移除默认的列表样式，列表项 ( < ul > 和 < ol > )中左对齐。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)

9. .list-inline 将所有列表项放置同一行

10. .pre-scrollable 使 < pre > 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script><script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><p class="font-weight-bold">加粗文本</p><p class="font-weight-normal">正常文本</p><p class="font-weight-light">更细的文本</p><p class="font-italic">斜体文本</p><hr ><p class="text-left">左对齐</p><p class="text-right">右对齐</p><p class="text-center">居中对齐文本</p><p class="text-justify">设定文本对齐,段落中超出屏幕部分文字自动换行</p><p class="text-nowrap">段落中超出屏幕部分不换行</p><hr ><p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p><hr ><p>This is a regular paragraph.</p><p class="small">This paragraph is smaller.</p><hr ><p>This is a regular paragraph.</p><p class="lead">This paragraph stands out.</p><hr ><p>每天一<abbr title="蔷薇科植物">苹果</abbr>，疾病远离我。(normal abbr) </p><p>每天一<abbr title="蔷薇科植物" class="initialism">苹果</abbr>，疾病远离我。(slightly smaller abbr)</p><hr ><ul class="list-unstyled"><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea</li></ul></li><li>Milk</li></ul><hr ><ul class="list-inline"><li class="list-inline-item">Coffee</li><li class="list-inline-item">Tea</li><li class="list-inline-item">Milk</li></ul><hr ><pre>What's your name ?
My name is
Han MeiMei.
</pre><pre class="pre-scrollable">What's your name ?
My name is
Han MeiMei
</pre></div></body>
</html>

运行结果：