---
title: HTML基本語法
tags: 網頁組
---

# HTML基本語法 - 前言

經過了前面的文章，大家應該都有了 VS Code 作為開發工具，也快速認識過了 HTML，本篇將正式進入開發，目標是寫出一個課表。

:::info
上課簡報：[網頁組教學簡報](https://docs.google.com/presentation/d/116l95PTWy8q1syQhHanaIX4wGSupWGejoh-CqD4kejo/edit?usp=sharing)
:::

# 本節目標

- 實際運用 HTML 的基礎標籤
- 練習做出一個課表

## 如何開始

- 建議開啟一個新的資料夾(英文名稱佳)進行練習，新增資料夾後使用右鍵，以 Code 開啟


- 在左邊區域使用右鍵開啟選單，選擇第一個 New File 建立一個新檔案名稱為 index.html
 

- 在 index.html 內輸入 ! (半形) 就會跳出提示選項，此時可以按下 Enter 或 Tab，將會自動補全一個基礎的 HTML 的程式碼

這是基於 [Emmet](https://emmet.io) 的補全，為 VS Code 自帶的插件

到這邊我們就會取得一個最基本的網頁程式碼，那接著我們來認識在 body 能夠放入的基礎標籤。

## 基本標籤展示
這邊展示一些基本的標籤，大家可以動手實作看看。


:::success
- 線上位置：https://jsfiddle.net/Blajja0916/1v2smuf5/1/
:::

## 更多 HTML 標籤

除了以下的標籤以外，還有很多種的標籤，標籤的詳細用法可以前往 [w3schools](https://www.w3schools.com/html/default.asp) 查看如何使用。

- [標題](https://www.w3schools.com/html/html_headings.asp)：h1, h2, h3, h4, h5, h6
- [文字段落](https://www.w3schools.com/html/html_paragraphs.asp)：p
- 清單：[ul](https://www.w3schools.com/tags/tag_ul.asp), [ol](https://www.w3schools.com/tags/tag_ol.asp), li
- 換行：[br](https://www.w3schools.com/tags/tag_br.asp)
- 水平線：[hr](https://www.w3schools.com/tags/tag_hr.asp)
- [超連結](https://www.w3schools.com/html/html_links.asp)：a
- [圖片](https://www.w3schools.com/html/html_images.asp)：img
- [區域](https://www.w3schools.com/html/html_blocks.asp)：div, span
- [表格](https://www.w3schools.com/tags/tag_table.asp)：table, tr, th, td
- [表單](https://www.w3schools.com/html/html_forms.asp)：form, label, input

# 練習題目

以上看完了一些基礎的標籤以後，我們來練習一個題目。

- 目標：使用 VS Code 寫出一個課表
- 使用到的標籤：`<table>、<thead>、<tbody>、<tr>、<th>、<td>`

範例課表：

:::success
- 線上位置：https://jsfiddle.net/Blajja0916/wkL0c5vj/
:::

---

## 參考資料
:::info
[HTML 語法教學，快速攻略網頁 HTML 標籤的基本元素](https://tw.alphacamp.co/blog/html-guide)
:::

---

在經過練習之後，大家已經懂得基礎的標籤該如何運用，但是現在寫出來的網頁只有一個結構在，非常醜也難以閱讀，所以我們[下一篇](/ryM13dDtQ16GfxYfVzhUMg)會教大家如何使用 CSS 來修飾我們剛剛寫好的課表。