HTML 自体はテキスト ファイルを直接読み取ることはできませんが、この機能はバックエンド プログラミング言語 (PHP、Python、Java など) またはフロントエンド JavaScript テクノロジを通じて実現できます。バックエンド メソッドは、PHP の file_get_contents() 関数を使用して、テキスト ファイルからコンテンツを読み取り、HTML ページに埋め込みます。フロントエンド JavaScript メソッドは、Fetch API を使用して GET リクエストをサーバー上のテキスト ファイルに送信し、応答コンテンツを解析して HTML ページに表示します。
HTML はマークアップ言語であり、主に Web ページの構造とコンテンツを構築して表示するために使用されるため、HTML 自体にはテキスト ファイルを直接読み取る機能がありません。ファイルの読み取りなどの操作を処理するのではなく。テキスト ファイルを読み取り、そのコンテンツを HTML ページに埋め込むには、通常、バックエンド プログラミング言語 (PHP、Python、Java など) またはフロントエンド JavaScript テクノロジを使用する必要があります。
以下では、バックエンド プログラミング言語とフロントエンド JavaScript テクノロジを使用してテキスト ファイルを読み取り、HTML ページに埋め込む方法を紹介します。
1. バックエンド プログラミング言語を使用したテキスト ファイルの読み取り
バックエンド プログラミング言語を使用してテキスト ファイルを読み取り、埋め込むのが一般的です。そのコンテンツを HTML ページに変換します。以下では、このプロセスを説明するための例として PHP を使用しています:
1. テキスト ファイルを作成します
まず、必要なコンテンツを保存するためのテキスト ファイルが必要です。読む。次の内容を含む example.txt という名前のテキスト ファイルがあるとします:
这是一些示例文本。 它将被读取并显示在HTML页面上。
2. テキスト ファイルを読み取るための PHP コードを記述します
これで、PHP を使用できるようになります。テキスト ファイルの内容を読み取る file_get_contents() 関数。以下に簡単な PHP スクリプトの例を示します。
<?php
$file = 'example.txt';
$text = file_get_contents($file);
if ($text === false) {
echo "无法读取文件: $file";
} else {
echo nl2br($text); // nl2br函数将换行符转换为<br>标签，以便在HTML中正确显示
}
?>このスクリプトでは、file_get_contents() 関数が指定されたファイルの内容を読み取り、変数 $text に保存します。読み取りが失敗した場合は false が返され、その時点でエラー メッセージを出力できます。それ以外の場合は、echo ステートメントを使用して、テキスト コンテンツを HTML ページに出力できます。
3. PHP コードを HTML に埋め込む
次に、PHP コードを HTML ファイルに埋め込んで、読み取ったテキスト コンテンツをブラウザーに表示できます。これは通常、.php ファイルの タグ内に PHP コードを配置することで実現されます。例:
<!DOCTYPE html>
<html>
<head>
<title>读取文本文件示例</title>
</head>
<body>
<h1>读取的文本内容</h1>
<p>
<?php
// 这里是之前编写的PHP代码
$file = 'example.txt';
$text = file_get_contents($file);
if ($text === false) {
echo "无法读取文件: $file";
} else {
echo nl2br($text);
}
?>
</p>
</body>
</html>4. サーバーを設定してページにアクセスします
最後に、.html ファイル (この場合は実際には .php ファイル) を追加する必要があります。 、PHP コードが含まれているため)、Apache や Nginx などの PHP 対応 Web サーバーにデプロイされます。サーバーは、PHP コードを解析できるように構成する必要があります。構成が完了すると、ブラウザを通じてページにアクセスし、テキスト ファイルから読み取られて埋め込まれたコンテンツを確認できます。
2. フロントエンド JavaScript を使用してテキスト ファイルを読み取る
HTML 自体はファイルを読み取ることができませんが、フロントエンド JavaScript は File API や Fetch API などのテクノロジーを提供します。ユーザーがブラウザ側でローカル ファイルを読み取ったり、ネットワーク リクエストを通じてファイルのコンテンツを取得したりできるようにします。以下は、JavaScript と Fetch API を使用してサーバーからテキスト ファイルを読み取る例です:
1. テキスト ファイルをサーバーに配置します
まず、テキスト ファイル (example.txt など) を Web サーバーに配置して、アクセスできるようにする必要があります。 HTTP リクエストを通じて。
2. テキスト ファイルを読み取るための JavaScript コードを作成します
次に、JavaScript の Fetch API を使用して、サーバー上のテキスト ファイル URL に GET リクエストを送信し、 read 応答内容を取得します。以下に簡単な例を示します。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
