HTML1 - 認識 HTML 基本骨架
這一頁先學最基本的 HTML 結構。你只要先看懂整份文件怎樣開始、head 放什麼、body 放哪裡就可以。
先記住一句： HTML 是用來告訴瀏覽器「這頁網頁有什麼內容、怎樣分開」的標記語言。
head：放網頁資料與設定body：放畫面真正顯示的內容
HTML 基本骨架
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁簡介">
<title>我的第一個網頁</title>
</head>
<body>
頁面內容會放在這裡
</body>
</html>
先不用背很多 tags。第一步只要知道：每一份 HTML 頁面，大致都長這樣。
head 裡最常見的東西
<title>
- 設定分頁標題
- 例如：`我的第一個網頁`
<meta>
- 提供編碼和一些網頁資訊
- 最常見是
charset="UTF-8"
<link>
- 連接外部 CSS
- 之後學 CSS 常會用到
<script>
- 載入 JavaScript
- 現在先知道名字就可以
HTML1 練習
練習 1
- 寫出完整 HTML 文件骨架。
- 在
html加上lang="zh-Hant"。 - 在
head加入meta charset和title。 - 在
body加入一行 `Hello HTML`。
練習 2
請建立一個名為 my-first-page.html 的頁面，並完成以下內容：
- 分頁標題設為 `My First Page`。
- 在
body顯示一句：`Welcome to my first webpage.` - 檢查整份文件有沒有
DOCTYPE、html、head、body。
練習 3
請改正下面這份不完整的 HTML：
<html>
<head>
<title>Test Page
<body>
Hello HTML
</body>- 補回缺少的
DOCTYPE - 補回缺少的 closing tags
- 加上
meta charset="UTF-8"
練習 4
請自己寫一份最簡單的個人介紹頁，只需要：
- 正確 HTML 骨架
- 一個合適的
title body內兩行文字：
第一行：你的英文名
第二行：`I am learning HTML.`
對應完成練習
以下是較早期的完成版練習檔，可作為這一課的參考完成效果。