vscodeでHTMLプロジェクトを作成する方法

百草

リリース： 2024-03-25 14:39:46

オリジナル

849 人が閲覧しました

VScode HTML プロジェクトを作成する手順: 1. Visual Studio Code をインストールします; 2. VSCode を開きます; 3. プロジェクトディレクトリとして新しいフォルダーを作成します; 4. VSCode でプロジェクトフォルダーを開きます; 5. HTML ファイル ; 6. HTML コードを作成する; 7. HTML ファイルを保存してプレビューする; 8. 他のリソースファイルを追加する; 9. 拡張機能を使用する。

vscodeでHTMLプロジェクトを作成する方法

#Visual Studio Code (VSCode) を使用した HTML プロジェクトの作成は、比較的簡単なプロセスです。

ステップ 1: Visual Studio Code をインストールする

VSCode をインストールしていない場合は、公式 Web サイト (https://code.visualstudio.com/download) にアクセスしてください。 ) オペレーティングシステムに適したバージョンをダウンロードしてインストールします。

ステップ 2: VSCode を開く

インストールが完了したら、VSCode を開きます。シンプルなエディターインターフェイスが表示されます。

ステップ 3: プロジェクトディレクトリとして新しいフォルダーを作成する

コンピューター上の場所を選択し、プロジェクトのルートディレクトリとして機能する新しいフォルダーを作成します。 HTMLプロジェクト。たとえば、デスクトップまたはドキュメントフォルダーに my-html-project というフォルダーを作成できます。

ステップ 4: VSCode でプロジェクトフォルダーを開く

VSCode で、メニューバーの [ファイル] -> [フォルダーを開く] を選択し、プロジェクトフォルダーを参照します ( my-html-project) を選択し、「開く」をクリックします。

ステップ 5: HTML ファイルを作成する

プロジェクトフォルダーで、HTML ファイルを直接作成できます。 VSCode のサイドバーに、プロジェクトのフォルダー構造が表示されます。フォルダーを右クリックし、[新しいファイル]を選択し、ファイルにindex.htmlという名前を付けます。これはプロジェクトのメイン HTML ファイルです。

ステップ 6: HTML コードを作成する

これで、HTML コードの作成を開始できます。 Index.html ファイルに、基本的な HTML 構造を入力します。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>我的 HTML 项目</title>  
</head>  
<body>  
    <h1>欢迎来到我的 HTML 项目</h1>  
    <p>这是一个简单的 HTML 页面。</p>  
</body>  
</html>

ログイン後にコピー

このコード例では、見出し (