如何列出单文件内常见HTML引用标签？能否共用<link>/<script>引用批量更新页面？

嘿，我来帮你解答这两个问题！

下面是网页开发里常用的各类引用标签，每个都有明确的用途：

• <link>：最常用的是引入CSS样式表，也可以用来指定网站图标（favicon）、预加载资源等。示例：<link rel="stylesheet" href="styles.css">
• <script>：用来加载外部JavaScript文件，或者写内联脚本。引入外部脚本的写法：<script src="app.js"></script>
• <img>：引用并展示图片资源，支持多种格式，记得加alt属性提升可访问性：<img src="photo.jpg" alt="海边日落">
• <audio>：嵌入音频文件，让用户能在网页里播放声音：<audio src="podcast.mp3" controls></audio>
• <video>：引用视频文件，实现网页端视频播放：<video src="demo.mp4" controls width="800"></video>
• <iframe>：把另一个完整的网页嵌入到当前页面中，比如嵌入地图、视频平台内容：<iframe src="https://example.com" width="600" height="400"></iframe>
• <object>：曾经用来嵌入Flash插件，现在偶尔用来加载PDF等文件：<object data="report.pdf" type="application/pdf" width="100%" height="800"></object>

当然有办法实现！这种集中维护的方式能大幅减少重复工作，改一处就能同步所有页面，下面是几种常用的方案：

1. 服务器端包含（SSI） #

如果你的服务器支持SSI（比如Apache、Nginx默认都可以配置），可以把所有公共引用放到一个单独的HTML文件里，比如common-head.html：

<!-- common-head.html -->
<link rel="stylesheet" href="angular.min.css">
<link rel="stylesheet" href="custom-fonts.css">
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="google-analytics.js"></script>

然后在每个页面的<head>里用SSI指令导入这个文件：

<!DOCTYPE html>
<html>
<head>
  <!-- 导入公共引用 -->
  <!--#include virtual="/common-head.html" -->
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

注意要给服务器开启SSI支持，有些服务器需要把文件扩展名改成.shtml，或者配置让.html文件也能解析SSI指令。

2. 模板引擎方案 #

如果你的项目用了模板引擎（比如EJS、Handlebars、Pug），可以把公共引用做成一个模板片段，然后在各个页面模板里引入。比如用EJS的例子：

• 先创建partials/common-includes.ejs：

<link rel="stylesheet" href="angular.min.css">
<link rel="stylesheet" href="custom-fonts.css">
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="google-analytics.js"></script>

• 然后在页面模板里引入这个片段：

<!DOCTYPE html>
<html>
<head>
  <%- include('partials/common-includes') %>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

当你用模板引擎渲染页面时，会自动把这个片段插入到对应位置，后续只要修改片段文件，所有页面都会同步更新。

3. 前端构建工具（Webpack、Vite等） #

如果是现代前端项目，用Webpack、Vite这类构建工具的话，处理起来更灵活。你可以通过配置让构建工具自动把公共的CSS、JS资源注入到所有HTML页面中。比如用Webpack的html-webpack-plugin，只要在配置里指定公共的依赖chunk，插件就会自动生成对应的<link>和<script>标签插入到HTML里，后续修改依赖版本或新增资源，重新构建就能同步所有页面。

4. 纯静态页面的JS动态加载 #

如果不想依赖服务器或构建工具，也可以用JavaScript动态创建并插入引用标签。写一个load-common.js文件：

// load-common.js
function addResource(type, url, attrs = {}) {
  let elem;
  if (type === 'css') {
    elem = document.createElement('link');
    elem.rel = 'stylesheet';
    elem.href = url;
  } else if (type === 'js') {
    elem = document.createElement('script');
    elem.src = url;
    elem.async = false; // 保证脚本加载顺序
  }
  // 附加额外属性
  Object.entries(attrs).forEach(([key, val]) => elem[key] = val);
  document.head.appendChild(elem);
}

// 加载所有公共资源
addResource('css', 'angular.min.css');
addResource('css', 'custom-fonts.css');
addResource('js', 'jquery.min.js');
addResource('js', 'angular.min.js');
addResource('js', 'google-analytics.js');

然后在每个HTML页面的<head>里引入这个脚本：

<script src="load-common.js"></script>

这样只要修改load-common.js里的资源列表，所有页面就会加载最新的引用。不过要注意，动态加载的脚本可能有顺序问题，需要合理设置async或defer属性。

5. 不推荐：HTML Imports #

曾经有HTML Imports标准，可以用<link rel="import" href="common-includes.html">直接导入HTML片段，但这个标准已经被废弃，现代浏览器都不再支持，所以就别用啦。

内容的提问来源于stack exchange，提问作者Ben