编程笔记 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

小结

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

相关文章
|
4天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
19 2
|
14天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
30 7
|
14天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
27 6
|
14天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
29 5
|
14天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
21 5
|
24天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
104 1
|
29天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
55 0
html5+three.js公路开车小游戏源码
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
39 2
JavaScript HTML DOM