上次讲到安全的简介，这次就来简单的学习下基本的前端知识（html、js、css（不作讲解），牛逼的请忽略！！！

1、Html简单概述：

Html和Html DOM

2、Html字符实体（借用别人的，详细可以百度了解更多字符实体）：

3、了解Html常见事件属性：

onerror（在错误发生时运行的脚本）、onload（页面结束加载之后触发）、onclick（元素上发生鼠标点击时触发）、onchange（在元素值被改变时运行的脚本）、onfocus（当元素获得焦点时运行的脚本）、oninput（当元素获得用户输入时运行的脚本）、onmousemove（当鼠标指针移动到元素上时触发）、onsubmit（在提交表单时触发）、onkeydown（在用户按下按键时触发）

详情请见：http://www.w3school.com.cn/tags/html_ref_eventattributes.asp。

4、JS简单概述：

5、前端知识要求（下面是简单的一个页面）：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>自己网页登录</title>

    <style type="text/css">

        .div-left{

            float: left;padding: 150px 60px;border: 100px;

        }

        .div-right{

            float: right;margin-right: 100px;margin-top: 200px;padding: 200px 80px;box-shadow: 0 0 20px;

        }

        .shuru-input{

            padding: 0 40px;height: 40px;display: block;width: 70%;border: 1px solid ;border-radius: 2px;

        }

    </style>

<script language="javascript" type="text/javascript">

function addCookie(name,value,days,path){   /**添加设置cookie**/

    var name = escape(name);

    var value = escape(value);

    var expires = new Date();

    expires.setTime(expires.getTime() + days * 3600000 * 24);

    //path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用

    path = path == "" ? "" : ";path=" + path;

    //GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间，协调世界时是UTC

    //参数days只能是数字型

    var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();

    document.cookie = name + "=" + value + _expires + path;

}

function getCookieValue(name){  /**获取cookie的值，根据cookie的键获取值**/

    //用处理字符串的方式查找到key对应value

    var name = escape(name);

    //读cookie属性，这将返回文档的所有cookie

    var allcookies = document.cookie;

    //查找名为name的cookie的开始位置

    name += "=";

    var pos = allcookies.indexOf(name);

    //如果找到了具有该名字的cookie，那么提取并使用它的值

    if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败

        var start = pos + name.length;                  //cookie值开始的位置

        var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置

        if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie

        var value = allcookies.substring(start,end); //提取cookie的值

        return (value);                           //对它解码

    }else{  //搜索失败，返回空字符串

        return "";

    }

}

function deleteCookie(name,path){   /**根据cookie的键，删除cookie，其实就是设置其失效**/

    var name = escape(name);

    var expires = new Date(0);

    path = path == "" ? "" : ";path=" + path;

    document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;

}  

/**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/

window.onload = function(){

    var userNameValue = getCookieValue("userName");

    document.getElementById("txtUserName").value = userNameValue;

    var userPassValue = getCookieValue("userPass");

    document.getElementById("txtUserPass").value = userPassValue;

}  

function userLogin(){   /**用户登录，其中需要判断是否选择记住密码**/

    //简单验证一下

    var userName = document.getElementById("txtUserName").value;

    if(userName == ''){

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

        return;

    }

    var userPass = document.getElementById("txtUserPass").value;

    if(userPass == ''){

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

        return;

    }

    var objChk = document.getElementById("chkRememberPass");

    if(objChk.checked){

        //添加cookie

        addCookie("userName",userName,7,"/");

        addCookie("userPass",userPass,7,"/");

        alert("记住了你的密码登录。");

        window.location.href = "login.php";

    }else{

        alert("不记密码登录。");

        window.location.href = "login.php";

    }

}

</script>

</head>

<body style="background: #0080FF;opacity: 0.8;">

    <script type="text/javascript">

        document.write(Date());

    </script>

    <div class="div-left">

        <img src="login-left-picture.png" alt="左图">

    </div>

    <div class="div-right">

        <h3 style="margin-top: -150px;text-align: center;font-size: 30px;padding-bottom: 30px;margin-bottom: 30px;color: #FFFFFF; border-bottom: 2px solid;font-weight: 500; ">平台管理</h3>

            <div>

                <input class="shuru-input" type="text" id="txtUserName"  name="txtUserName" placeholder="请输入账号">

                <input class="shuru-input" type="password" id="txtUserPass" name="txtUserPass" placeholder="请输入密码">

                 <span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span>

                 <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" />

            </div>

            <div>

                <button style="margin-bottom: 0px;margin-top: 30px;width: 100%;font-size: 14px" id="login-in" onclick="userLogin();">登 录</button>

            </div>

    </div>

</body>

</html>

安全测试2_Web前端知识学习的更多相关文章

  1. 安全测试3_Web后端知识学习

    其实中间还应该学习下web服务和数据库的基础,对于web服务大家可以回家玩下tomcat或者wamp等东西,数据库的话大家掌握基本的增删该查就好了,另外最好掌握下数据库的内置函数,如:concat() ...

  2. 前端知识学习——html

    <!-- Html,CSS,JS 三者的关系 ==> 人,衣服,动作. 以下展示 html 常用基本编码 --><!-- Html 在PyCharm中新建html文件默认给出的 ...

  3. 前端学习：JS面向对象知识学习（图解）

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

  4. Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown

    在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一 ...

  5. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  7. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  9. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. DevExpress GridView 那些事儿

    1:去除 GridView 头上的 "Drag a column header here to group by that column" -->  点击 Run Desig ...

  2. Java 解密错误InvalidKeyException: Illegal key size解决方法

    做解密操作,出现如下错误 java.security.InvalidKeyException: Illegal key size // 设置解密模式为AES的CBC模式 Cipher cipher = ...

  3. SmartGit 授权Non-Commerical

    Window: %APPDATA%/syntevo/SmartGit/ 搜索settings.xml, 并且移除这个文件 重启

  4. RedHat7.3安装MySQL5.7

    1.下载Mysql安装包 https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.20-1.el6.x86_64.rpm-bundle.tar 附百度 ...

  5. Spring Cloud Feign Ribbon 配置

    由于 Spring Cloud Feign 的客户端负载均衡是通过 Spring Cloud Ribbon 实现的,所以我们可以直接通过配置 Ribbon 的客户端的方式来自定义各个服务客户端调用的参 ...

  6. 亚马逊 AWS ip反向解析：Configurable Reverse DNS for Amazon EC2’s Elastic IP Addresses

    I’d like to call your attention to a new feature that we rolled out earlier this month. You can now ...

  7. openwrt挂载摄像头及视频保存

    一.编译选项的选择: -> Utilities ->usbutils (这个里面包含lsusb的命令,是查看你的摄像头型号的) -> Kernel modules -> I2C ...

  8. VSFTP再配置 我里个去马蛋网上这么多烂文章，走了好多弯路

    1.CentOS 进行yum 安装 vsftpd 2.vi /etc/vsftpd/vsftpd.conf  进行配置 3.创建FTP 用户 # useradd –d /var/www -g ftp ...

  9. 不可小视的String字符串

    String印象 String是java中的无处不在的类,使用也很简单.初学java,就已经有字符串是不可变的盖棺定论,解释通常是:它是final的. 不过,String是有字面量这一说法的,这是其他 ...

  10. Selenium操作示例——鼠标悬停显示二级菜单，再点击二级菜单或下拉列表

    这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...