HTML实验一

最新推荐文章于 2023-11-22 11:59:11 发布

Zhang_Yixuan_ss

最新推荐文章于 2023-11-22 11:59:11 发布

阅读量8k

点赞数 7

分类专栏： Java学习文章标签： html checkbox button

本文链接：https://blog.csdn.net/Zhang_Yixuan_ss/article/details/80000811

版权

Java学习专栏收录该内容

15 篇文章 2 订阅

订阅专栏

一、实验目的及要求

1. 了解HTML 文档结构，学习如何编写HTML文档；；

2. 初步掌握基本标记的使用；练习使用HTML中最基本的一些标签，如定义标题、段落及标记文字的显示格式、背景图片、图像、水平线和超链接等。

3. 能够运用文本编辑器制作简单网页。

二、实验环境及相关情况（包含使用软件、实验设备、主要仪器及材料等）

操作系统为Windows XP，应用软件为Macromedia Dreamweaver 8或文本编辑器（EditPlus）

三、实验要求

电子文档的文件名格式为“学号+姓名.doc”。若实验报告有高度雷同现象，则所有雷同的实验报告成绩均评定为0分。

（一）、制作一个基本的页面

（二）、表格

（三）、表单

实验一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>基本页面</title>
</head>
<body bgcolor="#66CCFF">
	<h1 style="color:red;font-size:20px;text-align:center;" >动物世界</h1>
	<hr>
	<div style="text-align:center;">
	<a >首页</a>
	<a >动物一族</a>
	<a >百兽园</a>
	<a href="C:\Documents and Settings\Administrator\桌面\Untitled-1.html" style="color:red">动物图片</a>
	<a href="C:\Documents and Settings\Administrator\桌面\Untitled-1.html" style="color:red">动物论坛</a>
	</div>
	<br />
	<br />
	<div style="text-align:center;">
		<img src="gou.jpg" width="400px" height="350px" />
		<img src="mao.jpg" width="400px" height="350px" />
	</div>
	<br />
	<br />
	<br />
	<br />
	<p style="color:black;font-size:50px;text-align:center;">Thank You!</p>
</body>
</html>

实验二：

<html>
   <head>
     <title>学院人数统计</title>
   </head>
   <body bgcolor="#66CCFF" >
   <table border="1" align="center">
      <tr align="center">
         <th>学院名</th>
		 <th colspan="4">专业及人数</th>
      </tr>  
      <tr align="center">
         <td rowspan="6">计算机学院</td>
		 <td colspan="4">计算机科学与技术</td>
      </tr>
      <tr align="center">
         <td>2006级</td>
	     <td>2007级</td>
		 <td>2008级</td>
		 <td>2009级</td>
      </tr>
      <tr align="center">
		 <td>300人</td>
		 <td>200人</td>
         <td>150人</td>
         <td>120人</td>
      </tr>
      <tr align="center">
         <td colspan="4">软件工程专业</td>
      </tr>
      <tr align="center">
         <td>2006级</td>
		 <td>2007级</td>
		 <td>2008级</td>
		 <td>2009级</td>
      </tr>
      <tr align="center">
		 <td>100人</td>
	     <td>80人</td>
         <td>50人</td>
         <td>40人</td>
      </tr>
      <tr align="center">
			<td rowspan="3">外语专业</td>
			<td colspan="4">英语专业</td>
      </tr>
      <tr align="center">
 		 <td>2006级</td>
		 <td>2007级</td>
		 <td>2008级</td>
		 <td>2009级</td>
      </tr>
      <tr align="center">
 		 <td>100人</td>
		 <td>80人</td>
         <td>50人</td>
         <td>40人</td>
      </tr>
   </table>
  </body>
    
</html>

实验三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body bgcolor="#6699CC">
<h1>请选择您学习的方式</h1>
<div text-align="up">
<form>
<input type="radio" name="style" value="zaidu" checked>全日制在读
<input type="radio" name="style" value="zoudu">走读
<input type="radio" name="style" value="hanshou">函授
</form> 
</div>
<h1>请选择课程</h1>
<div>
<form>
<input type="checkbox" name="vehicle" value="wan">局域网工程
<br>
<input type="checkbox" name="vehicle" value="os">操作系统 
<br>
<input type="checkbox" name="vehicle" value="ds">数据结构
</form>
</div>
<h1>请输入您的要求</h1>
<textarea ></textarea>
<br />
<br />
<button type="button">提交</button>
<button type="button">重选</button>
</body>
</html>