🚀 HTML進階技巧詳細指南
深入學習HTML5語義化標籤、屬性使用和最佳實踐，讓你的網頁更專業！
🎯 HTML5語義化標籤詳解
語義化標籤不只是讓程式碼更好讀，更重要的是讓搜尋引擎、螢幕閱讀器等工具能更好地理解網頁結構！
📋 語義化標籤完整清單
<header>
網站或文章的頭部區域
通常包含標題、Logo、主要導航等。可以在頁面中使用多次（如文章內的header）。
<nav>
導航連結區域
專門用來包含導航連結，幫助使用者在網站中移動。可以是主導航、麵包屑或頁內導航。
<main>
主要內容區域
整個頁面的核心內容，每個頁面只能有一個main標籤，不能放在header、footer、nav或aside內。
<article>
獨立的文章內容
可以獨立存在的內容，如部落格文章、新聞報導、評論等。移除周圍內容後仍然有意義。
<section>
文檔中的區段
按主題分組的內容，通常有標題。用來將相關內容組織在一起，比div更有語義。
<aside>
側邊相關內容
與主要內容相關但不是核心的內容，如側邊欄、廣告、相關連結等。
<footer>
頁腳區域
包含頁面或區段的結尾資訊，如版權聲明、聯絡資訊、相關連結等。
<figure> & <figcaption>
圖片與說明文字
figure包含圖片、圖表等媒體內容，figcaption提供說明文字。兩者配合使用。
🏗️ 語義化網頁結構範例
完整的語義化網頁結構：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的部落格</title>
</head>
<body>
<!-- 網站頭部 -->
<header>
<h1>小明的科技部落格</h1>
<p>分享程式設計和科技新知</p>
</header>
<!-- 主要導航 -->
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#articles">文章</a></li>
<li><a href="#about">關於我</a></li>
<li><a href="#contact">聯絡</a></li>
</ul>
</nav>
<!-- 主要內容區域 -->
<main>
<!-- 文章區段 -->
<section id="articles">
<h2>最新文章</h2>
<!-- 單篇文章 -->
<article>
<header>
<h3>學習HTML5語義化標籤</h3>
<p>發布於 2024年8月2日 由 小明</p>
</header>
<p>今天要來分享HTML5的語義化標籤...</p>
<figure>
<img src="html5-semantic.jpg" alt="HTML5語義化標籤示意圖">
<figcaption>圖1：HTML5語義化標籤結構圖</figcaption>
</figure>
<p>使用語義化標籤的好處包括...</p>
<footer>
<p>標籤：HTML5, 網頁設計, 前端開發</p>
</footer>
</article>
</section>
</main>
<!-- 側邊欄 -->
<aside>
<section>
<h3>關於作者</h3>
<p>我是小明，一個熱愛程式設計的高中生...</p>
</section>
<section>
<h3>熱門文章</h3>
<ul>
<li><a href="#">CSS Grid布局完全指南</a></li>
<li><a href="#">JavaScript ES6新特性</a></li>
</ul>
</section>
</aside>
<!-- 網站頁腳 -->
<footer>
<p>© 2024 小明的科技部落格. 版權所有.</p>
<nav>
<a href="#privacy">隱私政策</a> |
<a href="#terms">使用條款</a>
</nav>
</footer>
</body>
</html>
視覺化呈現：
<header> 網站標題和描述
<nav> 主要導航選單
<main>
<section>
<article>
文章標題
文章內容...
<figure>
[圖片]
<figcaption>
<section>
<article>
文章標題
文章內容...
<figure>
[圖片]
<figcaption>
<aside>
側邊欄內容
• 關於作者
• 熱門文章
• 廣告區域
側邊欄內容
• 關於作者
• 熱門文章
• 廣告區域
⚖️ 語義化 vs 非語義化比較
❌ 非語義化寫法
<div class="header">
<div class="title">網站標題</div>
</div>
<div class="navigation">
<div class="menu-item">首頁</div>
<div class="menu-item">關於</div>
</div>
<div class="content">
<div class="post">
<div class="post-title">文章標題</div>
<div class="post-content">文章內容...</div>
</div>
</div>
<div class="footer">
<div>版權資訊</div>
</div>
問題：
- 搜尋引擎難以理解結構
- 螢幕閱讀器無法正確導航
- 程式碼可讀性差
- 維護困難
✅ 語義化寫法
<header>
<h1>網站標題</h1>
</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
</ul>
</nav>
<main>
<article>
<h2>文章標題</h2>
<p>文章內容...</p>
</article>
</main>
<footer>
<p>版權資訊</p>
</footer>
優點：
- SEO友善，搜尋排名更好
- 無障礙訪問支援
- 程式碼清晰易懂
- 未來維護容易
🔗 HTML屬性詳細解析
📌 基礎屬性詳解
1. id 屬性 - 唯一識別符
<!-- 每個頁面中，id必須是唯一的 -->
<div id="main-content">主要內容區域</div>
<h1 id="page-title">頁面標題</h1>
<button id="submit-btn">提交按鈕</button>
<!-- CSS中使用id選擇器 -->
<style>
#main-content {
background-color: #f8f9fa;
padding: 20px;
}
#page-title {
color: #e74c3c;
font-size: 2rem;
}
</style>
<!-- JavaScript中選取元素 -->
<script>
document.getElementById('submit-btn').addEventListener('click', function() {
alert('按鈕被點擊了！');
});
</script>
實際效果：
2. class 屬性 - 樣式類別
<!-- class可以重複使用，一個元素可以有多個class -->
<div class="card featured-card">特色卡片</div>
<div class="card">普通卡片</div>
<div class="card sale-card">促銷卡片</div>
<p class="text-large text-bold text-red">大字體粗體紅色文字</p>
<!-- CSS中使用class選擇器 -->
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin: 8px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.featured-card {
border-color: #e74c3c;
background-color: #fff5f5;
}
.text-large { font-size: 1.2rem; }
.text-bold { font-weight: bold; }
.text-red { color: #e74c3c; }
</style>
實際效果：
特色卡片
普通卡片
大字體粗體紅色文字
3. src 屬性 - 資源路徑
<!-- 圖片的src屬性 --> <img src="images/logo.png" alt="網站Logo"> <img src="https://example.com/photo.jpg" alt="外部圖片"> <img src="../assets/banner.jpg" alt="相對路徑圖片"> <!-- 其他使用src的標籤 --> <script src="js/main.js"></script> <iframe src="https://www.youtube.com/embed/video-id"></iframe> <audio src="music/song.mp3" controls></audio> <video src="videos/demo.mp4" controls></video> <!-- 路徑類型說明 --> <!-- 絕對路徑：https://example.com/image.jpg --> <!-- 相對路徑：./images/photo.jpg 或 images/photo.jpg --> <!-- 上層目錄：../assets/logo.png -->
實際效果：
注意：圖片無法載入時，會顯示alt屬性的文字
4. alt 屬性 - 替代文字（無障礙重點）
<!-- 好的alt文字範例 -->
<img src="cat.jpg" alt="一隻橘色的小貓坐在窗台上曬太陽">
<img src="chart.png" alt="2024年網站流量成長圖表，顯示流量增加了25%">
<img src="logo.png" alt="ABC公司官方標誌">
<!-- 裝飾性圖片可以使用空的alt -->
<img src="decoration.png" alt="">
<!-- 錯誤的alt文字範例 -->
<img src="photo.jpg" alt="照片"> <!-- 太模糊 -->
<img src="image1.jpg" alt="image1.jpg"> <!-- 檔名不是描述 -->
<img src="click-here.png" alt="點擊這裡"> <!-- 應該描述目的地 -->
<!-- 正確的連結圖片alt -->
<a href="products.html">
<img src="products-btn.png" alt="瀏覽產品頁面">
</a>
無障礙測試：
使用螢幕閱讀器時，好的alt文字讓視障使用者能理解圖片內容：
"圖片：一隻橘色的小貓坐在窗台上曬太陽"
🔍 其他重要屬性
title="提示文字"
滑鼠懸停時顯示的提示文字，提供額外資訊。
<a href="#" title="在新視窗開啟">連結</a>
data-*="自訂資料"
儲存自訂資料，常用於JavaScript操作。
<div data-user-id="123" data-role="admin"></div>
href="連結位址"
超連結的目標位址，可以是網址、錨點或其他資源。
<a href="https://example.com">外部連結</a>
target="_blank"
在新視窗或新分頁開啟連結。
<a href="#" target="_blank">新視窗開啟</a>
placeholder="提示文字"
表單輸入欄位的提示文字。
<input type="text" placeholder="請輸入您的姓名">
required
表單欄位必填屬性，不需要值。
<input type="email" required>
💡 HTML最佳實踐與常見錯誤
✅ 良好習慣詳解
✅
正確關閉標籤
<!-- 正確的標籤關閉 -->
<div>
<p>這是段落內容</p>
<ul>
<li>清單項目1</li>
<li>清單項目2</li>
</ul>
</div>
<!-- 自閉合標籤 -->
<img src="photo.jpg" alt="照片" />
<br />
<hr />
為什麼重要：防止布局錯亂，確保網頁正常顯示
❌
忘記關閉標籤
<!-- 錯誤：忘記關閉標籤 -->
<div>
<p>這是段落內容
<ul>
<li>清單項目1
<li>清單項目2
</ul>
<!-- 忘記關閉div -->
後果：可能導致樣式錯亂、JavaScript失效
✅
使用語義化標籤
<!-- 語義清楚的結構 -->
<article>
<header>
<h1>文章標題</h1>
<time datetime="2024-08-02">2024年8月2日</time>
</header>
<section>
<h2>章節標題</h2>
<p>章節內容...</p>
</section>
<footer>
<p>作者：小明</p>
</footer>
</article>
好處：SEO友善、無障礙支援、程式碼易讀
❌
過度使用div標籤
<!-- 缺乏語義的結構 -->
<div class="article">
<div class="header">
<div class="title">文章標題</div>
<div class="date">2024年8月2日</div>
</div>
<div class="content">
<div class="section-title">章節標題</div>
<div class="text">章節內容...</div>
</div>
</div>
問題：搜尋引擎難以理解、無障礙性差
✅
保持縮排整齊
<!-- 清楚的縮排結構 -->
<nav>
<ul>
<li>
<a href="#home">首頁</a>
</li>
<li>
<a href="#about">關於</a>
<ul>
<li><a href="#team">團隊</a></li>
<li><a href="#history">歷史</a></li>
</ul>
</li>
</ul>
</nav>
好處：易於閱讀、除錯容易、團隊協作友善
❌
混亂的程式碼格式
<!-- 難以閱讀的格式 --> <nav><ul><li><a href="#home">首頁</a></li><li><a href="#about">關於</a> <ul><li><a href="#team">團隊</a></li> <li><a href="#history">歷史</a></li></ul></li></ul></nav>
問題：難以維護、容易出錯、影響團隊效率
🎯 HTML代碼品質檢查清單
📋 自我檢查清單（點擊展開詳細說明）
🏗️ HTML結構檢查
- ✅ 是否有聲明？
- ✅ html標籤是否包含lang屬性？
- ✅ head區域是否包含meta charset？
- ✅ 是否有適當的title標籤？
- ✅ 所有標籤是否正確關閉？
- ✅ 標籤嵌套是否正確？
- ✅ 是否有孤立的結束標籤？
🎯 語義檢查
- ✅ 是否使用了適當的語義化標籤？
- ✅ 標題標籤（h1-h6）是否按層次使用？
- ✅ 是否避免跳過標題層級？
- ✅ 是否使用了main標籤來標記主要內容？
- ✅ 導航是否使用nav標籤？
- ✅ 文章內容是否使用article標籤？
- ✅ 是否適當使用了section標籤？
♿ 無障礙檢查
- ✅ 所有img標籤是否都有alt屬性？
- ✅ alt文字是否具有描述性？
- ✅ 表單元素是否有適當的label？
- ✅ 連結文字是否具有意義？
- ✅ 是否避免使用"點擊這裡"等模糊文字？
- ✅ 顏色對比是否足夠？
- ✅ 是否可以僅用鍵盤操作？
⚡ 效能檢查
- ✅ 圖片是否有適當的大小？
- ✅ 是否使用了適當的圖片格式？
- ✅ 外部資源是否必要？
- ✅ CSS和JS檔案是否已壓縮？
- ✅ 是否避免過多的HTTP請求？
- ✅ 是否使用了適當的快取策略？
- ✅ 程式碼是否簡潔避免冗餘？
🎯 實戰範例與練習
🛠️ 實作練習題
💪 挑戰練習
📝 練習1：個人履歷頁面
任務：使用語義化標籤建立一個個人履歷頁面
要求：
- 使用適當的語義化標籤結構
- 包含個人資訊、教育背景、工作經驗、技能等區塊
- 所有圖片都要有適當的alt屬性
- 聯絡資訊使用address標籤
- 技能評分可以使用progress或meter標籤
提示：
• 使用 <section> 分割不同主題
• 教育和工作經驗可以用 <article> 包裝
• 時間資訊使用 <time> 標籤
• 技能可以用 <dl>、<dt>、<dd> 結構
• 使用 <section> 分割不同主題
• 教育和工作經驗可以用 <article> 包裝
• 時間資訊使用 <time> 標籤
• 技能可以用 <dl>、<dt>、<dd> 結構
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>張小明 - 個人履歷</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 20px; }
.profile-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
section { margin: 30px 0; }
h1 { color: #2c3e50; }
h2 { color: #e74c3c; border-bottom: 1px solid #e74c3c; padding-bottom: 5px; }
.experience-item { margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 5px; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.skill-item { margin: 10px 0; }
progress { width: 100%; height: 20px; }
address { font-style: normal; }
</style>
</head>
<body>
<!-- 個人基本資訊 -->
<header>
<img src="profile.jpg" alt="張小明的大頭照" class="profile-img">
<h1>張小明</h1>
<p>前端工程師 | 網頁設計師</p>
<!-- 聯絡資訊 -->
<address>
📧 電子信箱：<a href="mailto:ming@example.com">ming@example.com</a><br>
📱 電話：<a href="tel:+886912345678">0912-345-678</a><br>
🌐 作品集：<a href="https://ming-portfolio.com" target="_blank">ming-portfolio.com</a><br>
💼 LinkedIn：<a href="https://linkedin.com/in/ming" target="_blank">linkedin.com/in/ming</a>
</address>
</header>
<main>
<!-- 個人簡介 -->
<section>
<h2>個人簡介</h2>
<p>
我是一位熱愛前端技術的工程師，擁有3年的網頁開發經驗。
專精於HTML5、CSS3、JavaScript，熟悉React和Vue.js框架。
喜歡學習新技術，關注使用者體驗設計，致力於創造美觀且實用的網頁應用。
</p>
</section>
<!-- 教育背景 -->
<section>
<h2>教育背景</h2>
<article class="experience-item">
<header>
<h3>國立台灣大學</h3>
<p>資訊工程學系 學士學位</p>
<time datetime="2018-09/2022-06">2018年9月 - 2022年6月</time>
</header>
<p>主修課程：程式設計、資料結構、演算法、資料庫系統、軟體工程</p>
<p>GPA：3.8/4.0</p>
</article>
<article class="experience-item">
<header>
<h3>建國高中</h3>
<p>數理資優班</p>
<time datetime="2015-09/2018-06">2015年9月 - 2018年6月</time>
</header>
<p>參與資訊奧林匹亞競賽，獲得全國第三名</p>
</article>
</section>
<!-- 工作經驗 -->
<section>
<h2>工作經驗</h2>
<article class="experience-item">
<header>
<h3>前端工程師 - 創新科技股份有限公司</h3>
<time datetime="2022-07/2024-08">2022年7月 - 至今</time>
</header>
<ul>
<li>負責公司官網和產品頁面的前端開發</li>
<li>使用React.js開發響應式網頁應用</li>
<li>優化網頁效能，提升載入速度30%</li>
<li>與UI/UX設計師合作，實現用戶友好的介面設計</li>
<li>參與代碼審查，維護高品質的程式碼標準</li>
</ul>
</article>
<article class="experience-item">
<header>
<h3>實習生 - 數位媒體工作室</h3>
<time datetime="2021-07/2021-08">2021年7月 - 2021年8月</time>
</header>
<ul>
<li>學習網頁設計基礎，使用HTML、CSS、JavaScript</li>
<li>協助製作客戶網站的靜態頁面</li>
<li>學習響應式設計和跨瀏覽器兼容性</li>
</ul>
</article>
</section>
<!-- 技能專長 -->
<section>
<h2>技能專長</h2>
<div class="skills-grid">
<div>
<h3>前端技術</h3>
<dl>
<dt>HTML5/CSS3</dt>
<dd>
<div class="skill-item">
<progress value="90" max="100">90%</progress>
<span>90%</span>
</div>
</dd>
<dt>JavaScript</dt>
<dd>
<div class="skill-item">
<progress value="85" max="100">85%</progress>
<span>85%</span>
</div>
</dd>
<dt>React.js</dt>
<dd>
<div class="skill-item">
<progress value="80" max="100">80%</progress>
<span>80%</span>
</div>
</dd>
</dl>
</div>
<div>
<h3>設計工具</h3>
<dl>
<dt>Figma</dt>
<dd>
<div class="skill-item">
<progress value="75" max="100">75%</progress>
<span>75%</span>
</div>
</dd>
<dt>Adobe Photoshop</dt>
<dd>
<div class="skill-item">
<progress value="70" max="100">70%</progress>
<span>70%</span>
</div>
</dd>
</dl>
</div>
</div>
</section>
<!-- 專案作品 -->
<section>
<h2>專案作品</h2>
<article class="experience-item">
<header>
<h3>電商購物網站</h3>
<p>React.js + Node.js 全端開發</p>
</header>
<figure>
<img src="project1.jpg" alt="電商購物網站截圖，顯示商品列表和購物車功能" style="width: 100%; max-width: 400px;">
<figcaption>響應式電商網站界面</figcaption>
</figure>
<p>功能包含商品瀏覽、購物車、會員系統、金流串接等</p>
<p><a href="https://github.com/ming/ecommerce" target="_blank">GitHub 程式碼</a> |
<a href="https://ecommerce-demo.com" target="_blank">線上展示</a></p>
</article>
<article class="experience-item">
<header>
<h3>天氣預報App</h3>
<p>Vue.js + Weather API</p>
</header>
<p>整合第三方天氣API，提供即時天氣資訊和未來一週預報</p>
<p><a href="https://github.com/ming/weather-app" target="_blank">GitHub 程式碼</a></p>
</article>
</section>
<!-- 證照與成就 -->
<section>
<h2>證照與成就</h2>
<ul>
<li>Google Analytics 認證 (<time datetime="2023">2023年</time>)</li>
<li>AWS Cloud Practitioner 認證 (<time datetime="2023">2023年</time>)</li>
<li>2022年公司最佳新人獎</li>
<li>大學專題競賽第一名 (<time datetime="2022">2022年</time>)</li>
</ul>
</section>
<!-- 語言能力 -->
<section>
<h2>語言能力</h2>
<dl>
<dt>中文（繁體）</dt>
<dd>母語</dd>
<dt>英文</dt>
<dd>
中高級 (TOEIC 850分)
<meter value="85" min="0" max="100">85%</meter>
</dd>
<dt>日文</dt>
<dd>
初級 (N4程度)
<meter value="40" min="0" max="100">40%</meter>
</dd>
</dl>
</section>
</main>
<footer>
<p><small>最後更新：<time datetime="2024-08-02">2024年8月2日</time></small></p>
</footer>
</body>
</html>
📝 練習2：產品展示頁面
任務：為電商網站建立產品詳情頁面
要求：
- 產品圖片使用figure和figcaption
- 價格和評分使用適當的標籤
- 產品規格使用表格或定義清單
- 用戶評論使用article標籤
- 相關產品使用aside區塊
提示：
• 價格可以用 <data> 標籤包裝
• 評分可以用 <meter> 或 <progress>
• 規格表用 <table> 或 <dl>
• 每則評論都是獨立的 <article>
• 價格可以用 <data> 標籤包裝
• 評分可以用 <meter> 或 <progress>
• 規格表用 <table> 或 <dl>
• 每則評論都是獨立的 <article>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone 15 Pro - 產品詳情頁面</title>
<style>
body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.product-gallery img { width: 100%; height: auto; border-radius: 10px; }
.price { font-size: 2rem; color: #e74c3c; font-weight: bold; }
.original-price { text-decoration: line-through; color: #999; font-size: 1.2rem; }
.rating { display: flex; align-items: center; gap: 10px; margin: 15px 0; }
.stars { color: #ffd700; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: #f8f9fa; }
.review { background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sidebar { background: #f8f9fa; padding: 20px; border-radius: 10px; }
.related-product { display: flex; gap: 15px; margin: 15px 0; padding: 15px; border: 1px solid #eee; border-radius: 8px; }
.related-product img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; }
@media (max-width: 768px) { .product-layout { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<header>
<nav>
<a href="#home">首頁</a> >
<a href="#phones">手機</a> >
<a href="#apple">Apple</a> >
<span>iPhone 15 Pro</span>
</nav>
</header>
<main>
<div class="product-layout">
<!-- 產品圖片區 -->
<section>
<figure>
<img src="iphone15pro-main.jpg" alt="iPhone 15 Pro 鈦藍色正面照，顯示其精緻的鈦金屬邊框和動態島設計">
<figcaption>iPhone 15 Pro - 鈦藍色</figcaption>
</figure>
<div class="thumbnail-gallery">
<figure>
<img src="iphone15pro-back.jpg" alt="iPhone 15 Pro 背面展示三鏡頭相機系統和 Apple 標誌">
<figcaption>背面設計</figcaption>
</figure>
<figure>
<img src="iphone15pro-side.jpg" alt="iPhone 15 Pro 側面展示 USB-C 連接埠和音量按鈕">
<figcaption>側面細節</figcaption>
</figure>
</div>
</section>
<!-- 產品資訊區 -->
<section>
<header>
<h1>Apple iPhone 15 Pro</h1>
<p>搭載 A17 Pro 晶片的專業級智慧型手機</p>
</header>
<!-- 評分 -->
<div class="rating">
<span class="stars">★★★★☆</span>
<meter value="4.2" min="1" max="5" title="平均評分 4.2 顆星">4.2/5</meter>
<span>4.2分 (128則評論)</span>
</div>
<!-- 價格 -->
<div class="pricing">
<data value="35900" class="price">NT$35,900</data>
<data value="39900" class="original-price">原價 NT$39,900</data>
<p>限時優惠，現省 NT$4,000</p>
</div>
<!-- 產品特色 -->
<section>
<h2>主要特色</h2>
<ul>
<li>A17 Pro 晶片，效能提升 20%</li>
<li>48MP 主相機，支援 5倍光學變焦</li>
<li>鈦金屬機身，輕盈耐用</li>
<li>6.1 吋 ProMotion 顯示器</li>
<li>USB-C 連接埠</li>
</ul>
</section>
<!-- 規格表 -->
<section>
<h2>詳細規格</h2>
<table>
<thead>
<tr>
<th>規格項目</th>
<th>詳細資訊</th>
</tr>
</thead>
<tbody>
<tr>
<td>處理器</td>
<td>A17 Pro 晶片</td>
</tr>
<tr>
<td>顯示器</td>
<td>6.1 吋 Super Retina XDR OLED</td>
</tr>
<tr>
<td>相機</td>
<td>48MP 主相機 + 12MP 超廣角 + 12MP 望遠</td>
</tr>
<tr>
<td>儲存容量</td>
<td>128GB / 256GB / 512GB / 1TB</td>
</tr>
<tr>
<td>電池續航</td>
<td>最高 23 小時影片播放</td>
</tr>
<tr>
<td>重量</td>
<td>187 公克</td>
</tr>
</tbody>
</table>
</section>
</section>
</div>
<!-- 用戶評論區 -->
<section>
<h2>用戶評論</h2>
<article class="review">
<header class="review-header">
<div>
<h3>科技達人小李</h3>
<div class="rating">
<span class="stars">★★★★★</span>
<span>5顆星</span>
</div>
</div>
<time datetime="2024-07-15">2024年7月15日</time>
</header>
<p>
<strong>超讚的相機升級！</strong>
A17 Pro 的效能真的很強，相機的 5 倍變焦非常實用，
拍照畫質比前一代明顯提升。鈦金屬材質手感也很棒，值得升級！
</p>
<footer>
<p>👍 有幫助 (25) | 📝 回覆</p>
</footer>
</article>
<article class="review">
<header class="review-header">
<div>
<h3>攝影愛好者小王</h3>
<div class="rating">
<span class="stars">★★★★☆</span>
<span>4顆星</span>
</div>
</div>
<time datetime="2024-07-20">2024年7月20日</time>
</header>
<p>
整體來說很滿意，相機功能強大，夜間拍攝效果不錯。
不過價格確實偏高，如果預算有限可以考慮標準版。
USB-C 終於來了，充電更方便！
</p>
<footer>
<p>👍 有幫助 (18) | 📝 回覆</p>
</footer>
</article>
<article class="review">
<header class="review-header">
<div>
<h3>商務人士陳先生</h3>
<div class="rating">
<span class="stars">★★★★★</span>
<span>5顆星</span>
</div>
</div>
<time datetime="2024-07-25">2024年7月25日</time>
</header>
<p>
作為商務使用非常滿意，處理器效能很強，
多工處理順暢。電池續航力也不錯，一整天使用沒問題。
動作按鈕很實用，可以快速啟動常用功能。
</p>
<footer>
<p>👍 有幫助 (32) | 📝 回覆</p>
</footer>
</article>
</section>
</main>
<!-- 相關產品側邊欄 -->
<aside class="sidebar">
<section>
<h2>相關產品推薦</h2>
<article class="related-product">
<img src="iphone15.jpg" alt="iPhone 15 標準版產品圖">
<div>
<h3><a href="#iphone15">iPhone 15</a></h3>
<p>A16 仿生晶片，48MP 相機</p>
<data value="28900">NT$28,900</data>
</div>
</article>
<article class="related-product">
<img src="iphone15promax.jpg" alt="iPhone 15 Pro Max 產品圖">
<div>
<h3><a href="#iphone15promax">iPhone 15 Pro Max</a></h3>
<p>6.7 吋大螢幕，更大電池</p>
<data value="42900">NT$42,900</data>
</div>
</article>
<article class="related-product">
<img src="airpods-pro.jpg" alt="AirPods Pro 第二代產品圖">
<div>
<h3><a href="#airpods-pro">AirPods Pro (第2代)</a></h3>
<p>主動降噪，USB-C 充電</p>
<data value="7490">NT$7,490</data>
</div>
</article>
</section>
<section>
<h2>購買須知</h2>
<ul>
<li>✅ 全台免費宅配</li>
<li>✅ 7天鑑賞期</li>
<li>✅ 原廠一年保固</li>
<li>✅ 分期付款 0 利率</li>
<li>✅ 舊機換新現金回收</li>
</ul>
</section>
</aside>
<footer>
<p>© 2024 科技商城. 版權所有. | <a href="#privacy">隱私政策</a> | <a href="#terms">服務條款</a></p>
</footer>
</body>
</html>
📝 練習3：新聞網站首頁
任務：建立新聞網站的首頁布局
要求：
- 頭條新聞使用main和article
- 新聞分類使用section組織
- 每則新聞包含標題、摘要、時間、作者
- 側邊欄包含熱門新聞和廣告
- 使用適當的標題層次（h1-h6）
提示：
• 網站標題用 h1，分類標題用 h2
• 新聞標題用 h3，確保層次正確
• 發布時間用 <time> 標籤
• 作者資訊可以用 <address> 或簡單的 <p>
• 網站標題用 h1，分類標題用 h2
• 新聞標題用 h3，確保層次正確
• 發布時間用 <time> 標籤
• 作者資訊可以用 <address> 或簡單的 <p>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>台灣新聞網 - 即時新聞</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.header { background: #2c3e50; color: white; padding: 1rem 0; }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.main-nav ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
.main-nav a { color: white; text-decoration: none; }
.layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 20px; }
.featured-news { background: #e74c3c; color: white; padding: 30px; border-radius: 10px; margin-bottom: 30px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.news-card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.news-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 15px; }
.news-meta { display: flex; justify-content: space-between; color: #666; font-size: 0.9rem; margin: 10px 0; }
.category-section { margin: 30px 0; }
.category-title { color: #2c3e50; border-bottom: 3px solid #e74c3c; padding-bottom: 10px; margin-bottom: 20px; }
.sidebar { padding: 20px; }
.sidebar-section { background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.trending-item { padding: 15px 0; border-bottom: 1px solid #eee; }
.trending-item:last-child { border-bottom: none; }
.ad-banner { background: #f39c12; color: white; padding: 30px; text-align: center; border-radius: 10px; }
@media (max-width: 768px) { .layout { grid-template-columns: 1fr; } .main-nav ul { flex-direction: column; gap: 1rem; } }
</style>
</head>
<body>
<!-- 網站頭部 -->
<header class="header">
<div class="nav-container">
<h1>台灣新聞網</h1>
<p>即時、準確、深度的新聞報導</p>
<nav class="main-nav" role="navigation" aria-label="主要導航">
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#politics">政治</a></li>
<li><a href="#economy">經濟</a></li>
<li><a href="#technology">科技</a></li>
<li><a href="#sports">體育</a></li>
<li><a href="#entertainment">娛樂</a></li>
<li><a href="#international">國際</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="layout">
<!-- 主要內容區域 -->
<main role="main">
<!-- 頭條新聞 -->
<section class="featured-news">
<article>
<header>
<h2>💥 頭條新聞</h2>
<h3><a href="#featured-article" style="color: white;">
台積電宣布3奈米製程重大突破，預計明年量產
</a></h3>
<div class="news-meta" style="color: rgba(255,255,255,0.8);">
<span>記者：<address style="display: inline;">科技組 張記者</address></span>
<time datetime="2024-08-02T14:30:00+08:00">2024年8月2日 14:30</time>
</div>
</header>
<p>
台積電今日在法說會上宣布，其3奈米製程技術獲得重大突破，
良率已達到商業化標準。預計將於明年第二季開始量產，
首批客戶包括蘋果、NVIDIA等國際大廠...
</p>
</article>
</section>
<!-- 政治新聞區塊 -->
<section class="category-section" id="politics">
<h2 class="category-title">🏛️ 政治新聞</h2>
<div class="news-grid">
<article class="news-card">
<img src="politics1.jpg" alt="立法院會議場景，立委們正在進行法案討論">
<header>
<h3><a href="#politics-1">立法院通過重要法案，影響民眾權益</a></h3>
<div class="news-meta">
<span>政治組 李記者</span>
<time datetime="2024-08-02T12:00:00+08:00">12:00</time>
</div>
</header>
<p>立法院今日三讀通過多項重要法案，涉及勞工權益、環境保護等議題...</p>
</article>
<article class="news-card">
<img src="politics2.jpg" alt="縣市首長聯合記者會現場">
<header>
<h3><a href="#politics-2">六都首長會議達成共識，推動區域合作</a></h3>
<div class="news-meta">
<span>地方組 王記者</span>
<time datetime="2024-08-02T10:30:00+08:00">10:30</time>
</div>
</header>
<p>六都首長在台北舉行聯合會議，就交通建設、環保政策等議題達成多項共識...</p>
</article>
</div>
</section>
<!-- 經濟新聞區塊 -->
<section class="category-section" id="economy">
<h2 class="category-title">💰 經濟新聞</h2>
<div class="news-grid">
<article class="news-card">
<img src="economy1.jpg" alt="台北101大樓和金融區天際線">
<header>
<h3><a href="#economy-1">台股創新高，市值突破60兆大關</a></h3>
<div class="news-meta">
<span>財經組 陳記者</span>
<time datetime="2024-08-02T15:30:00+08:00">15:30</time>
</div>
</header>
<p>受到AI概念股帶動，台股今日再創歷史新高，加權指數突破22,000點大關...</p>
</article>
<article class="news-card">
<img src="economy2.jpg" alt="央行總裁在記者會上發言">
<header>
<h3><a href="#economy-2">央行決議利率政策，維持現有水準</a></h3>
<div class="news-meta">
<span>財經組 劉記者</span>
<time datetime="2024-08-02T16:00:00+08:00">16:00</time>
</div>
</header>
<p>中央銀行理監事會決議維持重貼現率1.875%不變，符合市場預期...</p>
</article>
</div>
</section>
<!-- 科技新聞區塊 -->
<section class="category-section" id="technology">
<h2 class="category-title">💻 科技新聞</h2>
<div class="news-grid">
<article class="news-card">
<img src="tech1.jpg" alt="AI晶片和電路板特寫">
<header>
<h3><a href="#tech-1">AI晶片需求爆發，台廠搶攻千億商機</a></h3>
<div class="news-meta">
<span>科技組 吳記者</span>
<time datetime="2024-08-02T11:45:00+08:00">11:45</time>
</div>
</header>
<p>隨著ChatGPT等AI應用普及，AI晶片需求暴增，台灣半導體廠商受惠...</p>
</article>
<article class="news-card">
<img src="tech2.jpg" alt="5G基站和通訊設備">
<header>
<h3><a href="#tech-2">5G建設加速，全台覆蓋率達85%</a></h3>
<div class="news-meta">
<span>科技組 黃記者</span>
<time datetime="2024-08-02T13:20:00+08:00">13:20</time>
</div>
</header>
<p>電信三雄積極建設5G網路，全台覆蓋率已達85%，預計年底突破90%...</p>
</article>
</div>
</section>
<!-- 體育新聞區塊 -->
<section class="category-section" id="sports">
<h2 class="category-title">⚽ 體育新聞</h2>
<div class="news-grid">
<article class="news-card">
<img src="sports1.jpg" alt="棒球比賽精彩瞬間，球員滑壘上壘">
<header>
<h3><a href="#sports-1">中華職棒季後賽開打，門票秒殺</a></h3>
<div class="news-meta">
<span>體育組 林記者</span>
<time datetime="2024-08-02T18:00:00+08:00">18:00</time>
</div>
</header>
<p>中華職棒季後賽即將開打，各隊門票銷售火熱，主場門票在開賣30分鐘內售罄...</p>
</article>
<article class="news-card">
<img src="sports2.jpg" alt="台灣選手在國際賽事中奪牌的慶祝畫面">
<header>
<h3><a href="#sports-2">台灣選手世大運再創佳績，金牌數破紀錄</a></h3>
<div class="news-meta">
<span>體育組 周記者</span>
<time datetime="2024-08-02T20:30:00+08:00">20:30</time>
</div>
</header>
<p>台灣代表團在世界大學運動會表現亮眼，目前已獲得15面金牌，創下歷史新高...</p>
</article>
</div>
</section>
</main>
<!-- 側邊欄 -->
<aside class="sidebar" role="complementary">
<!-- 熱門新聞 -->
<section class="sidebar-section">
<h2>🔥 熱門新聞</h2>
<article class="trending-item">
<h3><a href="#trending-1">颱風最新動態：預計明日登陸東岸</a></h3>
<div class="news-meta">
<time datetime="2024-08-02T08:00:00+08:00">08:00</time>
<span>👁️ 50,234 次觀看</span>
</div>
</article>
<article class="trending-item">
<h3><a href="#trending-2">疫苗政策更新，第四劑開放預約</a></h3>
<div class="news-meta">
<time datetime="2024-08-02T09:15:00+08:00">09:15</time>
<span>👁️ 42,156 次觀看</span>
</div>
</article>
<article class="trending-item">
<h3><a href="#trending-3">房價再創新高，專家分析後市走向</a></h3>
<div class="news-meta">
<time datetime="2024-08-02T07:30:00+08:00">07:30</time>
<span>👁️ 38,947 次觀看</span>
</div>
</article>
<article class="trending-item">
<h3><a href="#trending-4">新創公司獲億元投資，聚焦綠能技術</a></h3>
<div class="news-meta">
<time datetime="2024-08-02T14:45:00+08:00">14:45</time>
<span>👁️ 28,365 次觀看</span>
</div>
</article>
<article class="trending-item">
<h3><a href="#trending-5">名人結婚消息引發關注，網友祝福</a></h3>
<div class="news-meta">
<time datetime="2024-08-02T16:20:00+08:00">16:20</time>
<span>👁️ 25,789 次觀看</span>
</div>
</article>
</section>
<!-- 即時天氣 -->
<section class="sidebar-section">
<h2>🌤️ 即時天氣</h2>
<div>
<h3>台北</h3>
<p>🌤️ 多雲時晴 28°C</p>
<p>降雨機率：30% | 濕度：65%</p>
</div>
<div>
<h3>高雄</h3>
<p>☀️ 晴朗 32°C</p>
<p>降雨機率：10% | 濕度：55%</p>
</div>
</section>
<!-- 廣告區塊 -->
<section class="ad-banner">
<h2>📢 推廣內容</h2>
<h3>線上課程限時優惠</h3>
<p>程式設計、數位行銷、語言學習</p>
<p>現在報名享5折優惠！</p>
<button style="background: white; color: #f39c12; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold;">立即查看</button>
</section>
<!-- 股市資訊 -->
<section class="sidebar-section">
<h2>📈 股市快報</h2>
<table style="width: 100%; font-size: 0.9rem;">
<thead>
<tr>
<th>指數</th>
<th>現值</th>
<th>漲跌</th>
</tr>
</thead>
<tbody>
<tr>
<td>加權指數</td>
<td>22,156</td>
<td style="color: red;">+45.6</td>
</tr>
<tr>
<td>櫃買指數</td>
<td>289.4</td>
<td style="color: red;">+2.1</td>
</tr>
<tr>
<td>台積電</td>
<td>945</td>
<td style="color: green;">-5.0</td>
</tr>
</tbody>
</table>
<p><small>更新時間：<time datetime="2024-08-02T13:30:00+08:00">13:30</time></small></p>
</section>
</aside>
</div>
</div>
<!-- 網站頁腳 -->
<footer style="background: #2c3e50; color: white; padding: 40px 0; margin-top: 40px;">
<div class="container">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
<section>
<h3>關於我們</h3>
<p>台灣新聞網致力於提供即時、準確、深度的新聞報導，是您獲取資訊的最佳選擇。</p>
</section>
<section>
<h3>新聞分類</h3>
<nav>
<ul style="list-style: none; padding: 0;">
<li><a href="#politics" style="color: white;">政治</a></li>
<li><a href="#economy" style="color: white;">經濟</a></li>
<li><a href="#technology" style="color: white;">科技</a></li>
<li><a href="#sports" style="color: white;">體育</a></li>
</ul>
</nav>
</section>
<section>
<h3>聯絡我們</h3>
<address style="font-style: normal;">
📧 新聞爆料：news@taiwannews.com<br>
📞 服務專線：02-1234-5678<br>
📍 地址：台北市信義區松高路100號
</address>
</section>
<section>
<h3>追蹤我們</h3>
<div>
<a href="#facebook" style="color: white; margin-right: 15px;">📘 Facebook</a>
<a href="#twitter" style="color: white; margin-right: 15px;">🐦 Twitter</a>
<a href="#youtube" style="color: white;">📺 YouTube</a>
</div>
</section>
</div>
<hr style="margin: 30px 0; border: none; border-top: 1px solid #34495e;">
<div style="text-align: center;">
<p><small>
© 2024 台灣新聞網. 版權所有. |
<a href="#privacy" style="color: white;">隱私政策</a> |
<a href="#terms" style="color: white;">使用條款</a> |
<a href="#sitemap" style="color: white;">網站地圖</a>
</small></p>
</div>
</div>
</footer>
</body>
</html>
🔍 HTML驗證工具
W3C Markup Validator
官方HTML驗證工具
檢查HTML語法錯誤和標準合規性
🔗 validator.w3.org
HTML5 Outliner
文檔結構分析工具
檢查標題層次和文檔大綱結構
🔗 在線工具
WAVE Web Accessibility
無障礙檢測工具
檢查無障礙問題和改進建議
🔗 wave.webaim.org
Browser DevTools
瀏覽器開發者工具
檢查HTML結構和除錯
F12 或右鍵「檢查」開啟
🎓 總結與下一步
🎉 恭喜你完成HTML進階技巧學習！
現在你已經掌握了語義化標籤、屬性使用和最佳實踐， 可以建立更專業、更具語義的網頁結構了！
✅ 已學會
- HTML5語義化標籤
- 屬性正確使用
- 最佳實踐準則
- 無障礙設計概念
- 三個完整實作範例
🎯 下一步
- 學習CSS美化技巧
- 掌握響應式設計
- JavaScript互動功能
- 完整專案實作
- 進階框架學習