HTML、CSS、JavaScript 的基本知識

更新於 2024/12/10閱讀時間約 8 分鐘

1. HTML 基礎:結構化內容

HTML(超文本標記語言)是用來描述網頁內容結構的語言。HTML 的核心由標籤(tags)組成,用於定義網頁的不同部分。

HTML 結構

HTML 的基本結構如下:

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 基礎結構</title>
</head>
<body>
<header>
<h1>網站標題</h1>
</header>
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#contact">聯絡我們</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>歡迎來到我們的網站</h2>
<p>這是主要內容區域。</p>
</section>
</main>
<footer>
<p>© 2024 我的網站</p>
</footer>
</body>
</html>
raw-image


2. CSS 基礎:選擇器與排版

CSS(層疊樣式表)用來定義網頁元素的外觀,例如顏色、字型和排版。

CSS 選擇器

  1. 元素選擇器:直接選取元素標籤,例如 p
  2. 類別選擇器:使用 . 選取特定類別的元素,例如 .button
  3. ID 選擇器:使用 # 選取特定 ID 的元素,例如 #header
  4. 組合選擇器
    • 後代選擇器:div p 選取 div 中的所有 p
    • 直接子代選擇器:div > p 選取 div 的直接子元素 p

範例:基本排版

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 基礎</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background-color: #007bff;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
background-color: #f8f9fa;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #007bff;
}
footer {
text-align: center;
background: #343a40;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<header>網站標題</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</nav>
<footer>© 2024 我的網站</footer>
</body>
</html>


raw-image

3. JavaScript 基礎:事件與操作 DOM

JavaScript 是用於實現互動功能的程式語言,例如按鈕點擊、表單提交等。

事件處理

  1. 點擊事件
    • 使用 addEventListener 為按鈕綁定點擊事件。
  2. 輸入事件
    • 在輸入框中監聽輸入內容的變化。

操作 DOM

  1. 選取元素:使用 document.querySelectordocument.getElementById
  2. 修改內容:通過 innerHTMLtextContent 修改文字內容。
  3. 改變樣式:透過 style 修改 CSS 屬性。

範例:互動按鈕

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基礎</title>
<style>
#message {
font-size: 1.2rem;
color: green;
}
button {
padding: 10px 20px;
font-size: 1rem;
}
</style>
</head>
<body>
<div style="text-align:center; margin-top: 50px;">
<button id="myButton">點擊我</button>
<p id="message">這是一段預設文字。</p>
</div>
<script>
const button = document.querySelector('#myButton');
const message = document.querySelector('#message');

button.addEventListener('click', () => {
message.textContent = '按鈕已被點擊!';
message.style.color = 'blue';
});
</script>
</body>
</html>


raw-image
raw-image



學習要點

  • HTML 負責結構:標籤和層次關係是基礎。
  • CSS 負責樣式:選擇器與排版是關鍵。
  • JavaScript 增強互動:理解事件處理與 DOM 操作。

從簡單的 HTML 和 CSS 排版開始,再逐步加入 JavaScript 的互動功能,將幫助你建立扎實的前端基礎。




留言0
查看全部
avatar-img
發表第一個留言支持創作者!
金融工程師的筆記 的其他內容
Bootstrap 提供多種安裝方式以滿足不同開發環境的需求。以下將逐步介紹使用 CDN、npm/yarn 和本地安裝的方式,並說明如何引入 Bootstrap。 1. 使用 CDN 快速開始 CDN (Content Delivery Network) 是最快速的方式,無需下載檔案,直接透過
框架的歷史與用途 Bootstrap 是一個由 Twitter 開發的開源前端框架,最初由 Mark Otto 和 Jacob Thornton 在 2011 年發布,目的是幫助開發者快速設計響應式網頁。Bootstrap 的主要特色是提供一組預設的 HTML、CSS 和 JavaScript
Bootstrap 提供多種安裝方式以滿足不同開發環境的需求。以下將逐步介紹使用 CDN、npm/yarn 和本地安裝的方式,並說明如何引入 Bootstrap。 1. 使用 CDN 快速開始 CDN (Content Delivery Network) 是最快速的方式,無需下載檔案,直接透過
框架的歷史與用途 Bootstrap 是一個由 Twitter 開發的開源前端框架,最初由 Mark Otto 和 Jacob Thornton 在 2011 年發布,目的是幫助開發者快速設計響應式網頁。Bootstrap 的主要特色是提供一組預設的 HTML、CSS 和 JavaScript
本篇參與的主題活動
  駄菓子(だがし)約在江戶時代左右出現,相比當時使用進口砂糖製作、常出現在宴席、供品、禮品的上菓子 (じょうがし),用日本產的便宜黑糖或水果增添甜味的菓子則稱為雜菓子(ざがし),雜菓子的原料取得相對簡單,作為庶民的零食也較便宜。當時用一文錢也買得起雜菓子,所以雜菓子也稱一文菓子(いちもんがし)。
  駄菓子(だがし)約在江戶時代左右出現,相比當時使用進口砂糖製作、常出現在宴席、供品、禮品的上菓子 (じょうがし),用日本產的便宜黑糖或水果增添甜味的菓子則稱為雜菓子(ざがし),雜菓子的原料取得相對簡單,作為庶民的零食也較便宜。當時用一文錢也買得起雜菓子,所以雜菓子也稱一文菓子(いちもんがし)。
你可能也想看
Google News 追蹤
Thumbnail
本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。