主要內容
這是主要的內容區域。
程式碼範例
HTML 程式碼範例
豐富的實用範例，從基礎到進階，幫助您快速掌握 HTML 開發技能
基礎範例
HTML 基礎知識的實際應用
個人簡歷
使用 HTML 創建專業的個人簡歷頁面
技能專長
HTML5
CSS3
JavaScript
React
工作經歷
前端工程師
科技公司 | 2020 - 至今
HTML 程式碼
<header class="resume-header">
<img src="avatar.jpg" alt="頭像" class="avatar">
<div class="resume-info">
<h1>張小明</h1>
<p>前端開發工程師</p>
<div class="contact-info">
<span><i class="fas fa-envelope"></i> [email protected]</span>
<span><i class="fas fa-phone"></i> +123456</span>
</div>
</div>
</header>
<div class="resume-body">
<div class="resume-section">
<h2>技能專長</h2>
<div class="skills">
<span class="skill-tag">HTML5</span>
<span class="skill-tag">CSS3</span>
<span class="skill-tag">JavaScript</span>
</div>
</div>
</div>響應式導航菜單
創建一個簡潔的導航菜單
HTML 程式碼
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關於</a></li>
<li><a href="#services">服務</a></li>
<li><a href="#contact">聯繫</a></li>
</ul>
</nav>圖片展示庫
創建一個簡單的圖片展示佈局
HTML 程式碼
<div class="gallery">
<img src="image1.jpg" alt="圖片1">
<img src="image2.jpg" alt="圖片2">
<img src="image3.jpg" alt="圖片3">
<img src="image4.jpg" alt="圖片4">
</div>聯繫表單
創建一個基本的聯繫表單
HTML 程式碼
<form class="contact-form">
<input type="text" placeholder="姓名">
<input type="email" placeholder="郵箱">
<textarea placeholder="留言"></textarea>
<button type="submit">提交</button>
</form>佈局範例
網頁佈局和結構設計
兩欄佈局
創建簡單的兩欄頁面佈局
HTML 程式碼
<div class="two-column-layout">
<div class="sidebar">
<h2>側邊欄</h2>
<ul>
<li>連結 1</li>
<li>連結 2</li>
<li>連結 3</li>
</ul>
</div>
<div class="main-content">
<h2>主要內容</h2>
<p>這是主要的內容區域。</p>
</div>
</div>卡片佈局
創建現代化的卡片式佈局
卡片 1
這是第一個卡片的內容。
卡片 2
這是第二個卡片的內容。
卡片 3
這是第三個卡片的內容。
HTML 程式碼
<div class="card-container">
<div class="card">
<h3>卡片 1</h3>
<p>這是第一個卡片的內容。</p>
</div>
<div class="card">
<h3>卡片 2</h3>
<p>這是第二個卡片的內容。</p>
</div>
<div class="card">
<h3>卡片 3</h3>
<p>這是第三個卡片的內容。</p>
</div>
</div>
實踐練習
互動式程式碼練習
在瀏覽器中直接編寫和測試 HTML 程式碼，即時查看結果
HTML
預覽
範例練習
個人簡歷
簡單
根據提供的模板，創建一個完整的個人簡歷頁面
導航菜單
簡單
創建一個包含下拉選單的導航欄
圖片庫
中等
創建一個響應式的圖片展示庫