學(xué)生個(gè)人網(wǎng)頁(yè)制作html代碼期末作業(yè)(學(xué)生個(gè)人網(wǎng)頁(yè)制作html+css)
本篇文章給大家談?wù)剬W(xué)生個(gè)人網(wǎng)頁(yè)制作html代碼期末作業(yè),以及學(xué)生個(gè)人網(wǎng)頁(yè)制作html+css對(duì)應(yīng)的知識(shí)點(diǎn),希望對(duì)各位有所幫助,不要忘了收藏本站喔。
本文目錄一覽:
- 1、html制作個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)代碼
- 2、大一學(xué)生 需要交一份作業(yè) 要制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè) 具體如下 望好心人解答 簡(jiǎn)單就好 htm版
- 3、急求做個(gè)簡(jiǎn)單html網(wǎng)頁(yè) 交作業(yè)用的
- 4、誰(shuí)能幫我用HTML語(yǔ)言做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)?代碼就行
html制作個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)代碼
以下是我用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 htmlhtml
head
meta charset="utf-8"
title我的個(gè)人簡(jiǎn)歷/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年升入陜西國(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"
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)備一個(gè)具備大?。▽捀撸┑腄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語(yǔ)言","mysql數(shù)據(jù)庫(kù)","Javascript語(yǔ)言","web開(kāi)發(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/
我入門時(shí)首先學(xué)的就是Java基礎(chǔ),然后再到Java高級(jí)開(kāi)發(fā),br/
在學(xué)習(xí)過(guò)程中老師細(xì)致的教學(xué)為我們打下了牢固的java基礎(chǔ)。 ? ? ? ? ? ? ?/li
limysql數(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
liJavascript語(yǔ)言:br/
在學(xué)JavaScript之前我有良好的html5和css基礎(chǔ),所學(xué)習(xí)JavaScript時(shí)也是十分順利的掌握了課本里的內(nèi)容。/li
liweb開(kāi)發(fā):br/
web開(kāi)發(fā)是我最喜愛(ài)的科目之一,servlet的學(xué)習(xí)給我啟發(fā)深刻。/li
lissm框架:br/
ssm框架相比springboot而言是比較繁瑣的,但是在學(xué)習(xí)和理解起來(lái)卻比springboot更容易讓人掌握。/li
lispringboot框架:br/
springboot框架入門起來(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
lia href="#city"咕泡商城項(xiàng)目/a/li
lia 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)目的主要是寫一個(gè)汽車app社交平臺(tái),包括用戶登錄注冊(cè),用戶上傳車輛信息,統(tǒng)計(jì)用戶車輛,分析故障車輛原因,
以及導(dǎo)航、朋友圈等功能一體的汽車平臺(tái)。該項(xiàng)目用戶的使用方法如下: ? ? ? ?p1.新用戶進(jìn)行登錄注冊(cè)。/p
p2.登錄成功后新用戶可以進(jìn)行修改密碼、昵稱、頭像等個(gè)人信息。/p
p3.新用戶上傳自己車輛信息,并綁定賬號(hào)。/p
p4.新用戶可以上傳自己車輛故障,系統(tǒng)自動(dòng)查詢車輛故障原因以及維修方案。/p
p5.用戶可以添加車友,在車友圈發(fā)布求助信息等。/p
p6.用戶還可以進(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)目主要是寫一個(gè)網(wǎng)上商城電商購(gòu)物平臺(tái),包括用戶登錄注冊(cè),用戶綁定信息,上傳頭像、昵稱等個(gè)人信息,
用戶主要可以在該平臺(tái)上面購(gòu)買各種商品,每種商品都做好了分類管理,用戶點(diǎn)擊分類名稱或者準(zhǔn)確搜索都能顯示出自己想要的商品。用戶點(diǎn)擊商品就可以
鏈接到商品詳情頁(yè)面,不論是購(gòu)物還是瀏覽商品都非常的方便。該項(xiàng)目用戶的使用方法: ? ? ? ?p1.新用戶進(jìn)行登錄注冊(cè)。/p
p2.登錄成功后新用戶可以進(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í)行步驟如下: ? ? ? ?p1.后端爬取數(shù)據(jù)并存到數(shù)據(jù)庫(kù)。/p
p2.中間清洗數(shù)據(jù),將數(shù)據(jù)改變?yōu)榍岸巳藛T需要的格式。/p
p3.前端人員根據(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
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高級(jí)中學(xué)/td
/tr
tr
td2018.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"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;電話號(hào)碼: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;個(gè)人博客:;/p
/div
/body/html
大一學(xué)生 需要交一份作業(yè) 要制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè) 具體如下 望好心人解答 簡(jiǎn)單就好 htm版
隨便打開(kāi)一個(gè)網(wǎng)頁(yè),點(diǎn)鼠標(biāo)右鍵,查看源碼,還可以另存為某個(gè).html文件,用文本編輯軟件修改。
急求做個(gè)簡(jiǎn)單html網(wǎng)頁(yè) 交作業(yè)用的
前提:隨便你在電腦里那個(gè)盤里新建文件夾,命名為:love,然后在這個(gè)文件夾里,分別建六個(gè)html文件,命名的話就像下面(如果真的不會(huì),就在文件夾里新建六個(gè)txt記事本,建好之后分別重命名為以下的名稱。)。
首先,主頁(yè)為:index.html,另外五個(gè)網(wǎng)頁(yè)為:index1.html,index2.html,index3.html,index4.html,index5.html。
網(wǎng)頁(yè)1代碼:文件名:index1.html
html
head/head
body
pi love you!/p
/body
/html
網(wǎng)頁(yè)2代碼:文件名:index2.html
html
head/head
body
pi hate you!/p
/body
/html
網(wǎng)頁(yè)3代碼:文件名:index3.html
html
head/head
body
pi miss you!/p
/body
/html
網(wǎng)頁(yè)4代碼:文件名:index4.html
html
head/head
body
pi miss you too!/p
/body
/html
網(wǎng)頁(yè)5代碼:文件名:index5.html
html
head/head
body
pi love you too!/p
/body
/html
最終要的是主頁(yè)代碼:index.html,代碼如下
html
head/head
body
img src="XXX.JPG"/
a href="index1.html"網(wǎng)頁(yè)1/a
a href="index2.html"網(wǎng)頁(yè)2/a
a href="index3.html"網(wǎng)頁(yè)3/a
a href="index4.html"網(wǎng)頁(yè)4/a
a href="index5.html"網(wǎng)頁(yè)5/a
/body
/html
到這里,你的工作算是完成了,點(diǎn)擊index.html文件預(yù)覽。應(yīng)該可以符合你的作業(yè)要求 了。如果還是不懂,追問(wèn)我。
誰(shuí)能幫我用HTML語(yǔ)言做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)?代碼就行
html
head
title第一個(gè)html網(wǎng)頁(yè)/title
metacharset="utf-8"
/head
body
/body
/html
html
head
title第一個(gè)html網(wǎng)頁(yè)/title
metacharset="utf-8"
/head
body
table
tr
td第一行第一列/td
td第一行第二列/td
/tr
tr
td第二行第一列/td
td第二行第二列/td
/tr
/table
/body
/html
擴(kuò)展資料
HTML語(yǔ)言特點(diǎn)
1、HTML語(yǔ)法較弱。
在w3c制定的HTML5規(guī)范中,對(duì)于HTML5在語(yǔ)法結(jié)構(gòu)上的規(guī)格限制是較松散的,如、或在瀏覽器中具有同樣的功能,是不區(qū)分大小寫的。另外,也沒(méi)有嚴(yán)格要求每個(gè)控制標(biāo)記都要有相對(duì)應(yīng)的結(jié)束控制標(biāo)記。
2、HTML5編寫簡(jiǎn)單。
即使用戶沒(méi)有任何編程經(jīng)驗(yàn),也可以輕易使用HTML來(lái)設(shè)計(jì)網(wǎng)頁(yè),HTML5的使用只需將文本加上一些標(biāo)記(Tags)即可。
3、HTML標(biāo)記數(shù)目有限。
在w3C所建議使用的HTML5規(guī)范中,所有控制標(biāo)記都是固定的且數(shù)目是有限的。固定是指控制標(biāo)記的名稱固定不變,且每個(gè)控制標(biāo)記都已被定義過(guò),其所提供的功能與相關(guān)屬性的設(shè)置都是固定的。
關(guān)于學(xué)生個(gè)人網(wǎng)頁(yè)制作html代碼期末作業(yè)和學(xué)生個(gè)人網(wǎng)頁(yè)制作html+css的介紹到此就結(jié)束了,不知道你從中找到你需要的信息了嗎 ?如果你還想了解更多這方面的信息,記得收藏關(guān)注本站。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。