webstrom中html页面标签不闭合

Question

如题所示，输入input或者img按tab键，不能够自动补全，少了“/”

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在HTML中，</div> 是一个闭合的标签。如果你使用了 <div> 标签，那么必须有一个对应的 </div> 标签来关闭它。如果在使用 </div> 后仍然没有找到相应的标签，那么浏览器会抛出错误。

在你的例子中，你可能想要将 </div> 和 </span> 结合在一起：

<input type="text">
<img src="image.jpg">

在这个例子中，</div> 会被正确地关闭，并且不会有错误提示。但是，如果你想让浏览器自动完成这个操作，你可以添加一些额外的样式到这些元素上，例如设置它们的 display: none;，这样当用户尝试点击或移动光标时，浏览器就会知道这些元素是空的，不需要显示出来。

.signUp, .login-con {
    display: none;
}

然后，在你的 HTML 中，你可以用 JavaScript 来处理这个行为：

const input = document.querySelector('input');
const img = document.querySelector('img');

input.addEventListener('focus', () => {
    img.style.display = 'none';
});

img.addEventListener('focus', () => {
    input.style.display = 'none';
});

请注意，这种方法并不是完美的解决方案，因为这可能会导致其他问题，比如在某些情况下，用户可能会忘记清除这两个元素上的样式，从而导致其他的问题。