Visual Studio 代码扩展：HTML 预览；外部 CSS 不起作用答案

【问题标题】：Visual Studio Code Extension: HTML Preview; External CSS it's not workingVisual Studio 代码扩展：HTML 预览；外部 CSS 不起作用
【发布时间】：2021-10-31 03:21:45
【问题描述】：

为什么 HTML 预览不起作用，我已经苦苦挣扎了几个小时，我什至在这个网站上都在 Google 上搜索，但没有任何帮助，所以这就是我发布这个问题的原因。

Preview Screenshot

我尝试制作一个单独的 CSS 文件并将 CSS 样式嵌入到页面中。

这是我的代码

头

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Ana Sayfa</title>

身体

 <div id="sayfa">
    <header>
        <div id="banner">
            Banner
        </div>
        <div id="logo">
            Logo
        </div>
        <div id="sosyalmedya">
            Sosyal Medya
            <div class="face"></div>
            <div class="twit"></div>
            <div class="insta"></div>
        </div>

    </header>
    <nav>
        <div id="ana-menu">
            Ana Menü
        </div>
    </nav>
    <section>
        <div id="icerik">
            İçerik
        </div>
    </section>
    <aside>
        <div id="yan-menu">
            Yan Menü
        </div>
    </aside>
    <footer>
        <div id="alt-menu">
            Alt Menü
        </div>
    </footer>
</div>

【问题讨论】：

css文件和html文件在同一个文件夹吗？
是的，两个文件都在同一个文件夹中。
好的，但是为什么你的头和身体分开了？没有文件容器？

标签： html css visual-studio-code

【解决方案1】：

有几件事你应该看看。

首先，您可能需要将头部和身体包裹在一个文档中以获得完整有效的 html 文档。

<!DOCTYPE html>
<html lang="en">
  <head>

 </head>
  <body>

  </body>
</html>

您还想在头部关闭单个标签。大多数时候我们都是这样打开和关闭标签的。

<div></div>

单个标签，就像一张图片一样，将被表示为一个标签标签在自身内部闭合。

<img attr="..." />

正斜杠正在关闭该单个标签。您的元标记未关闭。

他们应该是。

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

我不确定这是否会解决您的问题，因为它会让您更接近标准的 html 文档。

【讨论】：