HTML上机

最新推荐文章于 2021-06-27 08:51:03 发布

aoyuehanzhi

最新推荐文章于 2021-06-27 08:51:03 发布

阅读量1.7k

点赞数 6

本文链接：https://blog.csdn.net/aoyuehanzhi/article/details/104382469

版权

上机实验1 制作一个课表

实验一制作一个本学期使用的课程表
一、实验目的和要求
制作一个本学期使用的课程表，要求有背景图像、背景音乐。
二、实验内容
制作一个本学期使用的课程表。
三、实验方法与步骤
用记事本写入html语句，依照本学期的课程，在文本文档写好后，改文件的后缀名为html，用浏览器打开查看效果，并在body中加入了背景图片，在head标签中加入bgsound标签，添加背景音乐。
四、实验数据记录、处理及结果分析
1、其中表格的核心代码如下：

<table border=1 background="kebiao_2.jpg" width="900" height="700" style="background-repeat: no-repeat;background-size: cover;">
			<caption>本学期课程表</caption>
			<tr height="80">
				<th width="80">节次\星期</th>
				<th width="180">星期一</th>
				<th width="180">星期二</th>
				<th width="180">星期三</th>
				<th width="180">星期四</th>
				<th width="180">星期五</th> 
				<th width="180">星期六</th>
				<th width="180">星期天</th>
			</tr>
		
			<tr height="80">
				<td>第一二节</td>
				<td>线性代数Ⅰ</td>
				<td></td>
				<td>线性代数Ⅰ</td>
				<td>大学英语Ⅲ</td>
				<td>数据结构</td>
				<td></td>
				<td></td>
			</tr>
			
			<tr height="80">
				<td>第三四节</td>
				<td > 大 学 英 语 Ⅲ </td>
				<td>大学体育（3）</td>
				<td>C#程序设计</td>
				<td>数据结构</td>
				<td>C#程序设计</td>
				<td></td>
				<td></td>
			</tr >
			
			<tr height="80">
				<td>第五六节</td>
				<td>Web设计基础</td>
				<td></td>
				<td>概率论与数理统计Ⅰ</td>
				<td></td>
				<td>数据结构</td>
				<td></td>
				<td></td>
			</tr>
			
			<tr height="80">
				<td>第七八节</td>
				<td>概率论与数理统计Ⅰ</td>
				<td></td>
				<td>马克思主义<br>基本原理概论</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			
			<tr height="80">
				<td>第九十节</td>
				<td></td>
				<td>韩国语入门（智慧<br>树）</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

2、实验效果：

upload successful

五、相关讨论、实验心得
1、在写table的时候要注意tr定义行，td定义列，在一行中写多个td标签，就会在一行中显示多列，注意tr和td标签的配对，否则会显示不成功。
2、表格由＜table＞标签来定义。
每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td　标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
表格的表头使用 th 标签进行定义，本实验中的星期一，星期二…..等就是用th定义的。
表格的标题用caption标签来定义，本实验中的表格上方的本学期课表就是该表格的标题
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
3、

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。本实验中如果不写本句话，在别人的电脑上就会乱码。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

4、什么是html
HTML 指的是超文本标记语言，他不是一种编程语言，而是一种标记语言是一套标记标签，用标记标签来描述网页。

上机实验二一、实验目的和要求

制作一个计算器界面
二、实验内容
制作一个计算器界面，能够在客户端实现加减乘除运算，示意图如P102 图4—22所示。
三、实验方法与步骤
根据课后题的模样，写一个界面，在form标签中写几个input标签，写入文本框，单选按钮和点击按钮，使得输入数据，点击单选按钮选择两数之间的操作，点击按钮实现两数之间的计算。
四、实验数据记录、处理及结果分析

	     1、form标签的定义代码：
<form method="post" action="" name="jisuan_Form">
			请输入第一个操作数：
			<input type="text" name="one"  /><br>
			请输入第二个操作数：
			<input type="text" name="two"  /><br>
			请选择操作：
			<input type="radio" name="caozuo"  value="+"/>+
			<input type="radio" name="caozuo" value="-"/>-
			<input type="radio" name="caozuo" value="*"/>*
			<input type="radio" name="caozuo" value="/"/> /<br><br>
		<input type="button" name="submit"  value="=" onclick="calculate()" /><br><br>
			结果是：<input type="text" name="ans" value=""/>
			</form>
	
	     2、按钮点击的操作函数：
      	<script>
			function calculate(){
				var txt1=document.jisuan_Form.one.value-0;
				var txt2=document.jisuan_Form.two.value-0;
				var fuhao=document.jisuan_Form.caozuo;
				var ans;
				var tmp;
				<!--找到选中的单选按钮,并将其赋值给tmp;而且这个i的类型不能是int类型,否则就不对-->
				for(var i=0;i<fuhao.length;i++){
					if(fuhao[i].checked){
						tmp=fuhao[i].value;
						break;
					}
				}
				<!--匹配tmp的选项,进行相应的运算,然后输出-->
				switch(tmp){
case "+": ans=txt1+txt2;  document.jisuan_Form.ans.value=ans;  break;
case "-": ans=txt1-txt2;  document.jisuan_Form.ans.value=ans; break;
case "*": ans=txt1*txt2;  document.jisuan_Form.ans.value=ans; break;
default:  ans=txt1/txt2;  document.jisuan_Form.ans.value=ans;
				}
			}
			</sc