HTML5是一種最新的標準版本，它大大改善了創造動態web頁面的方式。而個人主頁是我們展示自己的重要渠道，下面我們就來看看如何在HTML5中制作一個漂亮的個人主頁。
首先，我們需要建立一個基本的HTML5文檔結構，代碼如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>我的個人主頁</title> </head> <body> </body> </html>接下來，在<body>元素中加入我們的個人信息，比如姓名、職業、聯系方式等等，代碼如下：
<div> <h1>張三</h1> <h2>前端工程師</h2> <p>郵箱：zhangsan@qq.com</p> <p>電話：12345678910</p> </div>然后我們在頁面中加入我們的個人照片，代碼如下：
<div> <img src="myphoto.jpg" alt="我的照片"> </div>接下來我們可以添加一些關于我們的內容，比如我們的背景、工作經驗等等。代碼如下：
<div> <h2>關于我</h2> <p>我是一名熱愛前端開發的工程師，我熟悉HTML、CSS、JavaScript等前端技術，同時我也掌握了一些后端開發技術，比如PHP、Node.js等等。</p> </div> <div> <h2>工作經驗</h2> <p>2015年至今：某互聯網公司前端工程師</p> <p>2013年-2015年：某軟件公司PHP工程師</p> </div>最后，我們可以加入一些CSS樣式來美化我們的頁面，讓它看起來更加具有吸引力。代碼如下：
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
div {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 36px;
color: #333;
margin-bottom: 10px;
}
h2 {
font-size: 24px;
color: #333;
margin-top: 20px;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: #666;
margin-bottom: 10px;
}
img {
border-radius: 50%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
</style>這就是一個簡單的個人主頁的HTML5制作步驟，希望能給初學者一些幫助。上一篇柵格化布局css