今天我們來學習一下如何使用HTML5來制作一個精美的個人簡歷網頁。以下是一個樣例的代碼：
<html> <head> <title>我的個人簡歷</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <h1>王大錘的個人簡歷</h1> <p>Web前端工程師 / 南京市</p> </div> <div class="main"> <h2>個人信息</h2> <ul> <li>姓名：王大錘</li> <li>電話：13888888888</li> <li>郵箱：wangdachui@example.com</li> <li>地址：南京市xxxxxxxxx</li> </ul> <h2>教育經歷</h2> <ul> <li>本科：xxxx大學，軟件工程專業，2015-2019</li> <li>研究生：xxxx大學，計算機科學與技術專業，2019-2021（在讀）</li> </ul> <h2>工作經歷</h2> <ul> <li>xxxx公司，前端實習生，2018年7月-2018年9月</li> <li>yyyy公司，前端工程師，2019年7月-2020年12月</li> <li>zzzz公司，前端工程師，2021年3月至今</li> </ul> <h2>技能</h2> <ul> <li>熟悉HTML5/CSS3/JavaScript</li> <li>熟悉Vue.js/React等常用前端框架</li> <li>熟練使用Git版本控制工具</li> </ul> </div> </body> </html>
在這段代碼中，我們使用了HTML5的新標簽來構建我們的個人簡歷。其中，<header>標簽用于定義頁面的頭部，<main>標簽用于定義頁面主要內容，<ul>和<li>標簽用于創建列表，<h1>~<h6>標簽用于定義標題，<p>標簽用于定義段落，<a>標簽用于創建超鏈接等。
當然，為了讓我們的網頁看起來更美觀，我們還需要使用CSS來為網頁添加樣式。以下是一個簡單的樣式文件：
.header {
background-color: #f0f0f0;
padding: 20px;
}
.main {
margin: 20px;
}
ul {
list-style-type: none;
}
h2 {
border-bottom: 1px solid #999;
padding-bottom: 5px;
}在這個樣式文件中，我們使用了類選擇器和元素選擇器來為各個元素添加樣式。例如，在.header類中，我們定義了背景顏色和內邊距；在ul元素中，我們取消了默認的列表樣式；在h2元素中，我們添加了下邊框和小間距等。
可以看到，HTML5和CSS3的出現為前端開發帶來了更多的便利，并且讓網頁的制作變得更加靈活和多樣化。希望大家能夠通過學習本文，掌握HTML5和CSS3的基本使用方法，為自己的網頁開發之路打下堅實的基礎。
上一篇less2css 路徑
下一篇html5網頁代碼下載