EXPLORE · 循迹而来

HTML

FOLLOW YOUR CURIOSITY

把同一个话题,读得更深。

这个话题下有 33 篇手记。

实现平滑滚动的返回顶部按钮

1709 阅读

本文介绍了在网页中实现平滑滚动的“返回顶部”按钮的完整步骤。首先在 HTML 中使用 `<button>` 并加入 SVG 图标、`aria-label` 与 `tabindex` 提升可访问性;随后通过 CSS 将按钮固定在右下角、设置圆形外观、透明度过渡、悬停提示和图标淡出效果;最后利用 jQuery 在按钮点击时调用 `$('html, body').animate({scrollTop:0},'slow')` 实现平滑返回顶部。整体实现兼顾视觉交互和无障碍需求,提升长页面的用户体验。

构建可定制的表情选择器组件

1664 阅读

本文示例了如何使用 HTML、CSS 与 JavaScript 构建一个可高度定制的表情选择器组件。先搭建包含触发按钮、选择面板和文本框的基本结构;随后通过 CSS 为按钮和面板添加尺寸、圆角、鼠标指针等样式,实现美观且响应式的界面;核心在于 JavaScript:在页面加载时动态生成 Emoji 按钮列表,点击按钮即可将对应表情插入目标文本域,并阻止事件冒泡;点击触发按钮切换面板显示,点击页面其他位置自动隐藏。整体实现简洁、易扩展,适用于聊天、评论等场景,提供良好用户体验。

HTML集成优雅的实时输入清除功能

1367 阅读

本文介绍了在网页表单中实现实时输入清除的完整方案。通过在输入框右侧嵌入一个隐藏的“×”图标(HTML + <span>),利用 CSS 将图标定位于输入框内部,并通过 JavaScript 监听 input、focus、blur 等事件,在有内容时显示图标、点击后清空文本并隐藏图标。实现步骤简洁、代码可复用,能够提升表单的交互便利性和整体用户体验。

HTML获取SpringBoot从model传的值

1385 阅读

本文说明了在 Spring Boot 中如何通过 Controller 的 Model 向前端页面传递数据,并在 HTML 模板中使用 Thymeleaf 语法 [[${...}]] 获取并显示这些值。文章给出典型的 Controller 代码示例(使用 model.addAttribute 将数据放入模型),以及对应的 HTML 写法,演示了渲染后的效果图,帮助读者快速掌握后端数据在前端页面的读取与展示方法。

HTML实现复制当前链接到剪切板

1232 阅读

文章演示了在HTML页面中通过按钮实现复制当前页面链接到剪切板的完整步骤:使用<a>标签获取链接,点击按钮时动态创建隐藏的<input>,将链接写入并选中,调用 document.execCommand("Copy") 执行复制,依据返回值或异常弹出成功、失败或错误提示,从而实现“一键分享”。

HTML页面嵌入视频的方案

1340 阅读

文章介绍了在HTML页面中使用 `<iframe>` 标签嵌入视频的基本方法,示例代码演示了如何通过 `src` 指定YouTube视频地址、设置宽高、允许全屏及相关权限。若需禁止自动播放,可在 `allow` 属性中加入 `autoplay=false`,并可通过 `style` 调整布局。整个实现简洁且可直接复制使用。

十行代码让评论区支持斗图

1325 阅读

文章介绍了在评论区实现“斗图”的两种方案:上传图片或直接输入图片链接。由于上传会占用服务器存储且对非表情包用户不便,作者选用第二种方式,即在评论框输入以 http/https 开头的图片地址,提交后通过 JavaScript 检测并自动包装成 `<img>` 标签显示。文中提供了相应的 HTML textarea 示例和核心 JS 代码,并演示了使用方法,推荐使用表情包网站复制图片地址直接粘贴即可。

博客的评论与回复功能的实现

1347 阅读

文章详述了在个人博客中实现完整评论与回复功能的全过程。首先设计评论表结构,加入blogId、parentId等字段以实现关联和层级关系;随后在页面构建评论表单,利用QQ接口自动获取昵称、头像和邮箱。前端通过jQuery捕获提交和回复操作,构造请求数据并使用Ajax发送至后端。后端Controller接收参数并保存评论,随后根据parentId为‑1的根评论遍历并组织子评论,实现三级嵌套显示。关键点在于新评论置顶、子评论紧随父评论显示,以及通过parentId实现评论的层级结构。全文提供了实体类、HTML、JS及后端代码示例,帮助读者快速搭建可交互的博客评论系统。

博客导流到微信公众号

1289 阅读

文章介绍了在个人博客中通过 OpenWrite 的“博客导流公众号”功能,将首次访问的读者引导关注微信公众号并获取验证码,从而为公众号带来流量。实现步骤包括:在 OpenWrite 平台注册登录后,进入“增长工具”→“博客导流公众号”,填写博客域名和长期有效的二维码图片链接;在公众号后台设置触发关键字(如“博客”)用于发送验证码;在博客页面嵌入指定的 JavaScript 代码并在文章外层添加 id 为 “container” 的 div。用户仅需一次操作,体验影响不大,却能有效提升公众号关注度。