- 博客(345)
- 收藏
- 关注
RSS订阅原创 [Web自动化] JS基础语法与数据类型
本文介绍了JavaScript基础语法与数据类型，包括变量声明(var/let/const)、基本数据类型(Number,String,Boolean等)和引用数据类型(Object,Array)。详细讲解了操作符、条件语句(if/switch)、循环语句(for/while)的使用方法，并概述了ES6+新特性如箭头函数、模板字符串、解构赋值、类等现代语法特性。内容涵盖JavaScript编程基础核心概念，适合初学者快速掌握语言基本要素。
2025-12-26 19:30:00
417
原创 [Web自动化] JavaScript简介与环境搭建
JavaScript是Web开发的核心语言，最初由Brendan Eich设计用于增强网页交互性。它不仅用于客户端脚本，还扩展到服务器端(Node.js)和移动应用开发(React Native)。浏览器通过内置引擎(如V8)执行JavaScript，并提供DOM操作和事件处理能力。推荐使用Chrome DevTools、VS Code等工具进行开发，Node.js环境可通过npm管理包依赖。JavaScript与HTML、CSS共同构成了现代Web开发的三大基石。
2025-12-26 15:02:39
159
原创 [Web自动化] CSS预处理器与模块化
例子：假设你正在开发一个按钮组件，你可以创建一个包含按钮HTML结构、CSS样式和JavaScript交互的单独文件或模块。这样，每当需要在项目中添加按钮时，你只需引入这个组件即可，而无需重写相同的HTML、CSS和JavaScript代码。CSS预处理器是一种扩展了CSS功能的工具，它们允许你使用变量、嵌套规则、混合（mixins）、继承等特性来编写CSS，使样式表更加易于维护和扩展。：通常指的是将CSS分割成独立的模块或文件，每个模块负责不同的功能或组件的样式。：减少了重复代码，并使得结构更加清晰。
2025-12-24 17:00:00
117
原创 [Web自动化] Flexbox布局
Flexbox是CSS3提供的弹性布局模式，通过设置容器和项目的属性实现高效布局。核心概念包括Flex容器（display:flex）、主轴/交叉轴方向控制。主要属性分为容器属性（如flex-direction、justify-content）和项目属性（如flex-grow、align-self）。示例展示了如何创建Flex容器并控制项目间距、对齐方式，以及通过flex-grow/shrink实现项目伸缩。Flexbox简化了响应式布局的实现，能适应不同屏幕尺寸需求。
2025-12-24 09:20:53
204
原创 [Web自动化] CSS布局与定位
本文介绍了CSS布局与定位的核心概念。在布局部分，重点讲解了盒子模型的结构（内容、内边距、边框、外边距）、浮动元素的特性及其清除方法（如使用clearfix）。定位部分详细解析了五种定位方式：静态（默认）、相对（保留原空间）、绝对（脱离文档流）、固定（相对视口）和粘性定位（滚动切换），并阐述了堆叠上下文和z-index属性的作用机制。通过示例代码展示了不同定位方式的应用场景，帮助开发者掌握元素位置控制的技巧。
2025-12-23 20:30:00
674
原创 [Web自动化] CSS选择器与样式规则
本文介绍了CSS选择器与样式规则的核心概念。详细讲解了属性选择器、伪类选择器、伪元素选择器和组合选择器等进阶选择器的使用方法，并通过示例演示如何为不同元素状态和关系设置样式。同时阐述了样式规则的组成结构，包括声明、声明块以及选择器优先级的判定规则。最后通过一个导航栏实例，展示了如何综合运用各种选择器和样式规则来实现页面美化效果。
2025-12-23 16:15:29
431
原创 [Web自动化] CSS基础概念和介绍
CSS（层叠样式表）是控制网页样式的语言，能将网页内容与表现分离。它具有样式丰富、层叠性和继承性等特点，可通过内嵌式、外联式和行内式三种方式引入HTML文档。CSS基础选择器包括标签选择器、类选择器、ID选择器和通配符选择器，分别用于选择HTML元素、类属性元素、ID属性元素和所有元素。这些特性使CSS成为网页美化和布局的核心技术。
2025-12-15 18:15:00
322
原创 [Web自动化] HTML5常见新增标签
HTML5新增了多种标签以增强网页结构和功能。结构性标签包括<article>、<header>、<nav>、<section>和<footer>，用于定义内容区块、页眉、导航等。多媒体标签如<video>和<audio>支持嵌入音视频，并支持controls、autoplay等属性；<source>标签可提供多格式媒体源。表单方面新增了<datalist>配合输入框提供选项列表，以及多种输入类型如e
2025-12-15 13:58:14
895
原创 [Web自动化] HTML表单标签
HTML表单是网页交互的重要元素，用于收集用户输入数据。表单通过<form>标签定义，包含action、method、enctype等属性控制数据提交方式。常用输入控件包括： <input>标签：支持文本(text)、密码(password)、单选(radio)、多选(checkbox)、文件(file)等多种输入类型 按钮类型：提交(submit)、重置(reset)和普通按钮(button) <select>标签：创建下拉菜单选项 表单还支持数据验证、自动填充等功能，
2025-12-14 12:14:50
1234
原创 [Web自动化] HTML表格标签
本文介绍了HTML表格标签的基本用法和属性。主要包含<table>、<tr>、<td>等核心标签，以及<caption>、<th>等辅助标签的使用方法。重点讲解了合并单元格的colspan和rowspan属性，以及表格分组标签<thead>、<tbody>、<tfoot>。通过课程表制作实例展示了表格的实际应用，最后对比了表格布局和div布局的优缺点：表格布局简单但不够灵活，div布局更符合标准且利于SEO。文章
2025-12-14 11:38:34
694
原创 [Web自动化] HTML列表标签
本文介绍了HTML中的三种列表标签：有序列表（ol）、无序列表（ul）和自定义列表（dl）。无序列表使用项目符号标记，有序列表使用数字标记，每个列表项都用<li>标签定义。两种列表可通过type属性设置不同样式，如圆形、方块或字母编号。自定义列表由<dl>、<dt>（定义术语）和<dd>（定义描述）组成，适合展示名词解释类内容。通过代码示例展示了各类列表的具体用法和显示效果。
2025-12-10 17:30:00
367
原创 [Web自动化] HTML常用标签
本文介绍了HTML常用标签及其属性。h标签定义标题（h1-h6），p标签定义段落，img标签插入图片（含src/alt等属性），a标签创建超链接（含href/target等属性）。此外还介绍了换行标签br、水平线hr、块级元素div、内联元素span的区别，以及script标签的用法（推荐放在body底部）。文章通过代码示例和效果图直观展示各标签的使用方法，帮助读者快速掌握HTML基础标签的应用场景和特性。
2025-12-10 09:41:02
1103
原创 [Web自动化] HTML元素的定位(Xpath)
摘要：XPath是一种用于定位XML/HTML文档节点的语言，通过路径表达式实现元素查找。它具有灵活性、简洁性和跨平台性等特点，支持绝对路径和相对路径定位，可结合属性、文本内容等进行精确筛选。XPath广泛应用于Web自动化测试、数据抓取和XML处理等场景，提供丰富的函数和运算符支持复杂查询。本文详细介绍了XPath的基本语法、工作原理和应用实例，包括条件表达式、通配符使用等核心功能，帮助开发者高效处理文档节点定位问题。（149字）
2025-12-09 18:00:00
941
原创 [Web自动化] HTML元素及DOM元素
本文介绍了HTML元素与DOM元素的基本概念及其特性。HTML元素指从开始标签到结束标签的所有代码，如<p>I Love You</p>。DOM元素则是文档对象模型中的节点对象，可通过JavaScript访问和操作，具有层次结构。重点讲解了DOM元素的属性（innerHTML、outerHTML）及其区别，以及元素状态（active、hover、focus等）的CSS伪类应用。此外还介绍了HTML注释的语法<!--注释-->和空格字符 的使用方法。这些基
2025-12-09 11:23:29
893
原创 [Web自动化] HTML标签
本文介绍了HTML标签的基本概念和分类。HTML标签分为双标签（如<html></html>）和单标签（如<br />），并详细说明了标签的属性和关系。标签属性包括通用属性（id、class等）和特有属性（如img的src），用于提供额外信息或设置特定行为。标签之间存在并列和嵌套关系，嵌套关系中需注意CSS继承、层叠规则以及JavaScript操作对内外层标签的影响。理解这些基础知识对网页开发至关重要。
2025-12-08 18:00:00
1127
原创 [Web自动化] HTML介绍
本文介绍了HTML的基础知识和HTML5的新特性。HTML作为网页标准标记语言，其基本结构包含文档声明、html、head、body等标签。HTML5作为HTML的最新版本，新增了语义化标签、多媒体支持、Canvas绘图等功能，同时简化了文档声明和编码规范。相比HTML4，HTML5废除了部分表现元素（如font、center）和框架标签（frameset、frame），改用CSS和iframe替代。HTML5还增强了表单交互、离线存储等功能，推动Web向更现代化、语义化的方向发展，成为当前网页开发的重要基
2025-12-08 11:28:18
599
原创 [Web自动化] 开发者工具应用(Application)面板
摘要：Chrome DevTools的Application面板提供Web应用资源管理功能，主要包括：1) Web API调试（LocalStorage持久存储、SessionStorage临时存储、IndexedDB结构化数据存储及Cookies信息存储）；2) Web应用清单(Manifest)配置，通过JSON文件定义应用元数据；3) Service Workers管理，支持离线缓存、推送通知等后台功能调试。该面板支持实时查看/修改存储数据、验证清单配置及监控Service Workers运行状态。（
2025-12-05 21:30:00
467
原创 [Web自动化] 开发者工具内存(Memory)面板
Chrome DevTools的Memory面板是分析网页内存问题的关键工具。它提供实时内存监控、内存泄漏检测和堆快照分析功能。开发者可以通过记录内存分配事件、比较不同时间点的内存快照，识别未释放对象和循环引用等问题。堆快照支持多种分析视图（摘要、比较、包含和支配者视图），帮助定位内存使用异常。典型使用场景包括：记录操作前后的内存变化，创建堆快照分析对象引用关系，找出内存泄漏原因并优化代码。该工具能有效解决内存占用过高和性能瓶颈问题。
2025-12-05 17:07:08
660
原创 [Web自动化] 开发者工具性能(Performance)面板
本文介绍了Chrome开发者工具中Performance面板的使用方法。通过录制页面操作生成性能数据，可以分析FPS、CPU占用、网络请求和JS执行情况等指标。重点讲解了三个功能区域：总览图显示关键指标趋势，区块图提供详细事件数据，统计区汇总时间占用报表。最后介绍了火焰图的使用，通过分析函数调用栈的宽度和深度定位性能瓶颈，并提出优化建议，如减少计算量、优化算法或拆分函数。这些工具能有效帮助开发者识别和解决网页性能问题。
2025-12-03 18:45:00
1356
原创 [Web自动化] 开发者工具网络(Network)面板
网络面板是开发者工具中用于监控和分析网页请求的重要模块。它提供了请求列表、详情视图和时间线等功能，可查看请求类型、状态码、响应时间等详细信息。通过工具栏可控制录制、筛选请求类型、模拟网络条件和禁用缓存。请求详情包含标头、预览、响应、启动器、时间和Cookie六大块内容，帮助开发者全面分析请求过程。性能优化方面，可通过识别加载时间长、请求过多等问题，采取压缩资源、合并文件、设置缓存等策略提升页面性能。网络面板是前端开发和性能调优的必备工具。
2025-12-03 09:52:15
1612
原创 [Web自动化] 开发者工具源代码(Sources)面板
断点调试是前端开发中常用的调试手段之一。在Sources面板中，你可以通过点击代码行号左侧的边缘来设置断点。当代码执行到断点时，浏览器会暂停执行，此时你可以检查变量值、调用栈等信息，逐步执行代码以观察程序行为。
2025-12-02 19:00:00
754
原创 [Web自动化] 开发者工具控制台(Console)面板
Console面板是开发者工具中用于输出日志和调试信息的核心面板。通过console.log()函数，你可以在控制台输出各种类型的信息，包括`字符串`、`数字`、`对象`、`数组`等。这对于调试和跟踪代码的执行流程非常有帮助。
2025-12-02 14:52:05
276
原创 [Web自动化] 开发者工具元素(Elements)面板
本文介绍了浏览器开发者工具中的Elements面板功能，主要包括：1）DOM结构查看与修改，可通过元素拾取、右键菜单操作元素（复制HTML/选择器/路径/样式/XPath等）和实时编辑HTML属性；2）CSS样式调试，支持实时修改样式、理解层叠规则，并能跳转至源代码；3）计算样式和布局视图，显示元素的盒模型数据和页面布局方式；4）事件监听器功能，解释了网页事件机制和onclick与click事件的区别。所有修改仅在客户端生效，刷新页面后会还原。该面板是前端开发中调试页面结构和样式的重要工具。
2025-12-01 10:13:50
1189
原创 [Web自动化] 开发者工具基础认知与界面熟悉
浏览器开发者工具（DevTools）是一套集成在现代浏览器中的调试工具集，主要用于网页开发调试、性能优化和网络分析。主要功能包括实时修改HTML/CSS/JavaScript代码、分析网络请求、检测安全漏洞等。开发者可通过快捷键（如F12）快速打开，界面包含多个功能面板：Elements面板用于DOM编辑、Console面板执行JS代码、Sources面板调试源代码、Network面板分析请求、Performance面板优化性能等。此外还提供内存监控、应用数据管理和Lighthouse自动化评估工具，帮助开
2025-12-01 09:38:38
729
原创 [Web自动化] AJAX网页开发技术
摘要： AJAX（异步JavaScript和XML）是一种通过XMLHttpRequest实现异步通信的网页开发技术，能在不刷新页面的情况下与服务器交换数据并局部更新内容。其核心流程包括创建请求对象、选择传输方式、建立连接及监听响应状态。典型应用包括表单验证、实时搜索、购物车更新及社交媒体动态加载等。优势在于提升响应速度与用户体验，但需注意开发复杂度及安全问题。结合轮询或WebSocket技术可进一步优化实时性，是构建动态交互页面的关键技术之一。（150字）
2025-11-28 17:15:00
333
原创 [Web自动化] Session和Token
本文介绍了Web开发中两种常见的用户状态管理机制：Session和Token。Session是服务器端维护用户会话状态的机制，通过Session ID跟踪用户，数据存储在服务器上，需注意会话超时和安全性问题。Token则是用于用户认证和授权的字符串，常见类型包括JWT和OAuth Token，通常保存在前端存储中并通过HTTPS传输，需关注过期时间和存储安全性。两种机制各有特点，Session侧重服务器端会话管理，Token更适用于前后端分离的认证场景，开发者应根据实际需求选择合适方案并重视相关安全措施。
2025-11-28 11:03:08
446
原创 [Web自动化] Cookie和HTML5 Web Storage
本文介绍了两种客户端数据存储技术：Cookie和HTML5 Web Storage。Cookie是小型文本数据（≤4KB），用于身份验证、个性化设置等，会随HTTP请求发送给服务器，存在隐私风险。HTML5 Web Storage包括localStorage（永久存储）和sessionStorage（会话存储），提供更大容量（约5MB），数据不会随请求发送，安全性更高。两者在存储大小、有效期、存储位置、安全性等方面存在显著差异：Cookie适合少量数据且需服务器交互的场景，而Web Storage更适合大量
2025-11-26 17:00:00
914
原创 [Web自动化] HTTP响应
HTTP响应是服务器对客户端请求的回复，包含四个主要部分：状态行、响应头、空行和响应体。状态行包含协议版本、状态码（如200/404）和状态描述。响应头提供元信息，如内容类型、长度和缓存控制等。响应体是返回的实际数据，如HTML、JSON或媒体文件。响应头与响应体密切相关，头部字段指导客户端如何处理响应内容。HTTP响应机制通过状态码和头部字段实现高效通信，使客户端能正确解析服务器返回的资源或错误信息。
2025-11-26 10:13:36
1842
原创 [Web自动化] HTTP请求
HTTP请求是客户端与服务器通信的基础，主要由请求行、请求头和请求正文三部分组成。请求行包含方法（GET/POST等）、URI和协议版本；请求头传递客户端环境信息；请求正文用于传输数据（如表单内容）。重定向机制（301/302）则用于资源位置变更时的自动跳转。理解这些组件对Web开发至关重要。
2025-11-25 17:00:00
859
原创 [Web自动化] URL结构与解析
URL（统一资源定位符）是互联网资源的唯一地址，包含协议、主机名、端口、路径、查询字符串和片段ID等部分。查询字符串（?后）传递额外参数，片段（#后）用于页面定位。URL编码确保非ASCII字符的安全传输，如中文"网页"编码为"%E7%BD%91%E9%A1%B5"。Python中可用urllib.parse进行编解码操作。
2025-11-25 10:45:48
1093
原创 [Web自动化] HTTP/HTTPS协议
HTTP/HTTPS协议是互联网数据交换的基础协议。HTTP协议作为应用层通信协议，规定了Web请求与响应的格式，具有无状态特性。常见状态码包括200(成功)、404(未找到)等。HTTPS在HTTP基础上加入SSL/TLS层实现安全传输，确保数据机密性、完整性和真实性。该协议源于1960年Ted Nelson提出的超文本概念，后经相关组织完善形成标准。
2025-11-24 15:15:00
581
原创 [Web自动化] TCP/IP协议
TCP/IP协议是互联网核心协议簇，采用四层体系结构：数据链路层（ARP、RARP）负责物理传输；网络层（IP、ICMP）处理路由选择；传输层（TCP、UDP）确保可靠传输；应用层（HTTP、FTP等）提供用户接口。该协议起源于1980年，1983年取代NCP成为互联网标准，支持不同硬件和系统的互操作，实现了跨网络的数据可靠传输。各层协议协同工作，形成完整的网络通信体系。
2025-11-24 11:02:37
352
原创 [Python小项目] 扑克玩法：炸金花--数据分析
又到了一年一度令人期待的年更时刻。今年过年，我彻底过了一把牌瘾。平时我打牌打的很少，但一到过年，只要和亲戚朋友聚在一起，我就像变了个人似的，特别喜欢拉人一起打扑克。当然，我们只是随便玩玩，纯粹是为了打发时间。今年玩的项目挺多，也比较杂，包括麻将、牛牛、斗地主和炸金花。今年是我第一次比较系统地玩炸金花，之前虽然有所了解，但今年玩得比较久。当然，第一次玩难免会输，这也算是交了学费吧。炸金花，别称“扎金花”“拖拉机”“赢三张”，通常需要三人及以上参与，起源于安徽省黄山市。
2025-02-09 10:53:11
1987
原创 [计算机效率] 网站推荐：其它类(找台词、表格转换)
`找台词网（http://www.zhaotaici.cn/）`是一个专为电影电视剧爱好者打造的台词搜索引擎网站。它的核心功能是帮助用户快速查找特定电影或电视剧中的台词，并提供详细的上下文信息。
2024-04-25 09:15:16
3875
原创 [计算机效率] 网站推荐：文字转语音
文字转语音功能为视觉障碍者提供了极大的便利。通过语音输出，他们可以更轻松地获取和理解信息，从而在日常生活中更加独立自主。
2024-04-24 09:05:41
3386
2
原创 [计算机效率] 网站推荐：网盘资源类
在数字化时代，网盘资源搜索已成为我们日常生活和工作中不可或缺的一部分。无论是寻找工作资料、学习素材，还是娱乐资源，一个高效、可靠的网盘资源搜索网站都能为我们节省大量时间。今天，我将为大家推荐几个优秀的网盘资源搜索网站，让你的资源搜索之旅更加顺畅。
2024-04-23 09:08:11
5226
原创 [计算机效率] 网站推荐：文字识别类
在信息爆炸的时代，文字识别技术已经成为我们提取和处理信息的重要工具。为了帮助大家更高效地进行文字识别，今天，我为大家推荐一系列优质的文字识别类网站。这些文字识别网站采用了先进的光学字符识别（OCR）技术，能够准确地将图片、扫描件中的文字转化为可编辑的文本格式。无论是纸质文档、照片中的文字，还是屏幕截图、PDF文件，它们都能轻松应对。这些网站的操作界面简洁明了，用户只需上传需要识别的图片或文件，稍等片刻即可获得识别结果。同时，它们还支持多种输出格式，如TXT、Word、Excel等，方便用户根据需求进行后
2024-04-23 09:04:43
2186
原创 [计算机效率] 网站推荐：图片编辑类
在数字化时代，图片编辑已成为我们生活和工作中不可或缺的一部分。为了帮助大家更高效、更专业地进行图片编辑，这里推荐一系列优质的在线图片编辑网站。
2024-04-22 09:39:32
2319
原创 [Python进阶] Pyinstaller打包心得(减少打包空间占用、快捷打包、找不到资源等)
Pyinstaller打包心得(减少打包空间占用、快捷打包、找不到资源等)
2024-04-22 09:35:48
5024
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人