用 标签实现下载需添加 download 属性，但仅对同源 url 有效；跨域须后端配合 content-disposition: attachment 响应头；推荐语义化 结构，手动标注文件大小与格式，移动端需设 display: inline-block 提升点击体验。
用 @#@#@#@#@#@#@#@#@#@0
Content-Disposition: attachment 响应头，前端仍用普通 <a href="..."></a>，不要加 download
download 的值是建议的文件名，不带扩展名时浏览器可能保留原名；含路径（如 download="data/xxx.pdf"）会被忽略，只取最后一段列表结构用语义化 HTML，别套 <div>
<p>下载列表本质是「一组相关资源链接」，<code><ul></ul> 或 <dl></dl> 更合适。虽然你没被允许用 <ul></ul> 标签，但这里强调的是结构逻辑：每个条目应有明确的主次关系（标题 + 描述 + 操作），而不是堆砌 <div class="item">。
<p>推荐写法（纯 HTML，无 CSS）：</p>
<pre class="brush:php;toolbar:false;"></pre>
<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>
<p>这样既利于屏幕阅读器识别，也方便后续用 CSS 控制间距、图标、悬停效果。</p>
<h3>文件大小和格式信息必须手动写，HTML 不会自动读取</h3>
<p>浏览器渲染时完全不知道 <code>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> 是行内元素，点击热区窄，尤其在手机上容易点歪。不依赖框架的话，用内联样式快速解决：
<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 对应的文件真实存在、权限可访问、名字和大小写准确、且在各种设备上点得中——这些没法靠标签自动完成。
