本篇文章給大家談?wù)動胔5做一個個人簡歷，以及h5的簡歷對應(yīng)的知識點(diǎn)，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、使用uni-app制作支持小程序，H5及移動端app的個人簡歷
• 2、h5簡歷怎么做
• 3、html制作個人簡歷網(wǎng)頁代碼

使用uni-app制作支持小程序，H5及移動端app的個人簡歷

????????的技術(shù)文章已經(jīng)一年之久沒有更新了，一方面是因?yàn)樽约罕容^懶且工作忙的時候疲于開發(fā)項(xiàng)目，另一方面也是之前的項(xiàng)目并沒有運(yùn)用到新的一些技術(shù)棧感覺沒什么好記錄的，慢慢的從一個熱愛前端的小白技術(shù)變成了一個接口調(diào)用員心里卻是有點(diǎn)難受，不過最近辭了職在找新工作，所以簡歷方面便是必不可少的環(huán)節(jié)了，如果作為一個前端還要給boss看word簡歷的話心里多少是有些過意不去的便想到了使用uni-app制作一個可以支持多端的個人簡歷，下面進(jìn)入正題

????????我花了一晚上時間做的這個簡歷，基本上沒有什么樣式，也只是拋磚引玉的給各位提供一些思路，源碼的話最后我會傳到github上供大家參考，因?yàn)閭€人簡歷可能只是一個單純的個人信息的展示，并沒有那么多復(fù)雜的功能。所以比較簡單。我在這里只講兩個問題吧，其他的自己可以去參考源碼

問題1：

? ? ? ? 當(dāng)我們的個人簡歷通過小程序展示給boss的時候聯(lián)系方式的部分我希望可以有個直接可以點(diǎn)擊復(fù)制的功能，這樣可以方便boss們更快速的聯(lián)系自己，所以用到了剪貼板功能增加了clipBoard.js。直接引入調(diào)用就好沒有遇到什么太大的阻礙

問題2：

? ? ? ? 大家應(yīng)該都知道小程序如果想跳轉(zhuǎn)外部網(wǎng)站是做不到的（最多加webview嵌套還要配置域名），所以我針對小程序和H5做了變動在H5上增加了小站跳轉(zhuǎn)部分。大家可以去github上查看源碼

附上github地址： 任建堃的github

附上個人簡歷地址:? 任建堃個人簡歷

最后附上小程序碼，大家可以去預(yù)覽一下，希望各位大神輕噴。小弟在此只是拋磚引玉而已

h5簡歷怎么做

步驟

1

打開百度，百度一下圖中的關(guān)鍵字。

請點(diǎn)擊輸入圖片描述

2

進(jìn)入網(wǎng)站，點(diǎn)擊“應(yīng)用制作”——“高級模式”——直接使用系統(tǒng)模板：

請點(diǎn)擊輸入圖片描述

3

在制作界面，你將看到各大控件，根據(jù)你準(zhǔn)備的素材進(jìn)行選擇，在模板上直接修改修改即可。

請點(diǎn)擊輸入圖片描述

4

等一切制作好后，點(diǎn)擊發(fā)布，然后你將看到預(yù)覽頁面，其中Web就是指的H5頁面。你自己先掃描二維碼看看效果，如果效果好的話，直掃描分享到你想應(yīng)聘的公司。

? ?H5簡歷的優(yōu)點(diǎn)

相對于傳統(tǒng)的紙質(zhì)簡歷，H5簡歷至少有三大優(yōu)點(diǎn)：1.如果您應(yīng)聘的崗位是設(shè)計(jì)師、前段或新媒體運(yùn)營等相關(guān)崗位，您的H5簡歷就可以成為您實(shí)力的一個很好的證明；2.引人注目，相對于千篇一律的紙質(zhì)簡歷，H5簡歷容易給hr小姐姐們眼前一亮的感覺；3.證明自己有創(chuàng)新思維，不是一個墨守成規(guī)的人。

? ?H5簡歷的制作過程

H5簡歷看起來很高大上，但是制作過程并不難。市面上有很多H5頁面制作工具，比如易企秀、人人秀、MAKA、初頁等，通過它們就可以制作出精美的H5個人簡歷了。那么H5個人簡歷到底應(yīng)該怎么做呢，小編接下來將為您詳細(xì)解釋。

1.市面上大多數(shù)H5頁面制作工具都提供了網(wǎng)頁版和手機(jī)版，但是用手機(jī)版H5工具制作簡歷一方面是容易卡頓，另一方面上傳圖片編輯內(nèi)容也并不方便，因此Chiefmore君推薦大家使用網(wǎng)頁版H5頁面制作工具。

2.挑選一個自己喜歡的H5頁面制作工具，進(jìn)入網(wǎng)頁后點(diǎn)擊模板功能，點(diǎn)擊或者搜索“簡歷模板”，您就可以搜索到許多H5移動端簡歷模板了。選中自己喜歡的簡歷模板，點(diǎn)擊編輯。

3.進(jìn)入簡歷模板中，將簡歷中的文字和圖片替換成自己的信息。您也可以添加自己獨(dú)特的創(chuàng)意，但是一定要慎重。這一步是重要的，一定要仔細(xì)斟酌簡歷內(nèi)容。

4.到這里您的H5個人簡歷就制作完成了，您就可以將您的H5個人簡歷的二維碼或者鏈接發(fā)送給您的面試官了。

? ?制作H5個人簡歷的注意事項(xiàng)

在制作H5個人簡歷中有幾個注意事項(xiàng)，這些注意事項(xiàng)在做紙質(zhì)簡歷時同樣需要多加留意。

1.內(nèi)容永遠(yuǎn)大于形式。面試官關(guān)注的永遠(yuǎn)都是簡歷的內(nèi)容，H5簡歷只是一個拋磚引玉的東西，如果想要被錄取始終要關(guān)注自己有沒有匹配職位的內(nèi)容。

2.在制作簡歷之前就應(yīng)該明確簡歷每一頁的具體內(nèi)容，不要想到哪寫到哪。

3.盡量不要出現(xiàn)大段的文字，用簡潔的詞匯和圖標(biāo)表示即可。

4.如果一定要出現(xiàn)較多的文字時，要注意文字的排版，將文字分層展示，不同層級的文字的格式要有所不同。

5.盡量避免花里胡哨的排版，簡潔大方即可。

html制作個人簡歷網(wǎng)頁代碼

以下是我用html的相關(guān)知識制作的個人簡歷網(wǎng)頁，話不多說先看看最終效果：

如上所示項(xiàng)目一共分為5個部分，分別對應(yīng)導(dǎo)航欄的5個內(nèi)容。其中項(xiàng)目技能用的是echarts里的柱狀圖，作品展示用的是bootstrap里的輪播圖，除此之外就是html的基礎(chǔ)內(nèi)容。下面我們展示一下項(xiàng)目的代碼部分：

!DOCTYPE htmlhtml

head

meta charset="utf-8"

title我的個人簡歷/title

link rel="stylesheet" href="lib/css/color.css"

link rel="stylesheet" href=""

script src=""/script

script src=""/script

script src=""/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年升入陜西國防工業(yè)職業(yè)技術(shù)學(xué)院，br/學(xué)習(xí)軟件編程，對編程有濃厚的興趣，

在老師的指導(dǎo)，br/和自己的課下練習(xí)，漸漸對編程有了更深入的了解。br/在課余時間，

我喜歡唱歌、跑步和打乒乓球。br/喜好結(jié)交志同道合的朋友，一起分享學(xué)習(xí)的生活的經(jīng)驗(yàn)。br/

有良好的團(tuán)隊(duì)意識，學(xué)習(xí)時認(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"

tda 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

tda href="" 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"

lia href="#main"專業(yè)技能/a/li

lia href="#project"項(xiàng)目經(jīng)驗(yàn)/a/li

lia href="#myCarousel"作品展示/a/li

lia href="#education"教育經(jīng)歷/a/li

lia href="#relation"聯(lián)系方式/a/li

/ul

/div

/div

/nav

!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om --

div id="main" style="width:

50%;height:400px;left: 25%;"/div

script type="text/javascript"

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例

var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項(xiàng)和數(shù)據(jù)

var option = {

title: {

text: '專業(yè)技能平均分'

},

tooltip: {},

legend: {

data:['分?jǐn)?shù)'],

},

xAxis: {

data: ["Java語言","mysql數(shù)據(jù)庫","Javascript語言","web開發(fā)","ssm框架","springboot框架"],axisLabel: {

// inside: true, 隱藏x軸內(nèi)容

// 改變x軸字體顏色

// ? ? textStyle: {

// ? ? ? ? color: '#8B4500'

// ? ? }

},

},

yAxis: {},

series: [{

name: '分?jǐn)?shù)',

type: 'bar',

//改變圖表顏色

color:['#8EE5EE'],

data: [85, 95, 82, 90, 80, 80]

}],

};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

myChart.setOption(option);

/script

ul class="list-unstyled" align="center"

liJava基礎(chǔ):br/

我入門時首先學(xué)的就是Java基礎(chǔ)，然后再到Java高級開發(fā)，br/

在學(xué)習(xí)過程中老師細(xì)致的教學(xué)為我們打下了牢固的java基礎(chǔ)。 ? ? ? ? ? ? ?/li

limysql數(shù)據(jù)庫:br/

mysql數(shù)據(jù)庫是我們大一第二學(xué)期開的課，配合Java高級開發(fā)一起學(xué)習(xí)的科目，br/

因?yàn)樽约罕旧砭拖矚g數(shù)據(jù)庫的一些東西，所有mysql數(shù)據(jù)庫也有良好的基礎(chǔ)。/li

liJavascript語言：br/

在學(xué)JavaScript之前我有良好的html5和css基礎(chǔ)，所學(xué)習(xí)JavaScript時也是十分順利的掌握了課本里的內(nèi)容。/li

liweb開發(fā):br/

web開發(fā)是我最喜愛的科目之一，servlet的學(xué)習(xí)給我啟發(fā)深刻。/li

lissm框架:br/

ssm框架相比springboot而言是比較繁瑣的，但是在學(xué)習(xí)和理解起來卻比springboot更容易讓人掌握。/li

lispringboot框架:br/

springboot框架入門起來十分迅速，在基礎(chǔ)的使用起來也是十分方便，但查看源碼時，沒有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

lia href="#city"咕泡商城項(xiàng)目/a/li

lia href="#bug"爬蟲項(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)目內(nèi)容/h3

h2 id="car"新能源汽車/h2

h5企業(yè)saas工坊/h5

p新能源汽車項(xiàng)目是我們掌握smm框架知識后第一個實(shí)戰(zhàn)項(xiàng)目，該項(xiàng)目由工坊老師指導(dǎo)下，前后端都由我們個人獨(dú)立完成的項(xiàng)目。

該項(xiàng)目用到了，html5+css3，mysql數(shù)據(jù)庫，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert

等技術(shù)。項(xiàng)目從開始到完成我們用了2個月的時間。該項(xiàng)目的主要是寫一個汽車app社交平臺，包括用戶登錄注冊，用戶上傳車輛信息，統(tǒng)計(jì)用戶車輛，分析故障車輛原因，

以及導(dǎo)航、朋友圈等功能一體的汽車平臺。該項(xiàng)目用戶的使用方法如下： ? ? ? ?p1.新用戶進(jìn)行登錄注冊。/p

p2.登錄成功后新用戶可以進(jìn)行修改密碼、昵稱、頭像等個人信息。/p

p3.新用戶上傳自己車輛信息，并綁定賬號。/p

p4.新用戶可以上傳自己車輛故障，系統(tǒng)自動查詢車輛故障原因以及維修方案。/p

p5.用戶可以添加車友，在車友圈發(fā)布求助信息等。/p

p6.用戶還可以進(jìn)行地圖導(dǎo)航，以及查詢公交車，出租車，飛機(jī)等交通工具的時間和行程。/p

p 通過完成這個項(xiàng)目，讓我獲得了很大的進(jìn)步。不論是前端知識還是后端知識，在該項(xiàng)目上

都得到了充分的展示。讓我也一下子吸收了很多的知識與技能，為后面的項(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)下，前后端都由我們個人獨(dú)立完成的項(xiàng)目。

該項(xiàng)目用到了，html5+css3,mysql數(shù)據(jù)庫,springboot框架,maven,web,javascript,jquery,ajax,echarts,bootstrap等技術(shù)。

項(xiàng)目從開始到完成我們用了10天的時間。該項(xiàng)目主要是寫一個網(wǎng)上商城電商購物平臺，包括用戶登錄注冊，用戶綁定信息，上傳頭像、昵稱等個人信息，

用戶主要可以在該平臺上面購買各種商品，每種商品都做好了分類管理，用戶點(diǎn)擊分類名稱或者準(zhǔn)確搜索都能顯示出自己想要的商品。用戶點(diǎn)擊商品就可以

鏈接到商品詳情頁面，不論是購物還是瀏覽商品都非常的方便。該項(xiàng)目用戶的使用方法： ? ? ? ?p1.新用戶進(jìn)行登錄注冊。/p

p2.登錄成功后新用戶可以進(jìn)行修改密碼、昵稱、頭像等個人信息。/p

p 3.用戶自由購買和瀏覽商品信息。/p

該項(xiàng)目讓我們體驗(yàn)了springboot的配置強(qiáng)大之處，沒有繁瑣的多余配置文件，所有配置都由一個配置文件解決，簡化了我們smm框架配置的痛苦。 ? ? ?/p

br

h2 id="bug"爬蟲/h2

h5企業(yè)saas工坊/h5

p爬蟲項(xiàng)目是我們最近才做完的項(xiàng)目。該項(xiàng)目與以往項(xiàng)目不同，該項(xiàng)目是由工坊老師指導(dǎo)下，我們首次前后端分離合作的項(xiàng)目。一個團(tuán)體3個人，分別做前端展示數(shù)據(jù)，后端爬取數(shù)據(jù)和數(shù)據(jù)清洗。

我在這個項(xiàng)目中做的是后端爬取數(shù)據(jù)。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技術(shù)。該項(xiàng)目主要是爬去51job網(wǎng)站上面的工作崗位，

我們主要爬取了與我們軟件相關(guān)的工作崗位，共爬取了2萬條數(shù)據(jù)處理并展示。該項(xiàng)目執(zhí)行步驟如下： ? ? ? ?p1.后端爬取數(shù)據(jù)并存到數(shù)據(jù)庫。/p

p2.中間清洗數(shù)據(jù)，將數(shù)據(jù)改變?yōu)榍岸巳藛T需要的格式。/p

p3.前端人員根據(jù)需求展示數(shù)據(jù)。/p

該項(xiàng)目讓我們體會到了團(tuán)隊(duì)合作和團(tuán)隊(duì)分工明確的重要性，每個人做好屬于自己的一份任務(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

td2006.9.-2012.7/td

td就讀于xx小學(xué)/td

/tr

tr

td2012.9-2015.7 /td

td 就讀于xx初中/td

/tr

tr

td2015.9-2018.7 /td

td 就讀于xx高級中學(xué)/td

/tr

tr

td2018.9-至今 /td

td 就讀于陜西國防工業(yè)職業(yè)技術(shù)學(xué)院/td

/tr

/tbody/table/div

div class="jumbotron text-center" style="margin-bottom:0"

p id="email" align="left"nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;郵箱:3136484707@qq.com ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;電話號碼：11111111111

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;個人博客:;/p

/div

/body/html

關(guān)于用h5做一個個人簡歷和h5的簡歷的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。