> 개발 도구 > VSCode > 본문

vscode로 HTML을 실행하는 방법

下次还敢
풀어 주다: 2024-04-03 04:21:20
원래의
1441명이 탐색했습니다.

Visual Studio Code에서 HTML 파일을 실행하려면 다음 단계만 필요합니다. HTML 파일을 만들고 코드를 입력합니다. 내장 터미널을 열고 "live-server"를 입력하세요. Enter를 눌러 기본 브라우저에서 HTML 파일을 열고 파일 변경 사항을 실시간으로 업데이트하세요.

vscode로 HTML을 실행하는 방법

Visual Studio Code에서 HTML을 실행하는 방법

단계:

  1. Visual Studio Code(VSCode)를 엽니다.
  2. 새 HTML 파일을 만들거나 기존 파일을 엽니다.
  3. HTML 파일에 다음 코드를 입력하세요:
<code class="html"><!DOCTYPE html>
<html>
<head>
  <title>我的第一个 HTML 页面</title>
</head>
<body>
  <h1>欢迎来到我的网站!</h1>
</body>
</html></code>
로그인 후 복사
  1. 터미널 탭으로 이동하거나 Ctrl + ~(Mac의 경우 Cmd + <code>~) 내장 터미널을 엽니다. 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
  • 터미널에서 다음 명령을 입력하세요:
  • rrreee
    Enter를 누르세요. 🎜🎜🎜세부 정보: 🎜🎜Live Server는 브라우저 기반 프로젝트를 빠르게 시작하고 미리 볼 수 있는 VSCode용 내장 확장입니다. localhost에서 개발 서버를 시작하고 파일 변경 사항에 대한 실시간 업데이트를 자동으로 수행합니다. 🎜🎜HTML 파일을 실행한 후 Live Server는 기본 브라우저에서 파일을 엽니다. 페이지가 성공적으로 렌더링되었으며 파일에 대한 변경 사항이 있으면 브라우저에서 페이지가 자동으로 새로 고쳐지는 것을 볼 수 있습니다. 🎜🎜다음은 몇 가지 추가 팁입니다. 🎜
    🎜HTML 파일을 실행하기 전에 Live Server 확장이 설치되어 있는지 확인하세요. 🎜🎜VSCode 하단의 라이브 서버 아이콘(플레이어 버튼과 유사)을 클릭하여 라이브 서버를 시작할 수도 있습니다. 🎜🎜Ctrl + L(Mac의 경우 Cmd + L)을 눌러 터미널과 터미널 사이를 빠르게 전환할 수 있습니다. 편집기 사이를 전환합니다. 🎜🎜Live Server는 기본적으로 포트 5500을 사용합니다. settings.json 파일을 편집하여 포트를 변경할 수 있습니다. 🎜🎜

위 내용은 vscode로 HTML을 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿