Free
$0/月
最受歡迎
Pro
$9/月
Team
$29/月
一步步加入 HTML 標籤，看頁面如何從空白變成完整的 SaaS 定價頁。
空白頁面
每個網頁都從一個空的容器開始。
<div class="page">
...
</div>加上導覽列與標題
用 <nav> 做品牌導覽，<header> 放主標題。
<div class="page">
<nav>
<span class="brand">SuperApp</span>
<a href="#">方案</a>
<a href="#">功能</a>
</nav>
<header>
<h1>選擇適合你的方案</h1>
<p>免費開始，隨時升級</p>
</header>
</div>加上價格卡片
用 <main> 包住三張卡片，每張有名稱、價格和按鈕。
<div class="page">
<nav>...</nav>
<header>...</header>
<main class="pricing">
<div class="card">
<h3>Free</h3>
<p>$0/月</p>
<button>開始使用</button>
</div>
<div class="card featured">
<h3>Pro</h3>
<p>$9/月</p>
<button>立即升級</button>
</div>
<div class="card">
<h3>Team</h3>
<p>$29/月</p>
<button>聯絡我們</button>
</div>
</main>
</div>加上功能列表
在每張卡片裡用 <ul> 列出包含的功能。
<div class="page">
<nav>...</nav>
<header>...</header>
<main>...</main>
<section class="features">
<h2>功能亮點</h2>
<ul>
<li>⚡ 即時協作</li>
<li>🤖 AI 助手</li>
<li>☁️ 無限儲存</li>
</ul>
</section>
</div>加上 Footer
用 <footer> 放版權與連結，完成頁面。
<div class="page">
<nav>...</nav>
<header>...</header>
<main>...</main>
<section>...</section>
<footer>
<p>© 2025 SuperApp</p>
<nav>
<a href="#">隱私權政策</a>
<a href="#">服務條款</a>
</nav>
</footer>
</div>看到了嗎？ 一個完整的產品頁面，其實就是用幾個標籤一層一層搭起來的：
<nav>導覽列
<header>頁面標題
<main>主要內容
<footer>頁尾資訊
每個標籤都有自己的語義角色。當你跟 AI 說「把 nav 裡的連結改成三個」或「main 裡面加一張卡片」，AI 就能精準定位你要改的地方。