工单管理系统页面核心是确保提交、查询、状态流转在HTML层即具备可操作性与语义合理性：表单须用<form method="POST" action="#">包裹，input需有name，select替代div模拟下拉，button必须type="submit"，textarea加required和maxlength，查询用<details>实现免JS折叠，状态用data-status标记。
工单管理系统页面不是“堆组件”，核心是让提交、查询、状态流转这三件事在 HTML 层就具备可操作性和语义合理性——纯 HTML 能做的，别等 JS 加载完才让用户点不动。
表单结构必须用 <form> 包裹且含 method 和 action
很多面试者直接写一堆 <input> 和 <button>，但没包 <form>，导致回车无法提交、无障碍支持差、语义缺失。哪怕后端还没写，action 也得设成占位值（如 #submit），method 明确为 POST。
-
<form method="POST" action="/api/tickets">是底线，不是可选项 - 每个
<input>必须有name，否则提交时字段不带过去（例如name="subject"） - 下拉选择工单类型、优先级，用
<select name="priority">，别用<div>模拟 - 提交按钮必须是
<button type="submit">，不是type="button"或无type
textarea 要设 required 和 maxlength 防空提交和超长截断
工单描述为空是高频错误，后端校验前，HTML 层就得拦住。但只加 required 不够——用户粘贴万字日志会直接炸掉接口，所以必须双控。
<textarea name="description" required maxlength="2000"></textarea>- 配合
<small>最多 2000 字符</small>做视觉提示，别只靠 placeholder - 注意：Chrome 对
maxlength在中文输入法下可能延迟触发，需 JS 补充监听input事件做实时计数（但 HTML 层先兜底）
进度查询区域用 <details> + <summary> 实现免 JS 折叠
面试常被问“不用 JS 怎么实现展开/收起？”，答案就是原生 <details>。它支持键盘操作（Space 键切换）、语义清晰、兼容性到 Edge 79+，完全满足基础查询页需求。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<details><summary>查看工单 #TK-2024-0876 进度</summary><p>已分配给运维组，处理中…</p></details>- 避免用
<div onclick="toggle()">模拟，那不是“不用 JS”，只是把 JS 写得更丑 - 若需默认展开，加
open属性：<details open> - 注意：Safari 对
<details>的 CSS 自定义有限制，别试图重置summary::marker在旧版 Safari 上的样式
状态标签用 <span> + data-status 便于后续 JS 操作
工单状态（如 “待受理”、“处理中”、“已解决”）不能只靠颜色区分，要保留机器可读的标识。纯 HTML 页面也要为后续增强留好钩子。
<span data-status="processing" class="status-badge">处理中</span>- 避免写成
<span class="status-processing">—— 类名是表现层，data-属性才是数据层 - 如果状态要动态变色，CSS 可写：
[data-status="resolved"] { color: #28a745; }，比写一堆 class 更易维护 - 别在
data-status里塞空格或特殊符号，保持小写字母+短横线，比如waiting-for-user，不是"Waiting For User!"
真正卡人的从来不是“怎么画出这个页面”，而是提交是否可靠、查询是否可访问、状态是否可扩展。HTML 不是草稿，它是整个系统的契约起点。
