以下是我用html的相關(guān)知識(shí)制作的個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)，話不多說(shuō)先看看最終效果：
如上所示項(xiàng)目一共分為5個(gè)部分，分別對(duì)應(yīng)導(dǎo)航欄的5個(gè)內(nèi)容。其中項(xiàng)目技能用的是echarts里的柱狀圖，作品展示用的是bootstrap里的輪播圖，除此之外就是html的基礎(chǔ)內(nèi)容。下面我們展示一下項(xiàng)目的代碼部分：
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8"><title
>我的個(gè)人簡(jiǎn)歷
</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年升入陜西國(guó)防工業(yè)職業(yè)技術(shù)學(xué)院，
<br
/>學(xué)習(xí)軟件編程，對(duì)編程有濃厚的興趣，在老師的指導(dǎo)，
<br
/>和自己的課下練習(xí)，漸漸對(duì)編程有了更深入的了解。
<br
/>在課余時(shí)間，我喜歡唱歌、跑步和打乒乓球。
<br
/>喜好結(jié)交志同道合的朋友，一起分享學(xué)習(xí)的生活的經(jīng)驗(yàn)。
<br
/>有良好的團(tuán)隊(duì)意識(shí)，學(xué)習(xí)時(shí)認(rèn)真負(fù)責(zé)。
</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
="#">專業(yè)技能
</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">專業(yè)技能
</a
></li
><li
><a href
="#project">項(xiàng)目經(jīng)驗(yàn)
</a
></li
><li
><a href
="#myCarousel">作品展示
</a
></li
><li
><a href
="#education">教育經(jīng)歷
</a
></li
><li
><a href
="#relation">聯(lián)系方式
</a
></li
></ul
></div
></div
></nav
><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom
--><div id
="main" style
="width
: 50%;height
:400px
;left
: 25%;"
></div
><script type
="text/javascript">var myChart
= echarts
.init(document
.getElementById('main'));var option
= {title
: {text
: '專業(yè)技能平均分'},tooltip
: {},legend
: {data
:['分?jǐn)?shù)'], },xAxis
: {data
: ["Java語(yǔ)言","mysql數(shù)據(jù)庫(kù)","Javascript語(yǔ)言","web開(kāi)發(fā)","ssm框架","springboot框架"],axisLabel
: {},},yAxis
: {},series
: [{name
: '分?jǐn)?shù)',type
: 'bar',color
:['#8EE5EE'],data
: [85, 95, 82, 90, 80, 80]}],};myChart
.setOption(option
);</script
><ul
class="list-unstyled" align
="center"><li
>Java基礎(chǔ)
:<br
/>我入門(mén)時(shí)首先學(xué)的就是Java基礎(chǔ)，然后再到Java高級(jí)開(kāi)發(fā)，
<br
/>在學(xué)習(xí)過(guò)程中老師細(xì)致的教學(xué)為我們打下了牢固的java基礎(chǔ)。
</li
><li
>mysql數(shù)據(jù)庫(kù)
:<br
/>mysql數(shù)據(jù)庫(kù)是我們大一第二學(xué)期開(kāi)的課，配合Java高級(jí)開(kāi)發(fā)一起學(xué)習(xí)的科目，
<br
/>因?yàn)樽约罕旧砭拖矚g數(shù)據(jù)庫(kù)的一些東西，所有mysql數(shù)據(jù)庫(kù)也有良好的基礎(chǔ)。
</li
><li
>Javascript語(yǔ)言：
<br
/>在學(xué)JavaScript之前我有良好的html5和css基礎(chǔ)，所學(xué)習(xí)JavaScript時(shí)也是十分順利的掌握了課本里的內(nèi)容。
</li
><li
>web開(kāi)發(fā)
:<br
/>web開(kāi)發(fā)是我最喜愛(ài)的科目之一，servlet的學(xué)習(xí)給我啟發(fā)深刻。
</li
><li
>ssm框架
:<br
/>ssm框架相比springboot而言是比較繁瑣的，但是在學(xué)習(xí)和理解起來(lái)卻比springboot更容易讓人掌握。
</li
><li
>springboot框架
:<br
/>springboot框架入門(mén)起來(lái)十分迅速，在基礎(chǔ)的使用起來(lái)也是十分方便，但查看源碼時(shí)，沒(méi)有ssm容易讓人理解。
</li
></ul
><div
class="container" align
="center"><div
class="row"><div
class="col-sm-4"><h3
class="text-info" id
="project">項(xiàng)目名稱
</h3
><ul
class="nav nav-pills nav-stacked"><li
class="active"><a href
="#car">新能源汽車項(xiàng)目
</a
></li
><li
><a href
="#city">咕泡商城項(xiàng)目
</a
></li
><li
><a href
="#bug">爬蟲(chóng)項(xiàng)目
</a
></li
></ul
><hr
class="hidden-sm hidden-md hidden-lg"></div
><div
class="col-sm-8" align
="left"><h3
class="text-info">項(xiàng)目?jī)?nèi)容
</h3
><h2 id
="car">新能源汽車
</h2
><h5
>企業(yè)saas工坊
</h5
><p
>新能源汽車項(xiàng)目是我們掌握smm框架知識(shí)后第一個(gè)實(shí)戰(zhàn)項(xiàng)目，該項(xiàng)目由工坊老師指導(dǎo)下，前后端都由我們個(gè)人獨(dú)立完成的項(xiàng)目。該項(xiàng)目用到了，html5
+css3，mysql數(shù)據(jù)庫(kù)，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert等技術(shù)。項(xiàng)目從開(kāi)始到完成我們用了
2個(gè)月的時(shí)間。該項(xiàng)目的主要是寫(xiě)一個(gè)汽車app社交平臺(tái)，包括用戶登錄注冊(cè)，用戶上傳車輛信息，統(tǒng)計(jì)用戶車輛，分析故障車輛原因，以及導(dǎo)航、朋友圈等功能一體的汽車平臺(tái)。該項(xiàng)目用戶的使用方法如下：
<p
>1.新用戶進(jìn)行登錄注冊(cè)。
</p
><p
>2.登錄成功后新用戶可以進(jìn)行修改密碼、昵稱、頭像等個(gè)人信息。
</p
><p
>3.新用戶上傳自己車輛信息，并綁定賬號(hào)。
</p
><p
>4.新用戶可以上傳自己車輛故障，系統(tǒng)自動(dòng)查詢車輛故障原因以及維修方案。
</p
><p
>5.用戶可以添加車友，在車友圈發(fā)布求助信息等。
</p
><p
>6.用戶還可以進(jìn)行地圖導(dǎo)航，以及查詢公交車，出租車，飛機(jī)等交通工具的時(shí)間和行程。
</p
><p
> 通過(guò)完成這個(gè)項(xiàng)目，讓我獲得了很大的進(jìn)步。不論是前端知識(shí)還是后端知識(shí)，在該項(xiàng)目上都得到了充分的展示。讓我也一下子吸收了很多的知識(shí)與技能，為后面的項(xiàng)目打下了堅(jiān)實(shí)的基礎(chǔ)。
</p
></p
><br
><h2 id
="city">咕泡商城
</h2
><h5
>企業(yè)saas工坊
</h5
><p
>咕泡商城項(xiàng)目是我們學(xué)完springboot之后的實(shí)戰(zhàn)項(xiàng)目，該項(xiàng)目由工坊老師指導(dǎo)下，前后端都由我們個(gè)人獨(dú)立完成的項(xiàng)目。該項(xiàng)目用到了，html5
+css3
,mysql數(shù)據(jù)庫(kù)
,springboot框架
,maven
,web
,javascript
,jquery
,ajax
,echarts
,bootstrap等技術(shù)。項(xiàng)目從開(kāi)始到完成我們用了
10天的時(shí)間。該項(xiàng)目主要是寫(xiě)一個(gè)網(wǎng)上商城電商購(gòu)物平臺(tái)，包括用戶登錄注冊(cè)，用戶綁定信息，上傳頭像、昵稱等個(gè)人信息，用戶主要可以在該平臺(tái)上面購(gòu)買各種商品，每種商品都做好了分類管理，用戶點(diǎn)擊分類名稱或者準(zhǔn)確搜索都能顯示出自己想要的商品。用戶點(diǎn)擊商品就可以鏈接到商品詳情頁(yè)面，不論是購(gòu)物還是瀏覽商品都非常的方便。該項(xiàng)目用戶的使用方法：
<p
>1.新用戶進(jìn)行登錄注冊(cè)。
</p
><p
>2.登錄成功后新用戶可以進(jìn)行修改密碼、昵稱、頭像等個(gè)人信息。
</p
><p
> 3.用戶自由購(gòu)買和瀏覽商品信息。
</p
>該項(xiàng)目讓我們體驗(yàn)了springboot的配置強(qiáng)大之處，沒(méi)有繁瑣的多余配置文件，所有配置都由一個(gè)配置文件解決，簡(jiǎn)化了我們smm框架配置的痛苦。
</p
><br
><h2 id
="bug">爬蟲(chóng)
</h2
><h5
>企業(yè)saas工坊
</h5
><p
>爬蟲(chóng)項(xiàng)目是我們最近才做完的項(xiàng)目。該項(xiàng)目與以往項(xiàng)目不同，該項(xiàng)目是由工坊老師指導(dǎo)下，我們首次前后端分離合作的項(xiàng)目。一個(gè)團(tuán)體
3個(gè)人，分別做前端展示數(shù)據(jù)，后端爬取數(shù)據(jù)和數(shù)據(jù)清洗。我在這個(gè)項(xiàng)目中做的是后端爬取數(shù)據(jù)。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技術(shù)。該項(xiàng)目主要是爬去
51job網(wǎng)站上面的工作崗位，我們主要爬取了與我們軟件相關(guān)的工作崗位，共爬取了
2萬(wàn)條數(shù)據(jù)處理并展示。該項(xiàng)目執(zhí)行步驟如下：
<p
>1.后端爬取數(shù)據(jù)并存到數(shù)據(jù)庫(kù)。
</p
><p
>2.中間清洗數(shù)據(jù)，將數(shù)據(jù)改變?yōu)榍岸巳藛T需要的格式。
</p
><p
>3.前端人員根據(jù)需求展示數(shù)據(jù)。
</p
>該項(xiàng)目讓我們體會(huì)到了團(tuán)隊(duì)合作和團(tuán)隊(duì)分工明確的重要性，每個(gè)人做好屬于自己的一份任務(wù)，環(huán)環(huán)相扣才能保質(zhì)保量的完成項(xiàng)目。
</p
> </div
>
</div
></div
><div id
="myCarousel" class="carousel slide" style
="border: solid; border-color: cornflowerblue;"><!-- 輪播（Carousel）指標(biāo)
--><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）項(xiàng)目
--><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）導(dǎo)航
--><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;">教育經(jīng)歷
</h3
></caption
><tbody style
="text-align: center;"><tr
><td
>2006.9.-2012.7</td
><td
>就讀于xx小學(xué)
</td
></tr
><tr
><td
>2012.9-2015.7 </td
><td
> 就讀于xx初中
</td
></tr
><tr
><td
>2015.9-2018.7 </td
><td
> 就讀于xx高級(jí)中學(xué)
</td
></tr
><tr
><td
>2018.9-至今
</td
><td
> 就讀于陜西國(guó)防工業(yè)職業(yè)技術(shù)學(xué)院
</td
></tr
></tbody
>
</table
>
</div
><div
class="jumbotron text-center" style
="margin-bottom:0" ><p id
="email" align
="left"> 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
;郵箱
:3136484707@qq
.com
 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
;電話號(hào)碼：
11111111111 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
; 
;個(gè)人博客
:https
://me
.csdn
.net
/qq_44892582
</p
></div
></body
>
</html
>
代碼到這里就結(jié)束了。喜歡就點(diǎn)個(gè)贊唄！
總結(jié)
以上是生活随笔為你收集整理的html制作个人简历网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
