Visual Studio Code 扩展：HTML 预览；外部 CSS 不起作用

Question

I'm struggling for hours now why the HTML Preview is not working, I search on Google even on this site and nothing helped, so that's why I post this question.我现在挣扎了几个小时，为什么 HTML 预览不起作用，我什至在这个网站上搜索了谷歌，但没有任何帮助，所以这就是我发布这个问题的原因。

Preview Screenshot预览截图

I tried to make a separate CSS file and also embedded CSS style into the page.我尝试制作一个单独的 CSS 文件，并将 CSS 样式嵌入到页面中。

Here is my code这是我的代码

Head头

<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>

Body身体

 <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>

Answer 1

There are a couple of things that you should look at.有几件事你应该看看。

First you probably need to wrap your head and body in a document to have a full valid html document.首先，您可能需要将您的头部和身体包裹在一个文档中以获得完整的有效 html 文档。

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

 </head>
  <body>

  </body>
</html>

You also want to close your single tags in the head.您还想在头部关闭单个标签。 Most of the time we open and close tag like this.大多数时候我们像这样打开和关闭标签。

<div></div>

Single Tags, like an image will be represented as one tag tag is closing within itself.单个标签，就像图像将被表示为一个标签标签在其内部关闭。

<img attr="..." />

The forward slash is closing that single tag.正斜杠正在关闭该单个标签。 Your Meta tags are not closed.您的 Meta 标签未关闭。

They should be.他们应该是。

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

I'm not sure this will fix your issue because but it will get you closer to a standard html document.我不确定这会解决您的问题，因为但它会让您更接近标准的 html 文档。

Visual Studio Code 扩展：HTML 预览；外部 CSS 不起作用

问题描述

1 个解决方案

解决方案1
0 2021-10-30 19:21:45

Visual Studio Code 扩展：HTML 预览； 外部 CSS 不起作用

问题描述

1 个解决方案

解决方案1 0 2021-10-30 19:21:45

Visual Studio Code 扩展：HTML 预览；外部 CSS 不起作用

解决方案1
0 2021-10-30 19:21:45