HTML基礎Copy
HTML 完整教學指南
目錄
- HTML 基礎
- HTML 結構與元素
- 文本格式化
- 連結與圖片
- 表單元素
- 表格製作
- 語意化標籤
- HTML5 新特性
- 最佳實踐
- 實例教學
1. HTML 基礎
1.1 什麼是 HTML？
HTML（HyperText Markup Language）是用於建立網頁的標準標記語言。它定義了網頁的結構和內容。
1.2 基本結構
<!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>
<h1>歡迎來到我的網頁</h1>
<p>這是一個段落。</p>
</body>
</html>2. HTML 結構與元素
2.1 基本元素
<!-- 標題標籤 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<!-- 段落標籤 -->
<p>這是一個段落</p>
<!-- 分隔線 -->
<hr>
<!-- 換行 -->
<br>2.2 容器元素
<!-- 區塊容器 -->
<div>區塊元素容器</div>
<!-- 行內容器 -->
<span>行內元素容器</span>
<!-- 頁面區塊 -->
<header>頁首</header>
<nav>導航</nav>
<main>主要內容</main>
<footer>頁尾</footer>3. 文本格式化
3.1 基本格式化
<!-- 文字樣式 -->
<strong>粗體文字</strong>
<em>斜體文字</em>
<u>底線文字</u>
<s>刪除線文字</s>
<!-- 上標和下標 -->
<sup>上標</sup>
<sub>下標</sub>
<!-- 預格式化文本 -->
<pre>
保留空格
和換行的文本
</pre>3.2 列表
<!-- 無序列表 -->
<ul>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<!-- 定義列表 -->
<dl>
<dt>術語</dt>
<dd>術語的定義</dd>
</dl>4. 連結與圖片
4.1 連結
<!-- 基本連結 -->
<a href="https://www.example.com">訪問示例網站</a>
<!-- 在新視窗開啟 -->
<a href="https://www.example.com" target="_blank">在新視窗開啟</a>
<!-- 錨點連結 -->
<a href="#section1">跳到特定段落</a>
<h2 id="section1">段落標題</h2>
<!-- 電子郵件連結 -->
<a href="mailto:example@email.com">發送郵件</a>4.2 圖片
<!-- 基本圖片 -->
<img src="image.jpg" alt="圖片描述">
<!-- 設置尺寸的圖片 -->
<img src="image.jpg" alt="圖片描述" width="300" height="200">
<!-- 圖片連結 -->
<a href="https://www.example.com">
<img src="image.jpg" alt="可點擊的圖片">
</a>5. 表單元素
5.1 基本表單
<form action="/submit" method="post">
<!-- 文本輸入 -->
<input type="text" name="username" placeholder="請輸入用戶名">
<!-- 密碼輸入 -->
<input type="password" name="password" placeholder="請輸入密碼">
<!-- 提交按鈕 -->
<input type="submit" value="提交">
</form>5.2 進階表單元素
<!-- 選擇框 -->
<select name="country">
<option value="tw">台灣</option>
<option value="jp">日本</option>
<option value="us">美國</option>
</select>
<!-- 多行文本 -->
<textarea name="message" rows="4" cols="50"></textarea>
<!-- 單選按鈕 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<!-- 複選框 -->
<input type="checkbox" name="hobby" value="reading"> 閱讀
<input type="checkbox" name="hobby" value="sports"> 運動6. 表格製作
6.1 基本表格
<table border="1">
<tr>
<th>標題1</th>
<th>標題2</th>
</tr>
<tr>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>6.2 進階表格
<table border="1">
<thead>
<tr>
<th>標題1</th>
<th>標題2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">跨列儲存格</td>
</tr>
<tr>
<td rowspan="2">跨行儲存格</td>
<td>數據</td>
</tr>
</tbody>
</table>7. 語意化標籤
7.1 結構性標籤
<article>
<header>
<h1>文章標題</h1>
</header>
<section>
<h2>章節標題</h2>
<p>章節內容</p>
</section>
<footer>
<p>文章尾註</p>
</footer>
</article>7.2 其他語意化元素
<!-- 導航 -->
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關於</a></li>
</ul>
</nav>
<!-- 側邊欄 -->
<aside>
<h3>相關文章</h3>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
</ul>
</aside>8. HTML5 新特性
8.1 多媒體元素
<!-- 音頻 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的瀏覽器不支持音頻元素。
</audio>
<!-- 視頻 -->
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
您的瀏覽器不支持視頻元素。
</video>8.2 新表單元素
<!-- 日期選擇器 -->
<input type="date">
<!-- 顏色選擇器 -->
<input type="color">
<!-- 範圍滑塊 -->
<input type="range" min="0" max="100">
<!-- 電子郵件 -->
<input type="email">
<!-- 數字輸入 -->
<input type="number" min="0" max="100">9. 最佳實踐
9.1 文檔結構
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁描述">
<title>網頁標題</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>導航內容</nav>
</header>
<main>
<article>主要內容</article>
<aside>側邊欄</aside>
</main>
<footer>頁尾內容</footer>
</body>
</html>9.2 編碼規範
- 使用小寫標籤和屬性
- 正確縮進代碼
- 添加適當的註釋
- 使用有意義的 ID 和 class 名稱
- 確保標籤正確關閉
10. 實例教學
10.1 簡單網頁範例
<!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>
<header>
<h1>歡迎來到我的網頁</h1>
<nav>
<ul>
<li><a href="#about">關於我</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">聯絡方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>關於我</h2>
<p>這是我的自我介紹段落。</p>
</section>
<section id="portfolio">
<h2>作品集</h2>
<div class="portfolio-item">
<img src="project1.jpg" alt="專案1">
<h3>專案1</h3>
<p>專案描述</p>
</div>
</section>
<section id="contact">
<h2>聯絡方式</h2>
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required>
<label for="message">訊息：</label>
<textarea id="message" name="message"></textarea>
<button type="submit">發送</button>
</form>
</section>
</main>
<footer>
<p>© 2024 我的網頁。保留所有權利。</p>
</footer>
</body>
</html>總結
HTML 是網頁開發的基礎，掌握好這些基本元素和概念將有助於建立結構良好的網頁。重要的是要：
- 理解基本結構和元素
- 正確使用語意化標籤
- 遵循最佳實踐原則
- 保持代碼整潔有序
- 持續學習新特性