HTML を使用して動的な Web ページを作成する方法-フロントエンドQ&A-php.cn

HTML を使用して動的な Web ページを作成する方法

PHPz

リリース： 2023-04-27 16:38:14

オリジナル

2446 人が閲覧しました

html は Web ページの作成に使用されるマークアップ言語で、静的 Web ページまたは動的 Web ページを作成できます。動的 Web ページは、ユーザーインタラクション動作に基づいてリアルタイムのデータインタラクションとページレンダリングを実行できるため、ユーザーエクスペリエンスが向上します。この記事では、htmlを使って動的Webページを作成する方法を詳しく紹介します。

1. 動的 Web ページの原理

html では静的 Web ページを作成できますが、動的 Web ページを作成するには、JavaScript、CSS、AJAX などのテクノロジーを使用する必要があります。。中でもJavaScriptは、動的なWebページを実現するための最も重要な技術の1つであり、Webページにおけるリアルタイムのデータインタラクションやページレンダリングを実現するスクリプト言語です。 CSS は Web ページのスタイルやレイアウトを制御して、Web ページをより美しくすることができます。

AJAX は、サーバーと対話し、Web ページ全体をリロードすることなくページコンテンツを動的に更新できる非同期 Web アプリケーションを作成するために使用されるテクノロジです。 AJAX を使用すると、Web ページの応答速度とユーザーエクスペリエンスが向上します。

2. JavaScript を使用して動的 Web ページを作成する

テキストコンテンツを動的に変更する

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript动态网页</title>
  <script>
    function changeText() {
      document.getElementById("text").innerHTML = "Hello, World!";
    }
  </script>
</head>
<body>
  <h1 id="text">JavaScript动态网页</h1>
  <button onclick="changeText()">点击此处以改变文本内容</button>
</body>
</html>

ログイン後にコピー

上記のコードでは、JavaScript ドキュメントオブジェクトと getElementById メソッドが使用されます。 Web ページ内の h1 要素を取得し、その内容を動的に変更します。

画像ソースを動的に変更する

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript动态网页</title>
  <script>
    function changeImage() {
      var image = document.getElementById("image");
      if (image.src.match("dog")) {
        image.src = "cat.jpg";
      } else {
        image.src = "dog.jpg";
      }
    }
  </script>
</head>
<body>
  <h1>JavaScript动态网页</h1>
  <img id="image" src="dog.jpg" width="200px">
  <br>
  <button onclick="changeImage()">点击此处以改变图片</button>
</body>
</html>

ログイン後にコピー

上記のコードでは、JavaScript の if ステートメントと match メソッドを使用して現在の画像ソースを特定し、動的に変更します。画像ソース。

3. AJAX を使用して動的な Web ページを作成する

AJAX はサーバーと対話し、Web ページ全体をリロードすることなくページのコンテンツを動的に更新できるため、Web ページがより効率的でユーザーフレンドリーになります。。フレンドリー。

次は、AJAX を使用してサーバーからデータを取得する例です:

<!DOCTYPE html>
<html>
<head>
  <title>AJAX动态网页</title>
  <script>
    function loadXMLDoc() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("text").innerHTML = this.responseText;
        }
      };
      xmlhttp.open("GET", "data.txt", true);
      xmlhttp.send();
    }
  </script>
</head>
<body>
  <h1>AJAX动态网页</h1>
  <button onclick="loadXMLDoc()">点击此处以获取数据</button>
  <div id="text"></div>
</body>
</html>

ログイン後にコピー

上記のコードでは、AJAX の XMLHttpRequest オブジェクトを使用してサーバーからデータを要求します。データは、JavaScript を使用して動的に更新されます。

4. CSS を使用して動的 Web ページを美しくする

CSS は Web ページのスタイルとレイアウトを制御して、Web ページをより美しくすることができます。以下は、単純な CSS スタイルの例です。

<!DOCTYPE html>
<html>
<head>
  <title>CSS样式动态网页</title>
  <style>
    h1 {
      color: red;
      text-align: center;
    }

    button {
      background-color: blue;
      color: white;
      font-size: 16px;
      border-radius: 5px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>CSS样式动态网页</h1>
  <button>点击此处</button>
</body>
</html>

ログイン後にコピー

上記のコードでは、CSS スタイルルールを使用して、Web ページのタイトルとボタンのスタイルを制御します。

要約すると、HTML を使用して動的な Web ページを簡単に作成できます。JavaScript、AJAX、CSS などのテクノロジを使用することで、Web ページをより効率的で美しく、使いやすいものにすることができます。もちろん、動的な Web ページの作成に使用できるテクノロジーやツールは他にもたくさんあり、読者はそれらについてさらに詳しく学び、深く学ぶことができます。

以上がHTML を使用して動的な Web ページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。