Heim  >  Artikel  >  Entwicklungswerkzeuge  >  So führen Sie HTML mit vscode aus

So führen Sie HTML mit vscode aus

下次还敢
下次还敢Original
2024-04-03 04:21:201442Durchsuche

Das Ausführen einer HTML-Datei in Visual Studio Code erfordert nur die folgenden Schritte: Erstellen Sie eine HTML-Datei und geben Sie den Code ein. Öffnen Sie das integrierte Terminal und geben Sie „live-server“ ein. Drücken Sie die Eingabetaste, um die HTML-Datei in Ihrem Standardbrowser zu öffnen und die Dateiänderungen in Echtzeit zu aktualisieren.

So führen Sie HTML mit vscode aus

So führen Sie HTML in Visual Studio Code aus

Schritte:

  1. Öffnen Sie Visual Studio Code (VSCode).
  2. Erstellen Sie eine neue HTML-Datei oder öffnen Sie eine vorhandene.
  3. Geben Sie in der HTML-Datei den folgenden Code ein:
<code class="html"><!DOCTYPE html>
<html>
<head>
  <title>我的第一个 HTML 页面</title>
</head>
<body>
  <h1>欢迎来到我的网站!</h1>
</body>
</html></code>
  1. Gehen Sie zur Registerkarte „Terminal“ oder drücken Sie Strg + ~ (Cmd + <code>~) öffnet das integrierte Terminal. Ctrl + ~(Mac 为 Cmd + ~)打开内置终端。
  2. 在终端中,输入以下命令:
<code>live-server</code>
  1. 按 Enter 键。

详细信息:

Live Server 是 VSCode 的一个内置扩展,用于快速启动和预览基于浏览器的项目。它会在 localhost 上启动一个开发服务器,并自动对文件更改进行实时更新。

运行 HTML 文件后,Live Server 将在默认浏览器中打开该文件。您可以看到页面已成功渲染,并且对文件所做的任何更改都会自动刷新浏览器中的页面。

以下是一些其他提示:

  • 在运行 HTML 文件之前,请确保已安装 Live Server 扩展。
  • Live Server 也可以通过单击 VSCode 底部的 Live Server 图标(类似于播放器按钮)启动。
  • 您可以按 Ctrl + L(Mac 为 Cmd + L
  • Geben Sie im Terminal den folgenden Befehl ein:
  • rrreee
    Drücken Sie die Eingabetaste. 🎜🎜🎜Details: 🎜🎜Live Server ist eine integrierte Erweiterung für VSCode zum schnellen Starten und Anzeigen einer Vorschau browserbasierter Projekte. Es startet einen Entwicklungsserver auf localhost und führt automatisch Live-Updates bei Dateiänderungen durch. 🎜🎜Nachdem die HTML-Datei ausgeführt wurde, öffnet Live Server die Datei im Standardbrowser. Sie können sehen, dass die Seite erfolgreich gerendert wurde und alle an der Datei vorgenommenen Änderungen die Seite automatisch im Browser aktualisieren. 🎜🎜Hier sind einige zusätzliche Tipps: 🎜
    🎜Bevor Sie eine HTML-Datei ausführen, stellen Sie sicher, dass Sie die Live Server-Erweiterung installiert haben. 🎜🎜Live Server kann auch durch Klicken auf das Live Server-Symbol (ähnlich der Player-Schaltfläche) unten in VSCode gestartet werden. 🎜🎜Sie können Strg + L (Cmd + L für Mac) drücken, um schnell zwischen Terminal und zu wechseln Der Editor wechselt zwischen. 🎜🎜Live Server verwendet standardmäßig Port 5500. Sie können den Port ändern, indem Sie die Datei „settings.json“ bearbeiten. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo führen Sie HTML mit vscode aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn