《web基础实验报告》-太原理工大学【附在线运行】
作者：互联网
HTML复习笔记：[传送门]
实验一 HTML基础
【实验内容】
1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）
源程序清单如下：
<html>
<head>
<title>Example</title>
</head>
<body bgcolor="#00DDFF">
<h1><B><I><FONT COLOR="#FF00FF">
<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>
</FONT></I></B></h1>
<hr>
<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2>
<EM>Welcome to the world of HTML</EM>
<p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p>
<p>Following is three chapters
<ul>
<li>This is the chapter one</li>
<li><A HREF="#item">This is the chapter two</A></li>
<li>This is the chapter three</li>
</ul></p>
<hr>
<p><A NAME="item">Following is items of the chapter two</A> </p>
<table border=2 bgcolor=gray width="40%">
<tr>
<th>item</th><th>content</th>
</tr>
<tr>
<td>item 1</td>
<td>font</td>
</tr>
<tr>
<td>item 2</td>
<td>table</td>
</tr>
<tr>
<td>item 3</td>
<td>form</td>
</tr>
</table>
<hr><p>
1<p>
2<p>
3<p>
4<p>
5<p>
6<p>
7<p>
<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>
</p>
</body>
</html>
运行结果：
在线运行：实验一
2．编写一个能输出如下图所示界面的HTML文件。要求：
（1）校验输入的E-mail的格式：用户名@域名。
（2）校验输入的电话格式：11位数字组成。
（3）性别“女”为默认选项
（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。
代码：
<!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 >
<h2 align="center"><u>请留下个人资料</u></h2>
<table align="center">
<tr>
<td class="text" >姓名：</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td class="text" >E-mail：</td>
<td><input type="email" name="E-mail"></td>
</tr>
<tr>
<td class="text">电话：</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td class="text">性别：</td>
<td><input type="radio" name="sex" checked = "checked">女
<input type="radio" name="sex" >男</td>
</tr>
<tr>
<td class="text">年龄：</td>
<td>
<select name = "age" >
<option>20以下</optiom>
<option>20</optiom>
<option>21</optiom>
<option>22</optiom>
<option>23</optiom>
<option>24</optiom>
<option>25</optiom>
<option>25以上</optiom>
</select>
</td>
</tr>
<tr>
<td class="text">留言板：</td>
<td><textarea name="liuyanban"></textarea></td>
</tr>
<tr>
<td class="text">您的爱好：</td>
<td><input name = "hobby" type = "checkbox">运动<br/>
<input name = "hobby" type = "checkbox">阅读<br/>
<input name = "hobby" type = "checkbox">听音乐<br/>
<input name = "hobby" type = "checkbox">旅游<br/>
</td>
</tr>
<tr >
<td colspan="2" align="center"><input type="submit" value="提交">
<input type="reset" value="全部重写"></td>
</tr>
</table>
</form>
</body>
</html>
运行截图：
在线运行：实验一
实验二 CSS+DIV页面布局
【实验内容】
1．在网页中应用CSS
网页中应用CSS有4种方法，分别是：内联CSS样式、嵌入CSS样式、链接外部CSS样式表和导入外部CSS样式表。
（1）内联CSS样式
新建HTML文档，在body标记中输入下面的代码
<p style=”font-size:72;font-style:bold;color:red;>这是一段红色粗体文字</p>
<p>这段文字没有应用样式</p>
浏览结果。
（2）嵌入式CSS样式
在上题基础上，在head标记中输入下面的代码
<style type=”text/css”>
h1{color:#ff0000;font-family:黑体}
.mystyle{color:#0000ff; font- family:黑体;font-size:64}
p.first{ color:#000000; font- family:宋体;font-size:12}
p.second{ color:#00ff00; font- family:宋体;font-size:32}
在body标记中继续输入下面代码
<h1>网页设计制作</h1>
<p class=”first”>网页设计制作</p>
<p class=”second”>网页设计制作</p>
<p class=”mystyle”>网页设计制作</p>
<div class=”mystyle”>网页设计制作</div>
浏览效果。
（3）外部样式表
新建文本文件，输入下面的代码
h1{color:#ff0000;font-family:黑体}
p.first{ color:#000000;font-family:宋体;font-size:12}
p.second{ color:#00ff00;font-family:宋体;font-size:32}
p. mystyle { color:#0000ff;font-family:宋体;font-size:64}
将文件保存为mystyle.css
新建HTML文档，在head标记中输入下面的代码
<link rel="stylesheet" type="text/css" href="mystyle.css">
在body标记中输入下面的代码
<h1>网页设计制作</h1>
<p class=”first”>网页设计制作</p>
<p class=”second”>网页设计制作</p>
<p class=” mystyle”>网页设计制作</p>
<div class=” mystyle”>网页设计制作</div>
浏览效果。
（4）导入外部CSS样式
新建HTML文档，在head标记中输入下面的代码
<style type=”text/css”>
@import url(“mystyle.css”);
</style>
Body标记中的内容与（3）相同，浏览效果。
2．结合HTML5的语义化标签，使用DIV+CSS网页布局技术设计一个个人博客页面。
参考博文：
传送门
要求：（1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息。如下图所示。
（2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。
（3）用无序表实现水平导航菜单，关键点：消除无序列表前的项目符号，将默认的垂直排列转换为水平排列。
（4）设置导航菜单的超链接样式，关键点：链接目标为#，设置鼠标悬停在导航栏中的热字上时背景色的变化。
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="/css/style1.css">
<title>实验二</title>
</head>
<body>
<!-- 定义页面头部区 -->
<header>
<h1 align="center">软件2029班刘宇航的博客</h1>
</header>
<!-- 定义页面导航区 -->
<nav>
<ul class="navmenu">
<li><a href="#">首页</a></li>
<li><a href="#">博文</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">个人档案</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>
css文件：
* {
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;
}
运行截图：
在线运行：
实验三 JavaScript内置函数与内置对象
【实验内容】
1．阅读下面的程序，理解JavaScript系统内置函数的功能
略
2．阅读下面的程序，理解JavaScript系统的Date对象及其方法。
略
3．编写一个简易计时器程序。要求：
（1）页面包含一个“开始”按钮，一个“停止”按钮，一个“清零”按钮以及一个用于显示时间的文本框。
（2）当点击“开始”按钮时,从 0 开始按秒计时，文本框显示实时的计时时间（以秒为单位）。
（3）当点击“停止”按钮时，将停止计时，文本框显示的时间不再增加。
（4）当点击“清零”按钮时，文本框显示的时间为0秒。
<!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="button" id="0" value="开始" onclick="start()">
<input type="button" id="1" value="停止" onclick="end()" disabled>
<input type="button" value="清零" onclick="clearTime()">
<input type="text" id="showTime" value="0秒" readonly>
</form>
<script type="text/javascript">
var status = 0 // 是否开始计时,数字代表id值
var second = 0 // 秒数
const UNIT = '秒' // 常量
var timer = '' // 计时器
var showTime = document.getElementById("showTime"); // 当前秒数
// 按钮重置
function rebtn() {
document.getElementById(status).setAttribute("disabled", true)
status = (++status) % 2
document.getElementById(status).removeAttribute("disabled")
}
// 开始计时
function start() {
rebtn()
timer = setInterval(() => {
showTime.value = ++second + UNIT
}, 1000) // 每隔一秒执行一次
}
// 结束计时
function end() {
rebtn()
clearInterval(timer); //清除计时器效果
}
// 清除时间
function clearTime() {
clearInterval(timer); // 清除计时器
status = 1 // 还原按钮
rebtn()
second = 0
showTime.value = second + UNIT
}
</script>
</body>
</html>
运行截图：
在线运行：实验三
实验四 JavaScript事件
【实验内容】
1．阅读下面的程序，理解各段程序中的事件、事件驱动及事件处理。
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">
<title>实验四</title>
</head>
<body>
<form>
<p>选择要去的网站：</p><br/>
<select id="lists" onchange="choose()">
<option selected>请选择</option>
<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>
<input type="text" id="display" readonly>
<input type="button" onclick="btn()" value="点击跳转">
</form>
<script>
var parent = document.getElementById("lists")
var lists = parent.children
var index = ''
function choose() {
index = parent.selectedIndex
if(index != 0) {
document.getElementById("display").value = lists[index].value
}
}
function btn() {
window.location.href = lists[index].value
}
</script>
</body>
</html>
运行截图：
在线运行：实验四
标签：web,font,理工大学,color,HTML,实验,网页,实验报告,CSS 来源： https://blog.csdn.net/m0_51517236/article/details/121790118