《Web程序设计基础R》实验报告---HTML基础
一、实验目的
1．掌握常用的HTML语言标记；
2．利用文本编辑器建立HTML文档，制作简单表单页面。
二、实验环境
计算机、Windows10 操作系统
三、实验内容、源码及运行结果
1．
实验内容
在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）
源程序清单如下：
1. <html>
2. <head>
3. <title>Exampletitle>
4. head>
5. <body bgcolor="#00DDFF">
6. <h1><B><I><FONT COLOR="#FF00FF">
7. <MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to youMARQUEE>
8. FONT>I>B>h1>
9. <hr>
10. <h2 align=center><FONT COLOR="#0000FF">A simple HTML documentFONT>h2>
11. <EM>Welcome to the world of HTMLEM>
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 tagsb> work in the <I>HTMLI> filep>
13. <p>Following is three chapters
14. <ul>
15. <li>This is the chapter oneli>
16. <li><A HREF="#item">This is the chapter twoA>li>
17. <li>This is the chapter threeli>
18. ul>p>
19. <hr>
20. <p><A NAME="item">Following is items of the chapter twoA> p>
21. <table border=2 bgcolor=gray width="40%">
22. <tr>
23. <th>itemth><th>contentth>
24. tr>
25. <tr>
26. <td>item 1td>
27. <td>fonttd>
28. tr>
29. <tr>
30. <td>item 2td>
31. <td>tabletd>
32. tr>
33. <tr>
34. <td>item 3td>
35. <td>formtd>
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
背景色为灰色
高度为浏览器高度的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">20option><option value="21">21option><option value="22">22option><option value="23">23option><option value="24">24option><option value="25">25option><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;
}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！