web编程基础实验

最新推荐文章于 2021-05-27 21:09:00 发布
最新推荐文章于 2021-05-27 21:09:00 发布
阅读量646 收藏 7
点赞数 4
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47354826/article/details/115403751
版权

HTML CSS JavaScript 布局 表单验证
关键词由CSDN通过智能技术生成

题目要求：

一、在这里插入图片描述
源代码：

<!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=utf-8" />
<title>表格制作</title>
</head>

<body>
	<table border="1" height="15%" width="60%" align="center">
    	<tbody>
        <tr>
        	<td colspan="2" bgcolor="red" align="center">1</td>
            <td align="center">2</td>
            <td align="center">3</td>
        </tr>
        <tr>
        	<td rowspan="2" bgcolor="green" align="center">4</td>
            <td align="center">5</td>
            <td rowspan="3" bgcolor="pink" align="center">6</td>
            <td rowspan="2" bgcolor="skyblue" align="center">7</td>
        </tr>
        <tr>
        	<td align="center">8</td>
        </tr>
        <tr>
        	<td align="center">9</td>
            <td align="center">10</td>
            <td align="center">11</td>
        </tr>
    	</tbody>
    </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=utf-8" />
<title>表单设计</title>
</head>

<body>
	<form>
    	<table>
        	<tr>
            	<td> 姓名：</td>
                <td>
                	<input type="text" id="name" value="" size="20">
                </td>
            </tr>
            <tr>
            	<td>性别：</td>
                <td>
                	<input type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                </td>
            </tr>
            <tr>
            	<td>籍贯：</td>
                <td>
                	<select name="home">
                    	<option id="default" selected="selected">
                        济南
                        </option>
                       <option id="jianing">济宁</option>
                       <option id="zaozhaung">枣庄</option>
                       <option id="rizhao">日照</option>
                       <option id="jinan">济南</option>
                    </select>
                </td>
            </tr>
            <tr>
            	<td>爱好：</td>
            	<td>
                	<input type="checkbox">音乐
                    <input type="checkbox">体育
                    <input type="checkbox">美术
                </td>
            </tr>
            <tr>
            	<td>备注：</td>
                <td>
                	<textarea cols="30%" rows="15%"></textarea>
                </td>
            </tr>
            <tr>
            	<td colspan="2" align="center">
                	<input type="submit" value="提交">
                    <input type="reset" value="取消" >
                </td>
            </tr>
        </table>
        <table>
       
    </form>
</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=utf-8" />
<title>表单二</title>
</head>

<body>
<form>
 <table>
        &nbsp;
        	<tr>
            	<td>名字：
                	<input type="text" >
                </td>
                
            </tr>
            <tr>
            	<td>E-mail:
                	<input type="text">
                </td>
  
            </tr>
            <tr>
            	<td>
            		<textarea rows="5" cols="50"></textarea>
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" value="发送留言">
                    <input type="reset" value="重写留言">
                </td>
                
                	
            </tr>
         </table>
         </form>
</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=utf-8" />
<title>表单三</title>
</head>

<body>
	<form >
    	<table>
        	<caption>请选择您的择友条件</caption>
        	<tr>
            	<td>性别：</td>
                <td>
                	<input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                    <input type="radio" name="sex">不限
                </td>
            </tr>
            <tr>
            	<td>年纪：</td>
                <td>
                	<select>
                    	<option>21~25</option>
                        <option>26~30</option>
                        <option>31~35</option>
                    </select>
                </td>
            </tr>
            <tr>
            	<td>居住地区：</td>
                <td>
                	<select>
                    	<option>北京</option>
                    	<option>上海</option>
                        <option>深圳</option>
                    </select>
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="1" value="送出选择">
                </td>
            </tr>
        </table>
    </form>
</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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>css1</title>
	<style type="text/css">
		.box{
			position: absolute;
			width: 500px;
			height: 400px;
			border:1px solid #000; 
		}
		.shangbian{
			background-color:#33FF33;
			position: absolute;
			width: 500px;
			height: 70px;

		}
		.denglukou{
			background-color:#DDDDDD;
			position: absolute;
			top: 70px;
			width: 125px;
			height: 50px;
		}
		.tongji1{
			background-color:#99FF99;
			position: absolute;
			top: 120px;
			width:125px;
			height: 70px;
		}
		.tongji2{
			position: absolute;
			width:125px;
			top: 190px;
			height: 80px;
		}
		.tongji3{
			position: absolute;
			top: 270px;
			width: 125px;
			height: 80px;
			background-color:#FAF0E6  ;
		}
		.xiamian{
			background-color:#5500DD;
			position: absolute;
			top: 350px;
			height: 50px;
			width: 500px;
		}
		.center{
			position: absolute;
			top: 70px;
			left: 125px;
			height: 280px;
			width: 375px;
			background-color:#D0D0D0;
		}
		p {
			position:absolute;
			top: 50%;
			left: 50%;
			width: 80px;
			height: 20px;
			margin-top:-10px;
			margin-left:-40px; 
			background-color: white;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="shangbian">
			<p align="center">上边</p>
		</div>
		<div class="denglukou">
			<p align="center">登录口</p>
		</div>
		<div class="tongji1">
			<p align="center">统计</p>
		</div>
		<div class="tongji2">
			<p align="center">统计</p>
		</div>
		<div class="tongji3">
			<p align="center">统计</p>
		</div>
		<div class="xiamian">
			<p align="center">下面区域</p>
		</div>
		<div class="center">
			<p align="center">中间部分</p>
		</div>
	</div>	
</body>
</html>

网页效果：(颜色略有差别)
在这里插入图片描述

六、
在这里插入图片描述
源代码：
（对标签p设置外边距来保证标签处于div层的中间）

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>css1</title>
	<style type="text/css">
		.box{
			position: absolute;
			width: 500px;
			height: 400px;
			border:1px solid #000; 
		}
		.shangbian{
			background-color:#33FF33;
			position: absolute;
			width: 500px;
			height: 70px;

		}
		.denglukou{
			background-color:#DDDDDD;
			position: absolute;
			top: 70px;
			width: 125px;
			height: 50px;
		}
		.tongji1{
			background-color:#99FF99;
			position: absolute;
			top: 120px;
			width:125px;
			height: 70px;
		}
		.tongji2{
			position: absolute;
			width:125px;
			top: 190px;
			height: 80px;
		}
		.tongji3{
			position: absolute;
			top: 270px;
			width: 125px;
			height: 80px;
			background-color:#FAF0E6  ;
		}
		.xiamian{
			background-color:#5500DD;
			position: absolute;
			top: 350px;
			height: 50px;
			width: 500px;
		}
		.center{
			position: absolute;
			top: 70px;
			left: 125px;
			height: 280px;
			width: 375px;
			background-color:#D0D0D0;
		}
		p {
			position:absolute;
			top: 50%;
			left: 50%;
			width: 80px;
			height: 20px;
			margin-top:-10px;
			margin-left:-40px; 
			background-color: white;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="shangbian">
			<p align="center">上边</p>
		</div>
		<div class="denglukou">
			<p align="center">登录口</p>
		</div>
		<div class="tongji1">
			<p align="center">统计</p>
		</div>
		<div class="tongji2">
			<p align="center">统计</p>
		</div>
		<div class="tongji3">
			<p align="center">统计</p>
		</div>
		<div class="xiamian">
			<p align="center">下面区域</p>
		</div>
		<div class="center">
			<p align="center">中间部分</p>
		</div>
	</div>	
</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=utf-8" />
<title>css2</title>
<style type="text/css">
.box{
	position:absolute;
    border:1px solid blue;
	}
.shang{
	position:absolute;
	width:800px;
	height:100px;
	background-color:#00FFFF;
    border: 1px solid blue;
	}
.left{
	position:absolute;
	width:250px;
	height:500px;
	top:100px;
	background-color:#ffffff;
    border: 1px solid blue;
    
	}
.loign{
    position: absolute;
    top: 110px;
    height: 120px;
    width: 230px;
    left: 7px;
    background-color: #FFFF77;
    border: 2px solid #00FF00;
    }
.center{
	position:absolute;
	width:550px;
	height:500px;
	top:100px;
	left:250px;
	background-color:#00FF00;
    border: 1px solid blue;
	}

</style>
</head>

<body>
	<div class="box">
    	<div class="shang"></div>
        <div class="left"></div>
        <div class="loign">
        <form>
        <table>
        	<tr>
            	<td>
                	用户名：
                </td>
                <td>
                	<input type="">
                </td>
            </tr>
            <tr>
            	<td>
                	密码：
                </td>
                <td>
                	<input type="">
                </td>
            </tr>
            <tr>
            	<td align="right"><input type="submit" value="提交" ></td>
                <td align="center"><input type="reset" value="重置" ></td>
            </tr>
        </table>
        </form>
        </div>
        <div class="center">
        <p>此处显示Div标签的内容</p>
        </div>
       </div>
</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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>css3</title>
	<style type="text/css">
		.top{
			position: absolute;
			width: 500px;
			height: 100px;
			background-color:#0066FF;
		}
		.left{
			position:absolute;
			top:100px;
			width: 125px;
			height: 450px;
			border: 1px solid #0066FF;
		}
		.up{
			position: absolute;
			top:120px;
			left:20px;
			width: 100px;
			height: 60px;
			text-align:center;
			border: 1px solid #0066FF;
		}
		.center{
			position: absolute;
			top: 108px;
			height: 442px;
			left:133px;
			width: 372px;
			background-color:#FFFFBB;
			border:1px solid #000;
		}
		.bottom{
			position: absolute;
			top: 550px;
			width: 500px;
			height: 30px;
			background-color: #0066FF;
		}
	</style>
</head>

<body>
	<div class="top"></div>
	<div class="left"></div>
	<div class="up">登录区域</div>
	<div class="center">此处显示新div标签的内容</div>
	<div class="bottom"></div>	
</body>
</html>

网页效果：
在这里插入图片描述

九、（注意实现文字在div层中的位置）
在这里插入图片描述
源代码：

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>矩阵布局</title>
	<style type="text/css">
		.box{
			position: absolute;
			width: 380px;
			height: 230px;
			border: 2px solid #000;
		}
		.one{
			position: absolute;
			top: 20px;
			left:20px;
			width: 100px;
			height: 50px;
			border: 2px solid #000;
		}
		.two{
			position: absolute;
			top: 20px;
			left: 140px;
			width: 100px;
			height: 50px;
			border: 2px solid #000;
		}
		.three{
			position: absolute;
			top: 20px;
			right:20px;
			width: 100px;
			height:50px;
			border: 2px solid #000;
		}
		.four{
			position: absolute;
			top: 90px;
			left: 20px;
			width: 100px;
			height: 50px;
			border:2px solid #000;
		}
		.five{
			position: absolute;
			top: 90px;
			left: 140px;
			width: 100px;
			height: 50px;
			border: 2px solid #000;
		}
		.six{
			position: absolute;
			top: 90px;
			right: 20px;
			width: 100px;
			height: 50px;
			border:2px solid #000;
		}
		.seven{
			position: absolute;
			top: 160px;
			left: 20px;
			width: 100px;
			height: 50px;
			border: 2px solid #000;
		}
		.eight{
			position: absolute;
			top: 160px;
			left:140px;
			width: 100px;
			height: 50px;
			border: 2px solid #000;
		}
		.nine{
			position: absolute;
			top: 160px;
			right: 20px;
			width: 100px;
			height: 50px;
			border:2px solid #000;
		}
		div {
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="box">
	<div class="one">1</div>
	<div class="two">2</div>
	<div class="three">3</div>
	<div class="four">4</div>
	<div class="five">5</div>
	<div class="six">6</div>
	<div class="seven">7</div>
	<div class="eight">8</div>
	<div class="nine">9</div>
	</div>
</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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>矩形布局2</title>
	<style type="text/css">
		.box{
			position: absolute;
			width: 740px;
			height: 430px;
			border:2px solid #000;
		}
		.one{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 200px;
			height: 100px;
			border:2px solid #000;
			line-height:100px;
		}
		.two{
			position: absolute;
			top: 10px;
			left: 220px;
			width: 100px;
			height: 300px;
			border:2px solid #000;
			line-height:300px;
		}
		.three{
			position: absolute;
			top: 10px;
			left:330px;
			width: 300px;
			height: 100px;
			border:2px solid #000;
			line-height:100px;
		}
		.four{
			position: absolute;
			top: 120px;
			left:330px;
			width: 400px;
			height: 100px;
			border:2px solid #000;
			line-height:100px;
		}
		.five{
			position: absolute;
			top: 320px;
			left: 10px;
			width: 300px;
			height: 100px;
			border:2px solid #000;
			line-height:100px;
		}
		.six{
			position: absolute;
			top: 320px;
			left: 320px;
			width: 400px;
			height: 100px;
			border:2px solid #000;
			line-height: 100px;
		}
		div {
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="one">1</div>
		<div class="two">2</div>
		<div class="three">3</div>
		<div class="four">4</div>
		<div class="five">5</div>
		<div class="six">6</div>
	</div>
</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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>css5</title>
	<style type="text/css">
		.box{
			position: absolute;
			width: 600px;
			height: 200px;
			border-style: solid;
			border-color: #000;
			border-width: 2px;
		}
		.one{
			float: left;
			margin-top: 10px;
			margin-left: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.two{
			float: left;
			margin-top: 10px;
			margin-left: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.three{
			float: right;
			margin-top: 10px;
			margin-right: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.four{
			float: left;
			margin-top: 10px;
			margin-left: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.five{
			float: right;
			margin-top: 10px;
			margin-right: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.six{
			float: left;
			margin-top: 10px;
			margin-left: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.seven{
			float: right;
			margin-top: 10px;
			margin-right: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.eight{
			float: left;
			margin-top: 10px;
			margin-left: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		.nine{
			float: left;
			margin-top: 10px;
			margin-left: 10px;
			width: 150px;
			height: 50px;
			border:2px solid #000;
		}
		div {
			line-height: 50px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="one">1</div>
		<div class="two">2</div>
		<div class="three">3</div>
		<div class="four">4</div>
		<div class="five">5</div>
		<div class="six">6</div>
		<div class="seven">7</div>
		<div class="eight">8</div>
		<div class="nine">9</div>
	</div>
</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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>js1</title>
	<script language="javascript">
		function checklogin(){
			var user=document.getElementsByName("username")[0].value;
			var pass=document.getElementsByName("password")[0].value;
			if(user==""){
				alert("请输入用户名");
				return false;
			}
			else if(pass==""){
				alert("请输入密码");
				return false;
			}
			else{
				alert("提交成功！");
				return true;
			}
		}
	</script>
	<style type="text/css">
		div {

			width: 300px;
			height: 100px;
			text-align: center;
			border:2px solid #33CCFF;
		}

	</style>
</head>
<body>
	<div>
		<form>
			<table>
				<tr>
					<td>管理员用户名：</td>
					<td><input type="text" name="username"><br></td>
				</tr>
				<tr>
					<td>管理员密码：</td>
					<td><input type="text" name="password"></td>
				</tr>
				<tr>
					<td>
						<input type="button" value="提交" onclick="checklogin()"/>
					</td>
					<td>
						<input type="reset" value="重置" >
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

注意：

  1. js函数中的"username",“password"要对应相应的文本框，将其对应文本框的name属性修改为"username"或"password”，这样才可以实现弹窗功能。
  2. 按钮一定要定义在表单（form）中才可以发挥他的功能。
  3. 表单按钮（submit，reset，button）中的普通按钮（button），常用来响应js事件：比如onclick，用来调用js函数来实现各种功能。

网页效果：
在这里插入图片描述
在这里插入图片描述

十三、
在这里插入图片描述
在这里插入图片描述
源代码：

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>js2</title>
	<script language="javascript">
		function checkarticle(){
			var a=document.getElementsByName("author")[0].value;
			var b=document.getElementsByName("title")[0].value;
			var c=document.getElementsByName("content")[0].value;
			if(a==""){
				alert("请输入作者");
				return false;
			}
			else if(b==""){
				alert("请输入标题");
				return false;
			}
			else if(c==""){
				alert("请输入内容");
				return false;
			}
			else{
				alert("提交成功！");
				return true;
			}

		}
	</script>
	<style type="text/css">
		.box{
			position: absolute;
			top: 20px;
			width: 500px;
			height: 600px;
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<div class="box">
		<form>
	 		<table>
	 			&nbsp;
		           <tr>
		        		<td>文章题目：</td>
		            	<td>
		                	<input type="text" name="title">
		                </td> 
		           </tr>
		           <tr>
		            	<td>文章作者:</td>
		            	<td>
		                	<input type="text" name="author">
		                </td>
		  
		           </tr>
		           <tr>
		            	<td>文章内容：</td>
		            	<td>
		            		<textarea rows="30" cols="50" name="content"></textarea>
		                </td>
		           </tr>
		           <tr>
		            	<td colspan="2" align="center">
		            		<input type="button" value="发送" onclick="checkarticle()"/>
		                	<input type="reset" value="重写">
		            	</td>   	
		           </tr>
		         </table>
         	</form>
         </div>
	</body>
</html>

网页效果：
在这里插入图片描述
在这里插入图片描述
整体布局↓
在这里插入图片描述

王祺灏
关注
专栏目录
实验一Java web基础一--web
weixin_45800653的博客
08-13 694
一、实验目的 理解和巩固课堂上所学的Java Web基础知识以及HTML、CSS，提高学生对知识的实际运用与软件编程实现能力。 二、实验内容 1、练习Web服务器启动、测试、应用程序部署方法。 2、设计个人主页。 （1）要求至少包含但不限于以下元素： ① 标题② 图片③ 超链接④ 表格⑤ 滚动字幕 （2）用CSS对个人主页中的部分文字设定样式。 要用到以下三种方法： ① Style属性② Style标记块③ Style独立文件 ...
Web客户端编程实验
MrLuo8的博客
12-17 383
实 验 报 告 实验名称 Web客户端编程 日期 2020年 09 月29 日 一、实验目的： 使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。 验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。 通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。 通过实验了解Java
Web编程第一个实验项目
Lucky_7_7的博客
04-29 283
Web编程第一个实验项目 题目要求： 新闻爬虫及爬取结果的查询网站 核心需求： 1、选取3-5个代表性的新闻网站（比如新浪新闻、网易新闻等，或者某个垂直领域权威性的网站比如经济领域的雪球财经、东方财富等，或者体育领域的腾讯体育、虎扑体育等等）建立爬虫，针对不同网站的新闻页面进行分析，爬取出编码、标题、作者、时间、关键词、摘要、内容、来源等结构化信息，存储在数据库中。 2、建立网站提供对爬取内容的分项全文搜索，给出所查关键词的时间热度分析。 技术要求： 1、必须采用Node.JS实现网络爬虫 2、必须采用N
Web编程基础（PPT，示例，大作业……）
03-29
这是一个集成的有关web编程基础的学习课件和一些测试题以及一些最后的课程设计，即web编程的大作业，还有我的一些心得！ 希望大家不要介意，也希望大家能够给我一些建议！谢谢大家！
网页前端高级编程-实验报告-DIV静态页面布局.doc
08-21
网页前端高级编程-实验报告-DIV静态页面布局
web编程基础实验四.rar_Web小游戏
09-14
总的来说，这个"Web编程基础实验四"旨在引导学习者通过实际操作掌握Web开发基础，通过创建一个Web小游戏，体验从无到有的过程，从而更好地理解和应用HTML、CSS和JavaScript等技术。通过这个实验，你不仅可以提升编程...
实验1 Java Web开发环境及Web编程基础
最新发布
05-09
Java Web开发环境及Web编程基础实验报告 本实验报告的目的是学习和掌握Java Web开发环境的搭建和配置，包括JDK、Eclipse和Tomcat的安装和配置，以及简单Web程序的发布。此外，还学习了HTML、CSS和JavaScript的基本...
高等教育自学资料 天津理工大学 实验1 Java Web开发环境及Web编程基础.docx
01-01
Java Web 开发环境及 Web 编程基础实验报告 本实验报告主要介绍了 Java Web 开发环境的搭建和基本的 Web 编程技术。实验目的包括安装配置 JDK/MyEclipse/Tomcat、搭建 Web 开发环境、发布简单 Web 程序、掌握 HTML ...
实验1 Java Web开发环境及Web编程基础1
08-08
实验一：“Java Web开发环境及Web编程基础1”旨在引导学生掌握Java Web开发的基本环境配置和编程技巧。实验主要包括以下几个核心知识点： 1. **JDK/MyEclipse/Tomcat的安装配置**： - JDK（Java Development Kit）...
web服务器套接字编程实验报告.docx
12-14
Web 服务器套接字编程实验报告 ...本实验报告涵盖了一些基础的计算机网络、 socket 编程、Web 服务器架构、Java 语言基础、网络编程和文件处理等知识点，为读者提供了一个基本的 Web 服务器编程的知识框架。
web实验代码
10-27
在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用
web实验报告的作业
12-25
这是几个实验报告，别看他很小，可是我告诉你，他的使用价值非常非常大！！1
基于JAVA的WEB编程实验指导书
08-18
1．JSP开发环境的配置运行。 2．JSP语法编程练习。 3．JSP的内置对象应用（一）。 4．JSP的内置对象应用（二）。 5．JSP中数据库的使用（一）。 6．JSP中数据库的使用（二）。 7．Servlet技术应用。 8．JSP中JavaBean的应用。 9．JSTL应用开发。 10．Struts2.0的开发应用。
Web实验报告及代码
05-12
使用word编写一个HTML文件，存为2-1.html，并在浏览器中运行一遍。 使用“附件”的“记事本”编写一个HTML文件，存为2-2.html，并在浏览器中运行一遍。 使用FrontPage工具编写或编辑一个HTML文件，存为2-3.html，并在浏览器中运行一遍。 编写一个带有表格、图片和文字的页面，并添加背景颜色和背景音乐。 编写带有不同超链接的HTML文件。 编写一个带有map标记码的页面。 编写一个带有表单的页面，包括文本框、口令框、单选框、下拉菜单组件
WEB登陆界面实验代码
01-05
WEB的登陆界面 jsp+Servlet+bean+com
课堂作业：web网页实验一(1)
一念之间的博客
09-17 2228
需要在里编译 <html> <head> <title>白居易的诗</title> </head> <body background="2019-06-01 15'21'33.jpg"> <embed src="04.忽然.mp3"> <h1> <font color="green"...
实验二 Java web基础二--web
weixin_45800653的博客
08-13 795
一、实验目的 理解和巩固课堂上所学的JavaScript知识，提高学生对知识的实际运用与软件编程实现能力。 二、实验内容 编写一个Web程序，实现以下两种功能。 功能1：简单的计算器，实现对两个数的加、减、乘、除功能。输入两个数字和运算符号，当点击Button的时候，显示结果。 功能2：实现一个时钟。（也可以是倒计时） ...
java web实验作业9
DS00HY的小博客
12-13 665
这次的java实验没想到写这么久，这还是之前有一点前端知识，，，不说了，各种傻的bug 实现一个模拟计算器 更改文本框中的数字值 document.getElementById("result").value=""; 判断鼠标点击按钮函数为 var isleftnumber=0; var isrightnumber=0; f
Web的基本原理
nuist_NJUPT的博客
05-27 940
Web的基本原理 常用的Web服务器：IIS，Tomcat，Apache等 HTML表格：表格内容来自程序，内存，数据库，HTML生成静态表格 JSP动态表格：数据源来自内存（数组，集合类） 一般将数据库内容放在数组或者集合中，然后 再放到表格中。 三种集合的对比： 1-List：按对象进入的顺序保存对象，不做排序或者编辑操作，允许重复 2-Map：基于键值对的数据结构，键值必须具有唯一性 2-Set：对每个对象直接收一次，并使用自己的内部排序算法，不允许重复 Web基本工作原理就是请求与相应的关系 HTM
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值