除了之前提到的常见标签和属性,HTML 中还有一些 相对隐蔽或特定场景下 用于存放资源 URL 的标签和属性。以下是补充内容:
1. 图片与响应式相关
<picture>
+<source srcset="URL">
根据设备条件(如屏幕宽度、分辨率)动态加载不同图像:<picture>
<source srcset="large.jpg" media="(min-width: 1024px)">
<source srcset="medium.jpg" media="(min-width: 768px)">
<img src="small.jpg" alt="响应式图片">
</picture>
<img srcset="URL1 x1, URL2 x2">
根据设备像素比选择不同清晰度的图片。
2. Web组件与模块化
<template>
+fetch()
通过 JavaScript 动态加载 HTML 模板资源(需配合脚本):fetch('template.html').then(response => response.text());
3. SVG & MathML
<svg><use href="URL#fragment"></svg>
引用外部 SVG 文件的片段(如图标库):<svg>
<use href="icons.svg#settings-icon"/>
</svg>
4. Web Workers & Service Workers
new Worker('URL')
(JavaScript API)
加载外部 Worker 脚本:const worker = new Worker('worker.js');
5. Manifest & PWA
<link rel="manifest" href="manifest.json">
指定 PWA(渐进式 Web App)的配置文件 URL。
6. RSS/Atom Feeds
<link rel="alternate" type="application/rss+xml" href="feed.xml">
关联 RSS/Atom Feed URL。
7. DNS预解析
<link rel="dns-prefetch" href="//example.com">
提前解析域名(不直接加载资源,但优化后续请求)。
8. CSS背景图 (间接使用)
虽然 CSS (background-image: url()
)不属于 HTML,但常通过内联样式或类名关联:
<div style="background-image: url('bg.jpg')"></div>
如果需要更具体的应用场景或代码示例,可以进一步说明!
内容由零声教学AI助手提供,问题来源于学员提问