当前位置:首页 > 文章列表 > 文章 > 前端 > 西里尔字母ISO-8859-1编码问题解决方法

西里尔字母ISO-8859-1编码问题解决方法

2026-01-12 22:07:23 0浏览 收藏

积累知识,胜过积蓄金银!毕竟在文章开发的过程中,会遇到各种各样的问题,往往都是一些细节知识点还没有掌握好而导致的,因此基础知识点的积累是很重要的。下面本文《处理含西里尔字母的 ISO-8859-1 编码网页响应问题,关键在于正确识别和转换字符编码。以下是一些常见的解决方法:1. 确认网页实际编码首先需要确认网页的实际编码是否为 ISO-8859-1(也称为 Latin-1),尤其是当页面中包含西里尔字母(如俄语、保加利亚语等)时。某些浏览器或服务器可能错误地声明了编码,导致解析失败。检查方式:查看网页的 标签。使用开发者工具(如 Chrome 的 F12 或 Firefox 的 Firebug)查看网络请求头中的 Content-Type 和 charset。2. 手动设置正确的编码如果发现网页的编码被错误地声明为 UTF-8 或其他格式,可以尝试手动设置为 ISO-8859-1。示例(Python 中使用 requests 库):import requests response = requests.get('http://example.com') response.encoding = 'iso-8859-1' # 手动设置编码 content = response.text3. 使用第三方库进行编码转换如果网页内容本身是 ISO-8859-1,但你希望》,就带大家讲解一下知识点,若是你对本文感兴趣,或者是想搞懂其中某个知识点,就请你继续往下看吧~

如何正确处理含西里尔字母的 ISO-8859-1 类网页响应编码问题

当使用 requests 获取含西里尔字母(如俄文)的旧式网页时,`response.text` 常因自动编码检测失败而乱码;应跳过 `text` 属性,直接用 `response.content` 结合 `cp1251`(Windows-1251)解码,才能准确还原原始字符。

在爬取历史水利、气象或东欧/中亚地区老旧网站(如 http://www.cawater-info.net/karadarya/1991/veg1991.htm)时,常见响应头未声明 Content-Type 字符集,或错误声明为 ISO-8859-1,而实际内容采用 Windows-1251 编码(专为西里尔字母设计)。此时 requests 默认基于 HTTP 头或 HTML 标签推断编码(常误判为 ISO-8859-1 或 utf-8),导致 response.text 显示乱码。

✅ 正确做法是:忽略 response.text,改用 response.content(原始字节)手动解码

import requests

url = "http://www.cawater-info.net/karadarya/1991/veg1991.htm"
response = requests.get(url)
# ❌ 错误:依赖自动编码(通常为 'ISO-8859-1' 或 None)
# print(response.text[:100])

# ✅ 正确:显式用 cp1251 解码原始字节
decoded_text = response.content.decode("cp1251")
print(decoded_text[:100])
# 输出:Оперативные данные по водозаборам бассейна реки Карадарья на период вегетации 199</pre><p>⚠️ 注意事项:</p><ul><li>不要对 response.text 再次 .encode()(如 text.encode('utf-8')),这会将已错误解码的字符串二次编码,加剧乱码;</li><li>cp1251 与 windows-1251 等价,Python 中二者可互换使用;</li><li>若页面混合多种编码(极少见),可先用 chardet.detect(response.content) 探测,但对确定为俄文旧站,cp1251 是最可靠首选;</li><li>如需后续解析 HTML,推荐将解码后字符串传入 BeautifulSoup(..., from_encoding="cp1251") 或直接使用 bs4 的 response.content + 指定解析器(如 lxml 自动处理更好)。</li></ul><p>总结:面对含西里尔字母的遗留网页,编码问题本质是「字节→字符串」转换失准。绕过 requests 的自动解码逻辑,坚持 content + 显式 decode("cp1251"),即可稳定获取可读文本。</p><p>到这里,我们也就讲完了《西里尔字母ISO-8859-1编码问题解决方法》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!</p>                </div>
                <div class="labsList">
                                    </div>
                                <div class="cateBox">
                                        <div class="cateItem">
                        <a href="/article/455869.html" title="Win11清理Windows.old详细教程" class="img_box">
                            <img src="/uploads/20260112/176822682469650008798ab.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Win11清理Windows.old详细教程">Win11清理Windows.old详细教程                        </a>
                        <dl>
                            <dt class="lineOverflow"><a href="/article/455869.html"  title="Win11清理Windows.old详细教程" class="aBlack">上一篇<i></i></a></dt>
                            <dd class="lineTwoOverflow">Win11清理Windows.old详细教程</dd>
                        </dl>
                    </div>
                                        <div class="cateItem">
                        <a href="/article/455871.html"  title="Java线程交换技巧:Exchanger使用全解析" class="img_box">
                            <img src="/uploads/20260112/17682269276965006f13543.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Java线程交换技巧:Exchanger使用全解析">
                        </a>
                        <dl>
                            <dt class="lineOverflow"><a href="/article/455871.html"  class="aBlack" title="Java线程交换技巧:Exchanger使用全解析">下一篇<i></i></a></dt>
                            <dd class="lineTwoOverflow">Java线程交换技巧:Exchanger使用全解析</dd>
                        </dl>
                    </div>
                                    </div>
            </div>
        </div>
                <div class="leftContBox pt0">
            <div class="pdl20">
                <div class="contTit">
                    <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
                    <div class="tit">最新文章</div>
                </div>
            </div>
            <ul class="newArticleList">
                                <li>
                    <div class="contBox">
                        <a href="/article/620753.html" class="img_box" title="前端大报表导出怎么选:浏览器直出还是后端异步任务">
                            <img src="/uploads/20260811/1786441375-frontend-report-async.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端大报表导出怎么选:浏览器直出还是后端异步任务">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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/861_new_0_1.html" class="aLightGray" title="性能">性能</a> ·
                                                                          <a href="/articletag/2436_new_0_1.html" class="aLightGray" title="异步任务">异步任务</a> ·
                                                                          <a href="/articletag/40548_new_0_1.html" class="aLightGray" title="对象存储">对象存储</a> ·
                                                                          <a href="/articletag/40552_new_0_1.html" class="aLightGray" title="文件导出">文件导出</a> ·
                                                                                   <a href="javascript:;" class="aLightGray" title="Excel">Excel</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="csv">csv</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="对象存储">对象存储</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="异步任务">异步任务</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="SSE">SSE</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="前端报表导出">前端报表导出</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="浏览器导出">浏览器导出</a>
                                                              </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620753.html" class="aBlack" target="_blank" title="前端大报表导出怎么选:浏览器直出还是后端异步任务">前端大报表导出怎么选:浏览器直出还是后端异步任务</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>331浏览</span>
                                <span class="collectBtn user_collection" data-id="620753" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620752.html" class="img_box" title="前端 WebSocket 断线重连为什么会打爆接口:指数退避、抖动与页面恢复">
                            <img src="/uploads/20260811/1786440842-ws-backoff-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 WebSocket 断线重连为什么会打爆接口:指数退避、抖动与页面恢复">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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天前  |  

                                                  </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620752.html" class="aBlack" target="_blank" title="前端 WebSocket 断线重连为什么会打爆接口:指数退避、抖动与页面恢复">前端 WebSocket 断线重连为什么会打爆接口:指数退避、抖动与页面恢复</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>366浏览</span>
                                <span class="collectBtn user_collection" data-id="620752" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620744.html" class="img_box" title="前端大文件上传怎么选:后端中转还是对象存储分片直传">
                            <img src="/uploads/20260811/1786436654-image-1.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端大文件上传怎么选:后端中转还是对象存储分片直传">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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="/articletag/40547_new_0_1.html" class="aLightGray" title="大文件上传">大文件上传</a> ·
                                                                          <a href="/articletag/40548_new_0_1.html" 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="对象存储直传">对象存储直传</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="预签名URL">预签名URL</a>
                                                              </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620744.html" class="aBlack" target="_blank" title="前端大文件上传怎么选:后端中转还是对象存储分片直传">前端大文件上传怎么选:后端中转还是对象存储分片直传</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>448浏览</span>
                                <span class="collectBtn user_collection" data-id="620744" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620722.html" class="img_box" title="Service Worker 更新为什么用户仍拿旧页面:缓存版本、waiting 与平滑切换">
                            <img src="/uploads/20260811/1786420510-sw-cache-rollout.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Service Worker 更新为什么用户仍拿旧页面:缓存版本、waiting 与平滑切换">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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天前  |  

                                                  </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620722.html" class="aBlack" target="_blank" title="Service Worker 更新为什么用户仍拿旧页面:缓存版本、waiting 与平滑切换">Service Worker 更新为什么用户仍拿旧页面:缓存版本、waiting 与平滑切换</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>448浏览</span>
                                <span class="collectBtn user_collection" data-id="620722" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620721.html" class="img_box" title="前端长列表首屏慢怎么查:content-visibility 与 contain-intrinsic-size 的收益和布局跳动边界">
                            <img src="/uploads/20260811/1786419756-css-content-visibility-path.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端长列表首屏慢怎么查:content-visibility 与 contain-intrinsic-size 的收益和布局跳动边界">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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天前  |  

                                                  </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620721.html" class="aBlack" target="_blank" title="前端长列表首屏慢怎么查:content-visibility 与 contain-intrinsic-size 的收益和布局跳动边界">前端长列表首屏慢怎么查:content-visibility 与 contain-intrinsic-size 的收益和布局跳动边界</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>390浏览</span>
                                <span class="collectBtn user_collection" data-id="620721" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620659.html" class="img_box" title="前端页面发布后旧 JS 还在缓存:Cache-Control、文件指纹与回滚检查">
                            <img src="/uploads/20260809/1786222146-frontend-cache-layers.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端页面发布后旧 JS 还在缓存:Cache-Control、文件指纹与回滚检查">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                                       |  6天前  |  

                                                  </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620659.html" class="aBlack" target="_blank" title="前端页面发布后旧 JS 还在缓存:Cache-Control、文件指纹与回滚检查">前端页面发布后旧 JS 还在缓存:Cache-Control、文件指纹与回滚检查</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>267浏览</span>
                                <span class="collectBtn user_collection" data-id="620659" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620650.html" class="img_box" title="前端批量导入 CSV 如何避免页面假死:Web Worker、分片处理与结果通知">
                            <img src="/uploads/20260809/1786216438-csv-quality-notify.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端批量导入 CSV 如何避免页面假死:Web Worker、分片处理与结果通知">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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星期前  |  

                                                  </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620650.html" class="aBlack" target="_blank" title="前端批量导入 CSV 如何避免页面假死:Web Worker、分片处理与结果通知">前端批量导入 CSV 如何避免页面假死:Web Worker、分片处理与结果通知</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>441浏览</span>
                                <span class="collectBtn user_collection" data-id="620650" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620642.html" class="img_box" title="前端 BroadcastChannel 多标签页状态同步:消息去重、版本冲突与关闭清理">
                            <img src="/uploads/20260809/1786211641-broadcast-close-fallback.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 BroadcastChannel 多标签页状态同步:消息去重、版本冲突与关闭清理">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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星期前  |  

                                                  </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620642.html" class="aBlack" target="_blank" title="前端 BroadcastChannel 多标签页状态同步:消息去重、版本冲突与关闭清理">前端 BroadcastChannel 多标签页状态同步:消息去重、版本冲突与关闭清理</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>333浏览</span>
                                <span class="collectBtn user_collection" data-id="620642" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620634.html" class="img_box" title="CSS interpolate-size 让 height:auto 可过渡:旧写法、迁移边界与降级验证">
                            <img src="/uploads/20260809/1786206898-css-interpolate-size-legacy.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS interpolate-size 让 height:auto 可过渡:旧写法、迁移边界与降级验证">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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/161_new_0_1.html" class="aLightGray" title="布局">布局</a> ·
                                                                          <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> ·
                                                                          <a href="/articletag/40482_new_0_1.html" class="aLightGray" title="前端动画">前端动画</a> ·
                                                                          <a href="/articletag/40483_new_0_1.html" class="aLightGray" title="浏览器兼容">浏览器兼容</a> ·
                                                                          <a href="/articletag/40499_new_0_1.html" class="aLightGray" title="渐进增强">渐进增强</a> ·
                                                                                   <a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="前端动画">前端动画</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="浏览器兼容">浏览器兼容</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="interpolate-size">interpolate-size</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="height auto">height auto</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="calc-size">calc-size</a>
                                                              </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620634.html" class="aBlack" target="_blank" title="CSS interpolate-size 让 height:auto 可过渡:旧写法、迁移边界与降级验证">CSS interpolate-size 让 height:auto 可过渡:旧写法、迁移边界与降级验证</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>475浏览</span>
                                <span class="collectBtn user_collection" data-id="620634" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620625.html" class="img_box" title="前端大文件上传为什么会卡住:分片、并发窗口与断点续传的架构取舍">
                            <img src="/uploads/20260808/1786200839-resume-state.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端大文件上传为什么会卡住:分片、并发窗口与断点续传的架构取舍">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <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/616_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="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> ·
                                                                                   <a href="javascript:;" class="aLightGray" title="并发控制">并发控制</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="断点续传">断点续传</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="分片上传">分片上传</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="前端大文件上传">前端大文件上传</a>
                                                              </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620625.html" class="aBlack" target="_blank" title="前端大文件上传为什么会卡住:分片、并发窗口与断点续传的架构取舍">前端大文件上传为什么会卡住:分片、并发窗口与断点续传的架构取舍</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>127浏览</span>
                                <span class="collectBtn user_collection" data-id="620625" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620588.html" class="img_box" title="CSS 原生弹窗关闭动画怎么保留:@starting-style 与离散过渡的兼容写法">
                            <img src="/uploads/20260726/1785067411-css-dialog-discrete-break.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS 原生弹窗关闭动画怎么保留:@starting-style 与离散过渡的兼容写法">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                                       |  2星期前  |  

                                                                        <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> ·
                                                                          <a href="/articletag/40482_new_0_1.html" class="aLightGray" title="前端动画">前端动画</a> ·
                                                                          <a href="/articletag/40483_new_0_1.html" class="aLightGray" title="浏览器兼容">浏览器兼容</a> ·
                                                                                   <a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="dialog">dialog</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="@starting-style">@starting-style</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="transition-behavior">transition-behavior</a>
                                                                                             <a href="javascript:;" class="aLightGray" title="popover">popover</a>
                                                              </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620588.html" class="aBlack" target="_blank" title="CSS 原生弹窗关闭动画怎么保留:@starting-style 与离散过渡的兼容写法">CSS 原生弹窗关闭动画怎么保留:@starting-style 与离散过渡的兼容写法</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>444浏览</span>
                                <span class="collectBtn user_collection" data-id="620588" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                                <li>
                    <div class="contBox">
                        <a href="/article/620585.html" class="img_box" title="CSS 容器查询实现响应式卡片:container-type 与 @container 的最小配方">
                            <img src="/uploads/20260726/1785059602-container-query-problem.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS 容器查询实现响应式卡片:container-type 与 @container 的最小配方">
                        </a>
                        <dl>
                            <dd class="cont1">
                  <span>
                                                                <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                                       |  2星期前  |  

                                                  </span>
                            </dd>
                            <dt class="lineOverflow">
                                <a href="/article/620585.html" class="aBlack" target="_blank" title="CSS 容器查询实现响应式卡片:container-type 与 @container 的最小配方">CSS 容器查询实现响应式卡片:container-type 与 @container 的最小配方</a>
                            </dt>
                            <dd class="cont2">
                                <span><i class="view"></i>302浏览</span>
                                <span class="collectBtn user_collection" data-id="620585" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                            </dd>
                        </dl>
                    </div>
                </li>
                            </ul>
        </div>
    </div>
    <div class="mainRight">
        <!-- 右侧广告位banner -->
        <div class="rightContBox" style="margin-top: 0px;">
            <div class="rightTit">
                <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
                <div class="tit lineOverflow">课程推荐</div>
            </div>
            <ul class="lessonRecomRList">
                                <li>
                    <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式">
                        <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
                                            </a>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt>
                        <dd class="cont1 lineTwoOverflow">
                            设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。                        </dd>
                        <dd class="cont2">543次学习</dd>
                    </dl>
                </li>
                                <li>
                    <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程">
                        <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
                                            </a>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt>
                        <dd class="cont1 lineTwoOverflow">
                            本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。                        </dd>
                        <dd class="cont2">516次学习</dd>
                    </dl>
                </li>
                                <li>
                    <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信">
                        <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
                                            </a>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt>
                        <dd class="cont1 lineTwoOverflow">
                            如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让                        </dd>
                        <dd class="cont2">500次学习</dd>
                    </dl>
                </li>
                                <li>
                    <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战">
                        <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
                                            </a>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt>
                        <dd class="cont1 lineTwoOverflow">
                            在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。                        </dd>
                        <dd class="cont2">487次学习</dd>
                    </dl>
                </li>
                                <li>
                    <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局">
                        <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
                                            </a>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt>
                        <dd class="cont1 lineTwoOverflow">
                            本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。                        </dd>
                        <dd class="cont2">485次学习</dd>
                    </dl>
                </li>
                            </ul>
        </div>
        <div class="rightContBox">
        <div class="rightTit">
            <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
            <div class="tit lineOverflow">AI推荐</div>
        </div>
        <ul class="lessonRecomRList">
                        <li>
                <a href="/ai/13109.html"  target="_blank" title="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" class="img_box">
                    <img src="/uploads/ai/20260616/ljg-skills-icon-8bbe1468e5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" style="object-fit:cover;width:100%;height:100%;">
                </a>
                <dl>
                    <dt class="lineTwoOverflow"><a href="/ai/13109.html" class="aBlack" target="_blank" title="ljg-skills">ljg-skills</a></dt>
                    <dd class="cont1 lineTwoOverflow">
                        ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。                    </dd>
                    <dd class="cont2">4871次使用</dd>
                </dl>
            </li>
                        <li>
                <a href="/ai/13108.html"  target="_blank" title="MELO音乐 - AI 音乐生成平台,支持多模态创作能力" class="img_box">
                    <img src="/uploads/ai/20260616/melo-icon-10bf590762.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MELO音乐 - AI 音乐生成平台,支持多模态创作能力" style="object-fit:cover;width:100%;height:100%;">
                </a>
                <dl>
                    <dt class="lineTwoOverflow"><a href="/ai/13108.html" class="aBlack" target="_blank" title="MELO音乐">MELO音乐</a></dt>
                    <dd class="cont1 lineTwoOverflow">
                        MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!                    </dd>
                    <dd class="cont2">4459次使用</dd>
                </dl>
            </li>
                        <li>
                <a href="/ai/13107.html"  target="_blank" title="UniScribe - AI 免费在线音视频转文字平台" class="img_box">
                    <img src="/uploads/ai/20260616/uniscribe-icon-3c88366a15.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="UniScribe - AI 免费在线音视频转文字平台" style="object-fit:cover;width:100%;height:100%;">
                </a>
                <dl>
                    <dt class="lineTwoOverflow"><a href="/ai/13107.html" class="aBlack" target="_blank" title="UniScribe">UniScribe</a></dt>
                    <dd class="cont1 lineTwoOverflow">
                        UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。                    </dd>
                    <dd class="cont2">4395次使用</dd>
                </dl>
            </li>
                        <li>
                <a href="/ai/13106.html"  target="_blank" title="剧云 - 免费 AI 智能中文剧本创作平台" class="img_box">
                    <img src="/uploads/ai/20260615/d36c7176-icon-2b0cd581ce.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="剧云 - 免费 AI 智能中文剧本创作平台" style="object-fit:cover;width:100%;height:100%;">
                </a>
                <dl>
                    <dt class="lineTwoOverflow"><a href="/ai/13106.html" class="aBlack" target="_blank" title="剧云">剧云</a></dt>
                    <dd class="cont1 lineTwoOverflow">
                        剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。                    </dd>
                    <dd class="cont2">4633次使用</dd>
                </dl>
            </li>
                        <li>
                <a href="/ai/13105.html"  target="_blank" title="万象有声 - AI 一站式有声内容创作平台" class="img_box">
                    <img src="/uploads/ai/20260615/50267bac-icon-c146b001b5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="万象有声 - AI 一站式有声内容创作平台" style="object-fit:cover;width:100%;height:100%;">
                </a>
                <dl>
                    <dt class="lineTwoOverflow"><a href="/ai/13105.html" class="aBlack" target="_blank" title="万象有声">万象有声</a></dt>
                    <dd class="cont1 lineTwoOverflow">
                        万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!                    </dd>
                    <dd class="cont2">4595次使用</dd>
                </dl>
            </li>
                    </ul>
    </div>
        <!-- 相关文章 -->
        <div class="rightContBox">
            <div class="rightTit">
                <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
                <div class="tit lineOverflow">相关文章</div>
            </div>
            <ul class="aboutArticleRList">
                                <li>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/article/207000.html"  class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt>
                        <dd>
                            <span class="left">2025-05-11</span>
                            <span class="right">502浏览</span>
                        </dd>
                    </dl>
                </li>
                                <li>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/article/619053.html"  class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt>
                        <dd>
                            <span class="left">2026-05-31</span>
                            <span class="right">501浏览</span>
                        </dd>
                    </dl>
                </li>
                                <li>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/article/618916.html"  class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt>
                        <dd>
                            <span class="left">2026-05-31</span>
                            <span class="right">501浏览</span>
                        </dd>
                    </dl>
                </li>
                                <li>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/article/612539.html"  class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt>
                        <dd>
                            <span class="left">2026-05-26</span>
                            <span class="right">501浏览</span>
                        </dd>
                    </dl>
                </li>
                                <li>
                    <dl>
                        <dt class="lineTwoOverflow"><a href="/article/611774.html"  class="aBlack" title="data-*属性详解:HTML数据存储与DOM操作技巧">data-*属性详解:HTML数据存储与DOM操作技巧</a></dt>
                        <dd>
                            <span class="left">2026-05-25</span>
                            <span class="right">501浏览</span>
                        </dd>
                    </dl>
                </li>
                            </ul>
        </div>
    </div>
</div>

<script src="/assets/js/frontend/common.js"></script>
</body>
</html>