实验一： HTML基础

1. 实验内容

编写一个能输出如下图所示界面的HTML文件。要求：
（1）校验输入的E-mail的格式：用户名@域名。
（2）校验输入的电话格式：11位数字组成。
（3）性别“女”为默认选项
（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。

2. 源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>select,textarea,input {margin: 10px;display: inline-block;vertical-align: middle;border: 2px solid #ccc;box-shadow: 2px 2px 2px 2px black;}.hobby {display: inline-block;vertical-align: middle;}textarea {text-align: center;}.formLabel {display: inline-block;width: 90px;/* text-align: center; */}</style><title>请留下个人信息</title>
</head><body style="width: 400px; margin:0 auto;"><h2 align="center">请输入个人资料</h2><form action="" method="get"><label class="formLabel">姓名：</label> <input type="text"><br><label class="formLabel">E-mail:</label> <input type="email"><br><label class="formLabel">电话: </label><input type="tel"><br><label class="formLabel">性别：</label> <input type="radio" name="sex" id="male"><label for="male">女</label><input type="radio" name="sex" id="female"><label for="female">男</label><br><label class="formLabel">年龄：</label><select name="" id=""><option value="">20以下</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">25以上</option></select><br><label class="formLabel">留言板：</label><textarea name="" id="" cols="30" rows="10"></textarea><br><label class="formLabel">您的爱好：</label><div class="hobby"><input id="m1" type="checkbox"><label for="m1">运动</label><br><input id="m2" type="checkbox"><label for="m2">阅读</label><br><input id="m3" type="checkbox"><label for="m3">听音乐</label><br><input id="m4" type="checkbox"><label for="m4">旅游</label><br></div><br><div style="margin: 0 auto; width: 200px;"><input type="submit" value="提交"><input type="reset" value="全部重写"></div></form>
</body></html>

3. 运行结果

实验二： CSS+DIV页面布局

1. 实验内容

完成个人博客界面

哈！翼遥bingo : https://hannah-bingo.github.io/
里面有打赏界面，要不…嘿嘿嘿

2. 源码

HTML文件


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./2.index.css"><title>实验二</title>
</head><body><!-- 定义页面头部区 --><header><h1 align="center">软件2005班牛婷婷的博客</h1></header><!-- 定义页面导航区 --><nav><ul class="navmenu"><li><a href="javascript:void(0);">首页</a></li><li><a href="javascript:void(0);">博文</a></li><li><a href="javascript:void(0);">相册</a></li><li><a href="javascript:void(0);">个人档案</a></li></ul></nav><!-- 博客文本区域 --><div class="container"><section class="column H5C3 "><article><div><h4>HTML5</h4><p>HTML5 是下一代HTML的标准，目前仍然处于发展阶段，经过Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出更高要求</p><hr><em>编辑于2021年12月7日</em></div></article><article><div><h4>CSS3</h4><p>fdskjlfrei等候俄双方都不能就士大夫士大夫艰苦不是二夫人无法投入精力南方姑娘热狗佛欸软件</p><hr><em>编辑于2021年12月7日</em></div></article></section><aside class="column"><div class="clearintro"><h3>简介</h3><p><em>HTML5和CSS3</em><b>正在嫌弃一场变革，他不是在替代Flash，而是正在发展成为开放的Web平台，不但在移动...</b></p></div></aside></div><!-- 底部版权信息 --><hr class="hr"><footer><p>版权所有2021</p></footer>
</body></html>

相同父目录下的less文件：2.index.less

* {margin: 0;padding: 0;box-sizing: border-box;
}
ul,
li {list-style: none;color: #fff;
}
a {text-decoration: none;color: #fff;
}
h2,
h3,
h4,
h5 {color: grey;
}
em {font-style: normal;color: rgba(25, 26, 26, 0.5);
}
/* 头部区域样式 */
header h1 {padding: 20px;color: rgba(25, 26, 26, 0.5);
}
/* 导航栏样式 */
nav .navmenu {width: 100%;height: 40px;background-color: dodgerblue;
}
nav .navmenu li {float: left;
}
nav .navmenu li a {display: inline-block;text-align: center;padding: 0 40px;line-height: 40px;font-size: 20px;
}
nav .navmenu li a:hover {background-color: rgba(65, 61, 61, 0.8);
}
/* 博客文本区域的样式 */
.container {content: "";clear: both;display: table;width: 1270px;margin: 0 auto;
}
.column {float: left;
}
.H5C3 {width: 70%;
}
.H5C3 article {border: 3px solid #28e3fc;border-radius: 3%;margin: 20px;
}
.H5C3 article div {margin: 20px;
}
.H5C3 article div h4 {padding: 0 0 10px 0;border-bottom: 2px dotted #28e3fc;
}
.H5C3 article div p {padding: 15px 0;
}
.H5C3 article div em {font-size: 15px;
}
.H5C3 article div hr {height: 3px;background-color: turquoise;margin: 10px 0;
}
aside {width: 28%;margin-top: 20px;background-color: #d4d0d0;border-radius: 5%;height: 400px;
}
aside .clearintro {width: 260px;margin: 10px auto;
}
aside .clearintro h3 {padding: 18px 0;
}
aside .clearintro p {letter-spacing: 1px;line-height: 26px;
}
aside .clearintro p em {color: #28e3fc;
}
.hr {height: 3px;background-color: turquoise;margin: 10px 0;
}
/* 底部版权信息 */
footer p {width: 200px;margin: 10px auto 30px auto;color: silver;
}

3. 运行结果

实验三：

1. 完成简易计时器

2. 源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>建议计时器程序</title>
</head><body><form method="get" id="text"><input type="text" id="display" value="0秒" readonly><br><br><input type="button" id="timing" value="开始" onclick="starTime()"><input type="button" value="停止" onclick="endTime()"><input type="button" value="清零" onclick="clearTime()"></form><script type="text/javascript">var second = 0;var timer = null;function clock(display) {display.value = second + "秒";second++;}function starTime() {var display = document.getElementById("display");document.getElementById("timing").setAttribute("disabled", true); //设置开始按钮不能被用timer = setInterval("clock(display)", 1000);}function endTime() {clearInterval(timer); //清除计时器效果document.getElementById("timing").removeAttribute("disabled"); //清除不能用的效果}function clearTime() {endTime();var display = document.getElementById("display");display.value = 0 + "秒";second = 0;timer = null;}</script>
</body></html>

3. 运行结果

实验四： JavaScript事件

1. 实验内容

编写一个html文件的网页代码，页面包含一个下拉列表框、一个文本框和一个按钮（参见下图左），下拉列表框选择要去的网站，当选择完毕后文本框中出现对应的网址（参见下图右）。点击确认跳转按钮后访问文本框中出现的网址。

2. 源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><script language="javascript" type="text/javascript">function change() {for (var i = 0; i < document.getElementById("select").options.length; i++) {if (document.getElementById("select").options[i].value == document.getElementById("select").value) {console.log(document.getElementById("select").value);document.getElementById("input").value = document.getElementById("select").options[i].value;document.getElementById("form").action = document.getElementById("select").valueconsole.log(document.getElementById("form").action);}}}
</script>
<form id="form" name="form" method="get" action=""><label><p>选择要去的网址：</p><select name="select" id="select" onchange="change()"><option value="https://www.baidu.com/">百度</option><option value="https://music.163.com/">网易</option><option value="https://im.qq.com/pcqq">qq</option><option value="https://www.sina.com.cn/">新浪</option></select></label><label><input type="text" id="input"/><input type="submit" id="submit" value="点击跳转"></label>
</form></html>

3. 运行结果

web程序设计基础R实验报告 2021年 ---太原理工大学相关推荐

《程序设计基础》实验报告（第6次实验）
<程序设计基础>实验报告(第6次实验) 学号姓名班级实验名称:组合类.继承与多态实验目的:掌握组合类.继承与多态的概念和使用实验内容:(1)字符串类Mystring定义如下: c ...
【Web历年真题】太原理工大学Web程序设计基础R试卷2018年选择题部分
Educoder -- Web程序设计基础2021秋 --实训作业全总结
博主会持续更新的呦! web程序设计基础R实验报告 2021年 1.Web前端开发概述 edu–Web程序设计基础2021秋–[Web前端开发概述][HTML5基础] 2. HTML5 基础 [web ...
Web程序设计基础2021 表格标签—表格高级样式的设置 educoder实训
第1关:表格高级样式设置相关概念任务描述本关任务:完成一组表格高级样式设置的概念题. 相关知识为了完成本关任务,你需要掌握:1.外边框线样式的设置,2.内部边框线的设置,3.单元格的合并. 外边 ...
html表单实验结论,web前端开发技术实验报告-实验五
1.长春大学 20 15 2016学年第二学期Web前端开发技术课程实验报告学院: 计算机科学技术专业: 软件工程班级: 软件14402 学号: 姓名: 王悦任课教师 ...
Java程序设计基础项目总结报告
Java程序设计基础项目总结报告 20135313吴子怡一.项目内容运用所学Java知识,不调用Java类库,实现密码学相关算法的设计,并完成TDD测试,设计运行界面. 二.具体任务 1.要求实现 ...
程序设计基础(C语言)课程设计报告,C语言程序设计基础课程设计报告.doc
程序设计基础课程设计报告课程名称: 程序设计基础课程设计课程设计题目: 学生信息管理系统姓名: 系: 计算机科学技术系专业: 计算机网络技术年级: 学号: 指导教师: 职称: 讲师 ...
程序设计导引及在线实践_学院经纬计算学院程序设计基础与实验入选首批国家级一流本科课程...
近日,教育部公布首批国家级一流本科课程认定清单,计算机与计算科学学院颜晖教授负责,张高燕.张泳.王云武.柳俊老师参与的<程序设计基础与实验>入选"线上线下混合式一流课程" ...
c语言基础程序设计报告,c语言程序设计基础课程设计报告.doc
c语言程序设计基础课程设计报告.doc 还剩 16页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价低环保! 内容要点: C 语言程序 ...

web程序设计基础R实验报告 2021年 ---太原理工大学

文章目录

实验一： HTML基础

1. 实验内容

2. 源码

3. 运行结果

实验二： CSS+DIV页面布局

1. 实验内容

2. 源码

3. 运行结果

实验三：

1. 完成简易计时器

2. 源码

3. 运行结果

实验四： JavaScript事件

1. 实验内容

2. 源码

3. 运行结果

web程序设计基础R实验报告 2021年 ---太原理工大学相关推荐

最新文章

热门文章