VSCode 開発 HTML インストールのチュートリアルと簡単な例
インストール環境：Win10
1 Visual Studio コードをダウンロードしてインストールします
ダウンロード
以下のリンクをクリックし、「ダウンロード」ボタンをクリックしてインストール パッケージをダウンロードします。
インストール
VSCode のインストールは非常に簡単です。ソフトウェアのインストール プロンプトに従い、「次へ」をクリックして完了するだけです。
2 VSCode中国語版
VSCodeは中国語プラグインをインストールすることでローカライズできる、中国人ユーザーに非常に優しいソフトウェアです。
入力ボックスに「中国語 (簡体字) 言語」と入力し、Enter キーを押して中国語プラグインを検索します。見つかったら、「インストール」ボタンをクリックしてインストールします。私のマシンにはすでにインストールされているため、インストールボタンはありません。
3 デフォルトのブラウザプラグインをインストールして開きます
1.VScodeプラグインモールを開きます
2. プラグインをインストールする
入力ボックスに「ブラウザで開く」と入力し、Enter キーを押して検索し、デフォルトのブラウザ プラグインを開きます。見つかったら、「インストール」ボタンをクリックしてインストールします。私のマシンにはすでにインストールされているため、インストールボタンはありません。
3. デフォルトのブラウザが Chrome に変更されます。
ほとんどのコンピュータのデフォルトのブラウザは IE またはその他のブラウザです。ただし、Web ページやその他のフロントエンド プログラムを開発する場合は、通常、Google Chrome ブラウザを使用することをお勧めします。
デフォルトのブラウザを変更します。[ファイル] - [環境設定] - [設定] を選択し、検索バーに「open-in-browser.default」と入力し、以下に示すように編集ボックスで編集し、編集ボックスに「 Chrome」と入力します。VSCodeを再起動するだけです。
4. VSCode で HTML をすぐに書き始める方法
1. 新しいファイルを作成します (Ctrl + N)
2. ファイルの拡張子を .html に変更します。
新しく作成されたファイル Untitled-1 はプレーンテキスト形式なので、作成後に HTML 形式に変更する必要があり、サフィックスは .html に変更されます。
変更後、言語モードとファイルヘッダーが変更されたことがわかります。
3. 標準 HTML コードを迅速に生成
(1)最初の行に!数字を入力します
。 (2) Tab キーを押すか、コード プロンプトで Enter を選択します!。
コードを直接コピーして効果を確認することもできます。
<!DOCTYPE html>
<html lang="en">
<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">
<title>17-无序列表练习3</title>
</head>
<body>
<h1>物品清单</h1>
<ul>
<li>
<h2>水果</h2>
<ul>
<li>葡萄</li>
<li>橙子</li>
<li>苹果</li>
</ul>
</li>
<li>
<h2>蔬菜</h2>
<ul>
<li>萝卜</li>
<li>青菜</li>
<li>香菜</li>
</ul>
</li>
<li>
<h2>零食</h2>
<ul>
<li>辣条</li>
<li>腰果</li>
<li>瓜子</li>
</ul>
</li>
</ul>
</body>
</html>
<!-- ul标签可以有li标签，li中还可以添加ul丰富界面
alt+B 直接在默认浏览器上运行
ul>li含义：生成一对ul标签，然后在这对ul标签中再生成一对li标签
ul>li*3含义：生成一对ul标签，然后在这对ul标签中再生成3对li标签
ul>li*3>h2+ul>li*3-->
4. ブラウザで HTML ページを表示します。
手順 3 でプラグインがインストールされているため、ショートカット キーAlt + Bを押すと、デフォルトのブラウザで作成したページを開くことができます。
ショートカット キーShift + Alt + Bを使用して、開く別のブラウザを選択します。
5. 実際の効果
