# 格式化>格式化标记通常只能是产生几种不同文本的样式,但在语义上它们各自有着自己的特点,我来为大家科普一下关于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(单词换行时机)。

,