在html中，我想使用＜＜或者＞＞, 结果被视为无效的 HTML 实体，导致解析错误

js_user

于 2024-10-14 14:13:27 发布

阅读量510

点赞数 13

分类专栏：前端开发问题记录文章标签： html javascript 前端 css css3 开发语言

本文链接：https://blog.youkuaiyun.com/lj_1598/article/details/142916909

版权

前端开发问题记录专栏收录该内容

36 篇文章

订阅专栏

背景：

在没有找到合适的 << 图标，想到使用 << 字符代替。
结果报错

 报错，<<被视为无效的 HTML 实体，导致解析错误
<div class="arrow"><<</div>

改成这样后，能够正常显示

 可以使用 HTML 实体编码来替换 <<
 1. << 使用&lt;&lt;
 2. >> 使用&gt;&gt;
<div class="arrow">&lt;&lt;</div>

后续需求：

我需要 << 字符间距小一点，符号能纵向拉伸一点，字符看起来细一点。

.arrow {
  letter-spacing: -8px; // 用来缩小字符间的距离
  // 使用 transform 属性来实现纵向拉伸，transform: scale(x, y) 
  // 中，x 和 y 分别表示水平方向和垂直方向的缩放比
  transform: scale(1, 1.8); 
  font-weight: 100; // 使用 font-weight 属性来设置字体的粗细程度
}