【Day6】ChatGPT請教教我：網頁基礎入門 - Html、JavaScript、CSS - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 6

自我挑戰組

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列第 6 篇

【Day6】ChatGPT請教教我：網頁基礎入門 - Html、JavaScript、CSS

15th鐵人賽 chatgpt 前端 javascript html

一宵三筵

2023-09-20 10:00:09

5400 瀏覽

分享至

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書！
感謝大家的閱讀與支持!
《用 ChatGPT 詠唱來點亮 React ＆前端技能樹》
歷經重新整理、校正、編排、與修改後，讓章節內容之間的銜接更平順，除了補充上更多的解說之外，甚至有部分章節為重新撰寫的內容，讓理解變得更輕鬆！
目前已在天瓏書局、博客來、金石堂等通路都買得到了! 也有電子書的選擇!
歡迎各位點擊連結選購，謝謝大家～

接下來的系列，要一連串的讓ChatGPT帶我們入門各種網頁前後端技能

預計內容：

本章：javaScrip、html、css、jQuery入門
前端範疇：
ES6語法、TypeScript、git指令
react、redux、nx、nextJS
前端 jest單元測試
react-boostrap、react Konva
後端範疇：
nodeJS、sql語法、nvm、nestJS
swagger、knex
python

如果篇幅還夠的話再介紹其他的GPT AI之類的
對這樣說的意思，就是後續的預計內容，明明鐵人賽已經開始了但我還沒開始寫（我加油）
希望可以藉著chatGPT來把這個前後端一條龍給跑完

當然，ChatGPT只能引領入門，後續必須根據你的使用需求來深入詢問chatGPT
每個人會需要的情境與工具不全然相同，這個系列只是想做個實驗與示範
嘗試是否能夠讓ChatGPT來幫助工程師快速掌握一項新語言或技術

本章會從最基礎的教學開始，讓我們看看能不能讓chatGPT來幫助我們建立一個網站吧
Go Go !

提供網頁教學

首先，我假設我們完全不知道一個網頁要怎麼寫出來
我請ChatGPT提供網頁教學

以下是ChatGPT的回覆

當然可以！以下是一個簡單的前端網頁開發教學，讓你可以跟著操作。

步驟一：建立基本的HTML結構

首先，我們需要建立一個基本的HTML結構，這是一個網頁的骨架。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

</body>
</html>
步驟二：新增標題和內容

在 <body> 標籤中，我們可以加入網頁的標題和一些內容。
<body>
    <h1>歡迎來到我的網頁</h1>
    <p>這是我的第一個網頁，我正在學習前端開發。</p>
</body>
步驟三：新增圖片

你可以透過 <img> 標籤來加入圖片。
<img src="圖片連結" alt="圖片描述">
步驟四：新增連結

你可以透過 <a> 標籤來建立超連結。
<a href="目標網址">點我前往目標網頁</a>
步驟五：新增CSS樣式

你可以在 <head> 標籤中使用 <style> 標籤來新增CSS樣式，讓你的網頁看起來更漂亮。
<head>
    

    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            color: #333;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>
步驟六：保存並打開網頁

將以上的程式碼複製到一個檔案中，並將檔案儲存為 .html 檔案，例如 index.html。接著，用網頁瀏覽器打開這個檔案，你就會看到你的第一個網頁了！

這只是一個簡單的開始，你可以不斷學習和探索前端開發的更多知識，例如 JavaScript、CSS 框架等，進一步打造> > 更豐富的網頁。祝你學習愉快！如果你有任何問題，隨時問我。

根據以上內容，我們獲得幾個關鍵字：「HTML」、「JavaScript」、「CSS」
也得到了一個範例，可以複製然後學習裡面的內容
並且提供了要怎麼使用這些程式碼，如何儲存與看到成果等等

下一步就可以針對我們拿到的關鍵字，來詢問ChatGPT並請他詳細說明

HTML教學

接著以下是ChatGPT的回答

當然，讓我更詳細地解釋HTML（超文本標記語言）。

HTML是什麼？

HTML是一種標記語言，用於創建網頁的結構和內容。它由一系列的 **元素（elements）**構成，這些元素用標記（例如 <tag>）來標識。

每個HTML標記都描述了網頁上的一個元素，例如標題、段落、圖片等。HTML元素可以包含文本內容、其他元素，或者兩者兼而有之。

基本的HTML結構

一個基本的HTML骨架包含以下元素：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>標題</title>
</head>
<body>
    
</body>
</html>
<!DOCTYPE html>：宣告這是一個HTML5文檔。

<html>：整個HTML文檔的根元素。

<head>：包含了文檔的一些設定和元信息，例如字符編碼、標題、引用外部資源等。

<meta>：提供了關於文檔的元信息，比如字符編碼和縮放設定。

<title>：設定瀏覽器標籤的顯示內容。

<body>：包含了實際的網頁內容，比如文字、圖片、連結等。

HTML元素

HTML中的每個元素都由一對標籤構成，例如：
<tag>內容</tag>
這裡的<tag>表示元素的類型，而</tag>表示結束該元素。有些元素是單獨的，不需要結束標籤（例如<img>）。

常見的HTML元素

標題和段落

<h1>到<h6>：用於標題，1是最高級別，6是最低級別。

<p>：用於段落。

鏈接

<a>：用於創建超連結。

圖片

<img>：用於插入圖片。

清單

<ul>：無序列表。

<ol>：有序列表。

<li>：列表中的項目。

表格

<table>：創建表格。

<tr>：表格中的行。

<td>：表格中的單元格。

表單元素

<form>：創建表單。

<input>：用於接受輸入。

<button>：用於按鈕。

分區

<div>：用於創建區塊，可用於組織和樣式化內容。

HTML屬性

HTML元素可以包含屬性，它們提供了有關元素的額外信息，例如class、id、src等。例如：
<a href="目標網址" class="連結">點我前往目標網頁</a>
這裡的href和class就是元素的屬性。

嵌套

HTML元素可以嵌套在其他元素中，這種層層相扣的結構是HTML的重要特點。
<div>
    <h2>標題</h2>
    <p>段落內容</p>
</div>
注釋

在HTML中，你可以使用來添加註釋，這對於在代碼中加入說明非常有用。

這僅僅是HTML的基礎，隨著你的學習，你會發現還有許多更複雜的元素和概念，例如表格的進階用法、CSS樣式的應用、JavaScript腳本等等。繼續學習，你會在前端開發的世界中有更多的發現和成就感！

基本上就把常用的標籤都介紹一次了
而且用ChatGPT來生成教學也太輕鬆了吧（感嘆）

如果想要深入了解html的使用，可以針對疑惑的地方去請他教學
例如：「圖片要怎麼使用自己電腦的圖片，而不是網路上的圖片」、「要怎麼自己做多個頁面並有按鈕互相連結」等等

我示範一個，但更多深入的問題，請自行針對需求來進行詢問

要在網頁中使用你自己電腦上的圖片，你需要將圖片文件儲存在你的專案目錄中，然後使用相對路徑來引用它。

以下是一個簡單的步驟：
將圖片儲存在專案目錄中：

開啟你的專案目錄，將你的圖片文件（例如 my_image.jpg）儲存在其中。確保圖片文件和你的HTML檔案在同一個目錄下，或者你知道如何使用相對路徑引用它。
在HTML中使用圖片：

使用 <img> 標籤來插入圖片。在 src 屬性中使用相對路徑指向你的圖片文件。
<img src="my_image.jpg" alt="我的圖片">
在這個例子中，my_image.jpg 是你的圖片文件，它應該位於與你的HTML檔案相同的目錄中。

注意：alt 屬性提供了一個文字描述，當圖片無法顯示時，這個描述會顯示在頁面上。
保存並在瀏覽器中打開：

將HTML文件保存並在瀏覽器中打開。你應該能夠看到你的圖片顯示在網頁中。
請確保你的圖片文件的格式（例如 .jpg、.png 等）與你在 <img> 標籤中指定的檔案名稱相匹配。

這樣就可以在你的網頁中使用你自己電腦上的圖片了！如果你在使用特定的開發工具或框架，有時會有一些特殊的指示，但基本原則是相同的。

我認為這個解說詳細程度已經相當仔細
只要不懂就問，無論是多麽基本的問題
ChatGPT會耐心地提供解釋，也不會像學校老師一樣皺眉拿書敲你的頭

JavaScript教學

接下來拿我們第二個關鍵字「JavaScript」來試試看，請他提供教學

當然！以下是一個簡單的JavaScript教學，讓你可以快速入門。

什麼是JavaScript？

JavaScript是一種高級的、直譯式的程式語言，通常用於網頁開發，用來為網頁增加動態功能。

步驟一：在HTML中引入JavaScript

你可以在HTML文件的<head>或<body>區塊中引入JavaScript代碼，通常我們把它放在<head>區塊中。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個JavaScript程式</title>
    <script src="script.js"></script>
</head>
<body>
    
</body>
</html>
在這個例子中，我們引入了一個名為script.js的JavaScript文件。

步驟二：建立JavaScript文件

在你的專案目錄中，創建一個名為script.js的檔案，並在裡面撰寫你的JavaScript程式碼。

步驟三：編寫簡單的JavaScript程式

以下是一個簡單的範例，這個程式會在網頁載入時彈出一個警示框。
alert("歡迎來到我的網頁！");
步驟四：在瀏覽器中打開網頁

將HTML文件保存並在瀏覽器中打開，你應該會看到一個彈出視窗顯示了我們在JavaScript中設定的訊息。

JavaScript基礎

這是一些JavaScript的基礎知識：
變數和資料型別

使用 var、let 或 const 來定義變數。
var name = "John";  // 字串型別
let age = 30;       // 數字型別
const PI = 3.14;    // 常數
函式

定義一個函式：
function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("John");  // 呼叫函式
條件語句
if (condition) {
    // 程式碼塊
} else {
    // 程式碼塊
}
迴圈
for (let i = 0; i < 5; i++) {
    console.log(i);
}
陣列
let fruits = ["蘋果", "香蕉", "橙子"];
console.log(fruits[0]);  // 輸出：蘋果
物件
let person = {
    name: "John",
    age: 30,
    isStudent: false
};

console.log(person.name);  // 輸出：John
學習和練習

繼續學習JavaScript，探索事件處理、DOM操作、異步編程等更進階的主題。練習寫一些小型的程式來鞏固你的知識。

希望這份簡單的JavaScript教學對你有所幫助！如果你有任何問題，隨時問我。

可以，很可以。
接續著前面講述html的話題，提供了html檔案要怎麼引入js檔案

如果本來就有程式的基礎或底子，看到他所提供的關鍵字
像是「變數和資料型別」、「函式」、「條件語句」這些
馬上就可以明白要如何從自己原本熟悉的語言轉換成JS的語法

如果不熟悉的話，那麼就是拿這些關鍵字深入的去進行提問、了解
比如說「變數要做什麼用的」、「運算結果要怎麼出現在網頁上」等等

另外，可以看到他使用了console.log(); 來把結果「輸出」
但熟悉JS的人就知道，這個「輸出」並不等於會出現在網頁上
也就是新手照做之後，是看不到結果的

我示範提問「要怎麼把JavaScript上的運算結果顯示在網頁上」

要在網頁上顯示JavaScript的運算結果，你可以使用HTML來創建一個元素（例如段落或標題），然後使用JavaScript將計算結果插入到這個元素中。

以下是一個簡單的例子，假設你想將兩個數字相加並在網頁上顯示結果：

步驟一：在HTML中創建一個元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript計算範例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>計算結果：</h1>
    <p id="result"></p>
</body>
</html>
在這個例子中，我們創建了一個標題 <h1> 以及一個段落 <p>，並給段落設定了一個唯一的ID為 result。

步驟二：在JavaScript中進行運算

在你的 script.js 檔案中，你可以進行運算，並將結果插入到剛才創建的段落中。
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;

document.getElementById("result").innerText = "計算結果是：" + sum;
這段JavaScript代碼做了以下事情：

創建了兩個變數 num1 和 num2，並賦予它們值。

將 num1 和 num2 相加，並將結果賦予 sum。

使用 document.getElementById("result").innerText 選取了剛才在HTML中創建的段落，並將計算結果插入到該段落中。

步驟三：在瀏覽器中打開網頁

保存並在瀏覽器中打開你的HTML文件，你應該會看到計算結果顯示在網頁上。

這只是一個簡單的範例，你可以進一步擴展和修改以達到你的需求。當然，也可以使用其他HTML元素來顯示運算結果，比如 <span>、<div> 等，具體取決於你的需求和設計。

好耶，document.getElementById 開始出現了

如此一來我們就學到JS和HTML要怎麼建立關係
有這些基礎就能讓網頁做更多的事情

CSS教學

我們繼續往第三個關鍵字走，來詢問有關CSS的教學

以下ChatGPT的回答

當然！以下是一個簡單的CSS教學，讓你可以快速入門。

什麼是CSS？

CSS（層疊樣式表）是一種用於控制網頁外觀和布局的樣式語言。它允許你選擇性地樣式化HTML元素，以使其在瀏覽器中顯示為你想要的樣子。

步驟一：將CSS樣式添加到HTML

你可以在HTML文件的<head>部分中使用<style>標籤或者連結一個外部的CSS檔案。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個CSS範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
</body>
</html>
在這個例子中，我們使用了<link>元素將一個名為styles.css的外部CSS檔案連結到HTML文件中。

步驟二：創建CSS樣式

在你的專案目錄中，創建一個名為styles.css的檔案，並在裡面撰寫你的CSS樣式。

步驟三：編寫簡單的CSS樣式

以下是一個簡單的範例，這個CSS會設定段落文字的顏色為紅色。
p {
    color: red;
}
步驟四：在瀏覽器中打開網頁

保存HTML和CSS文件並在瀏覽器中打開HTML文件，你應該會看到段落的文字顏色變成了紅色。

CSS基礎

這是一些基礎的CSS知識：
選擇器

CSS使用選擇器來選擇要樣式化的HTML元素。
標籤名選擇器：
p {
    /* CSS樣式 */
}
類別選擇器：
.classname {
    /* CSS樣式 */
}
ID選擇器：
#idname {
    /* CSS樣式 */
}
屬性和值

CSS規則由屬性和值組成，例如 color: red; 中的 color 是屬性，red 是值。
背景和邊框
background-color: #fff;  /* 設定背景顏色 */
border: 1px solid #000;  /* 設定邊框 */
字體和文字
font-family: Arial, sans-serif;  /* 設定字體 */
font-size: 16px;                /* 設定字體大小 */
line-height: 1.5;               /* 設定行高 */
盒模型
width: 200px;   /* 設定寬度 */
height: 100px;  /* 設定高度 */
padding: 10px;  /* 設定內邊距 */
margin: 20px;   /* 設定外邊距 */
浮動和定位
float: left;    /* 元素浮動 */
position: relative; /* 相對定位 */
學習和練習

繼續學習CSS，探索更多高級的主題，如彈性盒子佈局、網格佈局等。練習設計各種不同風格的網頁元素，這將幫助你熟練掌握CSS。

希望這份簡單的CSS教學對你有所幫助！如果你有任何問題，隨時問我。

我覺得這份CSS的教學算是差強人意，
範例不夠完整，他提供的html裡面沒有他所要示範的樣式結果
裡面有太多關鍵字是中文的，例如「段落文字」、「盒模型」
每個字都看得懂，但整個單字完全看不懂是什麼意思

照著做只會得到一個只有title的網頁，也看不到任何內容
初學的時候舉一反三的能力還沒有這麽強，不知道「」應該要放什麼

因此，我們來繼續追問

當然可以！以下是一個簡單的範例，它包含了一個HTML文件、一個CSS文件以及一些基本的HTML和CSS樣式。

HTML 檔案（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML與CSS範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>歡迎來到我的網頁</h1>
    <p>這是一個包含HTML和CSS的簡單範例。</p>
</body>
</html>
CSS 檔案（styles.css）
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;
}

p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-top: 10px;
}
如何使用這個範例？

創建一個新的資料夾，並在其中新增兩個檔案：index.html 和 styles.css。

將上面的HTML程式碼複製到 index.html 檔案中。

將上面的CSS程式碼複製到 styles.css 檔案中。

將這個資料夾放在你的本地伺服器（例如使用VS Code的Live Server擴充功能）或者直接在瀏覽器中打開 index.html 檔案。

你應該會看到一個簡單的網頁，其中包含了一個標題和一段文字，並且應用了一些基本的CSS樣式。這個範例展示了如何在HTML中引入外部的CSS檔案並應用樣式。你可以進一步修改這些樣式或者新增更多的HTML元素來進行練習。

可以可以，這樣好多了
至少示範了<p> 的效果變化、<h1>的效果變化
也更詳細解析要怎麼跟著範例做，讚喔

（再次感慨用ChatGPT來寫教學真輕鬆）

提供目前主流技術

前面ChatGPT提供的都是「最基礎、簡單能跑、剛初學時要會的內容」
假設你原本不會寫網頁，但是要來寫網頁，可能也不熟悉目前該領域還有哪些技術與關鍵字
這時候我會相當推薦讓ChatGPT來提供技術關鍵字

目前常用來寫網頁的技術包括前端（client-side）和後端（server-side）技術。以下是一些主要的技術：

前端技術：

HTML (HyperText Markup Language): 用於建立網頁的基礎骨架和內容結構。

CSS (Cascading Style Sheets): 用於設計和美化網頁的外觀和版面配置。

JavaScript: 一種用於網頁的動態效果和互動性的程式語言。

React, Angular, Vue.js: 這些是流行的前端框架或函式庫，用於快速開發交互式的單頁應用程序 (SPA)。

TypeScript: 一種超集合，提供了靜態類型，可以提高代碼的可靠性和可維護性。

Sass, Less: 這些是CSS的預處理器，提供了變量、嵌套、混入等功能，讓CSS的編寫更簡潔和易於維護。

Webpack, Parcel: 這些是模塊打包工具，用於將多個前端資源（如JavaScript、CSS、圖片）打包成單一的檔案，以提高性能。

後端技術：

Node.js: 一個用於在伺服器端運行JavaScript的環境，可用於構建高性能的後端應用程序。

Express.js: 基於Node.js的網絡應用程序框架，用於構建快速和高效的後端服務器。

Ruby on Rails, Django, Laravel: 這些是流行的後端框架，用於快速開發Web應用程序。

PHP: 一種常用的後端程式語言，特別在共享主機環境中得到廣泛應用。

Python, Ruby, Java: 除了Django和Ruby on Rails之外，這些程式語言還可以用於構建各種類型的後端應用程序。

Database (SQL, NoSQL): 用於存儲和管理應用程序數據的數據庫技術，如MySQL、PostgreSQL、MongoDB等。

其他重要技術：

RESTful API: 一種設計風格，用於設計簡單、可擴展且易於維護的Web服務。

GraphQL: 一個用於查詢API的新型規格，使客戶端可以精確地獲取所需的數據。

WebSocket: 一種通訊協議，可實現伺服器和客戶端之間的實時雙向通訊。

容器化技術（Docker）: 允許在獨立的容器中打包和運行應用程序，提供一致的運行環境。

CI/CD (Continuous Integration/Continuous Deployment): 用於自動化測試和部署應用程序的流程。

這些技術通常會根據項目的需求和開發團隊的偏好進行選擇和組合使用。

看完這些，是不是就獲得更多關鍵字，也可以從中去找尋自己喜歡的方向

題外話：
我本來試著生成的時候，他的回答裡面還有提到jQuery
結果發現我切錯帳號了，我用到我本名的帳號提問
再拿一宵三筵的帳號來提問，嘗試生成了好幾次，他的回答都不給我jQuery這個關鍵字了

結論

這個章節與ChatGPT的對話內容，我將內容匯出，分享連結在這邊：
https://chat.openai.com/share/77502627-b31c-41c0-9050-2aab48fb71e0

這個章節以ChatGPT來引領網頁撰寫入門
用ChatGPT來學習一項新技術，基本上就是從他回覆的答案中
不斷地去深入詢問相關的關鍵字，逐漸將這個技術所需要的基本知識給建立起來

當然學習仍然是一件不輕鬆的事情，一路上還是會跌跌撞撞
但有ChatGPT在一旁協助，我認為未來這個世代的人們要學習會變得更輕鬆容易
學習資源取得更加容易，成為工程師的門檻將會再降低

另外加碼： https://chat.openai.com/share/da67d918-4d2c-4483-82ed-7d1cfa7e03fb

當然可以！對於初學者來說，我建議你可以使用一些容易上手且功能豐富的前端開發工具來協助你撰寫網頁。以下是一些建議：

Visual Studio Code：這是一個非常受歡迎且免費的程式碼編輯器，它支援許多程式語言，包括HTML、CSS和JavaScript。它具有豐富的擴充套件生態系統，可以增加各種功能，也有許多用戶友善的功能，適合初學者使用。

Sublime Text：這是另一個輕量且功能豐富的程式碼編輯器，它也支援多種程式語言。它的介面簡潔易用，並且有許多擴充套件可供選擇。

Atom：這是一款由GitHub開發的開源程式碼編輯器，也支援HTML、CSS和JavaScript等語言。它有許多自訂功能，可以根據自己的需求進行設定。

Brackets：這是一款針對前端開發者設計的程式碼編輯器，它具有許多針對HTML、CSS和JavaScript的特定功能，並且易於上手。

CodePen：這是一個線上的前端開發環境，可以直接在瀏覽器中編寫HTML、CSS和JavaScript，並即時預覽結果。

以上這些工具都是免費的，你可以根據自己的喜好和需求選擇一個開始進行網頁開發。當然，隨著你的經驗增長，你也可以探索其他更進階的開發環境和工具。希望這些建議對你有所幫助！如果你有任何問題，隨時告訴我。

我個人用Visual Studio Code ，也簡稱VS Code 來進行開發
一開始也可以像這樣請ChatGPT來推薦好用的編輯器，然後再自己去找喜歡的方式
以上！

我是有幸生在ChatGPT出現世代的前端工程師一宵三筵，我們明天見～

【Day5】指南：讓ChatGPT成為程式碼的開發/運維好夥伴

【Day7】ChatGPT請教教我：網頁入門 - jQuery

系列文

用ChatGPT詠唱來完成工作與點亮前後端技能樹共 56 篇

RSS系列文訂閱系列文

73 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22053 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列 第 6 篇

【Day6】ChatGPT請教教我：網頁基礎入門 - Html、JavaScript、CSS

提供網頁教學

步驟一：建立基本的HTML結構

步驟二：新增標題和內容

步驟三：新增圖片

步驟四：新增連結

步驟五：新增CSS樣式

步驟六：保存並打開網頁

HTML教學

HTML是什麼？

基本的HTML結構

HTML元素

常見的HTML元素

HTML屬性

嵌套

注釋

JavaScript教學

什麼是JavaScript？

步驟一：在HTML中引入JavaScript

步驟二：建立JavaScript文件

步驟三：編寫簡單的JavaScript程式

步驟四：在瀏覽器中打開網頁

JavaScript基礎

學習和練習

步驟一：在HTML中創建一個元素

步驟二：在JavaScript中進行運算

步驟三：在瀏覽器中打開網頁

CSS教學

什麼是CSS？

步驟一：將CSS樣式添加到HTML

步驟二：創建CSS樣式

步驟三：編寫簡單的CSS樣式

步驟四：在瀏覽器中打開網頁

CSS基礎

學習和練習

HTML 檔案（index.html）

CSS 檔案（styles.css）

如何使用這個範例？

提供目前主流技術

前端技術：

後端技術：

其他重要技術：

結論

尚未有邦友留言

標記使用者

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列第 6 篇