北邮HTML实验代码.docx

《北邮HTML实验代码.docx》由会员分享，可在线阅读，更多相关《北邮HTML实验代码.docx（7页珍藏版）》请在冰豆网上搜索。

北邮HTML实验代码

北邮HＴＭL实验代码

————————————————————————————————　作者:

————————————————————————————————日期:

ﻩ

[文档标题]

[文档副标题]

院系：

电子工程学院

班级：

2014211201

学号：

2014210819

学生：

梁嘉琪

班内序号：

22

　　　用HＴＭL语言制作静态网页

1、主题:

主要是在编写代码之前突然看到网上的一篇文章是讲世界美食的分布的一些图片所以就以世界美食　——我的环球美食梦想之旅为主题来制作网页。

2、网页的源代码

1、主题:

　＜head>

　　　　　信网作业——我的环球美食梦想之旅　

　　＜/ｈead>

2、背景音乐　&背景图片

　　　　　　　　　　width="１＂ｈeighｔ＝"1"aｕtostart=1loop＝true/＞

3.标题＆学生信息

＜centeｒ>＜b>我的环球美食梦想之旅

20142１120１　　姓名:

梁嘉琪　

　　　　　　　　学号：

2014２10819　

　　<ｈr/>

4、标题２段落二　　多媒体：

插入图片音乐和视频

一、全球美食地图　　（@＞＿<@）<ｂr/>

　　　＜p>烹饪专家CaｉtlinＬeｖin＜／i>和摄影师＜i＞HenrｙHａrgreaves＜/i>从旅行中获得灵感,开始用国家传统食物作画,想以此展示各地区的文化差异和特点。

　　　　<ｉmgsrc＝"ＩMＧ＿2016１123_2027３1．png"alt　=　"图像示例"　wｉdｔh="1000"　ｈeight=＂１000＂＞

　　　<ｉmg　ｓｒc=　"IMＧ＿20161１23_202８3６.pｎg"ａlt　=　"图像示例"ｗidth="1０00"　ｈeｉｇht＝"１000">

　　　　<ｉmｇsrc＝"ＩMG＿2016112３_20２92０.pnｇ"　alｔ=＂图像示例"widｔｈ=＂1000"heiｇht="１０00">

　<ｉｍg　src="IMＧ_２0161123＿２029４6.png"aｌt　="图像示例＂wｉdtｈ="１００0"heighｔ＝＂1000＂>

　　　　　＜imgｓrc="IMG_２0161123_２03０07.png"alｔ="图像示例"widｔh="1000＂hｅｉｇht="1000">

　　　　＜hr／>

　　　　　＜bｒ／>

5、标题三段落加粗斜体等　多媒体：

插入图片

二、美食之旅（@>_<@）

　＜biｇ>吃遍全世界!

!

　　<ｉmｇｓrc＝"83＋-1５2１967６９.jpg"alt=＂图像示例"　ｗidtｈ="200"ｈeighｔ＝＂３０0＂>

　　　＜iｍgｓrc=＂62+－１5１３385261.jpｇ"alt=＂图像示例"wｉdth=＂200"ｈeight＝"300">

　　

　　

　

　　　　　　＜br／＞

　

　　　＜imｇｓrｃ=＂２6＋-12073２2337.jｐg"ａlｔ　＝"图像示例"wｉｄｔh="２０0"ｈeight="300">

　　　　　

　　　

　　＜imgｓｒc　="6７+-74865７８27.jpg"ａlt=　"图像示例"　widtｈ＝"20０＂　hｅiｇht="3０0"＞

　　＜br／>

　　　　　<ｉmgsrc　="５3+1180070413.jｐg"alｔ="图像示例"width=＂２00"　ｈeight＝"３0０"＞

　　　

　　　<ｉmgsrc="61＋-48６539275．ｊpg＂alt＝"图像示例＂　　width＝"2０0＂ｈｅight=＂300＂>

　　　＜imgｓrｃ=　"96+-１5８83３0812.jpg"alt="图像示例"　　ｗidth="200"ｈeigｈt＝＂300＂>

　　＜imｇ　ｓrc　=　"86+1292960298.jｐg"ａｌｔ="图像示例"ｗidtｈ＝"２０0"height＝"３00"＞

　　

　　　＜br／>

　　　＜big>IWｉsｈ　ｍyＤｒｅａm　ComeTrue!

!

　　

　

---

　　　<ｂｒ/>

6、表单

　　　<ｆoｒｍnａme＝"ｉｎput"acｔｉon=＂ｈtｍl_forｍ_actiｏｎ.ａｓp"ｍethod=＂gｅｔ"＞

　　性别

　　男

　　　　<ｉnput　type＝"raｄio"ｎaｍe="sex"ｖaluｅ="feｍale"/>女

　　　＜bｒ/＞

　　年龄＜ｂr/＞

　　＜inputtyｐｅ="text"name="ｏlｄ"　/＞

　　　

　

　　　　＜iｎputtｙｐe　="checkbｏx＂nａmｅ＝"ｔwo"／>大二

　　　　＜iｎputtype　=　＂ｃheckbox"　ｎamｅ="three"/＞大三

　　＜inputｔyｐe=　"checkbox＂naｍｅ="fｏur"/>大四

　　　　

　　　　　　研一

　　　研二

　＜inputtｙpe=＂checkbｏx＂name=　"threｅ1"/>研三

　　　

　　　　　你对现在的生活满意么？

你感觉自由么?

　　＜ｉnput　typｅ=＂raｄｉo"namｅ＝"bt"ｖaｌuｅ=＂yｅs＂/>是

　　　＜inｐuｔtypｅ＝"ｒａdio"name="ｂｔ"vaｌue＝"no"/>否

　　＜br/＞

　　　你希望进行环球旅行么？

（@>_<@）

　　是

　　　　

　　　　＜/form>

　　　　　　

---

　　　　　＜hｒ/＞

　　＜br/>

7、表格　　中有超连接

　

　　　　　＜tｒ>＜ｔｄ>＜ahｒef=＂#吃遍全世界!

!

"＞１

　　　　3＜td>4＜/tｄ>

　　　　　

　　　

　　　　

---

　　　

8、超链接　我的邮箱

　

　　　　　

　　　

　　　

　　

9、

滚动点击图片　回到顶部超链接

　　　

　　

scroｌl（0,0）">返回顶部＜ｉmgsｒc=＂83+-1521９67６９.jｐg"alｔ="返回顶部"widｔｈ="２0＂　hｅight="30"/>

　<／ｂody＞

10、框架

　　＜fraｍeｓeｔ　cｏlｓ＝"25%,７5%">

　

　　＜ｆrameｓrc="aa.