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
代码如下：
<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大小为40pxh1>
<h2>h2大小为32pxh2>
<h3>h3大小为28pxh3>
<h4>h4大小为24pxh4>
<h5>h5大小为20pxh5>
<h6>h6大小为16pxh6>
div>
body>
html>
运行结果：
3. 标题类：Display
知识点：1. 可以用四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
2. Display 标题可以输出更大更粗的字体样式。
代码如下：
<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 1h1>
<h1 class="display-2">Display 2h1>
<h1 class="display-3">Display 3h1>
<h1 class="display-4">Display 4h1>
div>
body>
html>
运行结果：
4. < small > 、< mark > 、< abbr >
知识点：1. < small > 元素用于创建字号更小的颜色更浅的文本
2. < mark > 为黄色背景及有一定的内边距
3. < abbr > 为显示在文本底部的一条虚线边框
代码如下：
<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 标题 <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>
<p>使用 mark 元素来 <mark>高亮mark> 文本。p>
<p>每天一<abbr title="蔷薇科植物">苹果abbr>，疾病远离我。 p>
div>
body>
html>
运行结果：
5. < blockquote > 、< dl >
知识点：1. < blockquote > ：标记长的引用
2. 对于引用的内容可以在 < blockquote > 上添加 .blockquote 类
3. < dl > 标签定义了定义列表；< dt >定义列表中的项目；< dd > 定义列表中的项目。
代码如下：
<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 class="blockquote">
<p>业精于勤，荒于嬉；行成于思，毁于随。p>
<footer class="blockquote-footer">韩愈footer>
blockquote>
<dl>
<dt>Coffeedt>
<dd>- black hot drinkdd>
<dt>Milkdt>
<dd>- white cold drinkdd>
dl>
div>
body>
html>
运行结果：
6. < code >、< kbd >、< pre >
知识点：1. < code >：代码片段
2. < kbd >：用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。
3. < pre >：被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。常用来表示计算机的源代码。
代码如下：
<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">
<p>以下 HTML 元素: <code>spancode>, <code>sectioncode>, 和 <code>divcode> 用于定义部分文档内容。p>
<p>用快捷键<kbd>ctrl + ckbd>进行复制p>
<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轴出现滚动条
代码如下：
<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>Coffeeli>
<li>Tea
<ul>
<li>Black teali>
<li>Green teali>
ul>
li>
<li>Milkli>
ul>
<hr >
<ul class="list-inline">
<li class="list-inline-item">Coffeeli>
<li class="list-inline-item">Teali>
<li class="list-inline-item">Milkli>
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>
运行结果：
