希望从HTML文件中提取的URL添加上来源

[Boomboomdunce]

此需求仅适用于从HTML文件中提取的URL

1. 超链接 (Hyperlinks):

• <a> 标签的 href 属性: 这是最常见的 URL 使用方式，用于创建指向另一个网页、文件、同一页面内的某个位置、电子邮件地址或执行 JavaScript 的链接。 [[1]](https://docs.pingcode.com/baike/3401576)[[[2]](https://www.runoob.com/html/html-links.html)](https://www.runoob.com/html/html-links.html)
  • 示例: <a href="https://www.example.com">访问示例网站</a>
  • 示例: <a href="documents/document.pdf">下载文档</a>
  • 示例: <a href="#section2">跳转到第二节</a>
  • 示例: <a href="mailto:user@example.com">联系我们</a>
  • 示例: <a href="tel:+1234567890">拨打电话</a>

2. 图像 (Images):

• <img> 标签的 src 属性: 用于指定图像文件的路径。 [[3]](https://pushi.simon1987.com/html-common-elements.html)
  • 示例: <img src="images/logo.png" alt="公司Logo">
• <img> 标签的 srcset 属性: 结合 <picture> 元素或单独使用，为不同屏幕分辨率或设备提供不同尺寸的图像源。
  • 示例: <img src="image-small.jpg" srcset="image-medium.jpg 1000w, image-large.jpg 2000w" alt="响应式图片">
• <picture> 元素中的 <source> 标签的 srcset 属性: 用于根据不同的媒体条件（如屏幕宽度、像素密度）指定不同的图像源。
  • 示例:

    <picture>
      <source media="(min-width: 650px)" srcset="images/large.jpg">
      <source media="(min-width: 465px)" srcset="images/medium.jpg">
      <img src="images/small.jpg" alt="描述文字">
    </picture>

• <input type="image"> 标签的 src 属性: 创建一个图像提交按钮，其 src 属性指定图像的 URL。
  • 示例: <input type="image" src="buttons/submit.png" alt="提交">

3. 样式表 (Stylesheets):

• <link> 标签的 href 属性 (当 rel="stylesheet" 时): 用于链接外部 CSS 文件。 [[4]](https://pushi.simon1987.com/resource-path.html)[[[5]](https://blog.csdn.net/TKOP_/article/details/111395865)](https://blog.csdn.net/TKOP_/article/details/111395865)
  • 示例: <link rel="stylesheet" href="styles/main.css">
• HTML 元素的 style 属性中的 url() 值: 虽然不直接是 HTML 标签属性，但在内联样式中，url() 可以用来指定背景图片等。
  • 示例: <div style="background-image: url('images/background.jpg');"></div>
• <style> 标签内部的 @import 规则: 可以在 <style> 标签内部通过 @import url("path/to/another.css"); 引入其他 CSS 文件（尽管 <link> 更为推荐）。

4. 脚本 (Scripts):

• <script> 标签的 src 属性: 用于链接外部 JavaScript 文件。 [[4]](https://pushi.simon1987.com/resource-path.html)[[[5]](https://blog.csdn.net/TKOP_/article/details/111395865)](https://blog.csdn.net/TKOP_/article/details/111395865)
  • 示例: <script src="js/main.js"></script>

5. 表单 (Forms):

• <form> 标签的 action 属性: 指定表单数据提交到的 URL。 [[1]](https://docs.pingcode.com/baike/3401576)
  • 示例: <form action="/submit-form" method="post">...</form>
• <button> 标签的 formaction 属性: 用于覆盖 <form> 元素的 action 属性，为特定按钮指定不同的提交 URL。
  • 示例: <button type="submit" formaction="/save-draft">保存草稿</button>
• <input type="submit"> 标签的 formaction 属性: 与 <button> 的 formaction 类似，覆盖表单的 action。
  • 示例: <input type="submit" formaction="/alternative-submit">

6. 媒体文件 (Media Files):

• <audio> 标签的 src 属性: 指定音频文件的 URL。
  • 示例: <audio src="audio/music.mp3" controls></audio>
• <audio> 元素中的 <source> 标签的 src 属性: 为 <audio> 元素提供多种音频格式或源。
  • 示例:

    <audio controls>
      <source src="audio/track.ogg" type="audio/ogg">
      <source src="audio/track.mp3" type="audio/mpeg">
      您的浏览器不支持音频元素。
    </audio>

• <video> 标签的 src 属性: 指定视频文件的 URL。
  • 示例: <video src="video/movie.mp4" controls></video>
• <video> 标签的 poster 属性: 指定在视频下载期间或用户点击播放前显示的图像的 URL。
  • 示例: <video src="video/movie.mp4" poster="images/video-poster.jpg" controls></video>
• <video> 元素中的 <source> 标签的 src 属性: 为 <video> 元素提供多种视频格式或源。
  • 示例:

    <video controls>
      <source src="video/movie.mp4" type="video/mp4">
      <source src="video/movie.webm" type="video/webm">
      您的浏览器不支持视频元素。
    </video>

• <track> 标签的 src 属性: 用于为媒体元素（如 <audio> 或 <video>）指定文本轨道文件（如字幕或说明）的 URL。
  • 示例: <video src="video.mp4"><track kind="subtitles" src="subtitles_en.vtt" srclang="en"></video>

7. 内嵌内容 (Embedded Content):

• <iframe> 标签的 src 属性: 指定要嵌入的 HTML 文档的 URL。
  • 示例: <iframe src="https://www.example.com/embedded-page.html"></iframe>
• <embed> 标签的 src 属性: 用于嵌入各种外部内容，如插件（尽管现在不常用）。
  • 示例: <embed src="plugin-content.swf" type="application/x-shockwave-flash">
• <object> 标签的 data 属性: 指定要嵌入的对象的资源的 URL。
  • 示例: <object data="resource.swf" type="application/x-shockwave-flash"></object>
• <object> 元素中的 <param> 标签的 value 属性 (当 name 指向一个 URL 参数时): 某些插件可能通过 <param> 标签接收 URL。
  • 示例: <object><param name="movie" value="movie.swf"></object> (具体取决于对象类型)

8. 文档元数据 (Document Metadata):

• <base> 标签的 href 属性: 指定文档中所有相对 URL 的基础 URL。 [[6]](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements)[[[7]](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base)](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base) 一个文档中只能有一个 <base> 元素，并且它必须位于 <head> 元素内部。 [[7]](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base) 如果指定了多个 <base> 元素，只会使用第一个 href 和 target 值。 [[7]](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base)
  • 示例: <base href="https://www.example.com/path/">
• <link> 标签的 href 属性 (用于多种 rel 值): 除了样式表，<link> 还可以用于其他目的，例如：
  • rel="icon" 或 rel="shortcut icon": 指定网站的收藏夹图标 (favicon) 的 URL。
    • 示例: <link rel="icon" href="images/favicon.ico" type="image/x-icon">
  • rel="apple-touch-icon": 指定 Apple 设备主屏幕图标的 URL。
    • 示例: <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
  • rel="manifest": 指定 Web App Manifest 文件的 URL。
    • 示例: <link rel="manifest" href="manifest.json">
  • rel="canonical": 指定页面的首选（规范）URL，有助于 SEO。
    • 示例: <link rel="canonical" href="https://www.example.com/preferred-page.html">
  • rel="alternate": 指向文档的替代版本（例如，不同语言或媒体类型）。
    • 示例: <link rel="alternate" hreflang="es" href="https://www.example.com/es/page.html">
    • 示例: <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml">
  • rel="dns-prefetch", rel="preconnect", rel="prefetch", rel="prerender": 用于资源预加载和性能优化，其 href 指向需要预处理的域名或资源 URL。
    • 示例: <link rel="dns-prefetch" href="//fonts.googleapis.com">
• <meta> 标签的 content 属性 (在特定情况下):
  • http-equiv="refresh": 可以用于指定一个 URL 进行页面重定向（尽管不推荐用于此目的，服务器端重定向更好）。
    • 示例: <meta http-equiv="refresh" content="5;url=https://www.example.com/new-page.html">
  • Open Graph 协议 (如 og:image, og:url, og:video 等): 这些 <meta> 标签的 content 属性包含 URL，用于在社交媒体上分享时提供预览信息。 [[7]](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base)
    • 示例: <meta property="og:image" content="https://www.example.com/images/social-preview.jpg">

9. 图像映射 (Image Maps):

• <area> 标签的 href 属性: 在客户端图像映射中，为图像的特定区域定义可点击的链接。
  • 示例:

    <map name="infographic">
      <area shape="rect" coords="0,0,82,126" href="section1.html" alt="Section 1">
      <area shape="circle" coords="90,58,3" href="section2.html" alt="Section 2">
    </map>
    <img src="infographic.png" usemap="#infographic">

10. HTML5 新增或特定用途:

• <q> 和 <blockquote> 标签的 cite 属性: 用于提供引用来源的 URL。
  • 示例: <blockquote cite="https://www.example.com/source-document.html">...</blockquote>
• <del> 和 <ins> 标签的 cite 属性: 用于提供解释更改（删除或插入）原因的文档的 URL。
  • 示例: <del cite="changes-log.html#item1">已删除内容</del>
• <portal> 标签的 src 属性 (实验性): 用于实现无缝的页面过渡。
  • 示例: <portal src="next-page.html"></portal>

URL 的类型:

在上述所有情况中，URL 可以是：

• 绝对 URL (Absolute URLs): 提供完整的地址，包括协议、域名、路径和文件名。 [[8]](https://www.runoob.com/html/html-url.html)[[[9]](https://blog.csdn.net/weixin_38055381/article/details/82623217)](https://blog.csdn.net/weixin_38055381/article/details/82623217)
  • 示例: https://www.example.com/path/to/file.html
• 相对 URL (Relative URLs): 相对于当前文档的 URL 或 <base> 标签指定的 URL。 [[4]](https://pushi.simon1987.com/resource-path.html)
  • 相对于当前目录: image.jpg, ./another-page.html
  • 相对于上级目录: ../images/pic.png
  • 相对于网站根目录: /css/style.css (如果 <base> 未设置或指向根) [[4]](https://pushi.simon1987.com/resource-path.html)
• 协议相对 URL (Protocol-relative URLs): 以 // 开头，浏览器会根据当前页面的协议（HTTP 或 HTTPS）来请求资源。 [[4]](https://pushi.simon1987.com/resource-path.html)
  • 示例: //cdn.example.com/library.js
• 片段标识符 (Fragment Identifiers): 以 # 开头，指向同一页面内的特定元素（通常是具有相应 id 的元素）。 [[4]](https://pushi.simon1987.com/resource-path.html)
  • 示例: #top, #section-id
• Data URLs: 将数据直接嵌入到 URL 本身，而不是指向外部资源。
  • 示例: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...">

[Boomboomdunce]

补充需求：不仅要支持不同标签的提取，还需要将标签里的文本和其他属性信息提取出来，这样才能实现对不同链接隐藏技术的检测，例如显示URL和实际跳转URL不一致，图片加载失败使用alt引诱点击等攻击手法，具体的需求让AI设计下，仅供参考，真实的URL数据结构还建议调研实现

URL提取功能技术需求说明书.md