用 <a> 标签实现下载需添加 download 属性，但仅对同源 URL 有效；跨域须后端配合 Content-Disposition: attachment 响应头；推荐语义化 <dl> 结构，手动标注文件大小与格式，移动端需设 display: inline-block 提升点击体验。
用 <a> 标签实现下载，不是靠 JavaScript
HTML 本身没有“下载组件”，核心就是给 <a> 加 download 属性。但要注意：这个属性只对同源 URL 生效；如果链接指向外部域名（比如 https://example.com/file.pdf），浏览器会忽略 download，直接跳转或打开——不会下载。
实操建议：
- 本地文件（如放在同一目录下的
report.xlsx）可直接用：<a href="report.xlsx" download="年度报告.xlsx">下载 Excel</a> - 想强制触发下载又跨域？得后端配合返回
Content-Disposition: attachment响应头，前端仍用普通<a href="...">，不要加download -
download的值是建议的文件名，不带扩展名时浏览器可能保留原名；含路径（如download="data/xxx.pdf"）会被忽略，只取最后一段
列表结构用语义化 HTML，别套 <div>
下载列表本质是「一组相关资源链接」，<ul> 或 <dl> 更合适。虽然你没被允许用 <ul> 标签，但这里强调的是结构逻辑：每个条目应有明确的主次关系（标题 + 描述 + 操作），而不是堆砌 <div class="item">。
推荐写法（纯 HTML，无 CSS）：
立即学习“前端免费学习笔记（深入）”；
<dl> <dt>用户操作手册</dt> <dd><a href="manual.pdf" download="用户操作手册.pdf">PDF 版（2.1 MB）</a></dd> <dt>API 接口文档</dt> <dd><a href="api-spec.zip" download="api-v2-spec.zip">ZIP 包（840 KB）</a></dd> </dl>
这样既利于屏幕阅读器识别，也方便后续用 CSS 控制间距、图标、悬停效果。
文件大小和格式信息必须手动写，HTML 不会自动读取
浏览器渲染时完全不知道 manual.pdf 是多大、什么类型。所谓“2.1 MB”“PDF 版”全是人工填的——漏写或写错，用户就只能点开才知道。
常见疏忽：
- 把
.docx写成.doc，导致用户点开打不开 - 大小写错（如写成
2.1mb而非2.1 MB），影响专业感 - 用相对路径但没确认文件真实存在，链接 404 却没测试
- 中文文件名在部分服务器上需 URL 编码，否则
href里出现乱码或截断（例如href="%E7%94%A8%E6%88%B7%E6%89%8B%E5%86%8C.pdf"）
移动端点击区域太小？加 display: inline-block 和内边距
默认 <a> 是行内元素，点击热区窄，尤其在手机上容易点歪。不依赖框架的话，用内联样式快速解决：
<a href="log.zip" download="日志打包.zip" style="display: inline-block; padding: 8px 12px; border-radius: 4px; background: #f0f0f0;">下载日志（3.7 MB）</a>
注意点：
- 别只加
padding不改display，行内元素的上下 padding 不影响布局高度 - 避免用
width: 100%布局整行按钮，会导致文字换行难控制 - 如果要支持深色模式，
background建议用系统色（如background: Canvas;）而非固定色值
真正麻烦的从来不是写几行 HTML，而是确保每个 href 对应的文件真实存在、权限可访问、名字和大小写准确、且在各种设备上点得中——这些没法靠标签自动完成。
