HTML中文本格式化的相关标签，文本字体格式相关标签
第5章 HTML 文本格式化标签
- 1、首字母缩略词—— acronym 标签、abbr 标签
- 2、文档/文章作者或拥有者的联系信息—— address 标签
- 3、粗体文本—— b 标签
- 4、双向隔离元素—— bdi 标签（HTML 5 新标签）
- 5、定义文本的方向—— bdo 标签
- 6、定义大号文本—— big 标签
- 7、块引用—— blockquote 标签
- 8、居中文本—— center 标签 （已弃用）
- 9、定义引用—— cite标签
- 10、定义计算机代码文本—— code 标签
- 11、定义被删除文本—— del 标签、s 标签、strike 标签
- 12、定义项目—— dfn 标签 （短元素）
- 13、强调文本—— em 标签（短元素）
- 14、定义文本的字体、尺寸和颜色—— font 标签（已废弃）
- 15、斜体文本—— i 标签
- 16、定义被插入文本—— ins 标签
- 17、键盘文本—— kbd 标签（已废弃）
- 18、带有记号的文本—— mark 标签
- 19、定义度量衡—— meter 标签（新标签）
- 20、预格式文本—— pre 标签
- 21、运行中的任务进度（进程）—— progress 标签
- 22、短的引用—— q 标签
- 23、定义注释—— ruby 标签（New）、rt 标签（New）、rp 标签 （New）
- 24、计算机代码样本—— samp 标签（短元素）
- 25、小号文本—— small 标签
- 26、语气更为强烈的强调文本—— strong 标签
- 27、上、下标文本—— sup 标签、 sub 标签
- 28、定义一个日期/时间—— time 标签（New）
- 29、打字机文本—— tt 标签
- 30、下划线文本—— u 标签
- 31、文本的变量部分—— var 标签
- 32、规定添加换行符—— wbr 标签
1、首字母缩略词—— acronym 标签、abbr 标签
（1）通过对只取首字母缩略词进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
（2） HTML5 不支持 标签。用标签代替它的功能。
示例1：
把鼠标放到CSDN上会显示全称，也就是title的值
这是一个 缩写字母
这是一个 缩写字母
这是一个<acronym title="用acronym写的">CSDNacronym>
这是一个<abbr title="用abbr写的">缩写字母abbr>
2、文档/文章作者或拥有者的联系信息—— address 标签
（1）当 元素位于 元素内部，则它表示该文档作者/所有者的联系信息。
（2）当 元素位于 元素内部，则它表示该文章作者/所有者的联系信息。HTML 4.01 中不支持 元素 。因此这种情况只会出现在HTML 5 中。
（3） 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。
示例2：
性别.
年龄.
联系方式.
<address>
姓名.<br />
性别.<br />
年龄.<br />
<a href="mailto:[email protected]">联系方式a>.
address>
3、粗体文本—— b 标签
（1） 标签定义粗体的文本
示例3：
这是一个正常文本这是一个粗文本
<p>这是一个正常文本<b>这是一个粗文本b>p>
4、双向隔离元素—— bdi 标签（HTML 5 新标签）
（1） 设置一段文本，使其脱离其父元素的文本方向设置。
示例4：
<p>这句话很正常但这个被单独<bdi>孤立bdi>出来了。p>
目前只有 Firefox 和 Chrome 浏览器支持 标签，所以看不到效果。
5、定义文本的方向—— bdo 标签
（1）标签必须配合 dir 属性使用。 标签有 ltr 和 rtl 两个属性值，分别表示：从左到右显示文本和从右到左显示文本。
示例5：
该段落文字从左到右显示。
该段落文字从右到左显示。
<p>该段落文字从左到右显示。p>
<p><bdo dir="rtl">该段落文字从右到左显示。bdo>p>
（看到bdi和bdo的区别，应该是HTML 5 打算用bdi取代bdo，但目前大多浏览器还是支持bdo的。）
6、定义大号文本—— big 标签
（1）所有主流浏览器都支持 标签,但HTML 5 不支持，推荐使用CSS改变文本大小
示例6：
<p><big>大号文本big>p>
大号文本
7、块引用—— blockquote 标签
（1）标签用来引用大段的内容块，处于该标签内的文本会独自分离出来，并且自动缩进。详细请尝试使用以下的块引用。
（2）需要增加cite属性来规定引用的来源，他的值也就是URL。
示例7：
<blockquote cite="http://www.某个网站的链接.html">
引用的内容...
blockquote>
8、居中文本—— center 标签 （已弃用）
（1）
（2）目前HTML 5 已不再支持
（用CSS的"text-align:center;"）
示例8：
普通文本
<center>这个文本居中center>
普通文本
普通文本
9、定义引用—— cite标签
（1）定义作品的标题，文本将会以斜体显示。
示例9：
这是我定义的标题。
这是我定义的<cite>标题cite>。
10、定义计算机代码文本—— code 标签
（1）将文本变成等宽字体以及提示这段文本是源程序代码。（如果只是想改变字体的视觉效果建议使用 CSS 样式表）
示例10：
（下面的文本我没有输入插入代码块的符号但浏览器识别到 code 标签认为他是一段代码。）
加粗的文本
计算机代码文本
<b>加粗的文本b>
<code>计算机代码文本code>
11、定义被删除文本—— del 标签、s 标签、strike 标签
（1）del 标签
a、
b、cite属性值规定一个解释了文本被删除的原因的文档的 URL。
c、datetime 属性值规定文本被删除的日期和时间。
d、datetime 属性值格式： YYYY-MM-DDThh:mm:ssTZD
（2）s 标签
a、
b、在 HTML 4.01 中不赞成使用
（3）strike 标签
a、
b、在 HTML 4.01 中，
c、HTML5 不支持
示例11：
删掉这个
<del >删掉这个del>
12、定义项目—— dfn 标签 （短元素）
（1）特殊术语或短语，
示例12：
定义短语
<dfn>定义短语dfn>
13、强调文本—— em 标签（短元素）
（1）元素通常被用于指示一个隐式或显式的对比
示例13：
强调文本
<em>强调文本em>
14、定义文本的字体、尺寸和颜色—— font 标签（已废弃）
（1）被 CSS 的 "font"代替
示例14：
这是一句字体3颜色红的句子
<font size="3" color="red">这是一句字体3颜色红的句子font>
15、斜体文本—— i 标签
文本显示为斜体，代表一定范围的文本具有特别的语义
示例15：
斜体文本
<i>斜体文本i>
16、定义被插入文本—— ins 标签
（1） 标签定义已经被插入文档中的文本。
（2）ins 标签和 del 标签大多时候在一起用，一个插入文本一个删除文本。
示例16：
插入文本
<ins>插入文本ins>
17、键盘文本—— kbd 标签（已废弃）
标签它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
示例17：
键盘文本
<kbd>键盘文本kbd>
18、带有记号的文本—— mark 标签
突出显示文本。
示例18：
带有记号的文本
<mark>带有记号的文本mark>
19、定义度量衡—— meter 标签（新标签）
（1）
（2）max属性 规定范围的最大值。
（3）min属性 规定范围的最小值。
（4）value属性 必需写的规定度量的当前值。
示例19：
<meter value="0.5">50%meter><br />
<meter value="8" min="0" max="10">8 out of 10meter>
20、预格式文本—— pre 标签
（1）元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
（2）常见应用就是用来表示计算机的源代码。
示例20：
比如这里有五个 空格
<pre>比如这里有五个 空格pre>
21、运行中的任务进度（进程）—— progress 标签
（1）标签和JavaScript的一起使用来显示任务的进度。也就是动态的表示方法。
（2）progress 标签虽然和 meter 标签看上去类似但他们的功能和用法不同
示例21：
<progress value="60" max="100">progress>
22、短的引用—— q 标签
（1） 标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。
示例22：
引用
<q>引用q>
23、定义注释—— ruby 标签（New）、rt 标签（New）、rp 标签 （New）
（1） 标签注释是中文注音或字符， ruby元素由一个或多个需要解释/发音的字符和一个提供该信息的 元素组成，还包括可选的 元素。
（2） 标签定义字符（中文注音或字符）的解释或发音。
（3）标签在 ruby 注释中使用。以定义不支持 ruby 元素的浏览器所显示的内容。
示例23：
<ruby>
注 <rp>(rp><rt>Zhurt><rp>)rp>
释 <rp>(rp><rt>Shirt><rp>)rp>
ruby>
24、计算机代码样本—— samp 标签（短元素）
使用该标签定义的文本会以特殊的样式显示，通常使用浏览器默认的 monotype 字体
示例24：
计算机代码样本
<samp>计算机代码样本samp>
25、小号文本—— small 标签
标签定义小型文本常用于旁注注释等
示例25：
正常字体 小号文本
正常字体<small> 小号文本small>
26、语气更为强烈的强调文本—— strong 标签
（1） 标签是一个短语标签，加粗字体，用来定义计算机程序的样本重要的文本。
示例26：
正常字体加粗字体
正常字体<strong>加粗字体strong>
27、上、下标文本—— sup 标签、 sub 标签
（1）sup标签的内容会以正常内容的一半的高度显示在上方，而且通常较小
（2）sub标签的内容会以正常内容的一半的高度显示在下方，而且通常较小
示例27：
这是一个上表文本的实例102
这是一个下表文本的实例H2O
这是一个上表文本的实例10<sup>2sup>
这是一个下表文本的实例H<sub>2sub>O
28、定义一个日期/时间—— time 标签（New）
（1） 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
（2） 标签不会在任何浏览器中呈现任何特殊效果，只是用来给机器识别的。
（3）datetime属性： 规定日期/时间；（日期格式是YYYY-MM-DD）
示例28：
星期日
<time datime="2019-2-17">星期日time>
29、打字机文本—— tt 标签
示例29：
正常文本打字机文本
正常文本<tt>打字机文本tt>
30、下划线文本—— u 标签
（1）对标签内的文本实现下划线样式
示例30：
下划线
<u>下划线u>
31、文本的变量部分—— var 标签
（1） 标签表示数学表达式或编程上下文中的变量，
（2） 标签定义的内容会呈现为斜体
示例31：
正常部分变量部分
正常部分<var>变量部分var>
32、规定添加换行符—— wbr 标签
（1）
示例32：
在文本中想要换行的位置进行换行
在文本中想要换行的位置进行<wbr>换行wbr>