Day10 前端網頁開發(1) HTML、JavaScript

2024 iThome 鐵人賽

DAY 10

佛心分享-IT 人自學之術

什麼都摸一點！拒絕當不沾鍋！系列第 10 篇

16th鐵人賽

kkeea1020

2024-09-02 16:35:46

240 瀏覽

分享至

“Getting a quality website is not an expenses but rather an investment.”
― Dr. Christopher Dayagdag

什麼是HTML?

HTML（超文本標記語言）是一種用於創建和結構化網頁內容的標記語言。它使用標籤（tags）來定義不同的元素，如標題、段落、圖像、鏈接等。這些標籤告訴瀏覽器如何顯示網頁上的內容。

Note: 是標記語言，不是程式語言！

為什麼要用HTML?

可以把HTML想成一個規範，每個瀏覽器都遵守這個規範，這樣才能讓同樣的網頁可以在不同瀏覽器上執行。

讓我們使用 VS Code進行開發！

官方網站：https://code.visualstudio.com/
在VS Code創建一個.html檔案，並在第一行打上 “!”號後按Enter：

VS Code就自動幫你生出一個HTML的模板了！

此時我們去資料夾打開hello.html檔案，可以看到一片空白，我們試著往body裡面新增文字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>

按下Ctrl + s存檔後，回到網頁的頁面後按F5重新整理，發現多了個Hello World!

但是每次都要這樣重新整理很麻煩，所以我們可以安裝一個VS Code插件：
Liver Server:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

安裝好後，我們點擊右下的Go Live(剛剛裝的Live Server)，他會開啟一個網頁，然後點擊你的.html檔案(第一次用需要選擇，接下來會記住)。開啟後可以試著增刪文字，按下存檔後，網頁頁面就會自己更新了！

接下來讓我們新增更多內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <a href="https://google.com"> hi!! this is a link</a>
</body>
</html>

回到網頁後，發現”Hello World”的字型變大了，然後有個”hi!! this is a link”的超連結，點進去會通往google.com。

h1、h2、a，這些稱為tag，它們是HTML的元件，h1、h2是文字大小，a代表創造一個超連結。

這時候，我們可以回頭看一下整個HTML這些tag。

html 裡面包著的是網頁整體

head 裡面包著的是要給瀏覽器看的機器資訊

body 裡面包著的才是真正會讓使用者看到的畫面

什麼是JavaScript?

簡稱JS，JavaScript是一種高級、直譯式的程式語言，主要用於網頁開發。它允許開發者在網頁上實現動態和交互功能。JavaScript可以在瀏覽器中運行，並且與HTML和CSS一起工作，以創建豐富的用戶體驗。

為什麼要用JavaScript?

JavaScript原先是被專門用於前端網頁開發的程式語言，已經被現代瀏覽器全部支持，隨著JavaScript的發展，出現了許多很有用的框架，幫助減少複雜的操作(可以想像成函數的概念)。

同時NodeJS的出現把JS擴展到後端開發，透過框架+NodeJS，可以讓JavaScript用於移動端設備、網頁、伺服器的開發。

JavaScript的Hello World!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>alert("Hello World!")</script>
</body>
</html>

放在script tag裡面的內容就會當成JavaScript運行。

Note:

head內：還記得剛剛說的嗎? head內的內容是給瀏覽器解析用的，所以裡面的運行會在頁面加載前，所以如果你的script會用到body的內容，就有可能會出現錯誤！

body內：這是大部分放的位置，script通常會等到頁面加載完後才執行！

前兩個之外：網頁會從上到下執行，基本上與前兩者的概念相似！

下面是一個測試程式，有興趣可以看一下是否跟自己想的一樣：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>alert("In head")</script>
</head>
    <script>alert("above body")</script>
<body>
    <script>alert("In body")</script>
</body>
    <script>alert("under body")</script>
</html>

下一篇會簡單建立一個計數器！

更多練習可以到 W3Schools Online Web Tutorials