1. src属性在HTML中的核心作用
理解资源加载的入口
在日常前端开发中，src 属性用来指定外部资源的地址，决定浏览器如何去请求资源。
它应用于多种元素，如 <img>、<script>、<video>、<audio> 等，决定资源加载的来源。
<img src="./assets/logo.png" alt="Logo">正确的路径写法直接影响页面渲染和资源的加载性能，错误的路径会导致 404，从而影响用户体验。
此外，相对路径与 绝对路径在不同场景下的表现不同，需要理解基础的目录结构才能正确定位资源。
2. 从相对路径到绝对路径的基础理解
相对路径的工作原理
相对路径以当前文档的位置为基准进行定位，常用前缀有 ./、../、以及省略路径的写法。
通过相对路径，资源可以在一个项目内灵活移动，便携性更强，但同时也要求对目录结构有清晰认知。
<img src="./images/avatar.png" alt="Avatar">
<script src="../scripts/main.js"></script>当部署到不同的路径时，可能需要调整起始点，确保资源仍然可访问。
需要注意：在单页应用中，前端路由可能改变 URL，但静态资源通常依赖服务器或打包后的输出路径，因此理解 应用打包后的目录结构很重要。
<img src="/static/img/logo.png" alt="Logo">3. 绝对路径和相对路径在实际项目中的对比与选择
绝对路径的稳定性与部署场景
绝对路径以域名或根路径为起点，不依赖当前文档的位置，在多部署环境下表现更稳定。
使用绝对路径可以确保资源来自同一域名，避免跨域问题，同时在 CDN 情况下也更易集成。
<img src="https://cdn.example.com/images/banner.jpg" alt="Banner">需要权衡的是，绝对路径在本地调试和离线环境下可能需要额外的代理或模拟。本地开发与生产环境的路径映射是关键点。
在静态站点中，建议使用相对路径结合根路径前缀的策略，以便在多目录结构中保持一致性。
<img src="/assets/img/logo.png" alt="Logo">4. 实战中的路径策略：如何选择与落地
在实际开发中的案例
项目启动时，若部署在子路径下，利用 <base> 标签可以统一资源的起点，从而简化路径书写。
在构建系统（如 Vite、Webpack）中，资源会被打包到输出目录，你需要根据打包配置选择合适的公共路径（publicPath）以确保 src 指向正确的构建产物。
<base href="/subdir/">// Webpack 示例
output: {publicPath: '/static/',
}另外，运用现代前端框架时，框架提供的资源导入规则会影响路径写法，例如在 React、Vue、Svelte 等项目中，静态资源的导入通常通过模块解析完成，从而减少手动管理路径的需求。
在团队协作中，资源命名和路径约定的统一可以提升可维护性和协作效率。文档化的路径规范。
