HTML 符号

TML 符号实体

HTML 符号是不呈现在标准的键盘上，比如数学运算符、箭头符号、技术符号和形状。

如需向 HTML 页面添加这些符号，您可以使用 HTML 实体名称。

如果不存在实体名称，您可以使用实体编号。

如果字符没有实体名称，您可以使用十进制（或十六进制）引用。

实例

我将显示 €

结果如下：

我将显示 €

HTML 支持的数学符号

如果您使用的是一个 HTML 实体名称或一个十六进制编号，字符总是能正确显示。

这是与您页面使用的字符集相互独立的！

字符	编号	实体	描述
∀	∀	∀	所有（for all）
∂	∂	∂	部分（part）
∃	∃	∃	存在（exists）
∅	∅	∅	空（empty）
∇	∇	∇	倒三角（nabla）
∈	∈	∈	属于（isin）
∉	∉	∉	不属于（notin）
∋	∋	&ni;	包含的成员（ni）
∏	∏	∏	连乘（prod）
∑	∑	∑	总和（sum）

完整的数学（Math）参考手册

HTML 支持的希腊字母

字符	编号	实体	描述
Α	Α	Α	Alpha（中文注音：阿耳法）
Β	Β	Β	Beta（中文注音：贝塔）
Γ	Γ	Γ	Gamma（中文注音：伽马）
Δ	Δ	Δ	Delta（中文注音：德耳塔）
Ε	Ε	Ε	Epsilon（中文注音：艾普西隆）
Ζ	Ζ	Ζ	Zeta（中文注音：截塔）

完整的希腊（Greek）参考手册

HTML 支持的其他实体

字符	编号	实体	描述
©	©	©	版权所有（REGISTERED SIGN）
®	®	®	注册商标（REGISTERED SIGN）
€	€	€	欧元符号（EURO SIGN）
™	™	™	商标（trademark）
←	←	←	向左箭头（LEFTWARDS ARROW）
↑	↑	↑	向上箭头（UPWARDS ARROW）
→	→	→	向右箭头（RIGHTWARDS ARROW）
↓	↓	↓	向下箭头（DOWNWARDS ARROW）
♠	♠	&spades;	黑桃（BLACK SPADE SUIT）
♣	♣	&clubs;	黑梅花（BLACK CLUB SUIT）
♥	♥	&hearts;	黑心（BLACK HEART SUIT）
♦	♦	&diams;	黑方块（BLACK DIAMOND SUIT）

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

格式化

>格式化标记通常只能是产生几种不同文本的样式，但在语义上它们各自有着自己的特点

>如果你只是想有着一些自己的文本样式，可以尝试使用“常用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元素中

```

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.

Visit us at:

Example.com

Box 564, Disneyland

USA

</address>

```

## ``

作用：定义粗体文本

## `<bdi></bdi>`

作用：定义文本的文本方向，使其脱离周围文本的方向设置

注意点：

1. bdi指的是bidi隔离

2. 在发布用户评论或其它难以控制的内容时，可以使用

3. 需要与全局属性dir配合使用

## `<bdo></bdo>`

作用：定义文字方向

注意点：

1. 请与全局属性dir配合使用

```

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

Here is some Hebrew text

</bdo>

```

## `<blockquote></blockquote>`

作用：`<blockquote>`标签用于定义块引用

注意点：

1. 标签内的所有文本都会从常规文本中分离出来，一般会上下换行，左右增加外边距，有时也会使用斜体

2. 换而言之，块引用拥有它们自己的空间

3. 可选属性：

`cite=url`规定引用来源

```

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

## ``

作用：定义一个强调文本

注意点：

1. 在显示结果上，它依然是斜体

2. 如果你只是为了定义一个斜体的内容，可以考虑使用``或css样式表

3. 对于强调的内容应当不宜过多，否则无法突出想要表达的内容

## ``

作用：定义一个语气更加强烈地强调文本

注意点：

1. 常识告诉我们应较少使用em元素的话，那么strong元素出现的次数应该更少，限制其使用可以让这个标记更加的引人注意和有效

## ``

作用：定义一个斜体文本或倾斜的文本

## `<kbd></kbd>`

作用：定义键盘文本

注意点：

1. 显示效果为等宽字体

## ``(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-->必须。规定度量的当前值

```

```

## `<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 （定义文本被删除的日期和时间）

## ``

作用：标签内的元素呈现小号字体的效果

注意点：

1. 如果被包裹字体已经是最小号的字体了，那这个标签将不起任何作用

2. ``是可以嵌套的，从而把文字连续的缩小，直到到达最小的一号字

## ``

作用：标签中的内容会以当前文本流中字符高度的一般来显示（上标）

注意点：

1. 虽然显示效果与文本流中其他元素不一样，但是它们的字体字号都是一样的

2. 这个标签在向文档添加注脚以及表示方程式中的指数时非常有效，如果与`<a></a>`标签结合使用可以创建出很好的超链接注脚

## ``

作用：标签中的内容会以当前文本流中字符高度的一般来显示（下标）

## `<template></template>`

作用：可以作为一个容器，但是它并不会存在于DOM树中

注意点：

1. 多用于包裹一段代码，对其绑定事件，使其可以控制是否隐藏

2. 一个检查方法：

```

if (document.createElement("template").content) {

document.write("Your browser supports template!");

} else {

document.write("您的浏览器不支持 template！");

}

```

## ``

作用：定义下划线文本

注意点：

1. 应尽量避免使用，用户可能会把它混淆为一个超链接

## `<time></time>`(HTML5)

作用：定义一个公历的时间或日期，时间和时区偏移是可选的

可选的属性：

1. datetime=datetime-->规定日期/时间。否则由元素内容给定日期时间

2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 时间是文档（或 `<article>` 元素）的发布日期。

## ``(HTML5)

一段带有 Word Break Opportunity 的文本：

```

如果想学习 AJAX，那么您必须熟悉 XMLHttpRequest 对象。

```

作用：Word Break Opportunity (``) 规定在文本中的何处适合添加换行符。

注意点：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 `` 元素来添加 Word Break Opportunity（单词换行时机）。

本格式标记

以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动，但是，文本格式的太多变化也会使人不快。

标题 - <head> </head>

head标记有6个级别可用，从h1用于最大和最重要的标题，到h6是最小的标题。

粗体 -

b标记之间的文本以粗体显示，与周围的文本相对突出。

斜体 -

i标记以一个小角度显示文本。

下划线 -

u标记在文本正文添加一条线，请注意，链接已经有下划线，不需要额外的标记。

删除线 - <strike> </strike>

strike标记在文本的正中间画一条线，通常用来表示文本是旧的，不再相关，删除。也可以用<s></s>代替。

预格式化文本 - <pre> </pre>

pre标记之间的任何文本，包括空格、回车符和标点符号，都将像在文本编辑器中一样显示在浏览器中（通常浏览器会忽略多个空格）

源代码 - <code> </code>

code标记之间的文本以固定宽度字体显示，通常在显示源代码时使用。

打字机文本 - <tt> </tt>

tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。

Block Quote - <blockquote> </blockquote>

blockquote标记定义一个块引用，并且在块的左右添加额外的边距。

小号字 -

small标记让你无需设置字体大小，就可以使文本呈现比周围稍小的外观。

字体颜色 -

font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。

字体大小 -

font标记的size属性改变字体的大小，值范围从1到7，1是最小，7是最大。

字体大小变化 -

font标记的size属性还可以相对于其前面的字体大小的作即时更改，此用法将按你指定的数字增减字体大小。例如：一些文本

字体 -

font标记的face属性以指定的字体显示文本，值为字体名称，如“Helvetica”、“Arial”或“Courier”。

居中 - <center> </center>

center标记之间的所有内容都居中。

强调 -

em标记用于强调文本，文本通常以斜体显示，可能会根据浏览器的不同而有所不同。

着重强调 -

strong标记用于着重强调文本，通常以粗体显示，可能会根据浏览器的不同而有所不同。

例子

下面是以上标记的示例：

浏览器显示内容如下所示：

在线咨询

上一篇：手把手教你使用CSS3动画特性实现loading效果，赶紧来学习一下吧
下一篇：JavaScript中常用的输入输出语句介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 符号

本格式标记

标题 - <head> </head>

粗体 - <b> </b>

斜体 - <i> </i>

下划线 - <u> </u>

删除线 - <strike> </strike>

预格式化文本 - <pre> </pre>

源代码 - <code> </code>

打字机文本 - <tt> </tt>

Block Quote - <blockquote> </blockquote>

小号字 - <small> </small>

字体颜色 - <font color="#??????"> </font>

字体大小 - <font size="?"> </font>

字体大小变化 - <font size="+/-?"> </font>

字体 - <font face="?"> </font>

居中 - <center> </center>

强调 - <em> </em>

着重强调 - <strong> </strong>

例子

您的项目需求