百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

6个强大且流行的Python爬虫库,强烈推荐!

myzbx 2025-03-03 19:25 9 浏览

Python中有非常多用于网络数据采集的库,功能非常强大,有的用于抓取网页,有的用于解析网页,这里介绍6个最常用的库。

1. BeautifulSoup

BeautifulSoup是最常用的Python网页解析库之一,可将 HTML 和 XML 文档解析为树形结构,能更方便地识别和提取数据。

BeautifulSoup可以自动将输入文档转换为 Unicode,将输出文档转换为 UTF-8。此外,你还可以设置 BeautifulSoup 扫描整个解析页面,识别所有重复的数据(例如,查找文档中的所有链接),只需几行代码就能自动检测特殊字符等编码。

from bs4 import BeautifulSoup  
  
# 假设这是我们从某个网页获取的HTML内容(这里直接以字符串形式给出)  
html_content = """  
  
  
    示例网页  
  
  
    

欢迎来到BeautifulSoup示例

这是一个关于BeautifulSoup的简单示例。

关于我们 """ # 使用BeautifulSoup解析HTML内容,这里默认使用Python的html.parser作为解析器 # 你也可以指定其他解析器,如'lxml'或'html5lib',但需要先安装它们 soup = BeautifulSoup(html_content, 'html.parser') # 提取并打印标签的文本内容 print("网页标题:", soup.title.string) # 网页标题: 示例网页 # 提取并打印<p>标签的文本内容,这里使用class属性来定位 print("介绍内容:", soup.find('p', class_='introduction').string) # 介绍内容: 这是一个关于BeautifulSoup的简单示例。 # 提取并打印<a>标签的href属性和文本内容 link = soup.find('a', class_='link') print("链接地址:", link['href']) # 链接地址: https://www.example.com/about print("链接文本:", link.string) # 链接文本: 关于我们 # 注意:如果HTML内容中包含多个相同条件的标签,你可以使用find_all()来获取它们的一个列表 # 例如,要获取所有<a>标签的href属性,可以这样做: all_links = [a['href'] for a in soup.find_all('a')] print("所有链接地址:", all_links) # 假设HTML中有多个<a>标签,这里将列出它们的href属性 # 注意:上面的all_links列表在当前的HTML内容中只有一个元素,因为只有一个<a>标签 </code></pre><h1 class="pgc-h-arrow-right" data-track="6">2. Scrapy</h1><p style="text-align: left;" data-track="7"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">Scrapy是一个流行的高级爬虫框架,可快速高效地抓取网站并从其页面中提取结构化数据。</span></span></p><p style="text-align: left;" data-track="8"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">由于 Scrapy 主要用于构建复杂的爬虫项目,并且它通常与项目文件结构一起使用</span></span></p><p style="text-align: left;" data-track="9"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">Scrapy 不仅仅是一个库,还可以用于各种任务,包括监控、自动测试和数据挖掘。这个 Python 库包含一个内置的选择器(Selectors)功能,可以快速异步处理请求并从网站中提取数据。</span></span></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code># 假设这个文件名为 my_spider.py,但它实际上应该放在 Scrapy 项目的 spiders 文件夹中 import scrapy class MySpider(scrapy.Spider): # Spider 的名称,必须是唯一的 name = 'example_spider' # 允许爬取的域名列表(可选) # allowed_domains = ['example.com'] # 起始 URL 列表 start_urls = [ 'http://example.com/', ] def parse(self, response): # 这个方法用于处理每个响应 # 例如,我们可以提取网页的标题 title = response.css('title::text').get() if title: # 打印标题(在控制台输出) print(f'Title: {title}') # 你还可以继续爬取页面中的其他链接,这里只是简单示例 # 例如,提取所有链接并请求它们 # for href in response.css('a::attr(href)').getall(): # yield scrapy.Request(url=response.urljoin(href), callback=self.parse) # 注意:上面的代码只是一个 Spider 类的定义。 # 要运行这个 Spider,你需要将它放在一个 Scrapy 项目中,并使用 scrapy crawl 命令来启动爬虫。 # 例如,如果你的 Scrapy 项目名为 myproject,并且你的 Spider 文件名为 my_spider.py, # 那么你应该在项目根目录下运行以下命令: # scrapy crawl example_spider </code></pre><h1 class="pgc-h-arrow-right" data-track="11">3. Selenium</h1><p style="text-align: left;" data-track="12"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">Selenium 是一款基于浏览器地自动化程序库,可以抓取网页数据。它能在 JavaScript 渲染的网页上高效运行,这在其他 Python 库中并不多见。</span></span></p><p style="text-align: left;" data-track="13"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">在开始使用 Python 处理 Selenium 之前,需要先使用 Selenium Web 驱动程序创建功能测试用例。</span></span></p><p style="text-align: left;" data-track="14"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">Selenium 库能很好地与任何浏览器(如 Firefox、Chrome、IE 等)配合进行测试,比如表单提交、自动登录、数据添加/删除和警报处理等。</span></span></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC # 设置WebDriver的路径(根据你的系统路径和WebDriver版本修改) driver_path = '/path/to/your/chromedriver' # 初始化WebDriver driver = webdriver.Chrome(executable_path=driver_path) try: # 打开网页 driver.get('https://www.example.com') # 等待页面加载完成(这里使用隐式等待,针对所有元素) # 注意:隐式等待可能会影响性能,通常在脚本开始时设置一次 driver.implicitly_wait(10) # 秒 # 查找并输入文本到搜索框(假设搜索框有一个特定的ID或类名等) # 这里以ID为'search'的输入框为例 search_box = driver.find_element(By.ID, 'search') search_box.send_keys('Selenium WebDriver') # 提交搜索(假设搜索按钮是一个类型为submit的按钮或是一个可以点击的输入框) # 如果搜索是通过按Enter键触发的,可以直接在search_box上使用send_keys(Keys.ENTER) # 这里假设有一个ID为'submit'的按钮 submit_button = driver.find_element(By.ID, 'submit') submit_button.click() # 等待搜索结果加载完成(这里使用显式等待作为示例) # 假设搜索结果页面有一个特定的元素,我们等待它出现 wait = WebDriverWait(driver, 10) # 等待最多10秒 element = wait.until(EC.presence_of_element_located((By.ID, 'results'))) # 执行其他操作... finally: # 关闭浏览器 driver.quit() </code></pre><h1 class="pgc-h-arrow-right" data-track="16">4. requests</h1><p style="text-align: left;" data-track="17"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">不用多说,requests 是 Python 中一个非常流行的第三方库,用于发送各种 HTTP 请求。它简化了 HTTP 请求的发送过程,使得从网页获取数据变得非常简单和直观。</span></span></p><p style="text-align: left;" data-track="18"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">requests 库提供了丰富的功能和灵活性,支持多种请求类型(如 GET、POST、PUT、DELETE 等),可以发送带有参数、头信息、文件等的请求,并且能够处理复杂的响应内容(如 JSON、XML 等)。</span></span></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import requests # 目标URL url = 'https://httpbin.org/get' # 发送GET请求 response = requests.get(url) # 检查请求是否成功 if response.status_code == 200: # 打印响应内容 print(response.text) else: # 打印错误信息 print(f'请求失败,状态码:{response.status_code}') </code></pre><h1 class="pgc-h-arrow-right" data-track="20">5. urllib3</h1><p style="text-align: left;" data-track="21"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">urllib3 是 Python内置网页请求库,类似于 Python 中的requests库,主要用于发送HTTP请求和处理HTTP响应。它建立在Python标准库的urllib模块之上,但提供了更高级别、更健壮的API。</span></span></p><p style="text-align: left;" data-track="22"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">urllib3可以用于处理简单身份验证、cookie 和代理等复杂任务。</span></span></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import urllib3 # 创建一个HTTP连接池 http = urllib3.PoolManager() # 目标URL url = 'https://httpbin.org/get' # 使用连接池发送GET请求 response = http.request('GET', url) # 检查响应状态码 if response.status == 200: # 打印响应内容(注意:urllib3默认返回的是bytes类型,这里我们将其解码为str) print(response.data.decode('utf-8')) else: # 如果响应状态码不是200,则打印错误信息 print(f'请求失败,状态码:{response.status}') # 注意:urllib3没有直接的方法来处理JSON响应,但你可以使用json模块来解析 # 如果响应内容是JSON,你可以这样做: # import json # json_response = json.loads(response.data.decode('utf-8')) # print(json_response) </code></pre><h1 class="pgc-h-arrow-right" data-track="24">6. lxml</h1><p style="text-align: left;" data-track="25"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">lxml是一个功能强大且高效的Python库,主要用于处理XML和HTML文档。它提供了丰富的API,使得开发者可以轻松地读取、解析、创建和修改XML和HTML文档。</span></span></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>from lxml import etree # 假设我们有一段HTML或XML内容,这里以HTML为例 html_content = """ <html> <head> <title>示例页面

欢迎来到我的网站

这是一个使用lxml解析的示例页面。

  • 项目1
  • 项目2
""" # 使用lxml的etree模块来解析HTML或XML字符串 # 注意:对于HTML内容,我们使用HTMLParser解析器 parser = etree.HTMLParser() tree = etree.fromstring(html_content, parser=parser) # 查找并打印标签的文本 title = tree.find('.//title').text print("页面标题:", title) # 查找并打印class为"description"的<p>标签的文本 description = tree.find('.//p[@class="description"]').text print("页面描述:", description) # 查找所有的<li>标签,并打印它们的文本 for li in tree.findall('.//li'): print("列表项:", li.text) # 注意:lxml也支持XPath表达式来查找元素,这里只是简单展示了find和findall的用法 # XPath提供了更强大的查询能力 </code></pre><h1 class="pgc-h-arrow-right" data-track="27">其他爬虫工具</h1><p style="text-align: left;" data-track="28"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">除了Python库之外,还有其他爬虫工具可以使用。</span></span></p><h1 class="pgc-h-arrow-right" data-track="29">八爪鱼爬虫</h1><p style="text-align: left;" data-track="30"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">八爪鱼爬虫是一款功能强大的桌面端爬虫软件,主打可视化操作,即使是没有任何编程基础的用户也能轻松上手。</span></span></p><p style="text-align: left;" data-track="31"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">官网:<a class="pgc-link" data-content="mp" data-source="outerLink" href="https://affiliate.bazhuayu.com/hEvPKU" rel="noopener noreferrer noopener noreferrer" target="_blank">1.软件分享<i class="syl-emoji" style="background-image:url(https://lf6-cdn2-tos.bytegoofy.com/toutiao/tt_tps/static/images/ttemoji_v2/emoji_18_ye@3x.png)"></i>八爪鱼,爬取了几百条网站上的公开数据,不用学代码真的很方便。<i class="syl-emoji" style="background-image:url(https://lf6-cdn2-tos.bytegoofy.com/toutiao/tt_tps/static/images/ttemoji_v2/emoji_41_cool@3x.png)"></i>2.发现了一个很棒的软件,?不用学python也可以爬数据!用它爬了n多数据。3.微博、电商、各大新闻平台的数据,很多可以用模版一键爬取数据,非常方便!4.做科研项目要采集很多数据,<i class="syl-emoji" style="background-image:url(https://lf6-cdn2-tos.bytegoofy.com/toutiao/tt_tps/static/images/ttemoji_v2/emoji_18_ye@3x.png)"></i>科研人的救命神器,推荐!5.实时获取楼市动态,用八爪鱼收集网上关于楼盘的用户评价,不用学代码直接爬了很多数据6.用八爪鱼实时爬取电商数据,追踪竞争对手价格,商品信息一手掌握<i class="syl-emoji" style="background-image:url(https://lf6-cdn2-tos.bytegoofy.com/toutiao/tt_tps/static/images/ttemoji_v2/emoji_41_cool@3x.png)"></i>7.用八爪鱼自动收集全网最新新闻,迅速获取热点资讯,超方便?</a></span></span></p><p style="text-align: left;" data-track="32"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">八爪鱼支持多种数据类型采集,包括文本、图片、表格等,并提供强大的自定义功能,能够满足不同用户需求。此外,八爪鱼爬虫支持将采集到的数据导出为多种格式,方便后续分析处理。</span></span></p><h1 class="pgc-h-arrow-right" data-track="33">亮数据爬虫</h1><p style="text-align: left;" data-track="34"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">亮数据平台提供了强大的数据采集工具,比如Web Scraper IDE、亮数据浏览器、SERP API等,能够自动化地从网站上抓取所需数据,无需分析目标平台的接口,直接使用亮数据提供的方案即可安全稳定地获取数据。</span></span></p><p style="text-align: left;" data-track="35"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">网站:<a class="pgc-link" data-content="mp" data-source="outerLink" href="https://get.brightdata.com/weijun" rel="noopener noreferrer noopener noreferrer" target="_blank">「链接」</a></span></span></p><p style="text-align: left;" data-track="36"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">亮数据浏览器支持对多个网页进行批量数据抓取,适用于需要JavaScript渲染的页面或需要进行网页交互的场景。</span></span></p><h1 class="pgc-h-arrow-right" data-track="37">Web Scraper</h1><p style="text-align: left;" data-track="38"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">Web Scraper是一款轻便易用的浏览器扩展插件,用户无需安装额外的软件,即可在Chrome浏览器中进行爬虫。插件支持多种数据类型采集,并可将采集到的数据导出为多种格式。</span></span></p><p style="text-align: left;" data-track="39"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">无论是Python库还是爬虫软件,都能实现数据采集任务,可以选择适合自己的。当然记得在使用这些工具时,一定要遵守相关网站的爬虫政策和法律法规。</span></span></p></div> <div class="clearfix mb10"> <div class="share fr"> <div class="social-share mb20 ta-c" data-initialized="true"> <a href="#" class="social-share-icon iconfont icon-weibo"></a> <a href="#" class="social-share-icon iconfont icon-qq"></a> <a href="#" class="social-share-icon iconfont icon-wechat"></a> <a href="#" class="social-share-icon iconfont icon-qzone"></a> </div> <script src="http://www.myzbx.com/zb_users/theme/tx_hao/script/social-share.min.js"></script> </div> <div class="info-tag"> <a href="http://www.myzbx.com/tags-155.html" title="查看更多CSS 图片库内容" rel="tag" target="_blank">CSS 图片库</a> </div> </div> <div class="info-next"> <ul class="row"> <li class="col-12 col-m-24 mb10">上一篇:<a href="http://www.myzbx.com/post/2576.html" title="2023 年最受前端欢迎的 10 大 CSS-in-JS 库!">2023 年最受前端欢迎的 10 大 CSS-in-JS 库!</a></li> <li class="col-12 col-m-24 ta-r mb10">下一篇:<a href="http://www.myzbx.com/post/2578.html" title="分享设计师私藏多年的28个图片素材网站">分享设计师私藏多年的28个图片素材网站</a></li> </ul> </div> </div> <h2 class="tx-title">相关推荐</h2> <div class="home-news"> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3504.html" title="以文本的方式绘制简单的SVG流程图——flowchart.js" class="f-black" target="_blank">以文本的方式绘制简单的SVG流程图——flowchart.js</a></dt> <dd class="news-txt"> <p class="f-gray f-13">介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3503.html" title="全国首套构网型SVG在木垒投运" class="f-black" target="_blank">全国首套构网型SVG在木垒投运</a></dt> <dd class="news-txt"> <p class="f-gray f-13">中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3502.html" title="Popmotion – 小巧,灵活的 JS 运动引擎" class="f-black" target="_blank">Popmotion – 小巧,灵活的 JS 运动引擎</a></dt> <dd class="news-txt"> <p class="f-gray f-13">Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3501.html" title="零基础教你学前端——43、初识SVG" class="f-black" target="_blank">零基础教你学前端——43、初识SVG</a></dt> <dd class="news-txt"> <p class="f-gray f-13">解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3500.html" title="2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF" class="f-black" target="_blank">2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF</a></dt> <dd class="news-txt"> <p class="f-gray f-13">2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3499.html" title="vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!" class="f-black" target="_blank">vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!</a></dt> <dd class="news-txt"> <p class="f-gray f-13">前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3498.html" title="一篇文章带你了解SVG 蒙版(Mask)" class="f-black" target="_blank">一篇文章带你了解SVG 蒙版(Mask)</a></dt> <dd class="news-txt"> <p class="f-gray f-13">SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3497.html" title="SVG实现的流程图绘制" class="f-black" target="_blank">SVG实现的流程图绘制</a></dt> <dd class="news-txt"> <p class="f-gray f-13">一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3496.html" title="解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享" class="f-black" target="_blank">解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享</a></dt> <dd class="news-txt"> <p class="f-gray f-13">前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3495.html" title="交互设计师做好动画后,提交给开发的文档有哪些?" class="f-black" target="_blank">交互设计师做好动画后,提交给开发的文档有哪些?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3494.html" title="Motion for Vue:为Vue量身定制的强大动画库" class="f-black" target="_blank">Motion for Vue:为Vue量身定制的强大动画库</a></dt> <dd class="news-txt"> <p class="f-gray f-13">在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3493.html" title="Web开发人员的福音!8个实用的SVG工具" class="f-black" target="_blank">Web开发人员的福音!8个实用的SVG工具</a></dt> <dd class="news-txt"> <p class="f-gray f-13">SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3492.html" title="一键画波浪线、一键多图片调色?这3个网站好玩到停不下来" class="f-black" target="_blank">一键画波浪线、一键多图片调色?这3个网站好玩到停不下来</a></dt> <dd class="news-txt"> <p class="f-gray f-13">作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3491.html" title="vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!" class="f-black" target="_blank">vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!</a></dt> <dd class="news-txt"> <p class="f-gray f-13">Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3490.html" title="DrawSVG – SVG 路径动画 jQuery 插件" class="f-black" target="_blank">DrawSVG – SVG 路径动画 jQuery 插件</a></dt> <dd class="news-txt"> <p class="f-gray f-13">jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...</p> </dd> </dl> </div> </div> <div class="side-box col-6 col-m-24 col2-"> <dl class="side-hot"> <dt>一周热门</dt> <dd> <ul> <li> <a href="http://www.myzbx.com/post/3065.html" title="使用VSCode模板提高Vue开发效率(vscode开发vue3)" target="_blank"> <h2 class="f-15">使用VSCode模板提高Vue开发效率(vscode开发vue3)</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3070.html" title="吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】" target="_blank"> <h2 class="f-15">吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3066.html" title="这么牛逼的cursor功能,赶紧用起来" target="_blank"> <h2 class="f-15">这么牛逼的cursor功能,赶紧用起来</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3073.html" title="用上Vue3,你真的变了吗?(vue3 key)" target="_blank"> <h2 class="f-15">用上Vue3,你真的变了吗?(vue3 key)</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3064.html" title="说下你的vue项目的目录结构,该怎么划分?" target="_blank"> <h2 class="f-15">说下你的vue项目的目录结构,该怎么划分?</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3074.html" title="8.7k star,一款超炫酷的动态可视化大屏项目" target="_blank"> <h2 class="f-15">8.7k star,一款超炫酷的动态可视化大屏项目</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3075.html" title="移动前端重构实战系列:5-7章(前端移动端主要技术有哪些)" target="_blank"> <h2 class="f-15">移动前端重构实战系列:5-7章(前端移动端主要技术有哪些)</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/971.html" title="20个免费音乐音效下载网站,无版权素材商业影片也可用" target="_blank"> <h2 class="f-15">20个免费音乐音效下载网站,无版权素材商业影片也可用</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/2398.html" title="什么是“恒定光圈”,什么是“浮动光圈”?-摄影早自习第331" target="_blank"> <h2 class="f-15">什么是“恒定光圈”,什么是“浮动光圈”?-摄影早自习第331</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/2170.html" title="谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」" target="_blank"> <h2 class="f-15">谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」</h2> </a> </li> </ul> </dd> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><a title="以文本的方式绘制简单的SVG流程图——flowchart.js" href="http://www.myzbx.com/post/3504.html">以文本的方式绘制简单的SVG流程图——flowchart.js</a></li> <li><a title="全国首套构网型SVG在木垒投运" href="http://www.myzbx.com/post/3503.html">全国首套构网型SVG在木垒投运</a></li> <li><a title="Popmotion – 小巧,灵活的 JS 运动引擎" href="http://www.myzbx.com/post/3502.html">Popmotion – 小巧,灵活的 JS 运动引擎</a></li> <li><a title="零基础教你学前端——43、初识SVG" href="http://www.myzbx.com/post/3501.html">零基础教你学前端——43、初识SVG</a></li> <li><a title="2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF" href="http://www.myzbx.com/post/3500.html">2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF</a></li> <li><a title="vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!" href="http://www.myzbx.com/post/3499.html">vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!</a></li> <li><a title="一篇文章带你了解SVG 蒙版(Mask)" href="http://www.myzbx.com/post/3498.html">一篇文章带你了解SVG 蒙版(Mask)</a></li> <li><a title="SVG实现的流程图绘制" href="http://www.myzbx.com/post/3497.html">SVG实现的流程图绘制</a></li> <li><a title="解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享" href="http://www.myzbx.com/post/3496.html">解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享</a></li> <li><a title="交互设计师做好动画后,提交给开发的文档有哪些?" href="http://www.myzbx.com/post/3495.html">交互设计师做好动画后,提交给开发的文档有哪些?</a></li> </ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="HTML 基础教程" href="http://www.myzbx.com/tags-1.html">HTML 基础教程<span class="tag-count"> (29)</span></a></li> <li><a title="HTML 简介" href="http://www.myzbx.com/tags-3.html">HTML 简介<span class="tag-count"> (30)</span></a></li> <li><a title="HTML 响应式设计" href="http://www.myzbx.com/tags-28.html">HTML 响应式设计<span class="tag-count"> (31)</span></a></li> <li><a title="HTML URL 编码" href="http://www.myzbx.com/tags-39.html">HTML URL 编码<span class="tag-count"> (32)</span></a></li> <li><a title="HTML Web 服务器" href="http://www.myzbx.com/tags-40.html">HTML Web 服务器<span class="tag-count"> (31)</span></a></li> <li><a title="HTML 表单属性" href="http://www.myzbx.com/tags-48.html">HTML 表单属性<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 音频" href="http://www.myzbx.com/tags-59.html">HTML 音频<span class="tag-count"> (31)</span></a></li> <li><a title="HTML5 支持" href="http://www.myzbx.com/tags-63.html">HTML5 支持<span class="tag-count"> (33)</span></a></li> <li><a title="HTML API" href="http://www.myzbx.com/tags-66.html">HTML API<span class="tag-count"> (36)</span></a></li> <li><a title="HTML 总结" href="http://www.myzbx.com/tags-76.html">HTML 总结<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 全局属性" href="http://www.myzbx.com/tags-81.html">HTML 全局属性<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 事件" href="http://www.myzbx.com/tags-82.html">HTML 事件<span class="tag-count"> (31)</span></a></li> <li><a title="HTML 画布" href="http://www.myzbx.com/tags-83.html">HTML 画布<span class="tag-count"> (32)</span></a></li> <li><a title="HTTP 方法" href="http://www.myzbx.com/tags-88.html">HTTP 方法<span class="tag-count"> (30)</span></a></li> <li><a title="键盘快捷键" href="http://www.myzbx.com/tags-89.html">键盘快捷键<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 语法" href="http://www.myzbx.com/tags-93.html">CSS 语法<span class="tag-count"> (35)</span></a></li> <li><a title="CSS 选择器" href="http://www.myzbx.com/tags-94.html">CSS 选择器<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 轮廓" href="http://www.myzbx.com/tags-117.html">CSS 轮廓<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 轮廓宽度" href="http://www.myzbx.com/tags-118.html">CSS 轮廓宽度<span class="tag-count"> (31)</span></a></li> <li><a title="CSS 谷歌字体" href="http://www.myzbx.com/tags-131.html">CSS 谷歌字体<span class="tag-count"> (33)</span></a></li> <li><a title="CSS 链接" href="http://www.myzbx.com/tags-134.html">CSS 链接<span class="tag-count"> (31)</span></a></li> <li><a title="CSS 中级教程" href="http://www.myzbx.com/tags-137.html">CSS 中级教程<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 定位" href="http://www.myzbx.com/tags-140.html">CSS 定位<span class="tag-count"> (31)</span></a></li> <li><a title="CSS 图片库" href="http://www.myzbx.com/tags-155.html">CSS 图片库<span class="tag-count"> (32)</span></a></li> <li><a title="CSS 图像精灵" href="http://www.myzbx.com/tags-156.html">CSS 图像精灵<span class="tag-count"> (31)</span></a></li> </ul> </dd> </dl> </div> </div> </div> </div> <div class="footer"> <div class="wide ta-c f-12"> </div> </div> <div class="fixed-box "> <ul> <li class="pchide wapflex"><a href="http://www.myzbx.com/"><i class="fa fa-home"></i> 首页</a></li> <li><a href="http://www.myzbx.com/shoulu.html" title="收录申请" target="_blank"><i class="fa fa-chain-broken mr5"></i>收录</a></li> <li><span class="gotop"><i class="fa fa-caret-up mr5"></i> 顶部</span></li> </ul> </div> <script src="http://www.myzbx.com/zb_users/theme/tx_hao/script/txcstx.min.js?v=2024-12-04"></script> </body> </html><!--159.16 ms , 13 queries , 3540kb memory , 0 error-->