本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、实验目的

1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。

二、实验环境

计算机、Windows10 操作系统

三、实验内容、源码及运行结果

1．  实验内容在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）源程序清单如下：

1.	<html>  
2.	<head>  
3.	<title>Example</title>  
4.	</head>  
5.	<body bgcolor="#00DDFF">  
6.	<h1><B><I><FONT COLOR="#FF00FF">  
7.	<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>  
8.	</FONT></I></B></h1>  
9.	<hr>  
10.	<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2>  
11.	<EM>Welcome to the world of HTML</EM>  
12.	<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>  
13.	<p>Following is three chapters  
14.	<ul>  
15.	<li>This is the chapter one</li>  
16.	<li><A  HREF="#item">This is the chapter two</A></li>  
17.	<li>This is the chapter three</li>  
18.	</ul></p>  
19.	<hr>  
20.	<p><A NAME="item">Following is items of the chapter two</A> </p>  
21.	<table border=2 bgcolor=gray width="40%">  
22.	<tr>  
23.	<th>item</th><th>content</th>  
24.	</tr>  
25.	<tr>  
26.	<td>item 1</td>  
27.	<td>font</td>  
28.	</tr>  
29.	<tr>  
30.	<td>item 2</td>  
31.	<td>table</td>  
32.	</tr>  
33.	<tr>  
34.	<td>item 3</td>  
35.	<td>form</td>  
36.	</tr>  
37.	</table>  
38.	<hr><p>  
39.	1<p>  
40.	2<p>  
41.	3<p>  
42.	4<p>  
43.	5<p>  
44.	6<p>  
45.	7<p>  
46.	<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>  
47.	</p>  
48.	</body>  
49.	</html>

 程序运行结果截图：在这里插入图片描述  知识补充： marquee标签及table标签的功能及其属性设置标签标签功能用到的属性效果说明 marquee 模拟水平滚动 bgcolor="#FFFF00" direction=left behavior=alternate 设置了颜色，来回滚动，刚开始从右到左 table

标签定义 HTML 表格 border=2 bgcolor=gray width="40%" 表格边框宽度为2 背景色为灰色高度为浏览器高度的40% 表1- 1 实验1知识记录表

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

 实验运行结果截图：在这里插入图片描述

 实验代码如下： 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="./personal_contents.css">
  <title>表单范例</title>
</head>
<body>
  <div class="w600">
    <!-- 头部的表头部分 -->
    <div class="header">
      <span>请留下个人资料</span>
    </div>
    <!-- 中间的表单部分 -->
    <div class="content">
      <form name="selectForm" method="post">
        <label for="name">姓名：</label> <input type="text" required="required" id="name"/><br>
        <label for="mail">E-mail：</label> <input type="email" required="required" id="mail" placeholder="用户名@域名" required pattern=".*@mydomain$"/><br>
        <label for="phone">电话：</label> <input type="text" required="required" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" id="phone" /><br>
        <label for="sex">性别：</label>
          <input name="Sex" type="radio" value="sexfemale" checked="checked" id="sex" />女
          <input name="Sex" type="radio" value="sexmale"/>男<br/>
        <label>年龄：</label>
          <select size="1" class="choices">
            <option value="less_then_20" selected="selected">20以下</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="more_then_25">25以上</option>
          </select><br>
          <label for="text" class="message_board">
            <p>留言板：</p>
            <div class="text_right">
              <textarea cols="60" rows="10" wrap="hard"></textarea>
            </div>
          </label>
          <label for="" id="hobby">
            <p>您的爱好:</p>
            <div class="hobby_right">
                <input type="checkbox">运动<br></input>
                <input type="checkbox">旅游<br></input>
                <input type="checkbox">听音乐<br></input>
                <input type="checkbox">阅读<br></input>
            </div>
        </label>
      </form>
    </div>
    <!-- 尾部的按钮部分 -->
    <div class="footer">
      <button>提交</button>
      <button>全部重写</button>
    </div>
  </div>
</body>
</html>

CSS部分：

body {
  background-image: url("https://beyondclouds.oss-cn-beijing.aliyuncs.com/blog/images/21513c87-855e-4fc8-b074-58f7dd71884f.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.message_board {
  margin: 6px auto;
  display: flex;
  align-items: center;
}

p {
  display: inline;
}

.w600 {
  width: 600px;
  margin: 14% auto;
  box-shadow: darkgrey 0px 0px 10px 5px;
  opacity:0.9;
}

.header {
  width: 210px;
  height: 42px;
  line-height: 50px;
  border-bottom: 2px solid black;
  font-size: 28px;
  font-weight: 600;
  margin-left: 32%;
  letter-spacing: 0.06em;
}

.content {
  width: 500px;
  margin-left: 10%;
  margin-top: 2%;
}

.content #name {
  margin-left: 16px;
}

.content #phone {
  margin-left: 16px;
}

.content [value=sexfemale] {
  margin-left: 16px;
}

.choices {
  margin-left: 16px;
}

.text_right {
  margin-left: 4px;
}

#hobby {
  display: flex;
  align-items: center
}

.footer {
  width: 600px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button:nth-child(1){
  margin-right:50px;
}

button:nth-child(2){
  margin-left:50px;
}

《Web程序设计基础R》实验报告---HTML基础

一、实验目的

二、实验环境

三、实验内容、源码及运行结果