CSS/HTML 开发中常用特殊符号(常用字符实体) 相关扩展

作者: 黑木令 | 来源:发表于2021-05-24 23:38 被阅读0次

CSS/HTML 开发中常用特殊符号(常用字符实体) 相关扩展
HTML实体
HTML常用的字符实体
HTML与CSS的常用字符实体和标签的分类
Web前端HTML/CSS
HTML+CSS基础
web前端建站与学习常用网站
day01
常用的HTML字符实体
html常用的字符实体

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 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">小于号: &lt; 示例</p>
    <p class="w_space-item">大于号: &gt; 示例</p>
    <p class="w_space-item">人民币: &yen; 示例</p>
    <p class="w_space-item">镑:    &pound; 示例</p>
    <p class="w_space-item">日元:   &yen; 示例</p>
    <p class="w_space-item">欧元:   &euro; 示例</p>
    <p class="w_space-item">小节:   &sect; 示例</p>
    <p class="w_space-item">和号:   &amp; 示例</p>
    <p class="w_space-item">版权:   &copy; 示例</p>
    <p class="w_space-item">注册商标: &reg; 示例</p>
    <p class="w_space-item">摄氏度:   &deg; 示例</p>
    <p class="w_space-item">正负号:   &plusmn; 示例</p>
    <p class="w_space-item">乘号:     &times; 示例</p>
    <p class="w_space-item">除号:     &divide; 示例</p>
    <p class="w_space-item">平方:     &sup2; 示例</p>
    <p class="w_space-item">立方:     &sup3; 示例</p>
  </div>
</div>
</div>
</body>
</html>