实验一 HTML基础

一、实验目的

1．掌握常用的HTML语言标记；

2．利用文本编辑器建立HTML文档，制作简单表单页面。

二、实验环境

计算机、Windows操作系统

三、程序分析说明及结果

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

源程序清单如下：

<html>

<head>

<title>Example</title>

</head>

<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>

<tr>

<th>item</th><th>content</th>

</tr>

<tr>

</tr>

<tr>

<td>table</td>

</tr>

<tr>

</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文档中每条语句的含义，将marquee标签及table标签的功能及其属性设置结果记录于表1.1中。

2．编写一个能输出如下图所示界面的HTML文件。要求：

（1）校验输入的E-mail的格式：用户名@域名。

（2）校验输入的电话格式：11位数字组成。

（3）性别“女”为默认选项

（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。

四、程序设计说明、源码及运行结果

<!doctype html>

<html>

<head>

</head>

<form>

<h1 align="center"><u>请留下个人资料</u></h1>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><input type="number" size="30" oninput="if(value.length>11)value=value.slice(0,11)"/></td>

</tr>

<tr>

<td><input type="radio" name="sex"value="男">男

<input type="radio" name="sex"value="女" checked="checked">女

</td>

</tr>

<tr>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</tr>

</form>

</table>

</body>

</html>

四、实验总结

编写时应当加入表格，这样看起来形式才更加整齐可靠

posted on 2022-06-01 22:11 一路向北~~ 阅读(410) 评论(0) 收藏举报