实验一Java web基础一--web

一、实验目的
理解和巩固课堂上所学的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>

实验一Java web基础一--web

Guess you like