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

小结

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

相关文章
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1211 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
300 34
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
862 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
725 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
652 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
293 24
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
336 2
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
856 7
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
609 12