在前端键入>或者<字符的时候报错

最新推荐文章于 2025-01-06 22:51:38 发布

weixin_34413802

最新推荐文章于 2025-01-06 22:51:38 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/LisaJ/p/10974671.html

本文介绍在HTML中正确使用特殊字符的重要性，特别是小于号和大于号的正确表示方法。通过一个实际案例，展示了直接使用这些符号导致的语法错误，并提供了正确的解决方案。

在写前端的一个页面的时候，有个地方需要写【Small business with <20000 people】这么一句话。

于是我直接写<p className="desc">Small business with <20000 people</p>，结果报了如下的语法错误：

解决办法是：

不要直接写 > 和 <

小于符号用 < 表示，大于符号用 > 表示

转载于:https://www.cnblogs.com/LisaJ/p/10974671.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34413802

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

全网多种方法分析解决HTTP Status 404资源未找到的错误，TCP的3次握手，dns域名解析，发起http请求以及cookie和session的区别

念兮为美

02-17

1万+

全网多种方法分析解决HTTP Status 404资源未找到的错误，TCP的3次握手，dns域名解析，发起http请求以及cookie和session的区别，ChatGPT的介绍。

前端编码规范

小马甲

11-30

1922

1. **规范目的**：为了提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构。 2. **规范基本准则**：符合`web`标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。

参与评论您还未登录，请先登录后发表或查看评论

前端参数已经传过去了，后端也接收到了，但是为什么还是报错Required request body is missing

Loading7的博客

02-12

729

前端参数已经传过去了，后端也接收到了，但是为什么还是报错Required request body is missing

前端传参到后端出现问题

jieyigeweixiao的博客

07-17

804

String searchValue = new String(searchValue.getBytes(“iso8859-1”),“utf-8”);

java前端重点_java前端常见报错整理

weixin_35698091的博客

02-26

168

1.checkbox标签已有checked=checked但是不显示勾选1 页面：2 3 是4 5 6 7 否8 9 10 11 if('no' == data[17]){12 $("input[name='optionsRadiosinline']:checked").removeAttr(...

关于输入框输入”[]”报网络错误问题解决方案

weixin_44712770的博客

06-24

499

问题引发原因: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后，在http解析时做了严格限制。RFC3986文档规定，请求的Url中只允许包含英文字母（a-zA-Z）、数字（0-9）、-_.~4个特殊字符以及所有保留字符。 Tomcat部署解决办法: 在tomcat的conf/server.xml中的节点中，添加2个属性： relaxedQueryChars="|{}[]," relaxedPathChars="|{}[]," Spring...

前端传字符串后端，后端接收的字符串中某个字符与原字符不同

Jcsim~

12-14

5531

问题：前端输入 : <> 后端接收的是：＜＞（中文的小于号、大于号） ==========================浏览器显示不明显，下面是截图========================= 解决方法：进行字符替换 string.replace()或string.replaceAll() 具体是什么原因导致的，还没弄清楚，有大佬...

001JavaWeb概论与框架搭建【详细补充】

m0_73920839的博客

01-06

1112

10天完成javaweb学习正在持续手打更新中… 10天完成javaweb学习正在持续手打更新中… JavaWeb JavaWeb化繁为简 JavaWeb是使用Java语言开发的Web应用程序。它的作用主要包括提供跨平台的应用开发、实现动态网页内容、支持复杂的业务逻辑处理等。

尚医通项目25-56：医院设置前端

qq_43568982的博客

05-16

1224

开始时间：2022-05-12 课程链接：【尚医通】配置VSCODE 官网下载无脑安装就行装上插件引入空文件夹来创建工作区 ES6 ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）基本语法就不写了，用到了看不懂现查因为学了也会忘。。 Vue Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模

spring构建web应用以及ModelAndView中的 model value 在JSP中的EL表达式显示null解决办法

西楚小羽的专栏

08-01

3488

创建一个Hello world的例子，使用Java配置。通过对应的Java替换XML配置。以 Spring Java为基础的配置取决于Servlet 3.0 的API，因此，我们需要包含的依赖在 pom.xml 中。 4.0.0 com.nd.sdp sdp-web-parent 0.7.0 com.nd.share compone

前端需要&传进的各种格式-----后端对应返回&保存

python_web全栈

02-24

3186

0. 此接口基于drf 1. 正常的列表套字典格式 1.1 格式 [ {'id':1, 'name': "dbj"}, {'id':1, 'name': "dbj"}, {'id':1, 'name': "dbj"} ] 1.2 序列化器写法1(没有外键) class IndexDetailDataModelSerializer(serializers.ModelSerializer): class Meta: model = mode

使用MyBatis编写SQL时＜号报错的问题

王飞的博客

10-05

2188

使用MyBatis编写SQL时使用符号报错的问题一般我们写sql语句都会有一些条件判断语句，如下 select * from mmall_order where status = '1' and create_time <= '2020.10.05' order by create_time desc 但是在使用MyBatis时在XML文件中这样写是要报错的，如下 <select id="selectOrderSta

前端处理字符串中特定字符串显示红色

zjq_1234的博客

01-31

2149

前端处理字符串中特定字符串显示红色

网站的几种报错代码，及报错原因

连界优站

07-07

5248

504 Gateway Timeout（网关超时）：作为代理或网关的服务器在规定的时间内未能从上游服务器接收到响应。可能的原因包括服务器配置错误或接口不支持所使用的方法。可能的原因包括服务器配置问题、代码错误、数据库连接问题或权限不足。502 Bad Gateway（错误的网关）：作为代理或网关的服务器从上游服务器接收到无效响应。可能的原因包括上游服务器故障、代理配置错误或网络连接问题。可能的原因包括参数错误、格式错误、缺少必需的字段或数据错误。常见原因包括网址错误、文件不存在、路径错误或服务器配置问题。

Web开发入门——HTML学习

weixin_63539078的博客

07-19

538

html基础学习

前台传入数据后台被转义问题解决

wzy_king的博客

08-19

3203

前台传入数据后台被转义问题解决

前端学习笔记8——实体

weixin_45034895的博客

04-19

239

前端学习笔记8——实体特殊符号空格小于号大于号使用实体（转义字符）特殊符号空格在网页中编写多个空格，默认显示一个 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

前端学习＜一＞HTML——05-HTML标签：字体标签和超链接

——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…

03-24

1007

比如说，你想把作为一个文本在页面上显示，直接写是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。

<el-form-item label="密码强度"> <div class="input_span"> <span id="one"></span> <span id="two"></span> <span id="three"></span> </div> <div id="font"> <span>弱</span> <span>中</span> <span>强</span> </div> </el-form-item>

最新发布

03-29

### 密码强度可视化的实现方法为了实现密码强度的可视化效果，可以通过 HTML 和 CSS 结合 JavaScript 来完成。以下是具体的实现方式： #### 1. **HTML结构** 定义输入框用于接收用户的密码输入，并创建一个容器来动态显示密码强度。 ```html <div class="password-strength-container"> <label for="password">请输入密码：</label> <input type="password" id="password" placeholder="输入您的密码..."> <div class="strength-meter"> <span class="weak"></span> <span class="medium"></span> <span class="strong"></span> </div> <p class="feedback"></p> </div> ``` 上述代码中，`<input>` 元素用于获取用户输入的密码，而 `.strength-meter` 容器内的 `<span>` 元素分别表示弱、中、强三种不同的密码强度状态[^5]。 --- #### 2. **CSS样式** 通过 CSS 设置不同强度的颜色以及动画过渡效果。 ```css .password-strength-container { max-width: 300px; margin: auto; } .strength-meter span { display: inline-block; width: 30%; height: 10px; background-color: lightgray; border-radius: 5px; transition: all 0.3s ease-in-out; } .feedback { font-size: 12px; color: gray; text-align: center; margin-top: 10px; } /* 不同强度的状态 */ .weak.active { background-color: red; } .medium.active { background-color: orange; } .strong.active { background-color: green; } ``` 这里设置了三个颜色等级：红色代表弱 (`.weak`)，橙色代表中等 (`.medium`)，绿色代表强 (`.strong`)。当某个等级被激活时，对应的背景颜色会发生改变[^6]。 --- #### 3. **JavaScript逻辑** 利用正则表达式检测密码复杂度并更新视觉反馈。 ```javascript document.getElementById('password').addEventListener('input', function () { const password = this.value; let strengthClass = 'weak'; let feedbackText = ''; if (password.length >= 8 && /[a-z]/.test(password) && /[A-Z]/.test(password)) { strengthClass = 'strong'; feedbackText = '非常安全!'; } else if (password.length >= 6 || /\d/.test(password)) { strengthClass = 'medium'; feedbackText = '较为安全.'; } else { feedbackText = '不够安全, 建议增加长度或字符种类.'; } document.querySelector('.strength-meter .weak').classList.toggle('active', strengthClass === 'weak'); document.querySelector('.strength-meter .medium').classList.toggle('active', strengthClass === 'medium' || strengthClass === 'strong'); document.querySelector('.strength-meter .strong').classList.toggle('active', strengthClass === 'strong'); document.querySelector('.feedback').textContent = feedbackText; }); ``` 此脚本监听 `input` 输入事件，在每次键入新内容后重新评估当前密码的安全级别，并调整相应的视觉提示[^7]。 --- ### 总结以上方案综合运用了前端技术栈的核心组件——HTML 提供交互界面；CSS 负责美观布局与动态表现力；最后由 JavaScript 实现业务逻辑处理。这种方法不仅简单明了，而且用户体验友好，适合应用于注册表单或其他需要验证密码场景之中。