182018-6

ajax学习二——从表单提交中了解前后端数据交互

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

一直不太懂前后端的交互，开始学习ajax，好像有些懂了，接下来的内容通过表单提交来了解前后端数据交互吧~

关于表单的基本知识：

表单中的三个内容：

action：数据提交的地址，默认是当前页面

method：数据提交的方式，默认是get方式

enctype：提交数据格式，默认是application/x-www-form-urlencoded

以下分两种提交方式进行：

（1）get方式：

前端页面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="get.php" method="get">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php页面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');//返回头

error_reporting(0);



$userName=$_GET['userName'];//主要这里要对应提交的方式，如果表单使用的是get方式则后端需要用get，如果是使用post，则后端需要使用post



echo "你的名字：{$userName}";

输入“aa"提交后：

使用get方式：

把数据名称和值通过”=“连接，如果又多个的话，会通过”&“进行连接，然后把数据放到url?后面传到指定页面；

url长度又限制，所以不要使用get方式传递过多的数据

(2)post方式：

前端页面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单提交方式2，post</title>

</head>

<body>

<form action="post.php" method="post">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php页面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');

error_reporting(0);



$userName=$_POST("userName"); //注意这里的要和提交的方式对应

echo "你的名字：{$userName}";

输入”li“提交后：

post理论上是无传输大小限制的，输入的内容也不会显示在浏览器输入栏中。

就暂时了解这么多了~继续加油！

评论(0) 浏览(2950)

182018-6

浅谈XSS跨站脚本攻击

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

浅谈跨站脚本攻击(XSS)

一、概述

1、什么是跨站脚本攻击

跨站脚本攻击(Cross Site Scripting)，简称XSS，是指：由于网站程序对用户输入过滤不足，致使攻击者利用输入可以显示在页面上对其他用户造成影响的代码来盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。
直白点：恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

不同于大多数攻击（一般只涉及攻击者和受害者），XSS涉及到三方，即攻击者、客户端与网站。XSS的攻击目标是为了盗取客户端的cookie或者其他网站用于识别客户端身份的敏感信息。获取到合法用户的信息后，攻击者甚至可以假冒最终用户与网站进行交互。

2、为什么简称XSS，而不是CSS

跨站脚本攻击(Cross Site Scripting)，为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。

3、XSS漏洞成因
XSS漏洞成因是由于动态网页的Web应用对用户提交请求参数未做充分的检查过滤，允许用户在提交的数据中掺入代码，然后未加编码地输出到第三方用户的浏览器，这些攻击者恶意提交代码会被受害用户的浏览器解释执行。
4、举个例子

[php] view plain copy

<?php

     header("Content-Type: text/html; charset=utf-8");

     $username = $_GET["name"];

     echo "<p>Hi，".$username."！</p>";

?>



//这段PHP代码的主要作用是从URL获取用户输入的参数作为用户名，并在页面中显示“Hi，XXX”

（1）正常情况下：我们在url中输入：   http://localhost/test.php?name=Sam

给参数name传一个值Sam，显示如下图

（2）那么，在非正常情况下呢（即：把传递给name的参数值改为一段可执行的Javascript代码）？

我们在url中输入：http://localhost/test.php?name=<script>alert("My name is Sam");</script>

如果我们后台没有进行任何关于传入参数值的过滤，会显示如下图结果

二、XSS生效方式

XSS主要有三种生效方式：（1）构造URL   （2）发布内容式     （3）蠕虫式

1、生效方式：构造URL

XSS攻击者通过构造URL的方式构造了一个有问题的页面；当其他人点击了此页面后，会发现页面出错，或者被暗中执行了某些js脚本，这时，攻击行为才真正生效。

一般来说，动态页面中会将url中的部分内容回写在页面中。以百度的搜索为例，输入网址：http://www.baidu.com/s?wd=<script>alert("wrong")<%2Fscript>

搜索后会显示如下页面：

因为参数<script>alert("wrong")<%2Fscript>是<script>alert("wrong")</script>转义后的结果，搜索结果页中，会在标题中中和搜索框中回写用户输入的内容。

如果这里没有经过转义处理，则页面中就嵌入了一段script，并执行该代码，并弹出对话框提示用户。如果是其他恶意代码，则可能造成破坏。然后攻击者将此URL广为传播——比如说，以报错的方式发给百度的管理员，管理员打开这个URL就中招了。

下面我们来通过下图，图解XSS

举例

例1、

若未对XSS进行预防，

我们在URL中正常输入如下，搜索结果会如下图显示：beijing 的相关词条

如果在url中非正常输入如下的话，查看源码后input的value属性值会自动变为 <script>alert("xss test")</script>

若已对XSS进行了预防，

非正常输入后则会显示如下图：

例2、

若未对XSS进行预防，

在URL中输入红框中的值，搜索后则显示如下：

若已对XSS预防，

则搜索结果如下图：

2、生效方式：发布式内容

构造URL攻击方式传播范围有限，被攻击者只要有基本的安全意识就可以避免，因此这种手段的危险性比较小。相比之下，通过发表内容构造的XSS的危害就大了很多。

在可以发表内容的论坛、讨论区、吧、博客、微博等网站上，用户发表的内容会保存起来，允许其他用户浏览。这些保存的内容显示在页面上的时候，如果没有经过正确的处理，也会把攻击者精心构造的内容显示出来，访问该内容的用户就此中招。如果该页面流传广泛，则影响会更加深远。

拿留言板举例

例、

留言板的任务是把用户留言的内容展示出来。正常情况下，用户的留言都是正常的语言文字，留言板显示的内容也就没毛病。

然而这个时候如果有人不按套路出牌，在留言内容中丢进去一行”<script>alert(“mdzz”)</script>
之后当浏览这条留言的时候，就会弹出如下信息框。

3、生效方式：蠕虫式

最暴力的方式是使用蠕虫——就是首先发一个有问题的文章，浏览者阅读时会被暗中执行恶意代码，发表一篇新的文章的，该文章也含有同样的恶意代码。这样有可能在最快时间内将攻击铺满整个网站。蠕虫式攻击将暗中偷偷摸摸的攻击行为变成了光明正大的攻城拔寨，极容易被发现和修复。

Eg：早在2011年新浪就曾爆出过严重的xss漏洞，导致大量用户自动关注某个微博号并自动转发某条微博。(蠕虫式)
它以吸引人眼球的方式，让当微博用户主动点击攻击链接。之后微博网友会立刻执行一段有害代码，造成三个结果：发布一条微博；成为攻击发起人的粉丝；向其他好友发送含同样链接地址的私信。新浪微博很快发现这个漏洞，删除了含攻击链接的微博内容，并将攻击发起人ID删除。

注：上面我们只是为了方便以弹窗举例，但是XSS攻击方式绝不是弹窗这么简单

三、XSS攻击实例

（1）XSS偷取用户信息

（2）XSS盗取Cookie

（3）XSS钓鱼网站

（4）XSS蠕虫攻击

四、XSS的破坏方式

（1）破坏页面结构：用户输入的内容包含了html的标签，与前面的标签等闭合，导致页面的DIV结构发生变化，页面错乱。

（2）破坏显示内容：用户输入的内容包含了单引号或双引号，与前面的单引号或双引号匹配，导致后面的内容丢失，显示不出来。

（3）破坏JS：用户产生的内容直接输出到js片断中，但仅转义少数字符不能保证排除攻击，所以容易导致JS被破坏

五、XSS攻击绕过过滤的一些简单方法

1、大小写绕过

这个绕过方式的出现是因为网站仅仅只过滤了<script>标签，而没有考虑标签中的大小写并不影响浏览器的解释所致。

例：

如果我们在URL中输入:  localhost/test.php?name=<script>alert(''hey!")</script>

，由于网站对<script>标签进行了过滤，所以搜索后什么都不会发生。

而如果我们输入:  localhost/test.php?name=<sCript>alert(''hey!")</scRipt>

，实质就是改变了<script>的大小写，则结果如下图所示，我们又愉快的弹出了弹窗。

2、利用过滤后返回语句再次构成攻击语句来绕过

即我们输入一串原始值，网站将输入的原始值进行过滤，过滤后的值仍是一段可执行的代码。

例

让过滤完script标签后的语句中还有script标签。
      即：<sCri<script>pt>alert("hey!")</scRi</script>pt> 过滤后
仍为可执行的JS代码<script>alert("hey!")</script>

如下图：将参数name值设为<sCri<script>pt>alert("hey!")</scRi</script>pt>

，输入后仍会出现弹窗

3、并不是只有script标签才可以插入代码！

当script标签已经被完全过滤后，前面两种方法就都不会成功。
莫慌，能植入脚本代码的不止script标签。

例如：我们用<img>标签做一个示范。
我们利用如下方式在URL中输入：http://localhost/test.php?name=<img src='w.123' onerror='alert("hey!")'>
之后就可以再次愉快的弹窗。（因为我们指定的图片地址根本不存在也就是一定会发生错误，这时候onerror里面的代码自然就得到了执行。）

以下列举几个常用的可插入代码的标签。
<div onmouseover=‘do something here’> 当用户鼠标在这个块上面时即可运行（可以配合weight等参数将div覆盖页面，鼠标不划过都不行）
类似的还有onclick，这个要点击后才能运行代码

4、编码脚本代码绕过关键字过滤。
有的时候，服务器往往会对代码中的关键字（如alert）进行过滤，这个时候我们可以尝试将关键字进行编码后再插入，不过直接显示编码是不能被浏览器执行的，我们可以用另一个语句eval（）来实现。【eval()会将编码过的语句解码后再执行】

例

alert(1)编码过后就是\u0061\u006c\u0065\u0072\u0074(1)，

所以构建出来的攻击语句http://localhost/test.php?name=<script>eval(\u0061\u006c\u0065\u0072\u0074(1))</script>

如下图执行后又会出现弹窗

5、组合各种方式
在实际运用中漏洞的利用可能不会这么直观，需要我们不断的尝试，甚至组合各种绕过方式来达到目的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2992)

152018-6

主流验证码调研说明文档

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

1、文档说明

寻找主流验证码提供使用公司与样例及其可能的破解价格

2、内容概述

3 ------ 图像字符类型验证码

4 ------ 行为类型验证码

5 ------ 逻辑识别类型验证码

6 ------ 资料总结与价格汇总

3. 字符类型验证码

3.1 百度搜索字符验证码

简述：

普通字母数字干扰倾斜验证码

出现位置：

登录百度搜索时可能出现

图片样例：

出现前提：

网络异常（非人类访问可能性大）

3.2 百度经验字符验证码

简述：

普通字母数字颜色块干扰倾斜验证码

出现位置：

发布百度经验可能出现

图片样例：

出现前提：

3.3 百度贴吧中文验证码

简述：

扭曲中文拼音干扰验证码

出现位置：

贴吧发布帖子的时候可能出现

图片样例：

3.4 YY字符验证码

简述：

在较大的图片中的小部分随机区域出现倾斜数字字母验证码。

出现位置：

YY登录页面

图片样例：

3.5 stream数字中文验证码

简述：

扭曲中文数字干扰验证码

出现位置：

异地登录可能出现

图片样例：

3.6 谷歌字符紧凑扭曲验证码

简述：

字符紧凑扭曲验证码

出现位置：

异常流量访问可能出现

图片样例：

3.7 京东字符重叠验证码

简述：

字符紧凑扭曲验证码

出现位置：

异常流量访问可能出现

图片样例：

4. 行为验证类型验证码

4.1 淘宝登录行为验证码

简述：

需要鼠标拖动到最右边完成的验证码。

出现位置：

在淘宝登录页面出现

图片样例：

4.2 极验第二代行为验证码

简述：

极验专职做验证码，需要通过滑轮完成拼图。

出现位置：极验官网

图片样例：



4.3 极验第三代行为验证码

简述：

极验专职做验证码，按键点击再分析浏览记录和特征判别。类似谷歌第三代验证码

出现位置：极验官网

图片样例：



5. 逻辑识别验证码

5.1 12306逻辑识别验证码

简述：

12306登录界面识别验证码。

出现位置：12306登录界面

图片样例：



5.2 外国网站逻辑识别验证码

简述：偶然见到，还没有具体来源。

出现位置：网络来源（未知）

图片样例：



5.3 落伍者点击提示验证码

简述：

来自落伍者网站依次在图片中点击提示的字符。

出现位置：落伍者网站登录时

图片样例：



5.4 腾讯安全验证点击提示验证码

简述：

来自腾讯安全验证时依次在图片中点击提示的字符。

出现位置：腾讯安全平台

图片样例：



5.5 逻辑数字汉字加减验证码

简述：

某网站下订单时出现数字加中文逻辑处理验证码。

出现位置：网络来源（未知）

图片样例：

5.6 逻辑拼音验证码

简述：扭曲的中文文字

出现位置：网络来源（未知）

图片样例：

5.7 谷歌路标识别验证码

简述：提示生活场景图片，由用户点击路标之类。

出现位置：谷歌异常访问时出现

图片样例：

6. 验证码搜集总结

搜集了验证码业内3大类型下的17个变种形式。

所有字符型，逻辑型验证码均可以通过打码平台进行破解
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3281)

142018-6

Node.js从无到有-No.1

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

1、初始node.js

1、node.js是由chrome浏览器，V8引擎，C++编写的JavaScript运行环境，node.js可以解析JS代码，而且没有浏览器安全级的限制，还提供很多系统级别的API。

2、简单介绍一下node.js后推荐给大家几个网站，大家可以从这几个网站上学习更多

https://nodejs.org/en/ Node.js的官方网站

https://stackoverflow.com/ 技术问答社区

3、安装node.js（这部分感觉没有什么好说的，因为就是下载安装的过程，不熟悉的同学去下面菜鸟教程这个网站参考一下就行）https://www.runoob.com/nodejs/nodejs-install-setup.html

4、node.js版本的常识：偶数位为稳定版本，奇数为非稳定版本

5.node.js基础-起一个web服务器

（1）首先在某个路径下面写一个server.js文件，文件内容如下：

[javascript] view plain copy

var http=require('http');

http.createServer(function(req,res){

   res.writeHead(200,{'Content-Type':'text/plain'});

   res.end("Hello world\n");

}).listen(1337,'127.0.0.1');

console.log('Server running at http://127.0.0.1:1337');

（2）然后在该路径下面使用node运行server.js文件

（3）服务就运行起来了，那么打开浏览器，进入http://127.0.0.1:1337/里面就可以看到Hello World

（4）现在我们回过头去看看刚才那个server.js文件里写的都是什么东西

[javascript] view plain copy

var http=require('http');              //1、加载http模块，负责是创建web服务器和处理http相关的任务等等

http.createServer(function(req,res){   //3、监听到从1337端口过来的请求就会执行这个匿名回调函数，req是请求体，res是响应体，给请求响应一些内容

   res.writeHead(200,{'Content-Type':'text/plain'});  //4、状态码200，表示请求成功

   res.end("Hello world\n");

}).listen(1337,'127.0.0.1');           //2、通过createServer（）方法创建服务器，使用listen（）方法在1337端口监听请求

console.log('Server running at http://127.0.0.1:1337');

（5）现在我们将server.js文件中的res.end("Hello World\n")修改为res.end("Hello Node.js\n"),然后之前我们的服务还没有关掉，在命令行按下Ctrl+C停掉服务，再使用命令重新开启，然后进入到浏览器刷新http://127.0.0.1:1337/页面就出来结果了

（6）刚才在server.js文件中的写法都是链式写法，我们看nodejs官网提供的写法，就很清晰

[javascript] view plain copy

const http = require('http');



const hostname = '127.0.0.1';

const port = 3000;



const server = http.createServer((req, res) => {

  res.statusCode = 200;

  res.setHeader('Content-Type', 'text/plain');

  res.end('Hello World\n');

});



server.listen(port, hostname, () => {

  console.log(`Server running at http://${hostname}:${port}/`);

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2896)

132018-6

ajax学习二——从表单提交中了解前后端数据交互

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

一直不太懂前后端的交互，开始学习ajax，好像有些懂了，接下来的内容通过表单提交来了解前后端数据交互吧~

关于表单的基本知识：

表单中的三个内容：

action：数据提交的地址，默认是当前页面

method：数据提交的方式，默认是get方式

enctype：提交数据格式，默认是application/x-www-form-urlencoded

以下分两种提交方式进行：

（1）get方式：

前端页面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="get.php" method="get">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php页面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');//返回头

error_reporting(0);



$userName=$_GET['userName'];//主要这里要对应提交的方式，如果表单使用的是get方式则后端需要用get，如果是使用post，则后端需要使用post



echo "你的名字：{$userName}";

输入“aa"提交后：

使用get方式：

把数据名称和值通过”=“连接，如果又多个的话，会通过”&“进行连接，然后把数据放到url?后面传到指定页面；

url长度又限制，所以不要使用get方式传递过多的数据

(2)post方式：

前端页面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单提交方式2，post</title>

</head>

<body>

<form action="post.php" method="post">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php页面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');

error_reporting(0);



$userName=$_POST("userName"); //注意这里的要和提交的方式对应

echo "你的名字：{$userName}";

输入”li“提交后：

post理论上是无传输大小限制的，输入的内容也不会显示在浏览器输入栏中。

就暂时了解这么多了~继续加油！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3404)

122018-6

Jquery插件 easyUI属性汇总

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

此属性列表请对照jQuery EasyUI 1.0.5.



属性分为CSS片段和JS片段。



CSS类定义：

1、div easyui-window        生成一个window窗口样式。

      属性如下：

                   1)modal:是否生成模态窗口。true[是] false[否]

                   2)shadow:是否显示窗口阴影。true[显示] false[不显示]



2、div easyui-panel           生成一个面板。

       属性如下:

                 1)title:该标题文本显示在面板头部。

                 2)iconCls:在面板上通过一个CSS类显示16x16图标。

                 3)width:设置面板宽度。默认auto。

                 4)height:设置面板高度。默认auto。

                 5)left:设置面板左边距。

                 6)top:设置面板顶部位置。

                 7)cls:在面板中增加一个Class类。

                 8)headerCls:在面板头部中增加一个Class类。

                 9)bodyCls:在面板内容中增加一个Class类。

                10)style:在面板中增加一个指定样式。

                11)fit:当True时设置该面板尺寸适合于它的父容器。默认false。

                12)border:当定义时显示面板边界。默认true。

                13)doSize:如果设置为True，该面板将重绘大小，并重建布局。默认true。

                14)collapsible:当定义时显示可折叠面板的按钮。默认false。

                15)minimizable:当定义时显示最小化面板的按钮。默认false。

                16)maximizable:当定义时显示最大化面板的按钮。默认false。

                17)closable:当定义时显示关闭面板的按钮。默认false。

                18)tools:自定义工具栏，每个工具都包含两个属性:iconCls、handler。

                19)collapsed:当定义时该面板初始化时处于收缩状态。默认false。

                20)minimized:当定义时该面板初始化时处于最小化状态。默认false。

                21)maximized:当定义时该面板初始化时处于最大化状态。默认false。

                22)closed：当定义时该面板初始化时处于关闭状态。默认false。

                23)href:一个url，加载远程数据并显示在面板中。

                24)loadingMessage:当加载远程数据时，在面板中显示一个消息。默认Loading…

             事件如下:

                 1)onLoad:当远程数据加载完毕后激活。

                 2)onBeforeOpen:当面板打开前激活。

                 3)onOpen:当面板打开后激活。

                 4)onBeforeClose:当面板关闭前激活。

                 5)onClose:当面板关闭后激活。

                 6)onBeforeDestroy:当面板销毁前激活。

                 7)onDestroy:当面板销毁后激活。

                 8)onBeforeCollpase:当面板收缩前激活。

                 9)onCollapse:当面板收缩后激活。

                10)onBeforeExpand:当面板扩展前激活。

                11)onExpand:当面板扩展后激活。

                12)onResize:当面板重绘后激活。

                      width:新建的外部宽度

                      height:新建的外部高度

                13)onMove:当面板移动后激活。

                     left:左侧新位置。

                     top:顶部新位置。

                14)onMaximize:当窗口最大化后激活。

                15)onRestore:当窗口恢复到原来大小时激活。

                16)onMinimize:当窗口最小化后激活。

             方法如下：

                 1)options:返回options属性。

                 2)panel:返回面板对象。

                 3)header:返回面板头部对象。

                 4)body:返回面板主体对象。

                 5)setTitle:设置头部的标题文本。

                 6)open:当forceOpen参数设置为true时，面板打开时绕过onBeforeOpen回调函数。

                 7)close:当forceClose参数设置为true时，该面板关闭时绕过onBeforeClose回调函数。

                 8)destroy:当forceDestroy参数设置为true时该面板销毁时绕过onBeforeDestroy回调函数。

                 9)refresh:当href属性设置后刷新该面板以加载远程数据。

                10)resize:设置面板的大小和布局。该options对象包含以下属性:

                     width：新的面板宽度。

                     height：新的面板高度。

                     left：新的面板左侧位置。

                     top：新的面板顶部位置。

                11)move:移动面板到一个新的位置。该options对象包含以下属性：

                     left：新的面板左侧位置。

                     top：新的面板顶部位置。



3、a  easyui-linkbutton                    生成链接类型的按钮。



       属性如下：

            1)disabled:当True时禁用该按钮。默认false。

            2)plain:当True时显示一个普通效果。默认false。



4、input/textarea easyui-validatebox       生成字段验证。

              属性如下：

              1)required:true[必需] false[不必需] 默认false

              2)validType:

                 a、length[a,b] 字段长度控制在a至b之间。

                 b、email       验证Email。

                 c、url      验证网络地址。

              3)missingMessage：当文本时出现空时弹出该工具提示，系统有默认[英文]，自定义可覆盖它。

              4)invalidMessage：当文本内容无效后弹出该工具提示，系统有默认[英文]，自定义可覆盖它。



5、ul easyui-tree         生成一个树形结构。

             属性如下：

              1)url:一个获取远程数据的地址。

              2)animate:当展开或折叠节点时是否定义动画效果。true[是] false[否] 默认false

             节点属性如下：

             1)text:节点的显示文本。

             2)id:节点ID，对于加载远程数据时非常重要。

             3)state:节点状态，'open'或'closed'，默认为'open'。当设置为'关闭'，该节点包含子节点，并将远程站点加载它们(并非触发再加载)。

             4)attributes:为节点添加自定义属性。

             5)children:以数组节点的方式定义一些字节点。

             事件如下：

                 1)onClick:

                    当用户点击一个节点时激活，该节点参数包含如下属性：

                    id：节点ID

                    text:节点文本

                    attributes:节点自定义属性。

                    target:目标点击的DOM对象。

              2)onLoadSuccess:

                   当数据成功加载数据时激活，该参数跟jQuery.ajax的'success'函数效果相同。

              3)onLoadError:

                  当数据加载数据失败时激活，该参数跟jQuery.ajax的'error'函数效果相同。

             方法如下:

                 1)reload:重新加载树数据。

                 2)getSelected:获取选中的节点并返回它，如果没有选择节点将返回null。

                 3)collapse:折叠一个节点，该目标参数是该节点的DOM对象。

              4)expand:展开一个节点，该目标参数是该节点的DOM对象。

              5)append:在一个父节点追加一些子节点。

                    param有两个属性：

                    parent:DOM对象，把它作为父节点追加(它们)。

                    data:array，或者节点数据。

              6)remove:删除它以及它以下的子节点，该目标参数是该节点的DOM对象。



6、table easyui-datagrid                   生成一个表格。

             属性如下：

                 1)title:该DataGrid面板的标题文本。

                 2)iconCls:一个CSS类，将提供一个背景图片作为标题图标。

                 3)border：当true时，显示该datagrid面板的边框。

                 4)width:面板宽度，自动列宽。

                 5)height:面板高度，自动列高。

                 6)columns:该DataGrid列配置对象，查看column属性可获取更多信息。

                 7)frozenColumns:跟Columns属性相同，但是这些列将会被固定在左边。

                 8)striped:当true时，单元格显示条纹。默认false。

                 9)method:通过该方法类型请求远程数据。默认post。

                10)nowrap:当true时，显示数据在同一行上。默认true。

                11)idField:说明哪个字段是一个标识字段。

                12)url:一个URL，从远程站点获取数据。

                13)loadMsg:当从远程站点加载数据时，显示一个提示信息。默认"Processing,please wait …"。自定义覆盖。

                14)pagination:当true时在DataGrid底部显示一个分页工具栏。默认false。

                15)rownumbers:当true时显示行号。默认false。

                16)singleSelect:当true时只允许当前选择一行。默认false。

                17)fit:当true时，设置大小以适应它的父容器。默认false。

                18)pageNumber:当设置分页属性时，初始化的页码编号。默认从1开始

                19)pageSize:当设置分页属性是，初始化的页面大小。默认10行

                20)pageList:当设置分页属性时，初始化页面的大小选择清单。默认[10,20,30,40,50]

                21)queryParams:当请求远程数据时，也可以发送额外的参数。

                22)sortName:定义哪列可以排序。

                23)sortOrder:定义列的排列顺序，只能是'asc'或'desc'。默认asc。

             Column属性如下：

                 1)title:该列标题文本。

                 2)field:该列对应的字段名称。

                 3)width：列宽。

                 4)rowspan:说明该单元格需要多少行数。

                 5)colspan:说明该单元格需要多少列数。

                 6)align:说明Column数据的对齐方式。'left'，'right'，'center' 都可以使用。

                 7)sortable:当true时，允许该列进行排序。

                 8)checkbox:当true时，允许该列出现checkbox。

             事件如下：

                 1)onLoadSuccess:当远程数据加载成功是激活。

                 2)onLoadError:当远程数据加载发现一些错误时激活。

                 3)onClickRow:当用户点击某行时激活，参数包含：

                    rowIndex: 点击的行索引，从0开始。

                    rowData: 点击行时对应的记录。

                4)onDblClickRow:当用户双击某行时激活，参数包含：

                    rowIndex: 点击的行索引，从0开始。

                    rowData: 点击行时对应的记录。

                5)onSortColumn:当用户对某列排序时激活，参数包含：

                   sort:排序字段名称。

                   order:排序字段类型。

                6)onSelect:当用户选择某行时激活，参数包含:

                   rowIndex: 点击的行索引，从0开始。

                   rowData: 点击行时对应的记录。

                7)onUnselect:当用户取消选择某行时激活，参数包含:

                    rowIndex: 点击的行索引，从0开始。

                    rowData: 点击行时对应的记录。

             方法如下：

                 1)options:返回选择对象。

                 2)resize:重调大小，生成布局。

                 3)reload:重新加载数据。

                 4)fixColumnSize:固定列大小。

                 5)loadData:加载本地数据，过去的行会被删除。

                 6)getSelected:返回第一个选中行的记录，若未选返回null。

                 7)getSelections:返回选中的所有行，当没有选择记录时将返回空数组。

                 8)clearSelections:清除所有选项的选择状态。

                 9)selectRow:选择一行，行索引从0开始。

                10)selectRecord:通过传递一个ID值参数，选择一行。

                11)unselectRow:取消选择一行。



7、div easyui-tabs                         生成一个tab容器。

             属性如下：

                 1)width:容器宽度，自动列宽。

                 2)height:容器高度，自动列高。

                 3)idSeed:该根id衍生成标签面板DOM id属性。默认0

                 4)plain：当true时，该Tab渲染不使用容器背景图片。默认false

                 5)fit:当true时，设置该Tab大小以适应它的父容器。默认false

                 6)border:当true时，显示该Tab边框。

                 7)scrollIncrement:

                 8)scrollDuration:

             事件如下：

                 1)onLoad:当一个ajax Tab面板需要加载远程数据时激活。该参数跟jQuery.ajax的'success'函数效果相同。

                 2)onSelect:当用户选择一个Tab面板时激活。

                 3)onClose:当用户关闭一个Tab面板时激活。

             方法如下:

                 1)resize:重绘该Tab容器的布局。

                 2)add:新增加一个Tab面板，该选项参数是一个配置对象，看Tab面板属性可获取更多信息。

                 3)close：关闭该Tab面板，标题参数显示你要关闭的对象。

                 4)select:选择一个Tab面板。

                 5)exists:如果该Tab面板存在即显示。

             Tab面板属性如下：

                 1)id:该Tab面板DOM id属性。

                 2)text:该Tab面板标题文本。

                 3)content:该Tab面板内容。

                 4)href:一个URL，加载远程内容以填充Tab面板。

                 5)cache:当true时，缓存Tab面板，当href 属性设置后有效。默认true

                 6)icon:增加一个CSS class图标以显示在Tab面板的标题旁。

                 7)closable:当true时，该Tab面板将显示可关闭按钮，点击能关闭该Tab面板。默认false

                 8)selected:当true时，该Tab面板将被选中。默认false

                 9)width:面板宽度，自动列宽。

                10)height:面板高度，自动列高。



8、div menu-sep              生成一个菜单分隔线。



9、a easyui-splitbutton         生成一个菜单列。



10、div easyui-accordion        生成手风琴式下拉框。继承自panel



11、select easyui-combobox       生成一个组合下拉框。

             属性如下：

                 1)width:容器宽度，自动列宽。

                 2)listWidth:该组合下拉框的宽度。

                 3)listHeight:该组合下拉框的高度。

                 4)valueField：把该基础数据的值名称绑定到组合下拉框中[value]。

                 5)textField:把该基础数据的字段名称绑定到组合下拉框中[text]。

                 6)editable:当True时，可直接在文字域中键入文本。默认true。

                 7)url:一个URL，从远程加载列表数据。

             事件如下：

                 1)onLoadSuccess:当远程数据加载成功是激活。

                 2)onLoadError:当远程数据加载发现一些错误时激活。

                 2)onSelect:当用户选择一个列表选项时激活。

                 3)onChange:当该字段的值发生改变时激活。

             方法如下:

                 1)select: 在下拉列表中选择一个值。

                 2)setValue: 设置指定值到该字段。在'param' 参数可以是一个字符串或者一个JS对象。注:JS对象包含的属性对应valueField和TextField两个属性。

                 3)getValue: 获取该字段的值。

                 4)reload:   重新请求远程列表数据。



12、select easyui-combotree      生成一个组合树形框。

            属性如下：

            1)width:容器宽度，自动列宽。

            2)treeWidth:该树形下拉框的宽度。

            3)treeHeight:该树形下拉框的高度。

            4)url:一个URL，从远程加载树形数据。

             事件如下：

             1)onSelect:当用户选择一个树形节点时激活。

             2)onChange:当该字段的值发生改变时激活。

             方法如下:

             1)setValue: 设置指定值到该字段。在'param' 参数可以是一个树形节点ID值或者一个JS对象。注:JS对象包含的属性对应id和text两个属性。

             2)getValue: 获取该字段的值。

             3)reload:   重新请求远程列表数据。



13、body[div] easyui-layout      生成一个布局。

            属性如下：

            1)title:该面板标题文本。

            2)region:定义布局面板的位置，包含下列值:north,south, east, west, center。

            3)border:当True时显示布局面板的边框。默认为True。

            4)split: 当True时显示一个分割符以使用户改变面板的尺寸。默认false。

            5)icon:一个图标CSS类，在面板头部显示一个图标。

            6)href:一个URL,以从远程站点加载数据。



14、div easyui-menu        生成一个菜单。

            属性如下：

            1)zIndex: Menu z-index样式。注释：z-index 属性设置元素的堆叠顺序。

            2)left:菜单左起位置。默认0。

            3)top: 菜单顶部位置。默认0。

            4)href:当点击菜单项时能在当前浏览器窗口显示不同的网址。

            事件如下:

            1)onShow:激活后显示菜单。

            2)onHide:激活后隐藏菜单。

            方法如下:

            1)show:在指定的位置显示一个菜单。该位置上包含两个参数：

                left:新的左起位置。

               top:新的顶部位置。

            2)hide:隐藏一个菜单。



15、a easyui-menubutton       生成一个菜单按钮。

            属性如下：

            1)disabled:当True时禁用该按钮。默认false。

            2)plain:当True时显示一个普通效果。默认false。

            3)menu:一个选择器名称，用来创建相应的菜单。

            4)duration: 当悬停该按钮时，定义菜单的持续显示时间，单位为毫秒。默认100。



16、input easyui-numberbox      生成一个数字输入框。

            选项如下:

            1)min:允许的最小值。当输入值小于最小值时，显示最小值。

            2)max:允许的最大值。当输入值大于最大值时，显示最大值。

            3)precision:分隔符后能的小数点位数。整数默认会追加小数点位数。





JS定义：

1、 .window            生成一个window窗口。



2、 .tree                  生成一个树形结构。



3、 .datagrid           生成一个表格。



4、 .combobox        生成一个组合下拉框。



5、 .combotree       生成一个组合树形框。



6、 .dialog               生成一个对话框。它继承自window

      私有属性如下：

                 1)title:该对话框标题文本。默认"New Dialog"。

                 2)collapsible:当True时可显示折叠按钮。默认false。

                 3)minimizable:当True时可显示最小化按钮。默认false。

                 4)maximizable:当True时可显示最大化按钮。默认false。

                 5)resizable:当True时能重绘对话框大小。默认false。

                 6)toolbar:该工具栏置于对话框的顶部，每个工具栏包含:text, iconCls, disabled, handler等属性。

                 7)buttons:这个按钮置于对话框的底部，每个按钮包含:text, iconCls, handler等属性。



7、 .draggable          生成一个可自由拖动的块。

      属性如下:

              1)handle:选择"#id"进行拖动。

              2)disabled:当True时停止自由拖动。默认false。

              3)edge:开始拖动拖动块时的宽度。默认0。

              4)axis:当拖动块移动时定义轴，可选值是'v'或者'h',当超出'v'和'h'的方位时将设置为null。

     事件如下：

                 1)onStartDrag:当目标对象开始拖动时激活。

                 2)onDrag:在拖动期间激活。返回false将不会实际拖动它(的位置)。

                 3)onStopDrag:当目标对象停止拖动时激活。



8、 .linkbutton          生成一个链式按钮。



9、 .messager           生成一个消息框。

             选项如下：

                 1)ok:显示确定按钮文本。

                 2)cancel:显示取消按钮文本。

             方法如下:

             1)show:在屏幕的右下角出现一个消息框。该选项参数是一个配置对象，它包括：

                showType:定义消息框显示的模式，可选值包括:null,slide,fade,show.默认slide.

                showSpeed: 定义消息框完成显示的时间。默认600毫秒。

                width: 定义消息框的宽度。默认250。

                height:定义消息框的高度。默认100。

                msg:定义消息框显示的文本。

                title: 在消息框面板头部显示标题文本。

                timeout: 如果定义为0,消息框将不会自动关闭，除非用户手动关闭它。如果定义为非0值，消息框会在超时结束时自动关闭它。单位毫秒。

             2)alert:显示一个打印窗口。它的参数如下:

                title: 在头部显示标题文本。

                msg:显示文本内容。

                icon: 显示图标。可选值:error,question,info,warning。

                fn: 当窗口关闭后触发回调函数。

             3)confirm:显示一个包含确定和取消按钮的确认消息框。参数包括:

                title:在头部显示标题文本。

                msg: 显示文本内容。

                fn(b):回调函数，当用户点击OK按钮，返回True,才会处理该函数，其它按钮返回false,不处理。

             4)prompt:显示一个消息框，包含OK和Cancel按钮并提示用户输入一些文本。参数包括:

                title:在头部显示标题文本。

                msg:显示文本内容。

                fn(val):该回调函数处理用户输入的参数值。



10、 .pagination         生成一个页码工具条。

           属性如下：

            1)total:当分页条创建后设置的记录数。默认1。

            2)pageSize:页面大小。默认10。

            3)pageNumber:当分页创建后显示的页码。默认1。

            4)pageList:用户能更改页面的大小。您也可以改变该属性定义的默认大小。默认[10,20,30,50]。

            5)loading:定义是否正在加载。默认false。

            6)buttons:定义自定义按钮，每个按钮都包含两个属性:

               iconCls: 该CSS类将显示一个背景图标。

               handler: 当按钮点击时触发一个处理函数。

            7)beforePageText:当输入组件前显示一个标签文本。

            8)afterPageText:当输入组件后显示一个标签文本。

            9)displayMsg:显示一个页面信息。

           方法如下:

            1)onSelectPage:当用户选择一个新页面时激活。该回调函数包括两个参数:

               pageNumber: 该新页面的页码。

               pageSize:该新页面的大小。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2843)

112018-6

第六章属性文法和语法制导翻译

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

1.总结

    属性文法是在上下文无关文法的基础上为每个文法符号（终结符或非终结符）配备若干个相关的“值”（称为属性）。

    属性代表与文法符号相关的信息，和变量一样，可以进行计算和传递。属性分为综合属性和继承属性。

    综合属性用于“自下而上”传递信息，在语法树中，一个结点的综合属性的值，由其子结点的属性值确定。

    继承属性用于“自上而下”传递信息，在语法树中，一个结点的继承属性由此结点的父结点和/或兄弟结点的某些属性确定。

    属性计算的过程即是语义处理的过程，对于文法的每一个产生式配备一组属性的计算规则，则称为语义规则。

    语义规则所描述的工作包括：属性计算、静态语义检查、符号表操作、代码生成等。

    抽象语法树指从语法树中去掉对翻译不必要的信息，而获得更有效的源程序中间表示。

     L-属性文法的自顶向下翻译，属性的计算次序受分析方法所限定的分析树结点建立次序的限制，分析树的结点是自左向右生成，如果属性信息是自左向右流动，那么就有可能在分析的同时完成属性计算。

S—属性文法的自下而上计算，S—属性文法，它只含有综合属性。综合属性可以在分析符号串的同时由自上而下的分析器来构造，分析器可以保存与栈中文法符号有关的综合属性值，每当进行归约时，新的属性值就由栈中正在归约的产生式右边符号的属性值来计算，可以通过扩充分析器中的栈来存放这些综合属性值。S-属性文法的翻译器通常可借助于LR分析器实现。

    翻译模式是语法制导定义的一种便于翻译的书写形式。其中属性与文法符号相对应，语义规则或语义动作用花括号｛｝括起来，可被插入到产生式右部的任何合适的位置上。这是一种语法分析和语义动作交错的表示法，他表达在按深度优先遍历分析树的过程中何时执行语义动作。翻译模式给出了使用语义规则进行计算的顺序。可看成是分析过程中翻译的注释。

2.感悟

    这一章主要内容是SDD语法制导定义和SDT语法制导翻译方案，通过给CFG中的文法符号设置语义属性来表示语法成分对应的语义信息，而语义属性通过相关联的语义规则计算，在对语法分析的过程中进行翻译。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3236)

082018-6

世界杯快到了，看我用Python爬虫实现（伪）球迷速成！

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

还有4天就世界杯了，作为一个资深（伪）球迷，必须要实时关注世界杯相关新闻，了解各个球队动态，这样才能在一堆球迷中如（大）鱼（吹）得（特）水（吹），迎接大家仰慕的目光!

给大家分享一个快速了解相关信息的办法：刷论坛！我们来一起做个虎扑论坛的爬虫吧！

抓包获取虎扑论坛相关帖子内容，逐条显示！

先来观察下网页，打开论坛首页，选择国际足球

然后往下拉，找到世界杯相关内容

这里就是我们的目标了，所有相关的新闻都会在这里显示，用F12打开“开发者工具”然后往下浏览看看数据包

注意箭头指向的那几个地方！

这就是刚才浏览的新闻所在的json包，来看看具体数据是什么

ok，标题、地址、发布时间包括来源都已经出现了!我们可以直接抓取json数据然后取出相关内容！

再进入具体新闻页面看看

所有的文本内容，都在

这个标签下的

标签内，我们可以用xpath直接取div下的所有文本内容!

这里就不一一说明了，直接上代码，并录个小的GIF图片给大家看看效果

#@author Q群542110741 # -*- coding:utf-8 -*- import requests from lxml import etree header = { 'User-Agent':'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0', 'Host':'soccer.hupu.com', 'Referer':'https://soccer.hupu.com/'} i = 0 while 1: #构建循环页面翻页 url = 'https://soccer.hupu.com/home/latest-news?league=世界杯&page=' i += 1 #获取json数据，一页20个 html = requests.get(url+str(i),headers=header).json()['result'] for info in html: time_r = info['time']#发布时间 title = info['title']#标题 url_r = info['url']#新闻链接 origin = info['origin']#来源 print(title) print('发布时间:',time_r,' '*5,'来自：',origin) head = header head['Host'] = 'voice.hupu.com'#更改header中Host参数 html_r = requests.get(url_r,headers=head)#获取新闻详情 html_r.encoding = 'utf-8'#编码格式指定 #获取div下的所有文本 datas = etree.HTML(html_r.text).xpath('//div[@class="artical-content-read"]')[0].xpath('string(.)').strip() print('\n'+'内容：'+'\n'*2,datas,'\n') #可由用户手动退出循环 if input('任意键继续，“q”退出') in ['q', 'Q']: exit()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2958)

072018-6

程序猿之HTML

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

一、WEB概述 (!!掌握web发展过程图、B/S和C/S架构的特点)
   B/S: Browser-Server 浏览器服务器模型 WEBQQ 网页游戏
       优点: 不需要下载客户端程序, 使用浏览器可以直接访问. 程序的升级操作是在服务器端进行的. 浏览器只需要刷新页面就可以看到升级后的效果
       缺点: 浏览器具有一定的局限性, 页面的展示能力仍然是很差. 所有的页面数据都需要从服务器实时的获取, 所以对网速的依赖很高
   C/S: Client-Server 客户端服务器模型 QQ LOL
       优点: 客户端可以任意的设计, 页面的展示能力就可以很强. 由于大量的资源都已经保存在了客户端, 和服务器交互的仅仅是一些变化的数据, 所以对网速的依赖很低
       缺点: 第一次使用时需要下载客户端程序, 一旦程序需要升级操作, 所有的客户端程序都需要升级. 在有些场景中是不能被接受的.

二、HTML
   1.HTML是什么
       超文本标记语言最基础的网页语言 W3C
       HTML不是一门编程语言而是一门标记语言
       HTML是用标记(标签/元素)来描述网页内容的
       HTML是文档的一种

   2.html的结构 (掌握)
       <!DOCTYPE HTML>
       <HTML>
           <HEAD></HEAD>
           <BODY></BODY>
       </HTML>
       <!DOCTYPE HTML>用来指定当前页面所遵循的html的版本
       头部分用来存放html页面的基本属性信息优先被加载
       体部分用来存放页面数据,是可见的页面内容

       <title></title>指定网页的标题
       <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用来指定浏览器用什么编码解析当前页面

   3.html语法 (掌握)
       html标签分为开始标签和结束标签,如果标签内没有修饰的内容, 开始标签和结束标签可以合并为一个自闭标签
       如:   <br/> <hr/>

       标签通常都可以具有属性属性与属性值用"="连接,属性的值可以用双引号、单引号引起来或者不用引号一般会用双引号引起来

       

       html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
       如果非要输入空格,可以用转义字符来替代  
       如果非要输入换行,可以用 <br/> 来替代

   4.font标签 -- 用来指定文本的字体/大小/颜色 (了解)
       size:指定字体大小范围是 1~7 默认值为3
       color:指定字体颜色
           值可以指定为颜色名如red
           或十六进制的颜色值如#000000
           或 rgb三原色值如rgb(255,255,255)
       face:指定字体中文默认是宋体

   5.标题标签 -- 指定特定样式字体的一组标签 (掌握)
       <h1>一级标签</h1>
       <h2>二级标签</h2>
       <h3>三级标签</h3>
       <h4>四级标签</h4>
       <h5>五级标签</h5>
       <h6>六级标签</h6>
       属性:
           align:指定文本的排列
               left
               center
               right
               justify

   6.转义字符 (掌握)
       <   <
       >   >
       "   "
       '   '
       空格  

   7.列表标签
       (1)定义列表 (了解)
           <dl> 定义一个定义列表
           <dt> 定义定义列表中的标题
           <dd> 定义定义列表中的项

       (2)有序列表 (了解)
           <ol> 定义一个有序列表
           <li> 定义列表中的项
           属性:
               type:定义项目符号的类型
                   A a I i 1(默认)
               start:定义项目符号的起始值

       (3)无序列表 (掌握)
           <ul> 定义一个无序列表
           <li> 定义列表中的项
           属性:
               type:定义项目符号的类型
                   disc square circle

   8.img标签 -- 图像标签 (!!掌握)
       <img src="图片的路径" alt="图像的替代文本"/>
       必选属性:
           src:图片的路径
           alt:图像的替代文本
       可选属性:
           width:宽度 px %
           height:高度 px %
           border:边框的宽度 px
   9.map标签 (了解)
       为图像绑定可点击区域的图像映射
       <map name="" id="">
           <area shape="circle" coords="640,410,64" href="#" />
       </map>
       属性:
           shape: 指定区域的形状
           coords: 指定区域的坐标
           href: 点击区域后跳转资源的URL

   10.超链接 -- <a> 锚 (!!掌握)
       用于指向当前位置以外的资源
       (1) 用于创建指向另外一个文档的超链接
       (2) 用于在当前页面的不同位置之间进行跳转
       重要属性:
           href: 所指向资源的URL
           name: 指定锚的名字
           target: 指定浏览器打开目标URL的方式。
               _blank   在新窗口中打开目标url
               _self   在当前窗口中打开目标url

   11.表格标签 -- <table> (!!!掌握)
       <table> 定义一个HTML表格
       <tr>   定义表格中的行
       <td>   定义表格中的单元格
       <th>   定义表格中的表头
       table的重要属性:
           border 边框宽度
           cellspacing 单元格之间的空白
           cellpadding 边框与单元格内容之间的距离
           bgcolor 背景颜色
           bordercolor 边框颜色
           width 宽度
           align 对齐方式
       tr重要属性:
           align 对齐方式
           bgcolor 背景颜色
       th/td重要属性:
           align 对齐方式
           bgcolor 背景颜色
           width 宽度
           height 高度
           colspan 可横跨的列数
           rowspan 可竖跨的行数
       <caption> 定义表格的标题
       <thead>
       <tfoot>
       <tbody>(可以出现多次).

       三个标签要么都没有,要么就必须一起使用,并且出现的顺序必须是thead,tfoot,tbody
       如果没有使用这三个标签, 那么<table>里面所有的内容都会隐含在一个隐藏的<tbody>标签内

   12.框架标签 (了解)
       <frameset>
       <frame>
       框架标签需要写在head和body的中间

       <frameset>属性:
           rows 定义框架集中行的数目和尺寸
           cols 定义框架集中列的数目和尺寸
       <frame>属性:
           src 定义目标文档的URL
           noresize 规定无法调整框架的大小
           frameborder 是否显示框架周围的边框
           name 框架的名字
           target 打开目标URL的方式
               _blank 在新窗口中打开目标url
               _self 在当前窗口打开目标URL
               _parent 在父窗口中打开目标URL
               _top 打开时忽略所有框架在当前页面打开url
               framename
       <iframe>
           创建包含另一个文档的行内框架
           <iframe>标签永远不要自闭!! 可以在标签内部存放提示文本如果浏览器不支持iframe 该文本会显示
           属性:
               src
               width
               height

   13.表单 (!!!掌握)
       (1)浏览器向服务器发送数据的方式, 有两种
           a)利用超链接向服务器发送数据 -- 请求参数
               在超链接的后面拼接上要发送的请求参数, 链接和请求参数之间用?分割, 参数名和参数值用 = 连接, 多个参数之间用 & 分割, 可以存在多个同名的参数

           b)利用表单向服务器发送数据
               利用HTML中的<form>标签以及一些表单项标签, 用户可以输入数据, 通过提交表单发送数据给服务器

       (2)form
           必须存在的属性:
               action: 指定表单发送的目标URL地址

           可选的属性:
               method: 指定以何种方式发送表单

           http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交

           只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST")才是POST提交，其他提交都是GET提交．

           GET提交和POST提交的区别：
               主要区别体现在数据传输方式的不相同
               a)GET提交: 请求参数会赋在地址栏后进行传输
                   这种方式发送的数据量有限, 最大不超过1kb(4kb)
                   数据显示在地址栏, 安全性差

               b)POST提交: 请求参数在底层流中传输
                   这种方式发送的数据量无限制
                   地址栏上看不到数据, 比较安全

   14.表单中的项 (!!!掌握)
       表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
       (1)<input> 输入框
           重要属性:
               type属性
                   文本框 text 输入的文本信息直接显示在框中

                   密码框 password 输入的文本以圆点或者星号的形式显示

                   单选框 radio 进行单项的选择如性别选择多个radio的name属性相同会被当作一组来使用必须用value为选项指定提交的值

                   复选框 checkbox 进行多项选择，爱好的选择。多个checkbox具有相同的name属性时会被当作一组来使用必须用value为选项指定提交的值

                   隐藏字段 hidden 如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中

                   提交按钮 submit 实现表单提交操作的按钮可以通过value属性指定按钮显示的文字

                   重置按钮 reset 重置表单到初始状态

                   按钮 button 普通按钮, 没有任何功能需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。

                   文件上传项 file 提供选择文件进行上传的功能。

                   图像 image 利用一张图片替代提交按钮的功能, 不常用

               name属性
                   表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它. 另外name属性的值是可以重复的

               value属性可以给input输入框设置一个初始值

               readonly属性
                   使当前输入项变为只读,不能修改,但是提交时仍会被提交

               disabled
                   使当前输入项不可用,不能修改值,也不会被提交

               size属性
                   指定当前输入框的宽度

               checked属性
                   指定单选框/复选框被选中

       (2)<textarea> 文本域
           属性:
               rows 指定文本域的行数(高度)
               cols 指定文本域的列数(宽度)
               readonly 只读
               disabled 禁用

       (3)<select> <option>
           select 提供下拉选择功能
           option 下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
           重要属性:
               name: 下拉列表的名称
               size: 设置下拉选项中可见选项的个数
               disabled 禁用下拉选框
               multiple 是否支持多选

       (4)<fieldset><legend> (了解可以不练习)
           <fieldset> 对表单中的表单项进行分组
           <legend> 为分组设置标题

   15.其他标签 (了解可以不练习)
       <marquee>
           属性:
               scrollAmount 设置文字滚动速度默认值是6
               direction 滚动方向 left right down up
               behavior 滚动行为 scroll alternate slide

       <pre>
           可以将文本内容按照代码区的样子显示在页面上

       <b> 加粗
       <i> 斜体
       <u> 下划线
       <s> 删除线

       <em> 强调
       <strong> 更加强烈的强调
       <sub> 下标
       <sup> 上标

   16.注册表单练习 (!!!掌握自己能够独立的做出来)
       略

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2744)

062018-6

网页的转发与重定向

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

在web开发中，转发与重定向有很大的区别。

直观看来，转发不会发生URL址的变换，而重定向则会发生URL的改变。

这仅仅只是一种表象。HttpServlet中的request对象和response对象是在用户请求网页时由服务器根据浏览器传过来的参数封装生成的。一旦从浏览器请求过来，服务器响应回去那么request和response的也就到了生命的终点了。

当使用转发的时候，浏览器仅仅请求一次但是服务器端可能经历了多次的跳转。服务器端执行时发生了转发那么服务器就停止正在执行的任务，去指定转发给定地址的任务。

而使用重定向的话，浏览器则会项服务器发生多次请求。在服务器端执行代码的时候，发现发生了重定向，那么它就会通知浏览器，去访问另一个URL。浏览器就会向被发送的URL请求资源。

看一段代码：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <form action="myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

这是一段jsp代码，当点击提交的时候，会把表单提交给myServlet。

界面长这样：

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = (String)request.getParameter("username"); request.setAttribute("welcome", "welcome!!!"); RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); rd.forward(request,response); } }

1

2

3

4

5

6

7

8

这是MySerlet，当用户点击提交表单，服务器就会调用MyServlet的doPost方法，在这个方法里面进行的是页面转发。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>welcome</title> </head> <body> <%=request.getParameter("username")%> <br/> <%=request.getAttribute("welcome") %> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

这是welcome.jsp的代码。

提交结果为：

当点击提交按钮后后我们可以看一下网络的请求过程。

可以发现浏览器只向服务器发送了一个请求。

接下来看一下重定向。

如果把MyServlet的代码改一下。

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = (String)request.getParameter("username"); request.setAttribute("welcome", "welcome!!!"); // RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); // rd.forward(request,response); response.sendRedirect("welcome.jsp"); } }

1

2

3

4

5

6

7

8

9

可以看到结果为：

而且浏览器项服务器发送了两次请求：

从上面的结果可以看出重定向后，因为是发起的另一个请求因此welcom页面中的内容都是null。而转发则由于是同一个request对象和response对象因此既能获得浏览器请求的参数，还能拿到request总放入的属性值。

其实从代码也可以看出来，sendRedirect()方法是HttpServletResponse对象的响应方法，既然调用了响应对象的方法，那么就表明整个请求结束了，服务器端项客户端返回执行结果。而getRequestDispatcher方法是request对象的方法，表明依旧在请求因此不会立即向浏览器返回结果，而是继续执行其转发的任务。

有一点需要说明的时，不论forward方法还是sendRedirect方法中传的URL需要注意，如果以“\”开头那么，就表示这个URL是现对于servlet容器根的请求，即localhost:8080,如果没有以“\”开头，那么表明这个请求地址是相对于当前的请求URL来寻址的。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body>  <form action="/myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

当我再次点击提交的时候：

不以”\”开头的请求地址为：

转发模型为：

重定向模型为：

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2693)

首页

1、文档说明

2、内容概述

3. 字符类型验证码

3.1 百度搜索字符验证码

3.2 百度经验字符验证码

3.3 百度贴吧中文验证码

3.4 YY字符验证码

3.5 stream数字中文验证码

3.6 谷歌字符紧凑扭曲验证码

3.7 京东字符重叠验证码

4. 行为验证类型验证码

4.1 淘宝登录行为验证码

4.2 极验第二代行为验证码

4.3 极验第三代行为验证码

5. 逻辑识别验证码

5.1 12306逻辑识别验证码

5.2 外国网站逻辑识别验证码

5.3 落伍者点击提示验证码

5.4 腾讯安全验证点击提示验证码

5.5 逻辑数字汉字加减验证码

5.6 逻辑拼音验证码

5.7 谷歌路标识别验证码

6. 验证码搜集总结

1、初始node.js

抓包获取虎扑论坛相关帖子内容，逐条显示！

分类

日历

链接

个人资料

存档