编程笔记 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月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
48 0
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
124 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
48 2
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
110 6
|
3月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
4月前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
77 4
|
4月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
43 0
|
4月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
37 0
下一篇
DataWorks