代码链接：https://gitee.com/GjqDream/html_learning/tree/master
网页截图：
代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title> 7 个人简介 8 </title> 9 <style> 10 header { 11 text-align: center; 12 font-size: 150%; 13 } 14 body { 15 background-image: url('source/image/Star.jpg'); 16 17 } 18 div.Contact, 19 nav { 20 text-align: center; 21 } 22 23 hr { 24 background-color: #395d7d; 25 height: 2px; 26 border: none; 27 /*去边框*/ 28 } 29 30 p { 31 color:dodgerblue; 32 display: inline; 33 } 34 </style> 35 </head> 36 37 <body> 38 <audio controls="controls" autoplay="autoplay"> 39 <source src="source/music/Home.mp3" type="audio/mpeg" /> 40 </audio> 41 <header> 42 <h1 style="color:skyblue">欢迎来到耿嘉祺的个人主页</h1> 43 </header> 44 <hr /><br /> 45 <nav> 46 <strong style="color:blueviolet">导航栏：</strong> 47 <a href="source/BasicInfo.html" target="_blank" style="color:blueviolet"><strong>基本信息</strong></a> | 48 <a href="source/Hobby.html" target="_blank" style="color:blueviolet"><strong>兴趣爱好</strong></a> 49 </nav> 50 <br /> 51 <div class="Contact"> 52 <img src="source/image/QQ.png" width="30px" height="30px" /> 53 <p><strong>1491063607</strong></p>  54 <img src="source/image/Tel.png" width="30px" height="30px" /> 55 <p><strong>18515989698</strong></p>  56 <img src="source/image/Mail.png" width="30px" height="30px" /> 57 <a href=mailto:1491063607@qq.com style="color: dodgerblue">Send email to me</a> 58 </div> 59 </body> 60 61 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>基本信息</title> 7 <style> 8 body { 9 background-image: url('image/Info.jpg'); 10 text-align: center; 11 } 12 13 table.Information { 14 color:darkturquoise; 15 } 16 a { 17 text-decoration: none; 18 } 19 </style> 20 </head> 21 22 <body> 23 <br /> 24 <div> 25 <img src="image/Avatar.png" width="300" height="300" /> 26 <br /> 27 <br /> 28 <table class="Information" align="center" border="1"> 29 <tr> 30 <th colspan="5" width="500">基本信息</th> 31 </tr> 32 <tr> 33 <td>姓名</td> 34 <td>年龄</td> 35 <td>性别</td> 36 <td>家乡</td> 37 <td>学历</td> 38 </tr> 39 <tr> 40 <td>耿嘉祺</td> 41 <td>19</td> 42 <td>男</td> 43 <td><a href="https://www.amap.com/search?query=%E5%8C%97%E4%BA%AC&city=630100&geoobj=101.652573%7C36.551228%7C102.015122%7C36.700567&zoom=12" target="_blank" style="color:blueviolet">北京</a></td> 44 <td>本科</td> 45 </tr> 46 </table> 47 <img src="image/School.png" width="260" height="260" /> 48 </div> 49 50 </body> 51 52 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>兴趣爱好</title> 7 <style type="text/css"> 8 body { 9 background-image: url('image/Hobby.jpg') 10 } 11 </style> 12 </head> 13 14 <body> 15 <audio controls="controls" autoplay="autoplay"> 16 <source src="music/Hobby.mp3" type="audio/mpeg" /> 17 </audio> 18 19 <table align="center" border="2"> 20 <tr> 21 <th colspan="3">学习新的编程语言</th> 22 </tr> 23 <tr> 24 <td><a href="http://www.cplusplus.com/" target="_blank"><img src="image/C.png" width="320" height="230" /></a></td> 25 <td><a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank"><img src="image/Java.png" width="320" height="230" /></a> </td> 26 <td><a href="https://www.python.org/" target="_blank"><img src="image/Python.png" width="320" height="230" /></a></td> 27 </tr> 28 </table> 29 <br /> 30 <table align="center" border="2"> 31 <tr> 32 <th colspan="3">游戏</th> 33 </tr> 34 <tr> 35 <td><a href="https://pvp.qq.com/" target="_blank"><img src="image/WZ.jpg" width="320" height="230" /></a></td> 36 <td><a href="https://www.origin.com/hkg/zh-tw/store/apex/apex" target="_blank"><img src="image/APEX.jpg" width="320" height="230" /></a></td> 37 <td><a href="https://www.pubg.com/" target="_blank"><img src="image/PUBG.jpg" width="320" height="230" /></a></td> 38 </tr> 39 </table> 40 </body> 41 42 </html>