安全测试2_Web前端知识学习
上次讲到安全的简介,这次就来简单的学习下基本的前端知识(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前端知识学习的更多相关文章
- 安全测试3_Web后端知识学习
其实中间还应该学习下web服务和数据库的基础,对于web服务大家可以回家玩下tomcat或者wamp等东西,数据库的话大家掌握基本的增删该查就好了,另外最好掌握下数据库的内置函数,如:concat() ...
- 前端知识学习——html
<!-- Html,CSS,JS 三者的关系 ==> 人,衣服,动作. 以下展示 html 常用基本编码 --><!-- Html 在PyCharm中新建html文件默认给出的 ...
- 前端学习:JS面向对象知识学习(图解)
前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...
- Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown
在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一 ...
- web前端知识体系总结
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- 自己总结的web前端知识体系大全【欢迎补充】
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- WEB前端知识体系脑图
说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...
- web前端知识体系大全
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
随机推荐
- C++Builder XE7 中“匿名”方法实现
class TMyProc : public TCppInterfacedObject<TThreadProcedure> { private: String p1; String p2; ...
- InfluxDB中文文档
来源:https://github.com/jasper-zhang/influxdb-document-cn InfluxDB中文文档 InfluxDB是一个用于存储和分析时间序列数据的开源数据库. ...
- Winfrom DataGridView中使用Tooltip
第一步:添加DataGridView.Tooltip控件,略 第二步:设置ToolTip 相关属性,略,参考下图 第三步:DataGridView 添加 CellMouseEnter.CellMous ...
- ef 吐糟
方法:从dbcontext到objectcontext DbContext及其相关的API是EF4.1中一大新特性.简单说,DbContext就是之前EF的核心类ObjectContext的抽象封装. ...
- Java课程设计(2019版)
参考资料 Java课程设计参考资料(2018-12-26更新) Java课程设计常见问题(程序部署.数据库.JSP) 项目开发参考-阿里巴巴Java开发手册(正式版) 更多参考资料请查看QQ群文件中的 ...
- C/C++中字符串和数字互转小结
一. 数字 转 char*型 1.sprintf函数(适合C和C++) 示例: char str[50]; int num = 345; sprintf(str,"%d",num) ...
- C++11--时钟和计时器<chrono>
/* 介绍<chrono> -- 一个精确中立的时间和日期库 * 时钟: * * std::chrono::system_clock: 依据系统的当前时间 (不稳定) * std::chr ...
- Quartz不用配置文件配置启动
StdSchedulerFactory schedulerFactory = null; try { schedulerFactory = new StdSchedulerFactory(); Pro ...
- Rstdio 中print中文乱码
在Consol中输入 Sys.setlocale("LC_ALL","Chinese") 即可
- 廖雪峰Java3异常处理-1错误处理-2捕获异常
1捕获异常 1.1 finally语句保证有无错误都会执行 try{...}catch (){...}finally{...} 使用try...catch捕获异常 可能发生异常的语句放在try{... ...