HTML基础-02-文本格式化、引文（斜体、粗体、上/下标签、删除、插入、强调、加重、字号、预格式，缩写、文字方向、短引用、长引用、引证）
1. 文本格式化标签
1.1 斜体和粗体< b > < i >
- 语法
<b>加粗文本</b>
<i>斜体文本</i>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<b>张飞很黑</b><br><br>
<i>张飞喝多了</i><br><br>
</body>
</html>
- 显示
1.2. 上标和下标 < sub > < sup >
- 语法
<sub> 下标</sub>
<sup> 上标</sup>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>诸葛亮最近在搞化学</p>
<p>
H<sub>2</sub>SO<sub>4</sub> = 2H<sup>+</sup>SO<sub>4</sub><sup>2-</sup>
</p>
</body>
</html>
- 输出
1.3 删除和插入 < del > < ins >
- 语法
<del>删除内容</del>
<ins>插入内容</ins>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事(runoob.com)</title>
</head>
<body>
<p>东吴大都督：<del>周瑜</del> <ins>鲁肃</ins></p>
</body>
</html>
- 输出
1.4 强调文本和加重语气< em > < strong >
- 语法
<em>强调文本</em><br>
<strong>加重语气</strong><br>
- 示例
其实并不知道加重语气和加粗有啥区别、em和斜体有啥区别。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<em>强调文本</em><br>
<i>斜体文本</i><br>
<strong>加重语气</strong><br>
<b>加粗文本</b><br>
</body>
</html>
- 输出
1.5 定义字号 < small > < big >
- 语法
<small>大字</small>
<big>小字</big>
- 示例
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p><small>庞统个子小</small></p>
<p>孔明很标准</p>
<p><big>二弟个子大</big></p>
</body>
</html>
- 示例
1.6 预格式文本 < pre >
pre可以对文本中的空格和换行进行控制
- 语法
<pre>类似于强引用</pre>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事(runoob.com)</title>
</head>
<body>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
</body>
</html>
- 输出
2. “计算机输出” 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
- 输出
3. 引文和引用
3.1 缩写 < abbr > < acronym >
把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
- IE 5 中的 acronym 元素有效。
- Netscape 6.2 中的 abbr 和 acronym 元素都有效。
- 语法
<abbr title="鼠标悬停显示">页面显示</abbr>
<acronym title="鼠标悬停显示">页面显示</acronym>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事(runoob.com)</title>
</head>
<body>
<abbr title="汉丞相曹操曹孟德">曹贼</abbr>
<br />
<acronym title="汉寿亭侯关羽关云长">二弟</acronym>
</body>
</html>
- 示例
3.2 地址和连接 < address >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<address>
玄德公的主页： <a href="https://www.jianshu.com/u/2966ec94af6e">点击进入</a>.<br>
</address>
</body>
</html>
- 输出
3.3 文字方向 < bdo >
- 语法
<bdo dir="rtl">从右到左</bdo>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
《菩萨蛮》
<p>雾窗寒对遥天暮 <br>
<bdo dir="rtl">雾窗寒对遥天暮</bdo><br>
花落正啼鸦<br>
<bdo dir="rtl">花落正啼鸦</bdo><br>
袖罗垂影瘦<br>
<bdo dir="rtl">袖罗垂影瘦</bdo><br>
风翦一丝红<br>
<bdo dir="rtl">风翦一丝红</bdo></p>
<p><i>——纳兰性德</i></p>
</body>
</html>
- 显示
3.4 短引用 < q >
- 语法
<q>引用内容</q>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>阿满说：
<q>天下英雄，唯使君与操耳。</q>
当时吓死宝宝了！</p>
</body>
</html>
- 输出
3.5 长引用 < blockquote >
- 语法
<blockquote>很多内容</blockquote>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>三顾茅庐孔明说：</p>
<blockquote cite="https://blog.csdn.net/xingzuo_1840">自董卓已来，豪杰并起，跨州连郡者不可胜数。曹操比于袁绍，则名微而众寡，然操遂能克绍，以弱为强者，非惟天时，抑亦人谋也。今操已拥百万之众，挟天子而令诸侯，此诚不可与争锋。孙权据有江东，已历三世，国险而民附，贤能为之用，此可以为援而不可图也。荆州北据汉、沔，利尽南海，东连吴会，西通巴、蜀，此用武之国，而其主不能守，此殆天所以资将军，将军岂有意乎？益州险塞，沃野千里，天府之土，高祖因之以成帝业。刘璋暗弱，张鲁在北，民殷国富而不知存恤，智能之士思得明君。将军既帝室之胄，信义著于四海，总揽英雄，思贤如渴，若跨有荆、益，保其岩阻，西和诸戎，南抚夷越，外结好孙权，内修政理；天下有变，则命一上将将荆州之军以向宛、洛，将军身率益州之众出于秦川，百姓孰敢不箪食壶浆以迎将军者乎？诚如是，则霸业可成，汉室可兴矣</blockquote>
<p>说的很有道理！</p>
</body>
</html>
- 示例
3.6 引用、引证 < cite >
- 语法
<cite>引证</cite>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<img src="https://pics1.baidu.com/feed/bf096b63f6246b60de13d1870d29204b500fa279.jpeg" width="640" height="579" alt="The Scream">
<p><cite>桃园结义</cite> 一张很珍贵的照片. 拍摄于 189年.</p>
</body>
</html>
- 结果输出
3.7 定义项目
<dfn>定义项目</dfn>
