之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
-
使用总结
1. HTML 为我们准备了一些 特殊符号 的替换代码
2. 为什么会有 特殊符号 的替换代码呢? 主要是因为在 HTML 中直接使用一些特殊符号, 会让浏览器解析出错, 例如: HTML 中不能使用小于号 “<” 和大于号 “>” 特殊字符, 浏览器会将它们作为标签解析, 若要正确显示, 在 HTML 源代码中使用字符实体。
3. 但是我们要理解, 他们不是标签,而是符号。
4. 另外, 我在使用的时候, 总是会忘记最后的 ; 分隔符号结尾, 这样导致一些效果不生效, 这点要切记 。
-
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 继 CSS/HTML 如何在网页中添加空格后开发中常用 特殊符号(常用字符实体) 相关扩展(琐碎知识点整理) </title>
</head>
<style>
.w_space-item {
background-color: skyblue;
height: 36px;
line-height: 36px;
font-size: 18px;
margin: 20px 0;
/* 设置空格生效 */
white-space: pre;
}
</style>
<body>
<div>
<div>
<div class="w_space-shel">
<p class="w_space-item">小于号: < 示例</p>
<p class="w_space-item">大于号: > 示例</p>
<p class="w_space-item">人民币: ¥ 示例</p>
<p class="w_space-item">镑: £ 示例</p>
<p class="w_space-item">日元: ¥ 示例</p>
<p class="w_space-item">欧元: € 示例</p>
<p class="w_space-item">小节: § 示例</p>
<p class="w_space-item">和号: & 示例</p>
<p class="w_space-item">版权: © 示例</p>
<p class="w_space-item">注册商标: ® 示例</p>
<p class="w_space-item">摄氏度: ° 示例</p>
<p class="w_space-item">正负号: ± 示例</p>
<p class="w_space-item">乘号: × 示例</p>
<p class="w_space-item">除号: ÷ 示例</p>
<p class="w_space-item">平方: ² 示例</p>
<p class="w_space-item">立方: ³ 示例</p>
</div>
</div>
</div>
</body>
</html>
-
图片示例:
e-sum.png