每个实验中给出的练习代码不在此处进行运行，有问题的小可爱欢迎和博主交流呀！
Educoder – Web程序设计基础2021秋 --实训作业全总结

文章目录

实验一： 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. 源码

  1. 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>
  1. 相同父目录下的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").value
                console.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. 运行结果

请添加图片描述

# 前端 # r语言 # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

认识一下JavaScrip中的元编程

avatar 华为云开发者联盟
cover

世界读书日 | 开发者必读书单重磅来袭，华为云DTSE专家天团力荐

avatar 华为云开发者联盟
cover

重磅新品发布！云耀数据库HRDS，享受轻量级的极致体验

avatar 华为云开发者联盟