HTML、CSS、JavaScript 的基本知識

更新於 2024/12/10發佈於 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>

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

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

CSS 選擇器

元素選擇器：直接選取元素標籤，例如 p。
類別選擇器：使用 . 選取特定類別的元素，例如 .button。
ID 選擇器：使用 # 選取特定 ID 的元素，例如 #header。
組合選擇器：
- 後代選擇器：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>

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

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

事件處理

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

操作 DOM

選取元素：使用 document.querySelector 或 document.getElementById。
修改內容：通過 innerHTML 或 textContent 修改文字內容。
改變樣式：透過 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>

學習要點

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

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

金融工程師的筆記自學教程01Bootstrap

金融工程師的筆記

26會員

73內容數

留言0

查看全部

發表第一個留言支持創作者！

金融工程師的筆記的其他內容

安裝與引入 Bootstrap 5

Bootstrap 提供多種安裝方式以滿足不同開發環境的需求。以下將逐步介紹使用 CDN、npm/yarn 和本地安裝的方式，並說明如何引入 Bootstrap。 1. 使用 CDN 快速開始 CDN (Content Delivery Network) 是最快速的方式，無需下載檔案，直接透過

#bootstrap5 #HTML #網頁設計

什麼是 Bootstrap？

框架的歷史與用途 Bootstrap 是一個由 Twitter 開發的開源前端框架，最初由 Mark Otto 和 Jacob Thornton 在 2011 年發布，目的是幫助開發者快速設計響應式網頁。Bootstrap 的主要特色是提供一組預設的 HTML、CSS 和 JavaScript

#網頁 #Bootstrap #HTML

安裝與引入 Bootstrap 5

#bootstrap5 #HTML #網頁設計

本篇參與的主題活動

有緣人15-從孫生事件，看我們該為孩子守住的底線—「我是父親，我有兒女，我不能沉默。」

當流量至上成為標準，性騷擾被輕描淡寫、受害者被噤聲，我們是否還能給孩子一個安全的未來？作為父親，我無法接受這種價值觀繼續影響下一代。我們該做的，不是遺忘，而是改變環境——拒絕縱容、用行動發聲，讓孩子知道「尊重是底線，說不是權利」。這不只是關於孫生，而是關於我們願意為未來的孩子守住什麼樣的世界。

#支持 #方格新手 #文章

西卡RE。LIFE人生筆記

2025/02/14

閱讀｜《小狗錢錢》：從記帳到成功日記，打造我的財務自由之路

學習《小狗錢錢》的理財方法，並透過實際操作，達成財務目標與自我提升。從記帳、設定目標、寫夢想清單、成功日記，到發展副業，分享如何將書中方法應用於生活中，並體會到理財不僅僅是管理金錢，更是規劃生活，實現夢想的重要過程。

#成功 #夢想 #日記

歐巴桑Gap year

2025/02/12

2017 vs 2024 日本東北雪景大不同！藏王樹冰、銀山溫泉、山寺的冬日奇景，好美！

比較2017年與2024年日本東北旅遊照片，對比藏王樹冰、銀山溫泉、山寺等景點在不同時間的景觀差異，即使地點相同，不同時間的體驗與感受截然不同，珍惜每個當下的珍貴回憶。2024年因暖冬導致雪景不如預期，反觀2017年的雪景壯觀美麗。新聞報導2025年日本東北暴雪，衷心祈願一切平安。

#東北 #日本 #日本旅行

簡單生活文案

2025/02/12

整理｜成為極簡主義者後，我的十個清潔小習慣

經過年末年初的大掃除，大家是否也好好整頓了自己的居家環境呢？身為家有幼童的媽媽，我也是歷經多次的練習，才調整到適合自己的清潔節奏，在此與大家分享我的清潔小撇步，每個習慣幾乎不超過5分鐘，就能換得一室乾淨，一起來看吧！

#整理 #斷捨離 #極簡主義

Jemi

2025/02/09

屏東｜德文山健行-沒想到竟成為拖鞋勇士的一天？

記錄一場前往屏東縣三地門鄉德文山（觀望山）的登山之旅，分享路線規劃、登山心得、沿途風景與美食體驗，並提醒登山客注意入山證申請及避免錯過三角點。

#蛇年大吉 #登高 #登山

方格裡的‹思›語室

2025/02/09

《錢，和你想的不一樣》03-《年薪百萬的人，和普通上班族的最大思維差距》

薪水的高低，從來不是努力的問題，而是思維的選擇。年薪百萬的人，不是單靠埋頭苦幹，而是透過「創造價值」決定自己的價格。他們懂得提升不可取代性、創造多重收入、主動尋找機會、投資自己，讓財富加速成長。與其等加薪，不如掌握「決定薪資的能力」。這篇文章，讓你看清真正的收入差距，從現在開始，為自己創造更高價值！

#人生的路 #日常 #作者

方格裡的‹思›語室

2025/02/17

有緣人15-從孫生事件，看我們該為孩子守住的底線—「我是父親，我有兒女，我不能沉默。」

#支持 #方格新手 #文章

西卡RE。LIFE人生筆記

2025/02/14

閱讀｜《小狗錢錢》：從記帳到成功日記，打造我的財務自由之路

#成功 #夢想 #日記

歐巴桑Gap year

2025/02/12

2017 vs 2024 日本東北雪景大不同！藏王樹冰、銀山溫泉、山寺的冬日奇景，好美！