html获取img标签的属性，vscode在HTML打开视频错误

前不久认识了一个编程小伙伴，他向我炫耀他学会了如何在HTML中获取img标签的属性。我顿时感到十分好奇：这是什么神仙操作，为什么会有这种需求？于是我就在想，能不能把这个过程给详细讲解一下，让其他小白也能跟着学会呢？

首先，我们要了解一下什么是HTML。简单来说，HTML即Hyper Text Markup Language，是一种用于创建网页的标准标记语言。HTML文档描述了文档的结构，以及网页上不同元素的布局。关于HTML的详细内容不在这里赘述，感兴趣的朋友可以去网上找一些相关内容来学习。

在HTML中，img标签用于嵌入图片。例如，下面的代码就创建了一个显示GitHub标准黑色Octocat的图像：

``` html

```

其中，`src`属性指定了图像的URL，也就是地址。`alt`属性则是图像的替代文本，当图像无法显示时，将会显示对应的文本。

所以，如果我们想获取某个img标签的属性，比如上面的`src`或者`alt`，该怎么办呢？方法其实也很简单。首先，我们需要找到对应的img标签。可以通过查看源代码或者使用开发者工具来定位。然后，在JavaScript中创建一个变量来保存该img标签对象。例如：`const img = document.querySelector('img');`。这里使用了querySelector来选择第一个img标签。

接下来，我们可以使用img对象的`getAttribute`方法来获取指定属性的值。例如对于上面的GitHub图片，我们可以使用`const src = img.getAttribute('src');`来获取它的`src`属性值。

最后，我们可以在JavaScript中使用这些值来完成自己的操作。例如，我们可以在控制台中打印出该图像的地址：

``` js

console.log(src);

```

嗷！这自然不会是最后的结果啦。接下来，我们有了一个更加有趣的问题，那就是为什么VSCode在HTML打开视频时会出错呢？

先说一下视频的HTML代码，形式如下：

``` html

```

这个HTML标签使用了`video`，而不是`img`来嵌入视频。类似`img`标签，`video`标签有很多属性用于控制视频的播放。例如最简单的例子就是使用`src`属性指定了视频的URL。

但是当我们使用VSCode打开这个HTML文件时，发现视频无法正常播放。这是为什么呢？我不是专家，但是根据我自己的经验和网上的一些资料，可能是VSCode的默认安全策略导致的。

比如在Mac上，当我们尝试在HTML文件中加入视频标签时，会看到如下的错误信息：

```

Not allowed to load local resource: file:///Users/username/.../video.mp4

```

这是因为Safari有一个默认的策略，禁止网站从本地文件系统直接加载媒体资源。这是为了避免潜在的安全风险。其他浏览器，如Chrome和Firefox也有类似的策略，因此在Web开发中，我们应该尽量避免在HTML中引用本地资源。

那么，如何解决这个问题呢？最简单的方法当然是把视频放到服务器上，然后使用HTTP或HTTPS协议加载。如果你只是想本地调试，可以尝试关闭VSCode的默认安全策略。具体方法如下：

1. 打开VSCode设置界面，选择"Open Settings (JSON)"，这将打开一个settings.json文件；

2. 在settings.json文件中添加以下内容：

``` json

"security.fileSchemes": [

"file"

]

```

这个设置将允许VSCode加载本地文件系统的资源。

当然，这种方法可能并不是最安全的。因此，我们在实际开发中，应该尽量避免使用本地文件的方式，真正把网站部署到服务器上，实现与用户的安全隔离。

好了，今天的分享就到这里了。希望通过这篇文章，大家对HTML中获取img标签属性和在VSCode打开视频时的问题有了更深入的了解。如果有什么问题或者补充意见，欢迎在下面留言给我哦！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/