最簡單的網頁
一個最簡單的網頁通常包含三個基本元素:HTML(超文本標記語言)用於結構,CSS(層疊樣式表)用於外觀,以及JavaScript(一種腳本語言)用於互動。以下是一個極簡的HTML網頁示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a very simple web page.</p>
</body>
</html>
這個網頁包含一個標題(<h1>
)和一段文本(<p>
)。當你將這個檔案保存為.html
格式並打開瀏覽器查看時,你會看到一頁顯示「Hello World!」的網頁。
如果你想要為這個網頁添加一些基本的樣式,你可以使用CSS。以下是一個簡單的CSS示例:
body {
background-color: lightblue;
}
h1 {
color: blue;
font-size: 2em;
}
p {
color: red;
}
將這個CSS代碼放在一個名為style.css
的檔案中,並在HTML檔案中包含它,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a very simple web page.</p>
</body>
</html>
這樣,你的網頁就會有一些基本的樣式了。
如果你想要添加一些互動性,你可以使用JavaScript。以下是一個簡單的JavaScript示例:
document.addEventListener('DOMContentLoaded', function() {
var greeting = document.querySelector('h1');
greeting.textContent = 'Hello, JavaScript!';
});
將這個JavaScript代碼放在一個名為script.js
的檔案中,並在HTML檔案中包含它,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Page</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a very simple web page.</p>
</body>
</html>
這樣,當你打開這個網頁時,標題會自動變更為「Hello, JavaScript!」。
這就是一個最簡單的網頁的基本結構和功能。你可以根據需要添加更多的元素和功能來豐富你的網頁。