Day-3 文字排版
文字排版
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>
執行結果：
相關文章
- SVG 文字排版SVG
- 002.08 文字輸出排版 PySimpleGUIGUI
- 檔案排版（文字檔案讀寫）
- 多行文字末尾新增圖片排版問題解決
- Vue學習基礎day-3Vue
- Android撩妹特效系列!仿instagram文字自動排版功能實現!Android特效
- PR模板-80個簡單文字標題動感排版預設動畫動畫
- 21款國外網頁UI設計欣賞，文字排版不再單調！網頁UI
- 前端菜鳥筆記 Day-3 CSS基礎前端筆記CSS
- Markdown排版操作
- 【LaTeX應用】圖書排版、PPT排版模板下載
- Markdown排版規範
- html排版標籤HTML
- 排版幻燈片
- Bootstrap 排版介紹boot
- 初學 Bootstrap 排版boot
- 檔案排版 題解
- 桌面排版Affinity Publisher for MacMac
- Affinity Publisher 桌面排版神器
- Flex 排版原始碼分析Flex原始碼
- 資料夾橫向排版
- pycharm怎麼自動排版PyCharm
- Overture 5 最強排版教程
- 20組創意史詩電影文字標題排版視覺設計(PR模板/FCPX外掛/PS模板)視覺
- L1-039 古風排版
- Mac桌面排版神器——Affinity Publisher for MacMac
- GacUI基本概念（二）——排版（1）UI
- 中文寫作排版風格指南
- 畢業論文排版框架tex框架
- MOBIM ios 表情鍵盤排版方法iOS
- Markdown 利用HTML進行優雅排版HTML
- 在網頁設計中如何排版網頁
- AE/PR指令碼-400款時尚創意字幕條標題排版設計文字動畫Just Typography Pack V2指令碼動畫
- 電商平臺的商品詳情頁如何排版？輕鬆搞定詳情頁的排版設計！
- LaTeX教材排版-02：TextBook.cls說明
- Affinity Publisher 2(逆天排版神器)mac/winMac
- Affinity Publisher Beta for Mac 實用桌面排版工具Mac
- 動手打造一款 canvas 排版引擎Canvas