html個人簡介表格代碼（HTML個人簡歷代碼）
今天給各位分享html個人簡介表格代碼的知識，其中也會對HTML個人簡歷代碼進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！
本文目錄一覽：
html制作個人簡歷網(wǎng)頁代碼
以下是我用html的相關(guān)知識制作的個人簡歷網(wǎng)頁，話不多說先看看最終效果：
如上所示項目一共分為5個部分，分別對應(yīng)導航欄的5個內(nèi)容。其中項目技能用的是echarts里的柱狀圖，作品展示用的是bootstrap里的輪播圖，除此之外就是html的基礎(chǔ)內(nèi)容。下面我們展示一下項目的代碼部分：
!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ù)學院，br/學習軟件編程，對編程有濃厚的興趣，
在老師的指導，br/和自己的課下練習，漸漸對編程有了更深入的了解。br/在課余時間，
我喜歡唱歌、跑步和打乒乓球。br/喜好結(jié)交志同道合的朋友，一起分享學習的生活的經(jīng)驗。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="#"專業(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"項目經(jīng)驗/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準備一個具備大?。▽捀撸┑腄om --
div id="main" style="width:
50%;height:400px;left: 25%;"/div
script type="text/javascript"
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: '專業(yè)技能平均分'
},
tooltip: {},
legend: {
data:['分數(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: '分數(shù)',
type: 'bar',
//改變圖表顏色
color:['#8EE5EE'],
data: [85, 95, 82, 90, 80, 80]
}],
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
/script
ul class="list-unstyled" align="center"
liJava基礎(chǔ):br/
我入門時首先學的就是Java基礎(chǔ)，然后再到Java高級開發(fā)，br/
在學習過程中老師細致的教學為我們打下了牢固的java基礎(chǔ)。 ? ? ? ? ? ? ?/li
limysql數(shù)據(jù)庫:br/
mysql數(shù)據(jù)庫是我們大一第二學期開的課，配合Java高級開發(fā)一起學習的科目，br/
因為自己本身就喜歡數(shù)據(jù)庫的一些東西，所有mysql數(shù)據(jù)庫也有良好的基礎(chǔ)。/li
liJavascript語言：br/
在學JavaScript之前我有良好的html5和css基礎(chǔ)，所學習JavaScript時也是十分順利的掌握了課本里的內(nèi)容。/li
liweb開發(fā):br/
web開發(fā)是我最喜愛的科目之一，servlet的學習給我啟發(fā)深刻。/li
lissm框架:br/
ssm框架相比springboot而言是比較繁瑣的，但是在學習和理解起來卻比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"項目名稱/h3
ul class="nav nav-pills nav-stacked"
li class="active"a href="#car"新能源汽車項目/a/li
lia href="#city"咕泡商城項目/a/li
lia 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"項目內(nèi)容/h3
h2 id="car"新能源汽車/h2
h5企業(yè)saas工坊/h5
p新能源汽車項目是我們掌握smm框架知識后第一個實戰(zhàn)項目，該項目由工坊老師指導下，前后端都由我們個人獨立完成的項目。
該項目用到了，html5+css3，mysql數(shù)據(jù)庫，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert
等技術(shù)。項目從開始到完成我們用了2個月的時間。該項目的主要是寫一個汽車app社交平臺，包括用戶登錄注冊，用戶上傳車輛信息，統(tǒng)計用戶車輛，分析故障車輛原因，
以及導航、朋友圈等功能一體的汽車平臺。該項目用戶的使用方法如下： ? ? ? ?p1.新用戶進行登錄注冊。/p
p2.登錄成功后新用戶可以進行修改密碼、昵稱、頭像等個人信息。/p
p3.新用戶上傳自己車輛信息，并綁定賬號。/p
p4.新用戶可以上傳自己車輛故障，系統(tǒng)自動查詢車輛故障原因以及維修方案。/p
p5.用戶可以添加車友，在車友圈發(fā)布求助信息等。/p
p6.用戶還可以進行地圖導航，以及查詢公交車，出租車，飛機等交通工具的時間和行程。/p
p 通過完成這個項目，讓我獲得了很大的進步。不論是前端知識還是后端知識，在該項目上
都得到了充分的展示。讓我也一下子吸收了很多的知識與技能，為后面的項目打下了堅實的基礎(chǔ)。/p
/p
br
h2 id="city"咕泡商城/h2
h5企業(yè)saas工坊/h5
p咕泡商城項目是我們學完springboot之后的實戰(zhàn)項目，該項目由工坊老師指導下，前后端都由我們個人獨立完成的項目。
該項目用到了，html5+css3,mysql數(shù)據(jù)庫,springboot框架,maven,web,javascript,jquery,ajax,echarts,bootstrap等技術(shù)。
項目從開始到完成我們用了10天的時間。該項目主要是寫一個網(wǎng)上商城電商購物平臺，包括用戶登錄注冊，用戶綁定信息，上傳頭像、昵稱等個人信息，
用戶主要可以在該平臺上面購買各種商品，每種商品都做好了分類管理，用戶點擊分類名稱或者準確搜索都能顯示出自己想要的商品。用戶點擊商品就可以
鏈接到商品詳情頁面，不論是購物還是瀏覽商品都非常的方便。該項目用戶的使用方法： ? ? ? ?p1.新用戶進行登錄注冊。/p
p2.登錄成功后新用戶可以進行修改密碼、昵稱、頭像等個人信息。/p
p 3.用戶自由購買和瀏覽商品信息。/p
該項目讓我們體驗了springboot的配置強大之處，沒有繁瑣的多余配置文件，所有配置都由一個配置文件解決，簡化了我們smm框架配置的痛苦。 ? ? ?/p
br
h2 id="bug"爬蟲/h2
h5企業(yè)saas工坊/h5
p爬蟲項目是我們最近才做完的項目。該項目與以往項目不同，該項目是由工坊老師指導下，我們首次前后端分離合作的項目。一個團體3個人，分別做前端展示數(shù)據(jù)，后端爬取數(shù)據(jù)和數(shù)據(jù)清洗。
我在這個項目中做的是后端爬取數(shù)據(jù)。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技術(shù)。該項目主要是爬去51job網(wǎng)站上面的工作崗位，
我們主要爬取了與我們軟件相關(guān)的工作崗位，共爬取了2萬條數(shù)據(jù)處理并展示。該項目執(zhí)行步驟如下： ? ? ? ?p1.后端爬取數(shù)據(jù)并存到數(shù)據(jù)庫。/p
p2.中間清洗數(shù)據(jù)，將數(shù)據(jù)改變?yōu)榍岸巳藛T需要的格式。/p
p3.前端人員根據(jù)需求展示數(shù)據(jù)。/p
該項目讓我們體會到了團隊合作和團隊分工明確的重要性，每個人做好屬于自己的一份任務(wù)，環(huán)環(huán)相扣才能保質(zhì)保量的完成項目。 ? ? ?/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;"教育經(jīng)歷/h3/caption
tbody style="text-align: center;"
tr
td2006.9.-2012.7/td
td就讀于xx小學/td
/tr
tr
td2012.9-2015.7 /td
td 就讀于xx初中/td
/tr
tr
td2015.9-2018.7 /td
td 就讀于xx高級中學/td
/tr
tr
td2018.9-至今 /td
td 就讀于陜西國防工業(yè)職業(yè)技術(shù)學院/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
html做個表格代碼
html做個表格的步驟如下：
1、首先新建一個html，點擊body/body中間，先填入表格內(nèi)容；
2、內(nèi)容根據(jù)需求來寫即可，示例代碼如下：
table
p style="text-align:center "功課表/p
tr
th語文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th數(shù)學/th
td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th英文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
/table
3、然后在head/head中間輸入樣式表的樣式；
4、樣式也根據(jù)個人的需求來設(shè)置即可，設(shè)置單元格的寬度高度，合并單元格，位置，顏色等等，示例代碼如下：
style type="text/css"
body
{
width:340px;
height :800px;
}
table
{
border-collapse :collapse ;
}
th,td
{
width:100px;
height:40px;
border :1px solid black;
font-size:12px;
text-align :center;
}? ?
/style
5、這里需要注意這個代碼“table”的意義是將表格邊框合并為單一的邊框，將相鄰變合并。
6、預(yù)覽結(jié)果如下所示，一個簡單的表格就制作出來了。
HTML個人簡歷怎么做？
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 width=720 colspan=6 align=center
font size=5 ba href=;個人簡歷
/a/b/font/td
/tr
tr height=50 bgcolor=green
td width=110 align=center
font size=5姓名：/td
td width=150 align=center
font size=5a
href=;XXX/td
td width=110 align=center
font size=5性別：/td
td width=150 align=center
font size=5男/td
td width=200 colspan=2 rowspan=4img
src="-
3c3e3f4bc25a/lpJL3i5H3AWovj6*eYZTbXKgOtEQuAkqByv4H*wMyRw!/b/dKMBZp1AIgAA
bo=gALgAQAAAAABAEQ" alt="XXX照片" width=200 height=200/td
/tr
tr height=50 bgcolor=green
td width=110 align=center
font size=4 align=center
出生年月：/td
td width=150 align=center
font size=51992.4.6/td
td width=110 align=center
font size=5民族：/td
td width=150 align=center
font size=5漢/td
/tr
tr height=50 bgcolor=green
td width=110 align=center
font size=5學歷：/td
td width=150 align=center
font size=5 align=center
大專/td
td width=110 align=center
font size=5專業(yè)：/td
td width=150 align=center
font size=4數(shù)控車工/td
/tr
tr height=50 bgcolor=green
td width=110 align=center
font size=5籍貫：/td
td width=150 align=center
font size=4河南原陽/td
td width=110 align=center
font size=4聯(lián)系電話：/td
td width=150 align=center
font size=313602664383/td
/tr
tr height=50 bgcolor=green
td width=100 align=center
font size=4畢業(yè)學校：/td
td width=620 colspan=5 align=center
font size=5河南經(jīng)濟貿(mào)易高級技工學校/td
/tr
tr height=50 bgcolor=green
td width=110 align=center
font size=5住址：/td
td width=610 colspan=5 align=center
font size=5下油松新村/td
/tr
tr height=50 bgcolor=green
td width=110 align=center
font size=4電子郵箱：/td
td width=610 colspan=5 align=center
font size=5hiyangson@163.com/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6 align=center
font size=5教育歷程/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6 align=center2007.9-2011.6 在河南高級技工學校讀
中專/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6 align=center2010.9-至今 報讀鄭州輕工業(yè)學院成人大
專/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6 align=center
font size=5工作經(jīng)歷/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6 align=center2011.6-至今 在富士康科技集團工作
/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6 align=center
font size=5自我評價/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6個人工作勤奮，認真負責，能吃苦耐勞，盡職盡責，
/td
/tr
tr height=50 bgcolor=green
td width=720 colspan=6/td
/tr
/table
centerscript language="javascript" type="text/javascript"
src=""/script
noscripta href="" target="_blank"img
alt="我要啦免費統(tǒng)計"
src="" style="border:none"
//a/noscript
/body
/html
html個人簡介表格代碼的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于HTML個人簡歷代碼、html個人簡介表格代碼的信息別忘了在本站進行查找喔。
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請注明出處。
