网页设计个人简介html模板(网页设计个人简介页面)
html制作个人简历网页代码
以下是我用html的相关知识制作的个人简历网页，话不多说先看看最终效果：
如上所示项目一共分为5个部分，分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图，作品展示用的是bootstrap里的轮播图，除此之外就是html的基础内容。下面我们展示一下项目的代码部分：
!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年升入陕西国防工业职业技术学院，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"
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"专业技能/a/li
lia href="#project"项目经验/a/li
lia href="#myCarousel"作品展示/a/li
lia href="#education"教育经历/a/li
lia 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"
liJava基础:br/
我入门时首先学的就是Java基础，然后再到Java高级开发，br/
在学习过程中老师细致的教学为我们打下了牢固的java基础。 ? ? ? ? ? ? ?/li
limysql数据库:br/
mysql数据库是我们大一第二学期开的课，配合Java高级开发一起学习的科目，br/
因为自己本身就喜欢数据库的一些东西，所有mysql数据库也有良好的基础。/li
liJavascript语言：br/
在学JavaScript之前我有良好的html5和css基础，所学习JavaScript时也是十分顺利的掌握了课本里的内容。/li
liweb开发:br/
web开发是我最喜爱的科目之一，servlet的学习给我启发深刻。/li
lissm框架:br/
ssm框架相比springboot而言是比较繁琐的，但是在学习和理解起来却比springboot更容易让人掌握。/li
lispringboot框架: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
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"项目内容/h3
h2 id="car"新能源汽车/h2
h5企业saas工坊/h5
p新能源汽车项目是我们掌握smm框架知识后第一个实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。
该项目用到了，html5+css3，mysql数据库，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert
等技术。项目从开始到完成我们用了2个月的时间。该项目的主要是写一个汽车app社交平台，包括用户登录注册，用户上传车辆信息，统计用户车辆，分析故障车辆原因，
以及导航、朋友圈等功能一体的汽车平台。该项目用户的使用方法如下： ? ? ? ?p1.新用户进行登录注册。/p
p2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。/p
p3.新用户上传自己车辆信息，并绑定账号。/p
p4.新用户可以上传自己车辆故障，系统自动查询车辆故障原因以及维修方案。/p
p5.用户可以添加车友，在车友圈发布求助信息等。/p
p6.用户还可以进行地图导航，以及查询公交车，出租车，飞机等交通工具的时间和行程。/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天的时间。该项目主要是写一个网上商城电商购物平台，包括用户登录注册，用户绑定信息，上传头像、昵称等个人信息，
用户主要可以在该平台上面购买各种商品，每种商品都做好了分类管理，用户点击分类名称或者准确搜索都能显示出自己想要的商品。用户点击商品就可以
链接到商品详情页面，不论是购物还是浏览商品都非常的方便。该项目用户的使用方法： ? ? ? ?p1.新用户进行登录注册。/p
p2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。/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万条数据处理并展示。该项目执行步骤如下： ? ? ? ?p1.后端爬取数据并存到数据库。/p
p2.中间清洗数据，将数据改变为前端人员需要的格式。/p
p3.前端人员根据需求展示数据。/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
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 就读于陕西国防工业职业技术学院/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
前端网页简历模板
写好简历对前端网页求职者求职成功起着非常重要的作用。以下是我为大家整理的前端网页简历模板，希望你们喜欢。
前端网页简历模板(一)
姓名：xxx
国籍：中国
目前所在地：广州
民族：汉族
户口所在地：湖南
身材：158 cm 46 kg
婚姻状况：未婚
年龄：25 岁
培训认证：
诚信徽章：
求职意向及工作经历
人才类型：普通求职
应聘职位：网页设计师/美工:设计师 网站策划 文案策划 广告 设计/策划 项目管理与策划
工作年限：4
职称：无职称
求职类型：均可
可到职-随时
月薪要求：3500--5000
希望工作地区：北京 北京 北京
个人工作经历：2005.3-2008.2 二年前台网页设计,文案写作和制作，ASP代码的编写，动画片头,动画BANNER设计与制作，后台页面框架设计和各功能的分析与实现，功能分配图表设计。其作品有:;;,;;;;;;;;;;;;;;;;;;;;等40多个网站设计与制作.
2004.12-2005.2娄底宏远电脑学校网页设计、FLASH动画设计辅导老师。
教育 背景
毕业 院校：邵阳学院
最高学历：大专
毕业-2003-06-01
所学专业一：行政管理
所学专业二：网页设计
受教育培训经历：2004.7-2004.12宏远电脑学校培训网页设计，并以优异的成绩毕业于校且被留校任辅导老师(网页设计与动画设计)
2000.9-2003.6邵阳学院，攻读行政管理专业三年。在校期间任班内团知书，各专业成绩优秀。予以毕业
语言能力
外语：英语 良好
国语水平：良好
粤语水平：一般
工作能力及其他专长
为人热诚，朴素大方，活泼开朗，具有坚强的毅力和较强的沟通能力，人际关系处理较好，有强烈的团队精神，以忠诚、务实、拼搏、勤奋来提升自己、完善自己，并能熟练使用Dreamweaver,Flash,Photoshop,corelDRAW等各设计软件，能用DIV+CSS布局网页设计。
前端网页简历模板(二)
基本信息
姓 名：陈xx
性别：男
婚姻状况：未婚
民族：汉
户 籍：广西
年龄：27
现所在地：南宁
身高：174
联系电话：135*****
电子邮箱：xuexila.com
求职意向
希望岗位：原画/动画/3D设计，网页设计/制作/美工/UI，平面设计总监/经理/主管
工作年限：职称：无职称
期望薪资：面议
求职类型：全职
到岗时间：随时
个人工作经历
**公司
起止年月：2011-03 ～ 2012-04
公司性质： 中外合资
所属行业：医疗/护理/保健/卫生
担任职位： 企划设计主管
工作描述： 公司总部及下属门诊部项目企划设计及对外宣传平面媒体广告设计及制作流程跟踪把关验收，电子书/杂志排版制作等设计。公司VI 网站项目策划及 网站美工 FLASH动画 3DMAX场景设计。
离职 原因：
**公司
起止年月：2009-05 ～ 2011-02
公司性质： 外商独资
所属行业：计算机/互联网/通信/电子
担任职位： 网络技术 部主管
工作描述： 公司VI 平面宣传广告 网站项目策划 网站美工 FLASH动画 3DMAX场景制作 电子书/杂志排版制作等设计。
离职原因： 个人原因
**公司
起止年月：2007-03 ～ 2009-04
公司性质： 外商独资
所属行业：计算机/互联网/通信/电子
担任职位： 美工部主管
工作描述： 1、3D动画效果设计。2、公司VI/平面宣传广告/FLASH片头动画/网页FLASH动画/全FLASH网站设计。AS语言。3、网页前台设计及网站维护管理。
离职原因： 个人原因
**公司
起止年月：2006-08 ～ 2007-01
公司性质： 私营企业
所属行业：石油/化工/矿产/地质
担任职位： 设计师
工作描述： 1、现场量尺寸计算用料,绘制CAD图,发回工厂制作。2、展柜3D效果图设计。
离职原因： 个人原因
**公司 起止年月：2005-05 ～ 2006-06
公司性质： 私营企业
所属行业：广告
担任职位： 设计师
工作描述： 1、3DMAX效果图设计。2、平面广告设计。
FLASH动画设计。
离职原因： 个人原因
**公司
起止年月：2003-09 ～ 2005-03
公司性质： 私营企业
所属行业：石油/化工/矿产/地质
担任职位： 广告营削策划
工作描述：
广告营削策划设计(宣传POP海报/宣传册/大型户外广告，招牌/店头招牌)
3DMAX效果图设计(加盟店效果图设计)
仓库系统维护(产品编码录入，设定利润值及数据库管理)
超市收银系统管理(扫描编码录入/入货价格设定，设定利润值及数据库管理备份)
离职原因： 个人原因
教育背景
毕业院校： 广西建筑材料工业学院
最高学历： 大专
获得学位: 大专
毕业日期： 2003-07
专 业 ： 建筑装饰
起始年月 终止年月 学校(机构) 所学专业 获得证书 证书编号
1999-07 2003-07 广西建筑材料工业学院 建筑装饰 毕业证
语言能力
外语： 英语一般
粤语水平：良好
国语水平：良好
工作能力及其他专长
1、4年的设计专业学习接受过正规的美术教育，具有较好的美术手绘功底及艺术素养和8年的工作 经验 熟练应用：3DMAX ,Vray喧染器 ,Lightscape ,CAD ,Photoshop ,coreldraw , AIFlash ,Dreamweaver ,fireworks等各类设计软件。
2、能够独立或者团队合作高效率地完成工作。
3、对公司产品及项目的宣传企划设计有相当丰富的经验。
自我评价
工作脚踏实地，善于创新、敢于迎接挑战。有很强的精力投入工作。学习能力强、乐业敬业,强调团体合作精神。
前端网页简历模板(三)
目前所在： 荔湾区
年龄： 20
户口所在： 阳江
国籍： 中国
婚姻状况： 未婚
民族： 汉族
培训认证： 未参加
身高： 150 cm
诚信徽章： 未申请
体重：
人才 测评： 未测评
我的特长：
求职意向
应聘职位：网页设计/制作/美工：
工作年限： 3
求职类型： 实习
可到职日期： 随时
月薪要求： 1000--1500
希望工作地区： 越秀区,天河区,海珠区
工作经历
苏宁电器(广州市)
起止年月：2010-10 ～ 2010-10
公司性质： 中外合资
所属行业：服务业
担任职位： 后台客服
工作描述： 后台协助物流部门工作让我加强了与客户的沟通协调能力，也提高了处理问题的能力，工作认真、勤奋，得到好评。
教育背景
毕业院校： 广州市工贸技师学院 广东商学院
最高学历： 大专
获得学位:
毕业日期： 2011-07
专 业 一： 电子商务与 财务管理
专 业 二：
起始年月 终止年月 学校(机构) 所学专业 获得证书 证书编号
2008-09 2011-07 广州市工贸技师学院 电子商务与财务管理 助理电子商务师 办公软件 -
语言能力
外语： 英语 一般
粤语水平： 良好
其它 外语能力：
国语水平： 良好
工作能力及其他专长
本人主修课程：会计基础、财务会计、中级财务会计、工业会计、电子商务、经济学、管理学、中国税制、统计学、应用文写作等。熟悉的软件有：办公软件、会计电算化、网页制作、Fhotoshop、Dreawearn。
详细个人自传
本人性格开朗做事认真、负责，有耐心，心思敏捷，能吃苦耐劳。本人曾在学校参加学生会，并获得“优秀学生干部”，同时加入教务助理组，协助老师管理学校秩序和考勤记录工作。也曾在教务助理组协助主席举办 辩论 赛并担任主持人，并获得“优秀主持人”称号。年轻代表着热情有活力，希望能在往后学到更多的经验和知识。
怎样用HTML制作个人介绍网页？
你无须去记复杂的HTML语言，你可以用Netscape4.0或者WORD7.0,我用的是Frontpage.打开Netscape,在file菜单里选Edit
Page,便可以制作了.文字的处理基本跟Word没什么两样,关键是插入图片和产生链接.我们先做关于你自我介绍的一页，你先写上“大家好，我是superboy，下面是我的照片：”这时要放图片了，只须点击Insert菜单，选取Image,在Choosefile里选取你的图象文件即可，然后把这个文件保存为myself.html文件，放在myself的目录下。好，现在必须做封面了，你在封面写：“欢迎来到superboy的主页”以下是“自我介绍，我的爱好，我的工作”。你的自我介绍要链接到下一页去，你只须用鼠标选“自我介绍”后按鼠标右键
，再选create
link，然后再选你myself目录下的myself.html，就将“自我介绍”链接到下一页了，以后在浏览器中一按，就可以跳到镶有你靓照的页面啦。
在你的封面做好了所有链接和图片后，记住你必须将这一页保存为index.htm(有的主机要求必须为index.html),因为网页默认的主页名称是index.制作主页其实很简单，只要多实际制作，工多艺熟。还可以拿来主义，在网上看到什么好的主页，用另存为功能保存为.html格式的文件，细细研究人家是如何做的。还可以借用网页模版来搞，我的就是~~~~~~
网页制作网址大全
参考资料：
参考资料：