html制作个人简历网页代码 用HTML代码制作一份个人简历！急求！
HTML\u4e2a\u4eba\u7b80\u5386\u600e\u4e48\u505a\uff1fHTML\u7f16\u5199\u4e2a\u4eba\u7b80\u5386\u4ee3\u7801table\u8868\u683c\u6837\u5f0f\u7684
\u4f7f\u7528\u684c\u9762\u90ae\u4ef6\u7a0b\u5e8f\u5982outlook\uff0cfoxmail\u53ef\u4ee5\u9009\u62e9html\u6a21\u677f\uff0c\u53d1\u9001\u7684\u90ae\u4ef6\u5747\u4f1a\u662fhtml\u683c\u5f0f\u7684\u3002
\u4f7f\u7528gmail\uff0c126\u7b49\u90ae\u7bb1\u5176\u672c\u751f\u63d0\u4f9b\u6587\u672c\u683c\u5f0f\u5316\uff0c\u800c\u683c\u5f0f\u5316\u5373\u4f7f\u4e3a\u6587\u5b57\u6dfb\u52a0\u4ee3\u7801\u53ea\u662f\u8fd9\u4e9b\u4ee3\u7801\u4f60\u770b\u4e0d\u5230\u800c\u5df2\uff0c\u4f60\u6240\u770b\u5230\u7684\u662f\u4ee3\u7801\u6267\u884c\u4ee5\u540e\u7684\u7ed3\u679c\uff0c\u56e0\u6b64\u6211\u4f30\u8ba1\u5982\u679c\u4f60\u76f4\u63a5\u81ea\u884c\u7f16\u5199\u4ee3\u7801\u5728\u91cc\u9762\u4e5f\u662f\u53ef\u4ee5\u683c\u5f0f\u5316\u7684\uff0c\u5982\u679c\u662f\u8fd9\u6837\u4f60\u53ef\u4ee5\u7528\u7f51\u9875\u7f16\u8f91\u5de5\u5177\u5b9e\u73b0\u8bbe\u8ba1\u597d\u4f60\u7684\u7b80\u5386\u9875\u9762\u7136\u540e\u7c98\u8d34\u8fdb\u53bb\u5373\u53ef\uff0c
2\u65b9\u6cd5\u6ca1\u6709\u8bd5\u8fc7\uff0c\u5982\u679c\u4e0d\u884c\u53ef\u4ee5\u91c7\u7528\u4ee5\u4e0b\u65b9\u6cd5\uff0c\u5c06\u7b80\u5386\u7f51\u9875\u505a\u597d\uff0c\u7136\u540e\u7533\u8bf7\u4e00\u4e2a\u514d\u8d39\u7a7a\u95f4\u653e\u4e0a\u53bb\uff0c\u7136\u540e\u5728\u7ed9\u516c\u53f8\u7684\u90ae\u4ef6\u4e2d\u5199\u4e0a\u8fd9\u4e2a\u7f51\u9875\u7684\u8fde\u63a5\u5730\u5740
\u7528html+css\u5c06\u6548\u679c\u56fe\u7f16\u7801\u4e3a\u9759\u6001\u9875\uff08\u4e5f\u5c31\u662f\u4f60\u8bf4\u7684HTML\u7b80\u5386\u4e86\uff09\uff0c\u8fd9\u91cc\u9700\u8981\u62e5\u67093\u79cd\u77e5\u8bc6\u80fd\u529b\uff08\u57fa\u7840\u7684\u5e73\u9762\u8bbe\u8ba1\uff08photoshop\uff09/html/css\uff09
\u5efa\u4e00\u4e2a\u8868\u683c\uff0c7\u52178\u884c\uff0c\u7136\u540e\u628a\u90e8\u4efd\u5355\u5143\u683c\u5408\u5e76\u4e00\u4e0b\u5c31OK\u3002
\u65b0\u5efa\u7f51\u9875 \u59d3\u540d \u3000 \u6027\u522b \u3000 \u51fa\u751f\u5e74\u6708 \u3000 \uff08\u7167\u7247\uff09 \u7c4d\u8d2f \u3000 \u6c11\u65cf \u3000 \u653f\u6cbb\u9762\u8c8c \u3000 \u6bd5\u4e1a\u5b66\u6821 \u3000 \u6240\u5b66\u4e13\u4e1a \u3000 \u7231\u597d \u3000 \u4e2a\u4eba\u8bc4\u4ef7 \u3000 \u5b9e\u8df5\u7ecf\u5386 \u3000 \u6c42\u804c\u610f\u5411 \u3000 \u8054\u7cfb\u65b9\u5f0f \u3000
以下是我用html的相关知识制作的个人简历网页，话不多说先看看最终效果：
如上所示项目一共分为5个部分，分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图，作品展示用的是bootstrap里的轮播图，除此之外就是html的基础内容。下面我们展示一下项目的代码部分：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>我的个人简历</title>
<link rel="stylesheet" href="lib/css/color.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body >
<div class="jumbotron text-center" style="margin-bottom:0" id="grad1">
<img src="lib/pic/1.jpg" width="80px" height="80px" />
<h3>黄智奇</h3>
<p style="font-size: 15px;">2018年升入陕西国防工业职业技术学院，<br/>学习软件编程，对编程有浓厚的兴趣，
在老师的指导，<br/>和自己的课下练习，渐渐对编程有了更深入的了解。<br/>在课余时间，
我喜欢唱歌、跑步和打乒乓球。<br/>喜好结交志同道合的朋友，一起分享学习的生活的经验。<br/>
有良好的团队意识，学习时认真负责。 </p>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="#">专业技能</a>-->
</div>
<div id="relation">
<table class="table table-striped">
<tbody>
<tr align="center">
<td><a href="#email"><button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-envelope"></span>
</button></a></td>
<td> <a href="#email"><button type="button" class="btn btn-primary btn-lg">
<span class=" glyphicon glyphicon-earphone"></span>
</button></a></td>
<td><a href="https://me.csdn.net/qq_44892582" target="_blank"><button type="button" class="btn btn-primary btn-lg">
<span class=" glyphicon glyphicon-user"></span>
</button></a></td>
</tr>
</tbody>
</table>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-justified">
<li><a href="#main">专业技能</a></li>
<li><a href="#project">项目经验</a></li>
<li><a href="#myCarousel">作品展示</a></li>
<li><a href="#education">教育经历</a></li>
<li><a href="#relation">联系方式</a></li>
</ul>
</div>
</div>
</nav>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:
50%;height:400px;left: 25%;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '专业技能平均分'
},
tooltip: {},
legend: {
data:['分数'],
},
xAxis: {
data: ["Java语言","mysql数据库","Javascript语言","web开发","ssm框架","springboot框架"],axisLabel: {
// inside: true, 隐藏x轴内容
// 改变x轴字体颜色
// textStyle: {
// color: '#8B4500'
// }
},
},
yAxis: {},
series: [{
name: '分数',
type: 'bar',
//改变图表颜色
color:['#8EE5EE'],
data: [85, 95, 82, 90, 80, 80]
}],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<ul class="list-unstyled" align="center">
<li>Java基础:<br/>
我入门时首先学的就是Java基础，然后再到Java高级开发，<br/>
在学习过程中老师细致的教学为我们打下了牢固的java基础。 </li>
<li>mysql数据库:<br/>
mysql数据库是我们大一第二学期开的课，配合Java高级开发一起学习的科目，<br/>
因为自己本身就喜欢数据库的一些东西，所有mysql数据库也有良好的基础。</li>
<li>Javascript语言：<br/>
在学JavaScript之前我有良好的html5和css基础，所学习JavaScript时也是十分顺利的掌握了课本里的内容。</li>
<li>web开发:<br/>
web开发是我最喜爱的科目之一，servlet的学习给我启发深刻。</li>
<li>ssm框架:<br/>
ssm框架相比springboot而言是比较繁琐的，但是在学习和理解起来却比springboot更容易让人掌握。</li>
<li>springboot框架:<br/>
springboot框架入门起来十分迅速，在基础的使用起来也是十分方便，但查看源码时，没有ssm容易让人理解。</li>
</ul>
<div class="container" align="center">
<div class="row">
<div class="col-sm-4">
<h3 class="text-info" id="project">项目名称</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#car">新能源汽车项目</a></li>
<li><a href="#city">咕泡商城项目</a></li>
<li><a href="#bug">爬虫项目</a></li>
</ul>
<hr class="hidden-sm hidden-md hidden-lg">
</div>
<div class="col-sm-8" align="left">
<h3 class="text-info">项目内容</h3>
<h2 id="car">新能源汽车</h2>
<h5>企业saas工坊</h5>
<p>新能源汽车项目是我们掌握smm框架知识后第一个实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。
该项目用到了，html5+css3，mysql数据库，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert
等技术。项目从开始到完成我们用了2个月的时间。该项目的主要是写一个汽车app社交平台，包括用户登录注册，用户上传车辆信息，统计用户车辆，分析故障车辆原因，
以及导航、朋友圈等功能一体的汽车平台。该项目用户的使用方法如下： <p>1.新用户进行登录注册。</p>
<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</p>
<p>3.新用户上传自己车辆信息，并绑定账号。</p>
<p>4.新用户可以上传自己车辆故障，系统自动查询车辆故障原因以及维修方案。</p>
<p>5.用户可以添加车友，在车友圈发布求助信息等。</p>
<p>6.用户还可以进行地图导航，以及查询公交车，出租车，飞机等交通工具的时间和行程。</p>
<p> 通过完成这个项目，让我获得了很大的进步。不论是前端知识还是后端知识，在该项目上
都得到了充分的展示。让我也一下子吸收了很多的知识与技能，为后面的项目打下了坚实的基础。</p>
</p>
<br>
<h2 id="city">咕泡商城</h2>
<h5>企业saas工坊</h5>
<p>咕泡商城项目是我们学完springboot之后的实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。
该项目用到了，html5+css3,mysql数据库,springboot框架,maven,web,javascript,jquery,ajax,echarts,bootstrap等技术。
项目从开始到完成我们用了10天的时间。该项目主要是写一个网上商城电商购物平台，包括用户登录注册，用户绑定信息，上传头像、昵称等个人信息，
用户主要可以在该平台上面购买各种商品，每种商品都做好了分类管理，用户点击分类名称或者准确搜索都能显示出自己想要的商品。用户点击商品就可以
链接到商品详情页面，不论是购物还是浏览商品都非常的方便。该项目用户的使用方法： <p>1.新用户进行登录注册。</p>
<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</p>
<p> 3.用户自由购买和浏览商品信息。</p>
该项目让我们体验了springboot的配置强大之处，没有繁琐的多余配置文件，所有配置都由一个配置文件解决，简化了我们smm框架配置的痛苦。 </p>
<br>
<h2 id="bug">爬虫</h2>
<h5>企业saas工坊</h5>
<p>爬虫项目是我们最近才做完的项目。该项目与以往项目不同，该项目是由工坊老师指导下，我们首次前后端分离合作的项目。一个团体3个人，分别做前端展示数据，后端爬取数据和数据清洗。
我在这个项目中做的是后端爬取数据。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技术。该项目主要是爬去51job网站上面的工作岗位，
我们主要爬取了与我们软件相关的工作岗位，共爬取了2万条数据处理并展示。该项目执行步骤如下： <p>1.后端爬取数据并存到数据库。</p>
<p>2.中间清洗数据，将数据改变为前端人员需要的格式。</p>
<p>3.前端人员根据需求展示数据。</p>
该项目让我们体会到了团队合作和团队分工明确的重要性，每个人做好属于自己的一份任务，环环相扣才能保质保量的完成项目。 </p>
</div></div>
</div>
<div id="myCarousel" class="carousel slide" style="border: solid; border-color: cornflowerblue;">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" align="center" >
<div class="item active">
<img src="C:\Users\1\Desktop\gpsc.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="First slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\pc1.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\xny.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\pc2.png" style="width: 80%;height: 800px; border: solid 5px; border-color: darkgray;" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a></div>
<div style="width: 100%; height: 220px; " >
<table class="table">
<caption style="text-align: center;"><h3 id="education" style="color: black;">教育经历</h3></caption>
<tbody style="text-align: center;">
<tr>
<td>2006.9.-2012.7</td>
<td>就读于xx小学</td>
</tr>
<tr>
<td>2012.9-2015.7 </td>
<td> 就读于xx初中</td>
</tr>
<tr>
<td>2015.9-2018.7 </td>
<td> 就读于xx高级中学</td>
</tr>
<tr>
<td>2018.9-至今 </td>
<td> 就读于陕西国防工业职业技术学院</td>
</tr>
</tbody></table></div>
<div class="jumbotron text-center" style="margin-bottom:0" >
<p id="email" align="left">
邮箱:[email protected]
电话号码：11111111111
个人博客:https://me.csdn.net/qq_44892582</p>
</div>
</body></html>
绛旓細涓嬮潰鎴戜滑灞曠ず涓涓嬮」鐩殑浠ｇ爜閮ㄥ垎: <!DOCTYPE html><html><head><meta charset="utf-8"><title>鎴戠殑涓汉绠鍘</title><link rel="stylesheet" href="lib/css/color.css"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https:/...
绛旓細HTML涓汉绠鍘嗕唬鐮濡備笅 <html> <head> <title>鐪熷疄鍚嶅瓧</title> <mate name="keywords" content="涓汉绠鍘"/> <mate name="description" content="XXXX鐨勪釜浜虹畝鍘"/> </head> <body> <table border=5 bordercolor=red align=center> <tr height=70 bgcolor=green align='center'> <td widt...
绛旓細<ul> <h2>涓汉绠鍘</h2> <li>濮撳悕锛歑XX</li> <li>骞撮緞锛歑X宀</li> <li>鐖卞ソ锛氭湕璇点佽涔 銆佷綋鑲</li> </ul> </div>
绛旓細鐢 table <table> <tr> <td>濮撳悕</td> <td>鏌愭煇</td> <td>鎬у埆</td> <td>鐢</td> <td>骞撮緞</td> <td>22</td> <td>姘戞棌</td> <td>姹夋棌</td> </tr> <tr> <td>濮撳悕</td> <td>鏌愭煇</td> <td>鎬у埆</td> <td>鐢</td> <td>骞撮緞</td> <td>22</td> <td>姘戞棌...
绛旓細璋佺粰涓敤HTML缂栧啓鐨勭畝鍘嗙殑婧愮爜!!! 鎴戠殑涓汉绠鍘鏄敤WORD鍋鐨,鏈変袱椤,浣嗘槸鎬昏寰椾笉濂,鎯崇敤HTML鏉ョ紪鍐,浣嗘槸浠ｇ爜濂藉鍟,璇烽棶涓嬮珮浜烘湁娌℃湁鏇寸畝鍗曠殑鏂规硶,鎴栬呮槸缁欎釜婧愮爜鎴戜慨鏀逛笅涔熷彲浠,鏈汉涓嶈儨鎰熸縺!!!... 鎴戠殑涓汉绠鍘嗘槸鐢╓ORD鍋氱殑,鏈変袱椤,浣嗘槸鎬昏寰椾笉濂,鎯崇敤HTML鏉ョ紪鍐,浣嗘槸浠ｇ爜濂藉鍟,璇烽棶涓嬮珮浜烘湁娌℃湁...
绛旓細HTML缂栧啓涓汉绠鍘嗕唬鐮table琛ㄦ牸鏍峰紡鐨 浣跨敤妗岄潰閭欢绋嬪簭濡俹utlook锛宖oxmail鍙互閫夋嫨html妯℃澘锛屽彂閫佺殑閭欢鍧囦細鏄痟tml鏍煎紡鐨勩備娇鐢╣mail锛126绛夐偖绠卞叾鏈敓鎻愪緵鏂囨湰鏍煎紡鍖栵紝鑰屾牸寮忓寲鍗充娇涓烘枃瀛楁坊鍔犱唬鐮佸彧鏄繖浜涗唬鐮佷綘鐪嬩笉鍒拌屽凡锛屼綘鎵鐪嬪埌鐨勬槸浠ｇ爜鎵ц浠ュ悗鐨勭粨鏋滐紝鍥犳鎴戜及璁″鏋滀綘鐩存帴鑷缂栧啓浠ｇ爜鍦ㄩ噷闈篃鏄彲浠ユ牸寮忓寲...
绛旓細<p><font color="yellow" size="20">濮撳悕</font></p> <
绛旓細棣栧厛锛屾垜缂栬緫涓涓渶绠鍗曠殑input锛屼负浜嗘柟渚夸粙缁嶏紝鍔犱笂涓鐐筸argin鏍峰紡锛岀劧鍚庤繖娆′富瑕佺爺绌秚ype="number"涓嬬殑鍏煎锛屾墍浠nput 鐨則ype璁剧疆涓簄umber銆傚叿浣撹鍥撅紝杩欎簺閮芥槸鍐欏湪html涓 2 杩愯鍚庯紝鍦ㄦ祻瑙堝櫒閲岄潰鐪嬩笅鏁堟灉锛屼笅闈㈠垎鍒槸璋锋瓕锛堥紶鏍囩Щ鍒版鍐呮墠浼氭湁绠ご锛夈佺伀鐙愩乮e9涓嬬殑鏁堟灉锛屽叾浠栨祻瑙堝櫒浣犱篃鍙互鑷繁娴嬭瘯...
绛旓細棣栧厛寰楁噦div+css缃戦〉甯冨眬
绛旓細缃戦〉鍒朵綔锛屾庝箞鍋氫釜浜虹畝鍘锛熸渶绠鍗曠殑鏂规硶灏辨槸鍦ㄧ櫨搴︽悳绱紝鐩存帴鎼滅储鈥绠鍘嗙綉椤妯＄増鈥濓紝灏卞彲浠ヤ簡锛岀劧鍚庣洿鎺ュ湪Dreamweaver涓墦寮灏卞彲浠ョ洿鎺ョ紪杈戜簡锛岋紙娉ㄦ剰锛屼綘鍙互鏇存敼绱犳潗锛屼絾鏄鍒垹闄ょ礌鏉愮殑鍚嶅瓧锛夛紝鐒跺悗閲嶆柊淇濆瓨鍗冲彲 flash閲屾庢牱鎵撳紑缃戦〉锛熼渶瑕侀氳繃浠ｇ爜鎵撳紑缃戦〉閾炬帴銆傚涓嬶細AS2:鍦ㄦ寜閽垨鑰呭奖鐗囧壀杈戜笂鍔犲涓嬩唬鐮...
