首页

主流验证码调研说明文档

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) 浏览(3775)

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
  1. var http=require('http');  
  2. http.createServer(function(req,res){  
  3.    res.writeHead(200,{'Content-Type':'text/plain'});  
  4.    res.end("Hello world\n");  
  5. }).listen(1337,'127.0.0.1');  
  6. 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
  1. var http=require('http');              //1、加载http模块，负责是创建web服务器和处理http相关的任务等等  
  2. http.createServer(function(req,res){   //3、监听到从1337端口过来的请求就会执行这个匿名回调函数，req是请求体，res是响应体，给请求响应一些内容  
  3.    res.writeHead(200,{'Content-Type':'text/plain'});  //4、状态码200，表示请求成功  
  4.    res.end("Hello world\n");                         
  5. }).listen(1337,'127.0.0.1');           //2、通过createServer（）方法创建服务器，使用listen（）方法在1337端口监听请求  
  6. 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
  1. const http = require('http');  
  2.   
  3. const hostname = '127.0.0.1';  
  4. const port = 3000;  
  5.   
  6. const server = http.createServer((req, res) => {  
  7.   res.statusCode = 200;  
  8.   res.setHeader('Content-Type', 'text/plain');  
  9.   res.end('Hello World\n');  
  10. });  
  11.   
  12. server.listen(port, hostname, () => {  
  13.   console.log(`Server running at http://${hostname}:${port}/`);  

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



评论(0) 浏览(3311)

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

seo达人

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

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

关于表单的基本知识：

表单中的三个内容：

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

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

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

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

（1）get方式：

前端页面：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6. </head>  
  7. <body>  
  8. <form action="get.php" method="get">  
  9.     <input type="text" name="userName"/>  
  10.     <input type="submit" value="提交"/>  
  11. </form>  
  12. </body>  
  13. </html>      

后端php页面：

[php] view plain copy
  1. <?php  
  2. header('content-type:text/html;charset="utf-8"');//返回头  
  3. error_reporting(0);  
  4.   
  5. $userName=$_GET['userName'];//主要这里要对应提交的方式，如果表单使用的是get方式则后端需要用get，如果是使用post，则后端需要使用post  
  6.   
  7. echo "你的名字：{$userName}";  

输入“aa"提交后：

使用get方式：

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

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

(2)post方式：

前端页面：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>表单提交方式2，post</title>  
  6. </head>  
  7. <body>  
  8. <form action="post.php" method="post">  
  9.     <input type="text" name="userName"/>  
  10.     <input type="submit" value="提交"/>  
  11. </form>  
  12. </body>  
  13. </html>  

后端php页面：

[php] view plain copy
  1. <?php  
  2. header('content-type:text/html;charset="utf-8"');  
  3. error_reporting(0);  
  4.   
  5. $userName=$_POST("userName"); //注意这里的要和提交的方式对应  
  6. echo "你的名字：{$userName}";  

输入”li“提交后：

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

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

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

评论(0) 浏览(3918)

Jquery插件 easyUI属性汇总

seo达人

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

  1. 此属性列表请对照jQuery EasyUI 1.0.5.  
  2.   
  3. 属性分为CSS片段和JS片段。  
  4.   
  5. CSS类定义：  
  6. 1、div easyui-window        生成一个window窗口样式。  
  7.       属性如下：  
  8.                    1)modal:是否生成模态窗口。true[是] false[否]  
  9.                    2)shadow:是否显示窗口阴影。true[显示] false[不显示]  
  10.   
  11. 2、div easyui-panel           生成一个面板。  
  12.        属性如下:  
  13.                  1)title:该标题文本显示在面板头部。  
  14.                  2)iconCls:在面板上通过一个CSS类显示16x16图标。  
  15.                  3)width:设置面板宽度。默认auto。  
  16.                  4)height:设置面板高度。默认auto。  
  17.                  5)left:设置面板左边距。  
  18.                  6)top:设置面板顶部位置。  
  19.                  7)cls:在面板中增加一个Class类。  
  20.                  8)headerCls:在面板头部中增加一个Class类。  
  21.                  9)bodyCls:在面板内容中增加一个Class类。  
  22.                 10)style:在面板中增加一个指定样式。  
  23.                 11)fit:当True时设置该面板尺寸适合于它的父容器。默认false。  
  24.                 12)border:当定义时显示面板边界。默认true。  
  25.                 13)doSize:如果设置为True，该面板将重绘大小，并重建布局。默认true。  
  26.                 14)collapsible:当定义时显示可折叠面板的按钮。默认false。  
  27.                 15)minimizable:当定义时显示最小化面板的按钮。默认false。  
  28.                 16)maximizable:当定义时显示最大化面板的按钮。默认false。  
  29.                 17)closable:当定义时显示关闭面板的按钮。默认false。  
  30.                 18)tools:自定义工具栏，每个工具都包含两个属性:iconCls、handler。  
  31.                 19)collapsed:当定义时该面板初始化时处于收缩状态。默认false。  
  32.                 20)minimized:当定义时该面板初始化时处于最小化状态。默认false。  
  33.                 21)maximized:当定义时该面板初始化时处于最大化状态。默认false。  
  34.                 22)closed：当定义时该面板初始化时处于关闭状态。默认false。  
  35.                 23)href:一个url，加载远程数据并显示在面板中。  
  36.                 24)loadingMessage:当加载远程数据时，在面板中显示一个消息。默认Loading…  
  37.              事件如下:  
  38.                  1)onLoad:当远程数据加载完毕后激活。  
  39.                  2)onBeforeOpen:当面板打开前激活。  
  40.                  3)onOpen:当面板打开后激活。  
  41.                  4)onBeforeClose:当面板关闭前激活。  
  42.                  5)onClose:当面板关闭后激活。  
  43.                  6)onBeforeDestroy:当面板销毁前激活。  
  44.                  7)onDestroy:当面板销毁后激活。  
  45.                  8)onBeforeCollpase:当面板收缩前激活。  
  46.                  9)onCollapse:当面板收缩后激活。  
  47.                 10)onBeforeExpand:当面板扩展前激活。  
  48.                 11)onExpand:当面板扩展后激活。  
  49.                 12)onResize:当面板重绘后激活。  
  50.                       width:新建的外部宽度  
  51.                       height:新建的外部高度  
  52.                 13)onMove:当面板移动后激活。  
  53.                      left:左侧新位置。  
  54.                      top:顶部新位置。  
  55.                 14)onMaximize:当窗口最大化后激活。  
  56.                 15)onRestore:当窗口恢复到原来大小时激活。  
  57.                 16)onMinimize:当窗口最小化后激活。  
  58.              方法如下：  
  59.                  1)options:返回options属性。  
  60.                  2)panel:返回面板对象。  
  61.                  3)header:返回面板头部对象。  
  62.                  4)body:返回面板主体对象。  
  63.                  5)setTitle:设置头部的标题文本。  
  64.                  6)open:当forceOpen参数设置为true时，面板打开时绕过onBeforeOpen回调函数。  
  65.                  7)close:当forceClose参数设置为true时，该面板关闭时绕过onBeforeClose回调函数。  
  66.                  8)destroy:当forceDestroy参数设置为true时该面板销毁时绕过onBeforeDestroy回调函数。  
  67.                  9)refresh:当href属性设置后刷新该面板以加载远程数据。  
  68.                 10)resize:设置面板的大小和布局。该options对象包含以下属性:  
  69.                      width：新的面板宽度。  
  70.                      height：新的面板高度。  
  71.                      left：新的面板左侧位置。  
  72.                      top：新的面板顶部位置。  
  73.                 11)move:移动面板到一个新的位置。该options对象包含以下属性：  
  74.                      left：新的面板左侧位置。  
  75.                      top：新的面板顶部位置。  
  76.   
  77. 3、a  easyui-linkbutton                    生成链接类型的按钮。  
  78.   
  79.        属性如下：  
  80.             1)disabled:当True时禁用该按钮。默认false。  
  81.             2)plain:当True时显示一个普通效果。默认false。  
  82.   
  83. 4、input/textarea easyui-validatebox       生成字段验证。  
  84.               属性如下：  
  85.               1)required:true[必需] false[不必需] 默认false  
  86.               2)validType:  
  87.                  a、length[a,b] 字段长度控制在a至b之间。  
  88.                  b、email       验证Email。  
  89.                  c、url      验证网络地址。  
  90.               3)missingMessage：当文本时出现空时弹出该工具提示，系统有默认[英文]，自定义可覆盖它。  
  91.               4)invalidMessage：当文本内容无效后弹出该工具提示，系统有默认[英文]，自定义可覆盖它。  
  92.   
  93. 5、ul easyui-tree         生成一个树形结构。  
  94.              属性如下：  
  95.               1)url:一个获取远程数据的地址。  
  96.               2)animate:当展开或折叠节点时是否定义动画效果。true[是] false[否] 默认false  
  97.              节点属性如下：  
  98.              1)text:节点的显示文本。  
  99.              2)id:节点ID，对于加载远程数据时非常重要。  
  100.              3)state:节点状态，'open'或'closed'，默认为'open'。当设置为'关闭'，该节点包含子节点，并将远程站点加载它们(并非触发再加载)。  
  101.              4)attributes:为节点添加自定义属性。  
  102.              5)children:以数组节点的方式定义一些字节点。  
  103.              事件如下：  
  104.                  1)onClick:  
  105.                     当用户点击一个节点时激活，该节点参数包含如下属性：  
  106.                     id：节点ID  
  107.                     text:节点文本  
  108.                     attributes:节点自定义属性。  
  109.                     target:目标点击的DOM对象。  
  110.               2)onLoadSuccess:  
  111.                    当数据成功加载数据时激活，该参数跟jQuery.ajax的'success'函数效果相同。  
  112.               3)onLoadError:  
  113.                   当数据加载数据失败时激活，该参数跟jQuery.ajax的'error'函数效果相同。  
  114.              方法如下:  
  115.                  1)reload:重新加载树数据。  
  116.                  2)getSelected:获取选中的节点并返回它，如果没有选择节点将返回null。  
  117.                  3)collapse:折叠一个节点，该目标参数是该节点的DOM对象。  
  118.               4)expand:展开一个节点，该目标参数是该节点的DOM对象。    
  119.               5)append:在一个父节点追加一些子节点。  
  120.                     param有两个属性：  
  121.                     parent:DOM对象，把它作为父节点追加(它们)。  
  122.                     data:array，或者节点数据。  
  123.               6)remove:删除它以及它以下的子节点，该目标参数是该节点的DOM对象。   
  124.   
  125. 6、table easyui-datagrid                   生成一个表格。  
  126.              属性如下：  
  127.                  1)title:该DataGrid面板的标题文本。  
  128.                  2)iconCls:一个CSS类，将提供一个背景图片作为标题图标。  
  129.                  3)border：当true时，显示该datagrid面板的边框。  
  130.                  4)width:面板宽度，自动列宽。  
  131.                  5)height:面板高度，自动列高。  
  132.                  6)columns:该DataGrid列配置对象，查看column属性可获取更多信息。  
  133.                  7)frozenColumns:跟Columns属性相同，但是这些列将会被固定在左边。  
  134.                  8)striped:当true时，单元格显示条纹。默认false。  
  135.                  9)method:通过该方法类型请求远程数据。默认post。  
  136.                 10)nowrap:当true时，显示数据在同一行上。默认true。  
  137.                 11)idField:说明哪个字段是一个标识字段。  
  138.                 12)url:一个URL，从远程站点获取数据。  
  139.                 13)loadMsg:当从远程站点加载数据时，显示一个提示信息。默认"Processing,please wait …"。自定义覆盖。  
  140.                 14)pagination:当true时在DataGrid底部显示一个分页工具栏。默认false。  
  141.                 15)rownumbers:当true时显示行号。默认false。  
  142.                 16)singleSelect:当true时只允许当前选择一行。默认false。  
  143.                 17)fit:当true时，设置大小以适应它的父容器。默认false。  
  144.                 18)pageNumber:当设置分页属性时，初始化的页码编号。默认从1开始  
  145.                 19)pageSize:当设置分页属性是，初始化的页面大小。默认10行  
  146.                 20)pageList:当设置分页属性时，初始化页面的大小选择清单。默认[10,20,30,40,50]  
  147.                 21)queryParams:当请求远程数据时，也可以发送额外的参数。  
  148.                 22)sortName:定义哪列可以排序。  
  149.                 23)sortOrder:定义列的排列顺序，只能是'asc'或'desc'。默认asc。  
  150.              Column属性如下：  
  151.                  1)title:该列标题文本。  
  152.                  2)field:该列对应的字段名称。  
  153.                  3)width：列宽。  
  154.                  4)rowspan:说明该单元格需要多少行数。  
  155.                  5)colspan:说明该单元格需要多少列数。  
  156.                  6)align:说明Column数据的对齐方式。'left'，'right'，'center' 都可以使用。  
  157.                  7)sortable:当true时，允许该列进行排序。  
  158.                  8)checkbox:当true时，允许该列出现checkbox。  
  159.              事件如下：  
  160.                  1)onLoadSuccess:当远程数据加载成功是激活。  
  161.                  2)onLoadError:当远程数据加载发现一些错误时激活。  
  162.                  3)onClickRow:当用户点击某行时激活，参数包含：  
  163.                     rowIndex: 点击的行索引，从0开始。  
  164.                     rowData: 点击行时对应的记录。  
  165.                 4)onDblClickRow:当用户双击某行时激活，参数包含：  
  166.                     rowIndex: 点击的行索引，从0开始。  
  167.                     rowData: 点击行时对应的记录。  
  168.                 5)onSortColumn:当用户对某列排序时激活，参数包含：  
  169.                    sort:排序字段名称。  
  170.                    order:排序字段类型。  
  171.                 6)onSelect:当用户选择某行时激活，参数包含:  
  172.                    rowIndex: 点击的行索引，从0开始。  
  173.                    rowData: 点击行时对应的记录。  
  174.                 7)onUnselect:当用户取消选择某行时激活，参数包含:  
  175.                     rowIndex: 点击的行索引，从0开始。  
  176.                     rowData: 点击行时对应的记录。  
  177.              方法如下：  
  178.                  1)options:返回选择对象。  
  179.                  2)resize:重调大小，生成布局。  
  180.                  3)reload:重新加载数据。  
  181.                  4)fixColumnSize:固定列大小。  
  182.                  5)loadData:加载本地数据，过去的行会被删除。  
  183.                  6)getSelected:返回第一个选中行的记录，若未选返回null。  
  184.                  7)getSelections:返回选中的所有行，当没有选择记录时将返回空数组。  
  185.                  8)clearSelections:清除所有选项的选择状态。  
  186.                  9)selectRow:选择一行，行索引从0开始。  
  187.                 10)selectRecord:通过传递一个ID值参数，选择一行。  
  188.                 11)unselectRow:取消选择一行。  
  189.   
  190. 7、div easyui-tabs                         生成一个tab容器。  
  191.              属性如下：  
  192.                  1)width:容器宽度，自动列宽。  
  193.                  2)height:容器高度，自动列高。  
  194.                  3)idSeed:该根id衍生成标签面板DOM id属性。默认0  
  195.                  4)plain：当true时，该Tab渲染不使用容器背景图片。默认false  
  196.                  5)fit:当true时，设置该Tab大小以适应它的父容器。默认false  
  197.                  6)border:当true时，显示该Tab边框。  
  198.                  7)scrollIncrement:  
  199.                  8)scrollDuration:  
  200.              事件如下：  
  201.                  1)onLoad:当一个ajax Tab面板需要加载远程数据时激活。该参数跟jQuery.ajax的'success'函数效果相同。  
  202.                  2)onSelect:当用户选择一个Tab面板时激活。  
  203.                  3)onClose:当用户关闭一个Tab面板时激活。  
  204.              方法如下:  
  205.                  1)resize:重绘该Tab容器的布局。  
  206.                  2)add:新增加一个Tab面板，该选项参数是一个配置对象，看Tab面板属性可获取更多信息。  
  207.                  3)close：关闭该Tab面板，标题参数显示你要关闭的对象。  
  208.                  4)select:选择一个Tab面板。  
  209.                  5)exists:如果该Tab面板存在即显示。  
  210.              Tab面板属性如下：  
  211.                  1)id:该Tab面板DOM id属性。  
  212.                  2)text:该Tab面板标题文本。  
  213.                  3)content:该Tab面板内容。  
  214.                  4)href:一个URL，加载远程内容以填充Tab面板。  
  215.                  5)cache:当true时，缓存Tab面板，当href 属性设置后有效。默认true  
  216.                  6)icon:增加一个CSS class图标以显示在Tab面板的标题旁。  
  217.                  7)closable:当true时，该Tab面板将显示可关闭按钮，点击能关闭该Tab面板。默认false  
  218.                  8)selected:当true时，该Tab面板将被选中。默认false  
  219.                  9)width:面板宽度，自动列宽。  
  220.                 10)height:面板高度，自动列高。  
  221.   
  222. 8、div menu-sep              生成一个菜单分隔线。  
  223.   
  224. 9、a easyui-splitbutton         生成一个菜单列。  
  225.   
  226. 10、div easyui-accordion        生成手风琴式下拉框。继承自panel  
  227.   
  228. 11、select easyui-combobox       生成一个组合下拉框。  
  229.              属性如下：  
  230.                  1)width:容器宽度，自动列宽。  
  231.                  2)listWidth:该组合下拉框的宽度。  
  232.                  3)listHeight:该组合下拉框的高度。  
  233.                  4)valueField：把该基础数据的值名称绑定到组合下拉框中[value]。  
  234.                  5)textField:把该基础数据的字段名称绑定到组合下拉框中[text]。  
  235.                  6)editable:当True时，可直接在文字域中键入文本。默认true。  
  236.                  7)url:一个URL，从远程加载列表数据。  
  237.              事件如下：  
  238.                  1)onLoadSuccess:当远程数据加载成功是激活。  
  239.                  2)onLoadError:当远程数据加载发现一些错误时激活。  
  240.                  2)onSelect:当用户选择一个列表选项时激活。  
  241.                  3)onChange:当该字段的值发生改变时激活。  
  242.              方法如下:  
  243.                  1)select: 在下拉列表中选择一个值。  
  244.                  2)setValue: 设置指定值到该字段。在'param' 参数可以是一个字符串或者一个JS对象。注:JS对象包含的属性对应valueField和TextField两个属性。  
  245.                  3)getValue: 获取该字段的值。   
  246.                  4)reload:   重新请求远程列表数据。  
  247.   
  248. 12、select easyui-combotree      生成一个组合树形框。  
  249.             属性如下：  
  250.             1)width:容器宽度，自动列宽。  
  251.             2)treeWidth:该树形下拉框的宽度。  
  252.             3)treeHeight:该树形下拉框的高度。  
  253.             4)url:一个URL，从远程加载树形数据。  
  254.              事件如下：  
  255.              1)onSelect:当用户选择一个树形节点时激活。  
  256.              2)onChange:当该字段的值发生改变时激活。  
  257.              方法如下:  
  258.              1)setValue: 设置指定值到该字段。在'param' 参数可以是一个树形节点ID值或者一个JS对象。注:JS对象包含的属性对应id和text两个属性。  
  259.              2)getValue: 获取该字段的值。   
  260.              3)reload:   重新请求远程列表数据。  
  261.   
  262. 13、body[div] easyui-layout      生成一个布局。  
  263.             属性如下：  
  264.             1)title:该面板标题文本。  
  265.             2)region:定义布局面板的位置，包含下列值:north,south, east, west, center。  
  266.             3)border:当True时显示布局面板的边框。默认为True。  
  267.             4)split: 当True时显示一个分割符以使用户改变面板的尺寸。默认false。  
  268.             5)icon:一个图标CSS类，在面板头部显示一个图标。   
  269.             6)href:一个URL,以从远程站点加载数据。               
  270.   
  271. 14、div easyui-menu        生成一个菜单。  
  272.             属性如下：  
  273.             1)zIndex: Menu z-index样式。注释：z-index 属性设置元素的堆叠顺序。   
  274.             2)left:菜单左起位置。默认0。  
  275.             3)top: 菜单顶部位置。默认0。  
  276.             4)href:当点击菜单项时能在当前浏览器窗口显示不同的网址。  
  277.             事件如下:  
  278.             1)onShow:激活后显示菜单。  
  279.             2)onHide:激活后隐藏菜单。  
  280.             方法如下:  
  281.             1)show:在指定的位置显示一个菜单。该位置上包含两个参数：  
  282.                 left:新的左起位置。  
  283.                top:新的顶部位置。  
  284.             2)hide:隐藏一个菜单。  
  285.   
  286. 15、a easyui-menubutton       生成一个菜单按钮。   
  287.             属性如下：  
  288.             1)disabled:当True时禁用该按钮。默认false。  
  289.             2)plain:当True时显示一个普通效果。默认false。  
  290.             3)menu:一个选择器名称，用来创建相应的菜单。  
  291.             4)duration: 当悬停该按钮时，定义菜单的持续显示时间，单位为毫秒。默认100。  
  292.   
  293. 16、input easyui-numberbox      生成一个数字输入框。  
  294.             选项如下:  
  295.             1)min:允许的最小值。当输入值小于最小值时，显示最小值。  
  296.             2)max:允许的最大值。当输入值大于最大值时，显示最大值。  
  297.             3)precision:分隔符后能的小数点位数。整数默认会追加小数点位数。   
  298.   
  299.   
  300. JS定义：  
  301. 1、 .window            生成一个window窗口。  
  302.   
  303. 2、 .tree                  生成一个树形结构。  
  304.   
  305. 3、 .datagrid           生成一个表格。  
  306.   
  307. 4、 .combobox        生成一个组合下拉框。  
  308.   
  309. 5、 .combotree       生成一个组合树形框。  
  310.   
  311. 6、 .dialog               生成一个对话框。它继承自window  
  312.       私有属性如下：  
  313.                  1)title:该对话框标题文本。默认"New Dialog"。  
  314.                  2)collapsible:当True时可显示折叠按钮。默认false。  
  315.                  3)minimizable:当True时可显示最小化按钮。默认false。  
  316.                  4)maximizable:当True时可显示最大化按钮。默认false。  
  317.                  5)resizable:当True时能重绘对话框大小。默认false。  
  318.                  6)toolbar:该工具栏置于对话框的顶部，每个工具栏包含:text, iconCls, disabled, handler等属性。  
  319.                  7)buttons:这个按钮置于对话框的底部，每个按钮包含:text, iconCls, handler等属性。  
  320.   
  321. 7、 .draggable          生成一个可自由拖动的块。  
  322.       属性如下:  
  323.               1)handle:选择"#id"进行拖动。  
  324.               2)disabled:当True时停止自由拖动。默认false。  
  325.               3)edge:开始拖动拖动块时的宽度。默认0。  
  326.               4)axis:当拖动块移动时定义轴，可选值是'v'或者'h',当超出'v'和'h'的方位时将设置为null。  
  327.      事件如下：  
  328.                  1)onStartDrag:当目标对象开始拖动时激活。  
  329.                  2)onDrag:在拖动期间激活。返回false将不会实际拖动它(的位置)。  
  330.                  3)onStopDrag:当目标对象停止拖动时激活。  
  331.   
  332. 8、 .linkbutton          生成一个链式按钮。  
  333.   
  334. 9、 .messager           生成一个消息框。  
  335.              选项如下：  
  336.                  1)ok:显示确定按钮文本。  
  337.                  2)cancel:显示取消按钮文本。   
  338.              方法如下:  
  339.              1)show:在屏幕的右下角出现一个消息框。该选项参数是一个配置对象，它包括：  
  340.                 showType:定义消息框显示的模式，可选值包括:null,slide,fade,show.默认slide.  
  341.                 showSpeed: 定义消息框完成显示的时间。默认600毫秒。  
  342.                 width: 定义消息框的宽度。默认250。  
  343.                 height:定义消息框的高度。默认100。  
  344.                 msg:定义消息框显示的文本。  
  345.                 title: 在消息框面板头部显示标题文本。  
  346.                 timeout: 如果定义为0,消息框将不会自动关闭，除非用户手动关闭它。如果定义为非0值，消息框会在超时结束时自动关闭它。单位毫秒。  
  347.              2)alert:显示一个打印窗口。它的参数如下:  
  348.                 title: 在头部显示标题文本。  
  349.                 msg:显示文本内容。  
  350.                 icon: 显示图标。可选值:error,question,info,warning。  
  351.                 fn: 当窗口关闭后触发回调函数。  
  352.              3)confirm:显示一个包含确定和取消按钮的确认消息框。参数包括:  
  353.                 title:在头部显示标题文本。  
  354.                 msg: 显示文本内容。  
  355.                 fn(b):回调函数，当用户点击OK按钮，返回True,才会处理该函数，其它按钮返回false,不处理。  
  356.              4)prompt:显示一个消息框，包含OK和Cancel按钮并提示用户输入一些文本。参数包括:  
  357.                 title:在头部显示标题文本。  
  358.                 msg:显示文本内容。  
  359.                 fn(val):该回调函数处理用户输入的参数值。   
  360.   
  361. 10、 .pagination         生成一个页码工具条。  
  362.            属性如下：  
  363.             1)total:当分页条创建后设置的记录数。默认1。  
  364.             2)pageSize:页面大小。默认10。  
  365.             3)pageNumber:当分页创建后显示的页码。默认1。  
  366.             4)pageList:用户能更改页面的大小。您也可以改变该属性定义的默认大小。默认[10,20,30,50]。  
  367.             5)loading:定义是否正在加载。默认false。  
  368.             6)buttons:定义自定义按钮，每个按钮都包含两个属性:  
  369.                iconCls: 该CSS类将显示一个背景图标。  
  370.                handler: 当按钮点击时触发一个处理函数。  
  371.             7)beforePageText:当输入组件前显示一个标签文本。  
  372.             8)afterPageText:当输入组件后显示一个标签文本。  
  373.             9)displayMsg:显示一个页面信息。  
  374.            方法如下:  
  375.             1)onSelectPage:当用户选择一个新页面时激活。该回调函数包括两个参数:  
  376.                pageNumber: 该新页面的页码。  
  377.                pageSize:该新页面的大小。  
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3310)

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

seo达人

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

1.总结

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

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

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

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

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

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

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

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

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

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

2.感悟

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

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


评论(0) 浏览(3596)

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

seo达人

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再进入具体新闻页面看看

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

所有的文本内容，都在

这个标签下的

标签内，我们可以用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
        
    •

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

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


评论(0) 浏览(3566)

程序猿之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的注释 -->
        
        html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
        如果非要输入空格,可以用转义字符来替代 &nbsp;
        如果非要输入换行,可以用 <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.转义字符 (掌握)
        <    &lt;
        >    &gt;
        "    &quot;
        '    &apos;
        空格 &nbsp;
        
    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) 浏览(3163)

网页的转发与重定向

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) 浏览(3012)

JavaScript自己整理的基础-01

seo达人

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

1.JavaScript 简介：

JavaScript是互联网上最流行的脚本语言，所有现代的HTML都使用JavaScript。既然是脚本语言，那么它的特点就有一下三种：

    （1）弱类型；

    （2）解释型语言（不需要编译）；

    （3）逐行执行，一行代码错误，其后的代码块都不会继续执行；

    （4）<script>标签可直接嵌入到HTML文件中，位置是任意的，通常放在被修饰内容下面或者head标签中，但写成单独的js文件有利于结构和行为的分离

2.JavaScript 内容（附图）：

    

       其中ECMAScript是JavaScript的核心；

       DOM是文档对象模型（使用js操作网页）；

       BOM是浏览器对象模型（使用js操作浏览器）

3.JavaScript 信息的输出：

    （1）alert( )方法：以提示框的形式在页面输出 ，例;

[javascript] view plain copy
  1. <script>  
  2.     alert("hello,javascript")  
  3. </script>  

    （2）console.log( )方法：在控制台输出信息，例：

[javascript] view plain copy
  1. console.log("hello,javascript")  

    （3）document.write( )：将内容直接写在HTML页面中，例：

[javascript] view plain copy
  1. document.write("hello,javascript")  

4.JavaScript 变量：

    与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值，变量的初始化格式：var 变量名 = 变量值；例：

[javascript] view plain copy
  1. var a = "hello";  
  2. var b = 123;  

    如果要定义多个变量，那么可以用将多个变量写在一行，用逗号进行分隔；例：

[javascript] view plain copy
  1. var a = "你好",  
  2.     b = 123,  
  3.     c = "hello";  

    变量名字的变量规则：    

    （1）由字母、数字、下划线、$符号构成

    （2）不可以以数字开头，不建议以下划线开头；

    （3） 严格区分大小写；

    （4）不可以是关键字和保留字

5.JavaScript 数据类型：

    JavaScript可以分为原始数据类型，引用数据类型两种：

    （1）原始数据类型：Number，String，Boolean，undefined，null

    Number：数值型，就是数字，包含正数、负数、整数、小数、0、NaN、Infinity（正无穷）、-Infinity（负无穷）；

    注意：NaN：not  a  number的缩写，表示该值不是一个数值（也属于Number）

    String：字符串：用双引号""或单引号''包起来的0个或多个字符，如果引号中什么也没有，那么这个字符串被称为空字符串

    Boolean：布尔型：包含true：表示真（成立）和false：表示假（不成立）两个值

    undefined：表示变量未定义，或变量被定义出来，但是没有被赋值

    null：表示一个变量没有指向任何一片存储空间，即变量存在，但是里面是空的，类似于Undefined

    （小提示：在Chrome浏览器控制台输出时，会发现Number类型为深蓝色，String为黑色，Boolean为浅蓝色，undefined和null都为浅灰色）

    （2）引用数据类型：

    Object（对象），Array（数组），Date（日期），RegExp（正则）。。等等

    （3）如何查看一个变量的数据类型（typeof 运算符）：        

             数值型数据：返回值为number   

[javascript] view plain copy
  1. console.log(typeof 123)   //输出number  

             字符串型数据：返回值为string

[javascript] view plain copy
  1. console.log(typeof "你好")  //输出string  

             布尔型数据：返回值为boolean

[javascript] view plain copy
  1. console.log(typeof true/false)    //输出boolean  

             Undefined：返回值为undefined

[javascript] view plain copy
  1. console.log(typeof undefined)   //输出undefined  

             Null：返回值为Object（历史遗留问题，说明null也是一个对象）

[javascript] view plain copy
  1. console.log(typeof null)     //输出object  

             NaN：返回值为number

[javascript] view plain copy
  1. console.log(typeof NaN)    //输出number  

6.JavaScript 数据类型的转换：

    （1）在使用加法（+）运算符时，任何数据与字符串类型数据相加都为字符串类型数据；

[javascript] view plain copy
  1. console.log("你好" + 123)    //输出"你好123"  

        注（简单理解）： 在JavaScript 中空字符串""转换为false，非空字符串转换为true（除“0”，“1”外）；

                false转换为 0 或“0”，true转换为 1 或“1”；

                做逻辑判断的时候，null，undefined，""(空字符串)，0，NaN都默认为false；

                ==在比较的时候可以转换数据类型，===是严格比较，只要类型不匹配就返回false；

                    其实 == 的比较确实是转换成字符串来比较但，但是在布尔型转换为字符串之前，要先转换成 Number

[javascript] view plain copy
  1. console.log("123" == true)    //输出false  
  2. console.log("1" == true)     //输出true  
  3. console.log("" == true)     //输出false  
  4. console.log(1 == true)     //输出true  
  5.   
  6. console.log("" == false)    //输出true  
  7. console.log('123' == false)   //输出fasle  
  8. console.log('0' == false)    //输出true  
  9. console.log(0 == false)    //输出true  
  10.   
  11. console.log('1' == 1)     //输出true  
  12. console.log('0' == 0)     //输出true  
  13. console.log(-true)     //输出-1  

（2）parseInt：将字符串转换成整数（只识别字符串中的数值）：

        注：会忽略字符串中的前后空格（当数值后的空格后面还有数值时，将不会再识别）；

               能够正确识别正负号，即保留正负号；

               在转换时，遇到非数值型的字符就会停止转换；

               如果字符串的第一个字符是非数值型的，那么转换的结果为NaN；

[javascript] view plain copy
  1. console.log(parseInt("123"))    //输出123  
  2. console.log(parseInt(" 1 2"))    //只会输出1  
  3. console.log(parseInt(-123))     //输出-123  
  4. console.log(parseInt("hello"))    //输出NaN  
  5. console.log(parseInt(true))       //输出NaN  
  6. console.log(parseInt("123hello"))    //输出123，后面非数值型不会识别  
  7. console.log(parseInt(" 1 "))     //输出1，忽略空格  

（3）parseFloat：将字符串转换成小数（识别小数点，注意事项同上）

[javascript] view plain copy
  1. console.log(parseFloat("123.55"))    //输出123.55  
  2. console.log(parseFloat(".1hello"))    //输出0.1  

（4）Number：将其它类型的数据转换成数值型，注意被转换的数据必须是纯数值构成，否则无法转换，其它注意事项同上

[javascript] view plain copy
  1. console.log(Number(true))   //1  
  2. console.log(Number(false))    //0  
  3. console.log(Number(null))    //0  
  4. console.log(Number("123hello"))    //NaN  
  5. console.log(Number("12.22"))    //12.22  
  6. console.log(Number(undefined))    //NaN  

（5）页面中的信息框：

        alert（），弹出个提示框，只有确定；

[javascript] view plain copy
  1. window.alert("今天天气很好")  

        confirm（），弹出个确认框，有确定和取消；

[javascript] view plain copy
  1. window.confirm("今天心情也很好")  

        prompt（），弹出个输入框，可以输入内容；

[javascript] view plain copy
  1. window.prompt("password","请输入密码")  

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

评论(0) 浏览(3490)

request中跟路径有关的api的分析

seo达人

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

           最近重在研究struts的源码，其中涉及到了request中的几个api，看了文档后还是觉得不清楚，所以在自己原来的工程中

测试了一下各个api的具体效果。在这里跟大家分享一下。

            这是我具体测试的代码：

           这是我servlet配置的路径：

            以下是访问这个ProductServlet后控制台打印的结果：

            从以上我们可以发现：

    1.getRealPath(....)，这个方法是返回给定资源的磁盘绝对路径，简单来说，就是以盘符开头的路径

    2.getRequestURI(....)与getRequestURL(....)这个两个方法，从名字上来说，一个是返回url（统一资源定位器）一个是返回

uri（统一资源标识符，用来唯一的标识一个资源），那么url跟uri有什么区别呢？比较结果后我们就知道，URL中包含URI，URL是

带协议，带端口号的。

    3.getContextPath(....)这个方法，其实就是用来返回工程名，或者说工程路径，看结果我们一目了然

    4.getServletPath(.....)这个方法，从结果中，我们可以分析得出，它其实就是在工程目录下，访问我们servlet的路径，或者说

servlet相对于我们工程的路径，在或者说，它就是我们在配置文件中配置的路径，但是不包括后面具体的请求资源名

    5.getPathInfo(.....)，这个方法其实就是返回我们具体请求资源的名称，或者说，相对于我们的servlet而言的请求路径

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

评论(0) 浏览(3283)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档