HTML 자체는 텍스트 파일을 직접 읽을 수 없지만 이 기능은 백엔드 프로그래밍 언어(예: PHP, Python, Java) 또는 프런트엔드 JavaScript 기술을 통해 구현할 수 있습니다. 백엔드 메서드는 PHP의 file_get_contents() 함수를 사용하여 텍스트 파일의 콘텐츠를 읽고 이를 HTML 페이지에 포함합니다. 프런트 엔드 JavaScript 메서드는 Fetch API를 사용하여 서버의 텍스트 파일에 GET 요청을 보낸 다음 응답 콘텐츠를 구문 분석하여 HTML 페이지에 표시합니다.
HTML 자체에는 텍스트 파일을 직접 읽을 수 있는 기능이 없습니다. 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. HTML에 PHP 코드 삽입
다음으로, HTML 파일에 PHP 코드를 삽입하여 브라우저에서 읽은 텍스트 콘텐츠를 렌더링할 수 있습니다. 이는 일반적으로 .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 파일)을 PHP 지원 데이터베이스에 배포해야 합니다. Apache 또는 Nginx와 같은 서버의 웹. PHP 코드를 구문 분석할 수 있도록 서버를 구성해야 합니다. 일단 구성되면 브라우저를 통해 페이지에 액세스하고 텍스트 파일에서 읽고 포함된 콘텐츠를 볼 수 있습니다.
2. 프런트엔드 JavaScript를 사용하여 텍스트 파일 읽기
HTML 자체는 파일을 읽을 수 없지만 프런트엔드 JavaScript는 File API 및 Fetch API와 같은 기술을 제공하여 사용자가 브라우저 측에서 로컬 파일을 읽거나 요청할 수 있습니다. 네트워크를 통해 파일 내용을 가져옵니다. 다음은 JavaScript 및 Fetch API를 사용하여 서버에서 텍스트 파일을 읽는 예입니다.
1. 서버에 텍스트 파일을 배치합니다.
먼저 텍스트 파일(예: example.txt)을 서버에 배치해야 합니다. HTTP 요청을 통해 액세스할 수 있도록 웹 서버.
2. 텍스트 파일을 읽는 JavaScript 코드 작성
그런 다음 JavaScript의 Fetch API를 사용하여 서버의 텍스트 파일 URL에 GET 요청을 보내고 응답 내용을 읽을 수 있습니다. 다음은 간단한 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript读取文本文件</title>
</head>
<body>
<h1>读取的文本内容</h1>
<pre id="textContent">
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
