实验01-02 HTML基础与PHP开发环境
实验目的
-
掌握HTML常用标记的使用方法 2. 掌握PHP配置文件的配置方法
实验准备
一、搭建Apache-PHP-MySQL环境 -
从教育在线和Q群下载 Apache-PHP-MySQL环境搭建.rar 文件解压
-
运行 appserv-win32-2.5.10.exe 默认设置直到以下窗口,将服务器名设置为:localhost 端口号改为:8080 (默认的端口号80可能已经被占用);MySQL密码设为111 (便于记忆,其它默认)
-
测试:打开浏览器输入地址:127.0.0.1:8080 界面如下 环境搭建成
-
熟悉一下Apache服务器的httpd 命令(关闭、启动、重启WEB服务),运行 控制台 程序,输入:
httpd -k shutdown [ start ] [ restart ] -
熟悉一下Apache服务器配置文件httpd.conf
在AppServ目录下的Apache子目录,找到conf文件夹打开httpd.conf;如果想将端口修改为8088,按Ctrl+F键,搜索Listen,将端口修改为8088,重新启动Apache ( httpd -k restart ) -
熟悉一下MySQL常用命令,运行 控制台 程序,输入:
mysql -uroot -h127.0.0.1 -p111
show databases; use test; show tables;
create table if not exists user(编号 CHAR(6) NOT NULL PRIMARY KEY, 姓名 CHAR(8) NOT NULL);
set names gb2312;
describe user;
insert into user values(‘123456’, ‘钟南山’);
insert into user values(‘654321’, ‘张文宏’); select * from user;
实验内容
一、用PHP编写一个标准体重计算器,在当前页面显示结果(文件名命名为SY2_1.php)
标准体重计算公式:标准体重=(身高cm-100)×0.9(kg)
提示:参阅课本P54代码。
二、用PHP编写一个标准体重计算器,在另一个页面显示结果(文件名命名为SY2_21.php和SY2_22.php)
提示:参阅课本P55~56代码。
三、用JavaScript编写一个标准体重计算器 (文件名命名为SY2_3.html)
四、(选做)完成教材P305~309实验1 – 使用HTML制作网页 的实验1.11.3(文件名分别为SY1_1.php SY1_3.php)
五、思考与练习:实验1-使用HTML制作网页 中的实验1.1~1.3后面的【思考与练习】P309
实验结果提交
登录教育在线,将各题的.html和.php文件打包提交。
一、
(1)sy1_1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本标记</title>
</head>
<body>
<h1 align="center">标题标记</h1>
<p align="center">分段标记</p>
<b>换行标记</b><br/>
<center> 对中标记</center><br/>
<hr size="2" width="300" noshade>
<div align="center" >
<font size="5" color="red" face= "黑体">块标记</font>
</div>
<a href="http://www.163.com">超链接</a>
</body>
</html>
(2)sy1_2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息显示</title>
</head>
<body>
<table align=center border="1" bordercolor="skyblue">
<caption>
<font size="5" color=blue >
学生成绩表
</font>
</caption>
<tr bgcolor="#CCCCCC" height="30">
<td with = 80>专业</td>
<td with = 80>学号</td>
<td with = 80>姓名</td>
<td with = 90>计算机导论</td>
<td with = 90>数据结构</td>
<td with = 90>PHP</td>
</tr>
<tr bgcolor="#CCCCCC" height="30">
<td with = 80>计算机</td>
<td with = 80>001</td>
<td with = 80>张三</td>
<td with = 90>80</td>
<td with = 90>70</td>
<td with = 90>90</td>
</tr>
<tr bgcolor="#CCCCCC" height="30">
<td with = 80>计算机</td>
<td with = 80>002</td>
<td with = 80>李四</td>
<td with = 90>88</td>
<td with = 90>77</td>
<td with = 90>66</td>
</tr>
<tr bgcolor="#CCCCCC" height="30">
<td with = 80>软件工程</td>
<td with = 80>003</td>
<td with = 80>王五</td>
<td with = 90>79</td>
<td with = 90>100</td>
<td with = 90>85</td>
</tr>
</tr>
<tr bgcolor="#CCCCCC" height="30">
<td with = 80></td>
<td with = 80></td>
<td with = 80></td>
<td with = 90></td>
<td with = 90></td>
<td with = 90></td>
</tr>
</table>
</body>
</html>
(3)sy1_3.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>学生个人信息</title>
<style type="text/css">
</style>
</head>
<body background="http://pic235.nipic.com/file/20190821/13258436_125659518037_2.jpg">
<form name ="form" action="" method="post">
<table width="400" border="0" align="center" bgcolor="skyblue">
<tr >
<td colspan="2" bgcolor="pink" >
<div align="center" class="STYLE1"> 学生个人信息</div>
</td>
</tr>
<tr>
<td with="120" class="STYLE2" >学号:</td>
<td><input type="text" name="studentNum" value="181101"></td>
</tr>
<tr>
<td with="120" heigth="25" class="STYLE2" >姓名:</td>
<td><input type="text" name="name" value="王林"></td>
</tr>
<tr>
<td class="STYLE2" >性别:</td>
<td>
<input type="radio" name="sex" value="男" checked ="checked">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td with="120" class="STYLE2" >出生日期:</td>
<td><input type="text" name="birthday" value="1999-01-02"></td>
</tr>
<tr>
<td class="STYLE2" >所学专业:</td>
<td>
<select name = "major">
<option>计算机</option>
<option>软件工程</option>
<option> 信息科学</option>
<option>物联网</option>
</select>
</td>
</tr>
<tr>
<td with="120" class="STYLE2" >所学课程:</td>
<td>
<select name = "major">
<option>PHP</option>
<option>JAVA</option>
<option> Linux</option>
<option>Oracle数据库</option>
<option>新媒体技术</option>
</select>
</td>
</tr>
<tr>
<td with="120" class="STYLE2" >备注:</td>
<td><input type="text" name="other" value="团员"></td>
</tr>
<tr>
<td with="120" class="STYLE2" >兴趣:</td>
<td>
<input type="checkbox" name="sex" value="男" checked ="checked">打游戏
<input type="checkbox" name="sex" value="女">听歌
<input type="checkbox" name="sex" value="男" checked ="checked">追剧
<input type="checkbox" name="sex" value="女">看小说
<input type="checkbox" name="sex" value="男" checked ="checked">打篮球
<input type="checkbox" name="sex" value="女">睡觉
<input type="checkbox" name="sex" value="男" checked ="checked">打羽毛球
<input type="checkbox" name="sex" value="女">打乒乓球
</td>
<tr>
<td align="center" name="submit" value="提交">
<input type="submit" name="bottom1" value="提交">
<input type="reset" name="bottom2" value="重置"></td>
</tr>
</tr>
</table>
</form>
</body>
</html>
二、
(1)sys2_1.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP交互界面演示</title>
</head>
<body>
<h2 align="center" >标准体重计算器</h2>
<form action="SY2_1.php" method="post">
请输入身高(cm):<input type="text" name="height"/>
<input type="submit" name= "botton" value="提交"/>
</form>
</body>
</html>
<?php
if(isset($_POST["botton"]))
{
$Height=$_POST["height"];
$W=($Height-100)*0.9;
echo $Height." 标准体重为:".$W."kg";
}
?>
(2)sy2_21.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP交互界面演示</title>
</head>
<body>
<h2 align="center" >标准体重计算器</h2>
<form action= "SY2_22.php" method="post">
请输入身高(cm):<input type="text" name="height"/>
<input type="submit" name= "botton" value="提交"/>
</form>
</body>
</html>
3)sy2_22.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP交互界面演示</title>
</head>
<?php
if(isset($_POST["botton"]))
{
$Height=$_POST["height"];
$W=($Height-100)*0.9;
echo $Height." 标准体重为:".$W."kg";
}
?></html>
(4)sy2_3.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP交互界面演示</title>
</head>
<body>
<h2 align="center" >标准体重计算器</h2>
<form action="SY2_1.php" method="post">
请输入身高():<input type="text" name="height"/>
<input type="submit" name= "botton" value="提交"/>
</form>
</body>
<scrip>
function()
{
var h=document.getElementsByName("height");
var w=(h-100)*0.9;
<?php
echo h." 标准体重为:".$w."kg";
?>
}
</script>
</html>
转载:https://blog.csdn.net/m0_51073424/article/details/116198606