登录
推荐 文章 Go 技术 课程 下载 专题 AI
首页 >  文章 >  前端

HTML5WebSQL存XML关键步骤解析

时间:2026-01-31 21:03:53 149浏览 收藏

学习知识要善于思考,思考,再思考!今天golang学习网小编就给大家带来《HTML5 WebSQL存XML实现要点汇总》,以下内容主要包含等知识点,如果你正在学习或准备学习文章,就都不要错过本文啦~让我们一起来看看吧,能帮助到你就更好了!

Web SQL 不支持 XML 类型字段,XML 仅作 TEXT 存储且无结构校验;存前需 DOMParser+XMLSerializer 转义,查后需重新解析;推荐改用 JSON、IndexedDB 或服务端解析。

html5websql存xml_结合数据库存储xml记录的实现要点【汇总】

Web SQL 不支持直接存储 XML 类型字段

Web SQL 是基于 SQLite 的客户端数据库,它没有 XML 数据类型,所有数据都按 TEXTINTEGERREALBLOB 等 SQLite 原生类型处理。你存的 XML 实际上只是字符串——哪怕内容是格式良好的 Alice,数据库也完全不校验合法性或结构。

这意味着:

  • 必须手动确保 XML 字符串合法(比如转义 <>& 等,或用 DOMParser + XMLSerializer 预处理)
  • 无法用 SQL 查询 XML 内部节点(例如不能写 SELECT * FROM docs WHERE xml LIKE '%active%' —— 这种模糊匹配极不可靠,且无法利用索引)
  • 大 XML 文本可能触发 Web SQL 的单条语句长度限制(尤其在旧版 Safari/iOS 中,executeSql 对参数长度敏感)

存 XML 前必须做字符转义或序列化封装

直接把原始 XML 字符串传给 INSERT 会出问题:如果 XML 含单引号(')、双引号(")或未转义的 &,会导致 SQL 语法错误或注入风险。不要拼接 SQL 字符串。

正确做法是使用参数化查询,并确保输入已是安全字符串:

  • 若 XML 来自用户输入或外部接口,先用 DOMParser 解析再用 XMLSerializer 序列化,可自动处理转义:
    const parser = new DOMParser();
    const doc = parser.parseFromString(userInput, 'application/xml');
    if (doc.documentElement.nodeName === 'parsererror') throw new Error('Invalid XML');
    const serializer = new XMLSerializer();
    const safeXml = serializer.serializeToString(doc);
  • 若 XML 已是字符串且确定结构简单,可用正则或 String.replace() 手动转义(仅作备用):
    xmlStr.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
  • 插入时严格使用 ? 占位符:
    tx.executeSql('INSERT INTO xml_docs (id, content, created) VALUES (?, ?, ?)', [id, safeXml, Date.now()]);

查 XML 后需重新解析才能操作节点

从 Web SQL 读出的 XML 是纯 TEXT 字段值,不是 DOM 对象。想取 </code> 或判断 <code><status></code> 是否为 <code>done</code>,必须手动解析:</p><ul><li>用 <code>DOMParser</code> 是最兼容的方式(所有现代浏览器支持):<pre class="brush:php;toolbar:false">const parser = new DOMParser(); const xmlDoc = parser.parseFromString(row.content, 'application/xml'); if (xmlDoc.querySelector('parsererror')) { console.error('XML parse error in record', row.id); } else { const title = xmlDoc.querySelector('title')?.textContent; }</pre></li><li>避免用 <code>innerHTML</code> 或 <code>eval</code> 处理 XML 字符串——既不安全,也无法保证命名空间或 CDATA 正确处理</li><li>注意:<code>parseFromString</code> 第二个参数必须是 <code>'application/xml'</code>(不是 <code>text/xml</code> 或空字符串),否则某些浏览器(如旧 Edge)会降级为 HTML 解析,破坏 XML 语义</li></ul><h3>替代方案比硬存 XML 更可靠</h3><p>除非业务强依赖 XML 格式(如对接遗留 SOAP 接口、需保留注释/命名空间/CDATA),否则应优先考虑其他方式:</p><ul><li>存为 JSON:前端天然支持 <code>JSON.parse()</code>/<code>JSON.stringify()</code>,体积更小,查询字段可拆到独立列(如 <code>status TEXT</code>, <code>updated INTEGER</code>),支持索引和 WHERE 条件</li><li>用 IndexedDB 存 Blob:对超大 XML(>5MB),Web SQL 易达上限;IndexedDB 支持原生 <code>Blob</code> 存储,且无同源 SQL 大小限制</li><li>服务端代理解析:把 XML 解析逻辑放到后端,前端只存结构化字段,规避所有客户端 XML 处理陷阱</li></ul><p>Web SQL 本身已是废弃标准(Chrome 123+ 移除,Safari 仍支持但无更新),现在还用它存 XML,等于在技术债上叠技术债——真正难的从来不是“怎么存”,而是“以后怎么安全、高效地读和改”。</p><p>本篇关于《HTML5WebSQL存XML关键步骤解析》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!</p> </div> <div class="labsList"> </div> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1年前  |   <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1个月前  |   <a href="javascript:;" class="aLightGray" title="智能体">智能体</a> </div> <div class="tit lineOverflow"><a href="/article/621422.html" title="智能体安全引领产业升级——国内AI安全产品市场深度分析" class="aBlack">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="621422" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  3个月前  |   </div> <div class="tit lineOverflow"><a href="/article/619053.html" title="CSS变量简化按钮悬停效果技巧" class="aBlack">CSS变量简化按钮悬停效果技巧</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="619053" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  3个月前  |   </div> <div class="tit lineOverflow"><a href="/article/618916.html" title="JavaScript符号类型详解与应用" class="aBlack">JavaScript符号类型详解与应用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="618916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4个月前  |   </div> <div class="tit lineOverflow"><a href="/article/612539.html" title="HTML剪贴板复制粘贴怎么用" class="aBlack">HTML剪贴板复制粘贴怎么用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="612539" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/322_new_0_1.html" class="aLightGray" title="缓存">缓存</a> · <a href="javascript:;" class="aLightGray" title="Service Worker">Service Worker</a> <a href="javascript:;" class="aLightGray" title="CacheStorage">CacheStorage</a> <a href="javascript:;" class="aLightGray" title="缓存版本">缓存版本</a> <a href="javascript:;" class="aLightGray" title="activate">activate</a> </div> <div class="tit lineOverflow"><a href="/article/628200.html" title="Service Worker缓存版本切换与旧缓存清理流程" class="aBlack">Service Worker缓存版本切换与旧缓存清理流程</a></div> <div class="opt"> <span><i class="view"></i>490</span> <span class="collectBtn user_collection" data-id="628200" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/1017_new_0_1.html" class="aLightGray" title="websocket">websocket</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="websocket">websocket</a> <a href="javascript:;" class="aLightGray" title="消息去重">消息去重</a> <a href="javascript:;" class="aLightGray" title="幂等键">幂等键</a> <a href="javascript:;" class="aLightGray" title="断线重连">断线重连</a> <a href="javascript:;" class="aLightGray" title="前端实时通信">前端实时通信</a> </div> <div class="tit lineOverflow"><a href="/article/628178.html" title="WebSocket断线重连与消息去重的客户端设计" class="aBlack">WebSocket断线重连与消息去重的客户端设计</a></div> <div class="opt"> <span><i class="view"></i>171</span> <span class="collectBtn user_collection" data-id="628178" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   </div> <div class="tit lineOverflow"><a href="/article/628150.html" title="View Transitions在路由切换中保留关键元素连续性" class="aBlack">View Transitions在路由切换中保留关键元素连续性</a></div> <div class="opt"> <span><i class="view"></i>305</span> <span class="collectBtn user_collection" data-id="628150" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   </div> <div class="tit lineOverflow"><a href="/article/628120.html" title="CSS :has选择器实现父级状态样式的边界" class="aBlack">CSS :has选择器实现父级状态样式的边界</a></div> <div class="opt"> <span><i class="view"></i>252</span> <span class="collectBtn user_collection" data-id="628120" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   </div> <div class="tit lineOverflow"><a href="/article/628089.html" title="CSS container queries按组件宽度适配卡片布局" class="aBlack">CSS container queries按组件宽度适配卡片布局</a></div> <div class="opt"> <span><i class="view"></i>367</span> <span class="collectBtn user_collection" data-id="628089" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="ArrayBuffer">ArrayBuffer</a> <a href="javascript:;" class="aLightGray" title="postMessage">postMessage</a> <a href="javascript:;" class="aLightGray" title="TypedArray">TypedArray</a> <a href="javascript:;" class="aLightGray" title="结构化克隆">结构化克隆</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> <a href="javascript:;" class="aLightGray" title="Transferable">Transferable</a> </div> <div class="tit lineOverflow"><a href="/article/628059.html" title="Web Worker传递大数组时选择Transferable降低复制" class="aBlack">Web Worker传递大数组时选择Transferable降低复制</a></div> <div class="opt"> <span><i class="view"></i>140</span> <span class="collectBtn user_collection" data-id="628059" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   </div> <div class="tit lineOverflow"><a href="/article/628028.html" title="IndexedDB事务生命周期内完成读写操作的结构" class="aBlack">IndexedDB事务生命周期内完成读写操作的结构</a></div> <div class="opt"> <span><i class="view"></i>176</span> <span class="collectBtn user_collection" data-id="628028" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="AbortSignal">AbortSignal</a> <a href="javascript:;" class="aLightGray" title="前端请求取消">前端请求取消</a> </div> <div class="tit lineOverflow"><a href="/article/627997.html" title="AbortController取消搜索请求并避免旧结果覆盖新结果" class="aBlack">AbortController取消搜索请求并避免旧结果覆盖新结果</a></div> <div class="opt"> <span><i class="view"></i>242</span> <span class="collectBtn user_collection" data-id="627997" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   </div> <div class="tit lineOverflow"><a href="/article/627967.html" title="Fetch API流式读取响应并显示下载进度的实现" class="aBlack">Fetch API流式读取响应并显示下载进度的实现</a></div> <div class="opt"> <span><i class="view"></i>359</span> <span class="collectBtn user_collection" data-id="627967" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   <a href="javascript:;" class="aLightGray" title="localStorage">localStorage</a> <a href="javascript:;" class="aLightGray" title="前端存储">前端存储</a> <a href="javascript:;" class="aLightGray" title="Web Storage">Web Storage</a> <a href="javascript:;" class="aLightGray" title="配额异常">配额异常</a> </div> <div class="tit lineOverflow"><a href="/article/627917.html" title="Web Storage处理 localStorage 配额异常的实现方法" class="aBlack">Web Storage处理 localStorage 配额异常的实现方法</a></div> <div class="opt"> <span><i class="view"></i>308</span> <span class="collectBtn user_collection" data-id="627917" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title=":focus-visible">:focus-visible</a> <a href="javascript:;" class="aLightGray" title="键盘焦点">键盘焦点</a> <a href="javascript:;" class="aLightGray" title="Web Accessibility">Web Accessibility</a> </div> <div class="tit lineOverflow"><a href="/article/627886.html" title="Web Accessibility保留键盘焦点而不干扰鼠标样式的实现方法" class="aBlack">Web Accessibility保留键盘焦点而不干扰鼠标样式的实现方法</a></div> <div class="opt"> <span><i class="view"></i>143</span> <span class="collectBtn user_collection" data-id="627886" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4天前  |   </div> <div class="tit lineOverflow"><a href="/article/627853.html" title="ResizeObserver避免尺寸回调触发布局循环的实现方法" class="aBlack">ResizeObserver避免尺寸回调触发布局循环的实现方法</a></div> <div class="opt"> <span><i class="view"></i>209</span> <span class="collectBtn user_collection" data-id="627853" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 课程推荐 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div> <!-- footer --> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/frontend/common.js" defer></script> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>