src属性中的'嵌入内容'是如何工作的，为什么script标签为空？

Question

src属性“将目标文件中的内容全部嵌入到标签”这句话怎么理解？

1.↓ 这里页面渲染完之后，script仍然是空标签，js代码并没有被嵌入进来

2.如果说“嵌入到标签”指的不是将内容加载进来。那为什么从来不对href使用“嵌入到标签”这种描述

蹲。。。orz

Answer 1

在HTML中，src属性用于指定一个外部资源的URL，这个资源可以是图片、脚本、样式表等。当浏览器遇到带有src属性的标签时，它会去请求这个URL指定的资源，并将其内容嵌入到标签所在的位置。

对于<script>标签来说，src属性指定了一个外部JavaScript文件的URL。当浏览器解析到带有src属性的<script>标签时，它会暂停页面的解析，去加载并执行这个外部脚本文件。这就是为什么有时候页面渲染会等待脚本加载完成，因为这可以影响页面的行为和渲染。

关于src属性中的“嵌入内容”是如何工作的，这里有几个关键点：

1. 资源加载：浏览器会向src属性指定的URL发送请求，获取资源内容。
2. 内容替换：对于<img>标签，资源内容（图片）会被替换到<img>标签所在的位置。对于<script>标签，资源内容（JavaScript代码）会被执行，而不是直接显示在页面上。
3. 渲染影响：对于<script>标签，如果脚本是异步的（async）或者延迟执行的（defer），那么页面的渲染可以继续进行，脚本会在页面渲染完成后执行。如果没有这些属性，浏览器会阻塞页面渲染，直到脚本加载并执行完成。
4. 空的<script>标签：如果<script>标签没有src属性，那么它就是一个空的脚本标签，不会产生任何效果。如果<script>标签有src属性，但是对应的资源不存在或者加载失败，那么这个<script>标签也不会执行任何代码，页面上看起来就像是空的。

总结来说，src属性的“嵌入内容”是指将外部资源的内容加载到当前标签的位置，对于<script>标签来说，这意味着执行外部JavaScript文件中的代码，而不是将代码直接显示在页面上。如果<script>标签看起来是空的，那通常是因为脚本已经执行过了，或者因为某些原因（如资源未找到）没有执行任何代码。

href属性和src属性虽然都用于指定外部资源的URL，但它们在HTML中的作用和上下文有所不同，这导致了它们描述方式的差异：

1. href属性：

   • 用途：href属性主要用于<a>（链接）、<link>（链接资源，如样式表）等标签，用于指定链接的目标地址或关联的资源。
   • 行为：对于<a>标签，href属性定义了点击链接后浏览器应该导航到的URL。对于<link>标签，href属性指定了外部资源的URL，如CSS样式表，这些资源被“链接”到当前文档，但并不直接嵌入到文档内容中。
   • 描述：因为href属性通常用于定义一个跳转目标或关联资源，所以它的描述更侧重于“建立连接”。这种连接可以是直接的（如<a>标签），也可以是间接的（如<link>标签引入样式）。

2. src属性：

   • 用途：src属性主要用于<script>（脚本）、<img>（图片）、<iframe>（内嵌框架）等标签，用于指定要嵌入或执行的外部资源。
   • 行为：对于<script>标签，src属性指定的JavaScript文件会被下载并执行。对于<img>标签，src属性指定的图片会被下载并显示在页面上。对于<iframe>，src属性指定的页面会被加载并显示在框架中。
   • 描述：因为src属性通常用于嵌入外部资源到当前文档中，所以它的描述更侧重于“嵌入到页面中”。这种嵌入是直接的，资源的内容或效果直接成为页面的一部分。

总结来说，href属性更多地用于定义链接和关联资源，而src属性用于嵌入外部资源。这种差异导致了它们在描述上的不同，href强调的是“建立连接”，而src强调的是“嵌入到页面中”。这种区分有助于更清晰地理解每个属性在HTML文档中的角色和用途。