HTML怎么创建收藏作品分组_HTML自定义文件夹结构【教程】-html教程-PHP中文网

html无法创建真实收藏分组或文件夹结构，因其仅为标记语言，不具备文件系统操作能力；所谓分组实为借助localstorage等前端技术模拟，需js拦截链接并配合json存取数据，且仅在http(s)环境生效。

html怎么创建收藏作品分组_html自定义文件夹结构【教程】

HTML 本身不能创建真正的收藏分组或文件夹结构

HTML 是标记语言，不是文件系统，它没有能力在用户设备上新建文件夹、保存分组数据或持久化收藏状态。所谓“HTML 创建收藏分组”，实际是前端配合浏览器能力（如 localStorage、indexedDB）或后端接口模拟的交互效果，纯 HTML 文件（.html）双击打开时，连读写本地文件都不被允许。

用 `localStorage` 模拟收藏分组最轻量可行

适合单页静态作品集，不依赖服务器。核心逻辑是：把分组名和作品 ID（或 URL、标题等）存成对象数组，每次增删都重写 localStorage。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

分组结构建议用 { groupName: "UI 设计", items: ["p1.html", "p2.html"] } 这类扁平格式，避免嵌套过深导致序列化/解析出错
必须用 JSON.stringify() 存、JSON.parse() 取，否则存进去的是 [object Object]
注意 localStorage 有容量限制（通常 5–10MB），但更常见的是单条 key 值超长触发 QuotaExceededError，建议每组 item 数控制在 200 条内

示例片段：

const groups = JSON.parse(localStorage.getItem('artGroups') || '[]');<br>groups.push({ groupName: '速写', items: ['sketch-01.html'] });<br>localStorage.setItem('artGroups', JSON.stringify(groups));

点击链接自动归入分组？得靠 JS 拦截 + 自定义属性

HTML 的 @#@#@#@#@#@#@#@#@#@0

绑定点击事件时读取该属性，再调用你的分组添加函数，而不是靠 href 路径解析（路径可能带参数、重定向、大小写不一致）

别用 location.pathname 当作品唯一标识——本地双击打开时是 file:/// 协议，Chrome 会直接拒绝读取 localStorage；部署到 HTTP(S) 服务才生效

真要持久化文件夹结构，必须离开纯 HTML

如果目标是生成可下载的带目录的 ZIP、或在用户电脑里建真实文件夹（如 ./favorites/character/），那 HTML 无能为力。浏览器安全模型禁止网页脚本操作本地文件系统。

可行替代方案只有两个：
— 后端服务（Node.js/Python）接收分组数据，生成 ZIP 并提供下载链接
— 使用桌面应用框架（如 Tauri、Electron），用 HTML 做界面，但底层调用系统 API 写文件
有人用 <input type="file" webkitdirectory> 读取用户选中的整个文件夹，但这只能读，不能写，也不能创建新文件夹
所有“HTML 教程”里号称能“自定义文件夹”的，要么是伪代码，要么实际依赖外部工具打包，正文却没说清边界

真正卡住的地方从来不是怎么写 HTML 标签，而是没分清“页面展示”和“文件系统操作”根本不在一个层面。一旦需要跨出浏览器沙箱，就必须引入其他技术栈，而且得提前想好部署方式和用户运行环境。