16、响应式网页设计中的图像、视频与排版技巧

响应式网页设计中的图像、视频与排版技巧

在响应式网页设计中，图像和视频的处理以及排版的优化至关重要。下面将详细介绍相关的知识和技巧。

1. 响应式网页设计中的图像与视频处理

在 HTML 中，通常使用 src 属性指向资源位置，而在 SVG 中则使用 xlink:href 属性调用资源。若添加 src 属性指向资源并让 xlink:href 属性为空，旧版浏览器会显示备用图像，而现代浏览器则不会，因为 xlink:href 属性为空。

推荐使用第二种方法，它更简洁且麻烦更少。需注意，这里使用 <image> 而非 <img> ，并且 xlink:href 属性在标记中是可选的，若为空可移除。

在 HTML5 中，自闭合标签（如 <hr> 或 <img> ）的尾部斜杠 / 可有可无，但 SVG 的路径元素中必须有尾部斜杠。上述方法在支持 SVG 的浏览器中不会导致双重下载。

1.1 使用 xlink:href 和 src 属性调用 SVG 文件

SVG 是一种图像文件，在 <img> 中调用它是完全有效的，例如：