image unsplash
HTML、CSS 和 JavaScript 是網頁開發的三大核心技術，它們各自有不同的用途，共同協作來創建功能豐富且美觀的網頁。以下是它們的主要用途和功能：
- HTML (HyperText Markup Language)
- 用途: 定義網頁的結構和內容。
- 功能:
- 用於創建網頁的基本骨架，例如標題、段落、圖片、連結、表格等。
- 通過標籤（如 <h1>、<p>、<img>、<a> 等）來組織內容。
- 提供語義化標籤（如 <header>、<main>、<footer> 等），讓網頁內容更具結構性和可讀性。
- 範例:
html
复制
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎來到我的網頁</h1>
<p>這是一個段落。</p>
<a href=”https://example.com”>點擊這裡</a>
</body>
</html>
运行 HTML
- CSS (Cascading Style Sheets)
- 用途: 控制網頁的外觀和樣式。
- 功能:
- 用於美化 HTML 內容，例如設置顏色、字體、間距、背景、佈局等。
- 通過選擇器（如類別 .class、ID #id、標籤 p 等）來選取 HTML 元素並應用樣式。
- 支援響應式設計（Responsive Design），讓網頁能夠適應不同設備的屏幕尺寸。
- 提供強大的佈局工具，如 Flexbox 和 Grid，用於創建複雜的網頁佈局。
- 範例:
css
复制
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
margin: 10px;
}
- JavaScript
- 用途: 實現網頁的動態行為和交互功能。
- 功能:
- 用於處理用戶的互動，例如點擊按鈕、輸入表單、滑動頁面等。
- 可以動態修改 HTML 和 CSS，實現即時更新內容或樣式。
- 支援與伺服器進行數據交換（AJAX、Fetch API），實現無需刷新頁面的數據加載。
- 提供豐富的 API，例如 DOM 操作、事件處理、動畫、本地存儲等。
- 範例:
javascript
复制
// 當用戶點擊按鈕時，改變標題的文字
document.querySelector(“button”).addEventListener(“click”, function() {
document.querySelector(“h1”).textContent = “你點擊了按鈕！”;
});
三者的關係
- HTML 是網頁的骨架，負責內容和結構。
- CSS 是網頁的外衣，負責外觀和樣式。
- JavaScript 是網頁的大腦，負責行為和交互。
實際應用範例
以下是一個簡單的網頁範例，展示 HTML、CSS 和 JavaScript 如何協同工作：
HTML
html
复制
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1 id=”title”>歡迎來到我的網頁</h1>
<button id=”changeButton”>點擊我</button>
<script src=”script.js”></script>
</body>
</html>
运行 HTML
CSS (styles.css)
css
复制
h1 {
color: blue;
font-size: 24px;
}
button {
background-color: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
JavaScript (script.js)
javascript
复制
document.getElementById(“changeButton”).addEventListener(“click”, function() {
document.getElementById(“title”).textContent = “你點擊了按鈕！”;
document.getElementById(“title”).style.color = “red”;
});
總結
- HTML 負責內容和結構。
- CSS 負責外觀和樣式。
- JavaScript 負責行為和交互。
這三種技術共同構成了現代網頁開發的基礎，缺一不可。通過熟練掌握它們，你可以創建出功能強大且美觀的網頁應用。
