HTML中href与src属性详解，定义、用途及行为差异比较

频道：未分类 日期： 浏览：13
HTML中，href和src是两个常用属性，虽然都用于引用外部资源，但它们在用途和行为上有显著区别。“href”主要用于创建连接，“src”则将指定源的内容插入当前文件进行展示和处理工作。"url"代表文件的路径关系及其在网络上的位置，"href"与"src"都是基于这种“url”，但在使用场景上有所不同，要全面理解二者的异同需结合实际应用案例分析，这些术语的详细解释有助于更好地理解和区分其在不同情境中的应用方法。

在HTML中，href 和 src 是两个常用的属性，虽然它们都用于引用外部资源,但在用途和行为上存在显著的区别。

  1. 定义与用途：

    • href: 它是Hypertext Reference的缩写，意为超文本引用，主要用于建立当前元素（如link或a标签）与其他文档之间的链接关系，它指向网络上的一个位置或者是一个内部锚点，当用户点击带有href属性的元素时,浏览器会导航到该地址所指定的页面或内容。
    • src: 该属性通常用在img、script、iframe等元素上，表示这些元素的来源地址或者是要加载的资源文件路径，它的作用是引入外部资源并将其嵌入到当前的HTML页面中，图片、脚本代码或其他媒体资源的URL会被放在src属性内以供显示和使用。

  2. 行为差异:

    • 当浏览器的解析器遇到带href的元素时，它会继续处理页面的其他部分而不等待这个链接完成下载；也就是说,如果用户在打开网页的过程中就看到了其他的文字或图像而不需要等到整个页面完全载入完毕才能看到所有信息。
    • 而对于使用src引用的资源来说，情况则不同了——一旦开始请求并获取某个具有src属性的资源（比如一张图片），那么在这个资源被成功替换进DOM之前，所有的后续操作都会暂停直到这一步完成为止。（这包括但不限于渲染新的内容），如果一个重要的JavaScript文件的src没有正确设置导致其无法及时加载的话可能会影响到整个网站的可用性甚至性能问题出现。

总结起来就是：“href”用来创建连接，“src”则是将指定源的内容插入到当前文件中去进行展示和处理工作。“url”（统一资源定位符）代表了文件间的路径关系以及它在Web上的具体位置；“href”和“src”都是基于这种“url”,但是它们的用法和应用场景有所不同而已罢了！

HTML中关于url、scr(应为"src")、href的区别