基本的な Html、CSS、JavaScript プロジェクトをセットアップする方法-CSSチュートリアル-php.cn

基本的な Html、CSS、JavaScript プロジェクトをセットアップする方法

DDD

リリース： 2024-12-07 15:41:11

オリジナル

407 人が閲覧しました

このチュートリアルは、プロジェクトをセットアップしてコーディングを開始するだけで、要点を直接説明したい人を対象としています。

Html、css、JavaScript ファイル用のフォルダーを作成します。

How to set up a basic Html, css and javaScript project

作成したフォルダー内にファイルを作成します

How to set up a basic Html, css and javaScript project
ファイルの外観は PC ごとに異なる場合がありますが、ファイルの説明が上の画像と同じであることを確認してください。

Css ファイルと JavaScript ファイルを HTML ファイルにリンクします。

ファイルをリンクする場合、各ファイルがフォルダー内のどこにあるかに注意することが重要です。この場合、ファイルはすべて同じレベルにあるため、リンクは簡単です。

HTML ファイルの内容は次のようになります
`

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
      </head>
      <body>

     </body>
 </html>

ログイン後にコピー

css ファイルと js ファイルをリンクするには、異なる種類のタグが必要であるため、2 つの異なるタグを使用します。
CSS ファイルをリンクするには、タグを使用します。次に、rel 属性と href 属性を使用して、リンクタグのコンテンツとページとの関係、および CSS ファイルが存在する場所を示します。次のようになります。

インクタグはヘッドタグの間に入れる必要があります。

JavaScript ファイルに関しては、script タグと src 属性内の JavaScript ファイルの場所のパスを使用します。こんな感じです

script タグは head タグと body タグの両方の内側に配置できますが、パフォーマンス上の理由から、最後に解析されるように body タグの下部に script タグを配置することをお勧めします。head に配置することもできます。

のいずれかのタグを付けます同様の読み込み動作を再現するために、「Async」または「Defer」属性が追加されました。

上記の手順に従った場合、HTML ファイルの内容は次のようになります。
`

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
         <link rel="stylesheet" href="index.css" />
      </head>
      <body>
         <script src="index.js" ></script>
     </body>
 </html>

ログイン後にコピー

これで、非常に基本的な HTML、CSS、JavaScript のセットアップが完了しました。ご質問がある場合、または行き詰まった場合は、コメント欄に質問を残してください。お答えします。

以上が基本的な Html、CSS、JavaScript プロジェクトをセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。