暂无文章发布记录
html meter度量衡标签使用
别让视觉欺骗语义：HTML <meter> 标签的正确打开方式 做后台管理系统或者数据仪表盘时，你是不是习惯一看到“百分比”、“进度”，脑子里就蹦出一个长条状的 div，或者下意识用上了 <progress> 标签？停一下。很多时候我们只是觉得它能显示数值，却忽略了它背后的语义逻辑。 如果你正在展示的是已知范围内的度量值，比如硬盘使用率、投票占比、或温度读数，那么真正的“隐藏神器”其实是 <met...
阅读原文
html details折叠面板实现
告别繁琐 JS，HTML 原生 <details> 标签的折叠面板实战 做网页开发时，常遇到一种高频交互：用户想看更多详情，但又不能跳转页面。比如常见的问题解答区（FAQ）、日志查看器里的错误堆栈，或者是表单里的扩展选项。过去处理这种需求，要么引入重型 UI 库，要么手写十几行 JavaScript 监听点击事件，甚至还要操心一下键盘导航支持。其实很多时候都是“杀鸡用牛刀”，浏览器原生的 <det...
阅读原文
html summary摘要标签搭配
别再手写折叠面板了，HTML 的 summary 标签其实被低估了 在做后台管理系统或者产品文档页面时，你是不是经常遇到这种需求：需要做一个可以展开收起的内容块，类似常见的“常见问题解答”或者“参数详情”。通常的第一反应可能是去 npm 上搜一个 Accordion 组件，或者自己写一套 JavaScript 来控制显示隐藏。 其实，浏览器原生早就提供了一个轻量级的解决方案，就是 <details...
阅读原文
html dialog对话框自定义
告别沉重依赖：原生 HTML dialog 的轻量级定制实战 做前端这些年，弹窗模块几乎是绕不开的坎。以前为了一个交互简单的确认框，引入 Bootstrap 或者第三方的 UI 库，动辄几十 KB 的样式代码，加载速度慢不说，还得担心版本兼容问题。现在浏览器对 <dialog> 元素的支持越来越稳，与其堆砌外部依赖，不如直接用好这个原生标签。但很多人拿到手只会弹出来，关掉按钮都写得生硬，今天聊聊怎...
阅读原文
html figure图形容器语义化
别把语义当摆设：深度解析 HTML figure 的正确打开方式 做前端这几年，见过太多类似的场景：设计师给了张架构图，下面带个小注脚。大家手一快，下意识就用个 <div class="container"> 把 <img> 和 <p> 包起来了。结构简单，样式随便调，好像也没毛病。可你有没有想过，这段结构对屏幕阅读器、搜索引擎来说，到底意味着什么？ 很多项目上线前检查，大家都盯着 JS 报错和 ...
阅读原文
喵喵游记——探访苏州
昨天上海玩的很晚，今天苏州就比较轻松一些。计划去拙政园-狮子林-平江路-西园寺-坐船到七里山塘，回去休息qaq苏州就住在火车站旁，第一次住这么近的酒店，因为明天还要去杭州，也是要在这里坐火车，所...
阅读原文
喵喵游记——初访上海
国庆前夕，趁着春季还没结束，去浙江沪皖玩一圈。首发地肯定就是上海了，因为机票便宜一些哈哈哈哈。计划中要去豫园，徐家汇天主教堂，四行仓库，一大会址等等，但是因为上海交通有些过于麻烦，时间上也来不及...
阅读原文
友情链接
Friends & Partners
