一、实验目的
理解和巩固课堂上所学的Java Web基础知识以及HTML、CSS,提高学生对知识的实际运用与软件编程实现能力。
二、实验内容
1、练习Web服务器启动、测试、应用程序部署方法。
2、设计个人主页。
(1)要求至少包含但不限于以下元素:
① 标题② 图片③ 超链接④ 表格⑤ 滚动字幕
(2)用CSS对个人主页中的部分文字设定样式。
要用到以下三种方法:
① Style属性② Style标记块③ Style独立文件
三、实验要求
- 实验要独立按时完成;实验要独立按时完成;实验要独立按时完成。(重要的事情说三遍)2. 文件名字不要使用中文,文件名字首字母小写。3. 第一个文件命名为为index.html。4. 程序中的路径要使用相对路径,不要使用绝对路径。5.所有文件打成一个文件压缩包提交。压缩包文件命名规则:计181-01-姓名。
(这个巨简单,我也写的巨简单)
//index.html
<!DOCTYPE html>
<head>
<title>嗷嗷嗷</title>
<!-- 独立样式文件(外部样式表) -->
<link rel="stylesheet" type="text/css" href="xpp1.css"/>
<!-- 样式块定义样式(嵌入样式表) -->
<style>
div
{
display:block;
background-color:pink;
padding:1.2em;
margin-bottom:1em;
}
span
{
display:block;
font-size:16pt;
}
</style>
</head>
<body>
<h1>
<marquee>欢迎来到hhh的个人主页</marquee>
<marquee direction=right width=500> </MARQUEE>
<br/>
</h1>
<!-- STYLE属性使用(内联式样式表) -->
<h2 style="font-size:20pt;
font-family:arial;
font-weight:bold;
font-style:italic;
color:pink;
text-align:center;
text-decoration: overline;">是时候暴露身份了!</h2>
<div>
<OL>
<span>姓名:hhh<br/></span>
<span>年龄:还小<br/></span>
<span>特长:睡觉<br/></span>
<span> 缺点:懒,容易暴躁<br/></span>
<span>优点:emmm不好说<br/></span>
<span>愿望:希望天天开心快落o(* ̄▽ ̄*)ブ<br/></span>
</OL>
</div>
<h3>好像做个表格更好看一点!(其实是任务)</h3>
<div class="paragraph">
<font color="black" size="5pt">
<table width="1500" border="1">
<tr>
<td rowspan="2">姓名</td>
<td rowspan="2">年龄</td>
<td colspan="2" align="center">特点</td>
</tr>
<tr>
<td>优点</td>
<td>缺点</td>
</tr>
<tr>
<td>hhh</td>
<td>还小</td>
<td>emmm不好说</td>
<td>懒,容易暴躁</td>
</tr>
</table>
</font>
</div>
<h4><a href="image1.html"target="_blank">Click me!</a></h4>
</body>
</html>
//.css
@CHARSET "UTF-8";
h1
{
font-size:42pt;
font-family:arial;
font-weight:bold;
font-style:italic;
color:yellow;
text-align:center;
text-decoration: overline;
}
h3,h4
{
font-size:20pt;
font-family:arial;
font-weight:bold;
font-style:italic;
color:pink;
text-align:center;
text-decoration: overline;
}
//image1.html,这个要交作业嘛,是相对路径的,图片也在交作业的压缩包里边。
<!DOCTYPE html>
<html>
<head>
<title>image1.html</title>
</head>
<body>
<h1>敲可爱的嗷!</h1>
<img src="龙猫.jpg" border="1"width="400"height="200"/>
<img src="琪琪.jpg" border="1"width="400"height="200"/>
</body>
</html>