VS Code - 为什么 vscode 不显示 html 标签属性

Question

我用VS Code编辑HTML，但是当我输入标签时，它没有显示它的属性，即使我添加了我想要的属性，它也无法识别。我执行了以下操作，但其中 none 行得通：

1-我安装了相关的扩展（HTML CSS 支持，HTML 片段，HTML 样板等）。 2-添加标签后，按Ctrl+Space。 3-重新启动我的机器。 4-重新安装 VS 代码。

（我在下面输入了 css、html 代码，我的 css 文件的名称是“style post.css”，它在我的文件夹中HTML 文件所在）。

我已经尽力了，如果有人能指导我，我会很高兴。

h2.head1{
    color:red ;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Post</title>
    <link rel="stylesheet" href="style_post.css">
</head>
<body>
    <h1> Scrambled Eggs </h1>
    <p>
    eggs are one of my favorite foods.here is recipe for deliciously rich scrambled eggs.<br>
    </p>
    <h2 class:"head1">Ingredients</h2>
    
    <ul>
        <li>
        2eggs
        </li><li>
        1 tbs butter
        </li><li>
        2 tbs cream
        </li>
    </ul>
    
    <h2>Method</h2>
    
    <ol>
        <li>
        Melt butter in a frying pan over a medium heat.
        </li><li>
        Gently mix the eggs and cream in the bowl.
        </li><li>
        once bottle has melt add cream and eggs.
        </li><li>
        Using the spatula fold the eggs from the edge of the pan to the center every 20 secend(as if you are making an omelette)
        </li><li>
        When the eggs are still moist remove from the heat(it will continue to cook on the plate until served)
        </li>
    </ol>
</body>
</html>

Answer 1

您要么有错字，要么必须查看如何在 HTML 中设置属性：您使用以下语法来执行此操作：attribute="value" 而不是 :

所以在你的情况下你应该使用 class="head1"

h2.head1{
    color:red ;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Post</title>
    <link rel="stylesheet" href="style_post.css">
</head>
<body>
    <h1> Scrambled Eggs </h1>
    <p>
    eggs are one of my favorite foods.here is recipe for deliciously rich scrambled eggs.<br>
    </p>
    <h2 class="head1">Ingredients</h2>
    
    <ul>
        <li>
        2eggs
        </li><li>
        1 tbs butter
        </li><li>
        2 tbs cream
        </li>
    </ul>
    
    <h2>Method</h2>
    
    <ol>
        <li>
        Melt butter in a frying pan over a medium heat.
        </li><li>
        Gently mix the eggs and cream in the bowl.
        </li><li>
        once bottle has melt add cream and eggs.
        </li><li>
        Using the spatula fold the eggs from the edge of the pan to the center every 20 secend(as if you are making an omelette)
        </li><li>
        When the eggs are still moist remove from the heat(it will continue to cook on the plate until served)
        </li>
    </ol>
</body>
</html>

Answer 2

感谢用户：克隆我能够找到问题第二部分的答案，即“为什么 vscode 不会自动打开一些带有属性名称的标签”。

我说也许有人和我有类似的问题可以帮忙him/her:)

如图所示，我们要在页面右下角select html，我的问题是语言是django html.

VS Code - 为什么 vscode 不显示 html 标签属性

VS Code - Why vscode doesn't display html tag attributes

html

css

visual-studio-code

vscode-settings