20145225《网络对抗》Exp8 Web基础

参考博客：5215~

这次试验，没搞懂，只做了一部分，求老师酌情给分啊啊啊

基础问题回答

什么是表单？
- 表单是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素，表单在网页中主要负责数据采集功能，一个表单有三个基本组成部分：表单标签、表单域、表单按钮；
- 表单标签（<form>）：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等；
- 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
浏览器可以解析运行什么语言？
- 支持HTML（超文本标记语言）、XML（可扩展标记语言）以及Python、PHP、JavaScript、ASP等众多脚本语言。
WebServer支持哪些动态语言？
- JavaScript、ASP、PHP、Ruby等脚本语言，ASP基于IIS WEB SERVER，是微软的服务器端脚本技术，PHP基于APACHE WEB SERVER，与ASP有几分类似，都是一种在服务器端执行的嵌入HTML文档的脚本语言。

Web前端：HTML基础

打开Apache

之后cd var/www/html进入到Apache的工作目录下，vi test1.html新建一个含有表单的html，我们常用的登录页面一般就是用表单向后台提交数据，所以可以编写一个简单的登录页面，代码如下：

<html>

<head>

<title>test</title>

</head>

<body>

<table>

    <form method ="POST" action="#" name="frmLogin"  >

    <tr>

    <td>用户名：</td>

    <td><input type="text" name="username" value="Your name" size="" maxlength="" /></td>

    <td> </td>

    <td> </td>

    </tr>

    <tr>

    <td>密  码：</td>

    <td><input type="password" name="password" value="Your password" size="" maxlength="" /></td>

    <td> </td>

    <td> </td>

    </tr>

    <tr>

    <td><input type="checkbox" name="zlogin" value="">自动登录</td>

    </tr>

    <table>

    <tr>

        <td><input type="submit" name="login" value="登录" /></td>

            <td><input type="reset" name="rs" value="重置" /></td>

        </tr>

    </table>

    </form>

</table>

</body>

</html>

网页是出来了，为什么是乱码我也没搞懂，问了同学还是没搞明白。。。。

Web前端：javascipt基础

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

DOM是文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，换句话说，这是表示和处理一个HTML或XML文档的常用方法。举个例子，要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的。代码如下所示：

<html>

<head>

<title>test</title>

</head>

<body>

<table>

    <form method ="POST" action="#" name="frmLogin"  >

    <tr>

    <td>用户名：</td>

    <td><input type="text" name="username" value="Your name" size="" maxlength="" onfocus="if (this.value=='Your name') this.value='';" /></td>

    <td> </td>

    <td> </td>

    </tr>

    <tr>

    <td>密  码：</td>

    <td><input type="password" name="password" value="Your password" size="" maxlength="" onfocus="if (this.value=='Your password') this.value='';" /></td>

    <td> </td>

    <td> </td>

    </tr>

    <tr>

    <td><input type="checkbox" name="zlogin" value="">自动登录</td>

    </tr>

    <table>

    <tr>

        <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td>

            <td><input type="reset" name="rs" value="重置" /></td>

        </tr>

    </table>

    </form>

</table>   

<script language="javascript">

    function validateLogin(){

        var sUserName = document.frmLogin.username.value ;

        var sPassword = document.frmLogin.password.value ;

        if ((sUserName =="") || (sUserName=="Your name")){

            alert("请输入用户名!");

            return false ;

        }  

        if ((sPassword =="") || (sPassword=="Your password")){

            alert("请输入密码!");

            return false ;

        }  

    }

</script>

</body>

</html>

结果如图：

用了一个验证的函数，如果输入的用户名或者密码为空时，就弹出相应的对话框，然后在点击登录按钮时调用执行一遍这个函数。