编程笔记 html5&css&js 019 HTML实体

简介: 编程笔记 html5&css&js 019 HTML实体

在HTML文档中,用一些标记表示特定的格式,那我们想使用这些标记字符本身时就出了问题,直接使用时,会被浏览器解析为标记的,要想显示这些字符本身,要使用“实体”,在其他语言中,一般称为转义字符。

一、HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

字符实体类似这样:

&entity_name;

或者

&#entity_number;

如需显示小于号,我们必须这样写:&lt; 或 &#60;

提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

不间断空格(non-breaking space)

HTML 中的常用字符实体是不间断空格(&nbsp;)。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

HTML 中有用的字符实体

注释:实体名称对大小写敏感!

显示结果 描述 实体名称 实体编号

空格  &nbsp;  &#160;
< 小于号 &lt;  &#60;
> 大于号 &gt;  &#62;
& 和号  &amp; &#38;
" 引号  &quot;  &#34;
' 撇号  &apos; (IE不支持)  &#39;
¢ 分(cent) &cent;  &#162;
£ 镑(pound)  &pound; &#163;
¥ 元(yen)  &yen; &#165;
€ 欧元(euro)  &euro;  &#8364;
§ 小节  &sect;  &#167;
© 版权(copyright) &copy;  &#169;
® 注册商标  &reg; &#174;
™ 商标  &trade; &#8482;
× 乘号  &times; &#215;
÷ 除号  &divide;  &#247;

键盘上不存在的字符也可以由实体代替。

二、HTML 符号实体

普通键盘上不存在众多数学、技术和货币符号。

如需将此类符号添加到 HTML 页面,您可以使用 HTML 实体名称(HTML entity name)。

如果不存在实体名称,则可使用实体编号,十进制或十六进制的引用。

<p>我将显示 &</p>
<p>我将显示 &#8364;</p>
<p>我将显示 &#x20AC;</p>

将显示为:

我将显示 €
我将显示 €
我将显示 €

HTML 支持的一些数学符号

字符 数字 实体 描述

∀ &#8704; &forall;  FOR ALL
∂ &#8706; &part;  PARTIAL DIFFERENTIAL
∃ &#8707; &exist; THERE EXISTS
∅ &#8709; &empty; EMPTY SETS
∇ &#8711; &nabla; NABLA
∈ &#8712; &isin;  ELEMENT OF
∉ &#8713; &notin; NOT AN ELEMENT OF
∋ &#8715; &ni;  CONTAINS AS MEMBER
∏ &#8719; &prod;  N-ARY PRODUCT
∑ &#8721; &sum; N-ARY SUMMATION

HTML 支持的一些希腊字母

字符 数字 实体 描述

Α &#913;  &Alpha; GREEK CAPITAL LETTER ALPHA
Β &#914;  &Beta;  GREEK CAPITAL LETTER BETA
Γ &#915;  &Gamma; GREEK CAPITAL LETTER GAMMA
Δ &#916;  &Delta; GREEK CAPITAL LETTER DELTA
Ε &#917;  &Epsilon; GREEK CAPITAL LETTER EPSILON
Ζ &#918;  &Zeta;  GREEK CAPITAL LETTER ZETA

HTML 支持的一些其他实体。

字符 数字 实体 描述

© &#169;  &copy;  COPYRIGHT SIGN
® &#174;  &reg; REGISTERED SIGN
€ &#8364; &euro;  EURO SIGN
™ &#8482; &trade; TRADEMARK
← &#8592; &larr;  LEFTWARDS ARROW
↑ &#8593; &uarr;  UPWARDS ARROW
→ &#8594; &rarr;  RIGHTWARDS ARROW
↓ &#8595; &darr;  DOWNWARDS ARROW
♠ &#9824; &spades;  BLACK SPADE SUIT
♣ &#9827; &clubs; BLACK CLUB SUIT
♥ &#9829; &hearts;  BLACK HEART SUIT
♦ &#9830; &diams; BLACK DIAMOND SUIT

小结

知道有些无法表示的字符或符号,可以用“实体”这东西来替换就行了,用的时候可以现查的。

相关文章
|
2天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
15 0
HTML5/CSS3粒子效果进度条代码
|
6天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
11天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
13天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
16天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
20 1
|
19天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
16 0
|
25天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
29 10
|
26天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0
|
26天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
33 0
|
11天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。