HTML4与HTML5中linkrel区别及新增值汇总

HTML5 新增的 rel 值主要是为现代 Web 功能服务

HTML5 不再把 rel 当作纯文档结构标记，而是扩展为一种资源关系声明机制，尤其强化对预加载、安全策略、PWA 和语义化链接的支持。关键新增值包括：

• preload：声明高优先级资源（如关键字体、JS），浏览器可提前 fetch（但不执行）
• prefetch：提示浏览器在空闲时预取可能后续需要的资源（如下一页面的 JS）
• preconnect：提前建立 DNS 查询、TCP 握手、TLS 协商，减少后续请求延迟
• dns-prefetch：仅做 DNS 预解析，比 preconnect 更轻量
• modulepreload：专为 ES 模块设计的预加载，确保模块图在执行前就绪
• icon：正式取代非标准的 shortcut icon，支持多种尺寸和类型
• manifest：指向 Web App Manifest 文件（application/manifest+json），是 PWA 的基础
• canonical：虽在 HTML4 后期草案中出现，但直到 HTML5 才成为正式推荐用法，用于指定规范 URL

有些值看似新增，实则是“标准化”或“语义收紧”

兼容性和使用注意事项

不是所有 HTML5 rel 值都具备跨浏览器支持：

• preload：Chrome、Firefox、Edge 支持良好；Safari 直到 v16.4 才支持，iOS Safari 更晚
• modulepreload：仅 Chromium 115+ 和 Safari 16.4+ 支持，Firefox 尚未实现
• preconnect / dns-prefetch：主流浏览器均支持，但 preconnect 若滥用（连太多第三方域）反而拖慢首屏
• manifest：所有支持 PWA 的浏览器都要求此值，但需配合正确的 MIME 类型和 JSON 结构

HTML4 文档中硬塞 HTML5 的 rel 值不会导致解析错误（浏览器会忽略不认识的值），但也不会触发对应行为。若需渐进增强，建议用 rel="stylesheet" 保底，再叠加 rel="preload" 等增强逻辑，并配以脚本检测能力（如检查 document.createElement('link').relList.supports）。

<link rel="stylesheet" href="main.css">
<link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin>
<link rel="manifest" href="/manifest.webmanifest">

真正容易被忽略的是 crossorigin 属性——只要 rel="preload" 加载跨域资源（比如字体、模块），就必须显式声明 crossorigin，否则浏览器会拒绝加载。这个细节错一次，preload 就完全失效。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~