HTML格式化标记（HTML格式化标记）
# 格式化>格式化标记通常只能是产生几种不同文本的样式，但在语义上它们各自有着自己的特点，我来为大家科普一下关于HTML格式化标记?以下内容希望对你有帮助!
HTML格式化标记
# 格式化
>格式化标记通常只能是产生几种不同文本的样式，但在语义上它们各自有着自己的特点
>如果你只是想有着一些自己的文本样式，可以尝试使用“常用html标记”里格式化的内容或css样式表
>但是这样会对搜索引擎不友好
>所以我们强调使用语义化标签，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。
## `<abbr></abbr>`
作用：用于指示该标签内的内容是一个缩写
注意点：
1. 常与全局属性title配合使用，这样可以在鼠标移动到该处时显示全称
`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`
2. 在浏览器内渲染会使其在内容底部加上短虚线
## `<address></address>`
作用：用于定义文档或文章作者/拥有者的联系信息
>如果 `<address>` 元素位于 `<body>` 元素内，则它表示文档联系信息。
>如果 `<address>` 元素位于 `<article>` 元素内，则是它表示文章的联系信息。
注意点：
1. address元素中的文本通常呈现为斜体，大多数浏览器会在address元素前后换行
2. address元素不应该用于描述通讯地址，除非它是练习信息的一部分
3. address元素元素通常连同其他信息被包含在footer元素中
```
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
```
## `<b></b>`
作用：定义粗体文本
## `<bdi></bdi>`
作用：定义文本的文本方向，使其脱离周围文本的方向设置
注意点：
1. bdi指的是bidi隔离
2. 在发布用户评论或其它难以控制的内容时，可以使用
3. 需要与全局属性dir配合使用
## `<bdo></bdo>`
作用：定义文字方向
注意点：
1. 请与全局属性dir配合使用
```
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
```
## `<blockquote></blockquote>`
作用：`<blockquote>`标签用于定义块引用
注意点：
1. 标签内的所有文本都会从常规文本中分离出来，一般会上下换行，左右增加外边距，有时也会使用斜体
2. 换而言之，块引用拥有它们自己的空间
3. 可选属性：
`cite=url`规定引用来源
```
<blockquote cite="http://www.WWF.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</blockquote>
```
主流浏览器均不支持cite属性，但是搜索引擎可以因此获得更多的信息
## `<q></q>`
作用：用于定义短引用
注意点：
1. 浏览器经常在引用内容的人左右添加引号
2. `<q>` 与 `<blockquote>` 的区别:
- `<q>` 标签在本质上与 `<blockquote>` 是一样的。不同之处在于它们的显示和应用。`<q>` 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进地块），请使用 `<blockquote>` 标签。
3. 在html4中，firefox和opera中q元素包含的文本必须以引号来开始和结束，但是IE却不支持这个规定，如果我们为了满足其它浏览器而添加了引号，那么在IE中就会显示两组引号。
4. 尽管如此，我们还是推荐使用q元素，因为它在文档处理和信息提取方面将会有很强的效果
5. 可选属性：
`cite=citation`定义引用的出处或来源（citation）
## `<cite></cite>`
作用：表示所含文本是对某个参考文献的引用
注意点：
1. 在显示上与blockquote元素类似，均是斜体
2. 但是它不会有上下左右的外边距
3. 通常情况下还要把引用包裹在一对`<a></a>`标签中，然后把超链接指向引用
`<cite><a href=URL>引用名</a></cite>`
>`<cite>` 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。`<cite>` 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。
## `<code></code>`
作用：定义计算机代码文本
注意点：
1. code元素并不能将元素内的内容以原样显示，浏览器仍然会解析内容而不跳过
2. code只是给内容的字体改为等宽字体，即它只是将内容转变为暗示这是计算机代码的内容
## `<var></var>`
作用：`<var>` 标签表示变量的名称，或者由用户提供的值。
注意点：
1. 用 `<var>` 标签标记的文本通常显示为斜体。
2. `<var>` 标签是计算机文档中应用的另一个小窍门，这个标签经常与 `<code>` 和 `<pre>` 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。
## `<smap></smap>`
作用：用于从一段上下文中抽取一些字符
例子：
`字符序列 <samp>ae</samp> 可能会被转换为 æ 连字字符。`
效果：
`字符序列 ae 可能会被转换为 æ 连字字符。`
## `<ins></ins>`
作用：定义一个插入文本
注意点：
1. 显示效果是加入下划线
## `<dfn></dfn>`
作用：用于标记特殊术语或短语
注意点：
1. 浏览器通常会将dfn元素内的内容显示为斜体
2. 应当尽量少的使用，比如在技术性的文档中，在第一次提到一个术语时，可以加上dfn元素，而在相同文档的后续中，对于同一个术语，应避免使用dfn
## `<em></em>`
作用：定义一个强调文本
注意点：
1. 在显示结果上，它依然是斜体
2. 如果你只是为了定义一个斜体的内容，可以考虑使用`<i></i>`或css样式表
3. 对于强调的内容应当不宜过多，否则无法突出想要表达的内容
## `<strong></strong>`
作用：定义一个语气更加强烈地强调文本
注意点：
1. 常识告诉我们应较少使用em元素的话，那么strong元素出现的次数应该更少，限制其使用可以让这个标记更加的引人注意和有效
## `<i></i>`
作用：定义一个斜体文本或倾斜的文本
## `<kbd></kbd>`
作用：定义键盘文本
注意点：
1. 显示效果为等宽字体
## `<mark></mark>`(html5)
作用：定义带有记号的文本
注意点：
1. 与加粗不同，它会将文字加上背景色
## `<meter></meter>`(HTML5)
作用：定义已知范围或分数值内的标量测量，也被称为gauge（尺度）
注意点：
1. 这是一个html5的新标签，假如你把文档类型声明为html4或以下和xhtml，标签本身的效果将会受到影响
2. `<meter>`标签不应用于指示进度条的进度，如果标记进度，请使用`<progress></progress>`标签
可用属性：
1. form=form_id-->规定meter元素所属的一个或多个表单
2. high=number-->规定被视作高的值的范围
3. low=number-->规定被视作高的值的范围
4. max=number-->规定范围的最大值
5. min=number-->规定范围的最小值
6. optimum=number-->规定度量的优化值
7. value=number-->必须。规定度量的当前值
```
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
```
## `<progress></progress>`(HTML5)
作用：标示任务的进度（进程）
`<progress value="22" max="100"></progress> `
注意点：
1. 需要与js结合使用，来显示任务的进度
2. progress标签不适合使用来表示度量衡，这种情况请使用meter元素来替代
可用属性：
max=number-->规定任务一共需要多少工作
value=number-->规定任务已经完成多少工作
## `<pre></pre>`
作用：用于定义预格式化的文本，即通常会保留空格和换行，文本会呈现为等宽字体
注意点：
1. pre元素常用于表示计算机的源代码，但是计算机的源代码（html）直接放入浏览器仍会解析（需要使用`<`和`>`等符号实体）
2. 会导致内容截断的标签绝不能包含在pre元素中，如标题、p元素、address元素
3. 可选的属性：
`width=number`定义每行的最大字符数
## `<ruby></ruby>`
作用：可用于定义一个ruby注释（中文注音或字符）
注意点：
1. ruby元素与rt元素一同使用
2. ruby元素由需要一组字符和一个提供信息的rt元素组成
3. 还包括一个可选的rp元素，定义浏览器不支持ruby元素时显示的内容
## `<rt></rt>`
作用：定义字符的解释或发音
## `<rp></rp>`
作用：定义浏览器不支持ruby元素时显示的内容
## `<s></s>`
作用：定义加删除线的文本
注意点：
1. `<s>`标签是`<strike>`标签的缩写版本，但html4和xhtml中已经不再赞成使用它了，就是说，它早晚有一天会消失
2. 请使用`<del></del>`替代它
## `<del></del>`
作用：给元素中的内容上加上删除线
注意点：
1. 请与`<ins></ins>`标签配合使用，来描述文档中的更新与修正
2. 可选的属性：
- cite=URL
- datetime=YYYMMDD （定义文本被删除的日期和时间）
## `<small></small>`
作用：标签内的元素呈现小号字体的效果
注意点：
1. 如果被包裹字体已经是最小号的字体了，那这个标签将不起任何作用
2. `<small></small>`是可以嵌套的，从而把文字连续的缩小，直到到达最小的一号字
## `<sup></sup>`
作用：标签中的内容会以当前文本流中字符高度的一般来显示（上标）
注意点：
1. 虽然显示效果与文本流中其他元素不一样，但是它们的字体字号都是一样的
2. 这个标签在向文档添加注脚以及表示方程式中的指数时非常有效，如果与`<a></a>`标签结合使用可以创建出很好的超链接注脚
## `<sub></sub>`
作用：标签中的内容会以当前文本流中字符高度的一般来显示（下标）
## `<template></template>`
作用：可以作为一个容器，但是它并不会存在于DOM树中
注意点：
1. 多用于包裹一段代码，对其绑定事件，使其可以控制是否隐藏
2. 一个检查方法：
```
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("您的浏览器不支持 template！");
}
```
## `<u></u>`
作用：定义下划线文本
注意点：
1. 应尽量避免使用，用户可能会把它混淆为一个超链接
## `<time></time>`(HTML5)
作用：定义一个公历的时间或日期，时间和时区偏移是可选的
可选的属性：
1. datetime=datetime-->规定日期/时间。否则由元素内容给定日期时间
2. pubdate=pubdate--> 指示 `<time>` 元素中的日期 / 时间是文档（或 `<article>` 元素）的发布日期。
## `<wbr>`(HTML5)
一段带有 Word Break Opportunity 的文本：
```
<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
```
作用：Word Break Opportunity (`<wbr>`) 规定在文本中的何处适合添加换行符。
注意点：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 `<wbr>` 元素来添加 Word Break Opportunity（单词换行时机）。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
