首页

HTML简单知识的总结

seo达人

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

基本格式:

<!DOCTYPE  HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>制作我的第一个网页</title>

<style type="text/css">

h1{font-size;color;text-align:center}

</style>

</head>

<body>

<h1>Hello World! </h1>

</body>

</html>

注释:<!--注释文本-->

强调语气:<strong>,<em>:前者实现加粗再加粗,后者实现加粗加斜   体。

<span>写在style 里设置单独样式。

<q></q>标签:引用简短文本,使引用的诗句等自己出现双引号

<blockquote>: 引用长文本,增加缩进量。

<br />: 换行标签。

  代码之间实现空格。

<hr />: 段落之间分隔的横线。

<address>: 定义一个地址(比如电子邮件地址)  ,签名或者文档的作者身份。在浏览器上显示的样式为斜体。

<code>: 加入简短代码。

<pre>: 加入一段长代码。


Ul-li标签: 添加新闻信息列表, 图片列表, 无序文字列表

Ol-li 标签:添加有序列表,与ul-li 标签类似。

<div> :把一些独立的逻辑部分划分出来,形成栏目板块。其中还可使用

<div  id=  >给板块命名。

<table>: 制作表格。 

CSS 样式为表格添加边框:<style  type=”text/css”>

黑色边框: table tr td,th{border:1px solid #000;}</style>

<caption>为表格添加标题和摘要。  <table  summary=’’”表格简介文本”>

<caption>标题文本</caption> </table>

<a>  实现超链接。<a href=”目标网址”    title=“鼠标滑过显示的文本”>链接显示的文本</a>    默认在当前浏览器窗口打开,添加targetblank  在新的浏览器窗口打开。

<mailto>  在网页中链接Email 地址。  <a href=”mailto:  yy@qqcom ?

Cc抄送地址=zsq@qqcom  &  bcc密件抄送地址=zjj@qqcom  &

subject=”主题”  &  body=“邮件内容”>发送</a> 给多个收件人发送,用分号隔开。第一个参数用?开头,之后用 &隔开。 

<img> 添加图片。Src=”标识图像的位置。” alt=”指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本”

Title=“提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)”

<form>  表单标签,与用户交互使得浏览器可以处理用户的数据。

<form  method=”数据传送的方式get/postaction=”浏览器输入的数据被传送到的地方,如一个 PHP 页面savephp””

<label  for="username">用户名:</label>

<input type="text" name="username" id="username" value="" />

<label  for="pass">密码:</label>

<input type="password" name="pass" id="pass" value="" />    用户名: 肯定存,啊 密码:

表单文本输入框,密码输入框:<form><input  type=text/password

name=”名称(以备后台使用)” value=“文本(设置默认值,提示作用)”>

输入<textarearows(height)=”行数” cols(width)

=”列数”>文本</textarea>

<input type=”radio/checkbox)”

value=”  值 ” name=”  名 称 ” checked=  “  checked  ”  /> 当 设 置

checked=”checked”时,该选项被默认选中。同一组按钮,name 取值必须相同。

下拉列表框<select>:<label> XX </label>

<select>

<option value=”读书” selected=selected被默>读书</option></select>

提交按钮  submit<input  type=”submit”  value=”提交”>重置按钮  reset<input  type=”reset”  value=”重置”>

<label><label for=”控件id 名称”>慢跑  </label>

<input  type=”checkbox”  name=”gender”  id=”jogging”  />

for 属性的值与id 属性值一定要相同。

Placeholder<input  type=”email”  id=”email”  placeholder=”Enter  email”>该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

CSS 样式:定义文本的显示样式,如字体大小(font-size),颜色(color),加粗(font-weight:bold)等。

注释语句:/*注释语句*/。

内联式 CSS 样式:<p  style=”color:red    font-size:12px”>红色字</p>

嵌入式 CSS 样式:<style  type=”text/css”>span{  }</style>

 CSS 在head 里写:<link href=”XX。css” rel=”stylesheet”

type=”text/css”>,在XX。css 里写:span{  }

三种方式的优先级:相同权值下,内联式  >嵌入式  >外部式。但是,嵌入式 >外部式的前提为嵌入式的位置一定在外部式的后面。

选择器:每一条CSS 样式定义由两部分组成:选择器{样式;} 

标签选择器:如<html>,<body>,<h1>,<img>,<p  font,,>。

择器。类选择名称(可任意起名,。XX){css 样式代码;} -> <span class=”XX”></span>

ID #类选择名称(可任意,#XX){css 样式代码;} -><span

id=”XX”></span>只能在文档中使用一次。

>子选择器:用于选择指定标签元素的第一代子元素。【直接后代 first>span{border:1px  solid  red;}  <span>我还是一个<span>胆小如</span>的小女孩</span>

包含后代选择器:加入空格,用于选择指定标签元素下的后辈元素。【所有子后代元素】

通用选择器:由一个*指定,匹配html 中所有标签元素。在style 里:

*{color:red;}

伪类选择符    hover它允许给html 不存在的标签(标签的某种状态)设置样式 a:hover{color:red}鼠标滑过时字体变为红色。

分组选择符    为多个标签元素设置同一个样式。  如h1,p{  }。

继承:有些样式具有继承性如color,有些不具有如border。具有继承性的允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代

权值:标签的权值为1,类选择符的权值为10,ID 选择符的权值最高 100。

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

warning{color:white;} /*权值为10*/

p spanwarning{color:purple;} /*权值为1+1+10=12*/

#footer note p{color:yellow;} /*权值为100+10+1=111*/ 特殊性:继承也有权值,但是只有0。1 。

层叠:当有相同权重值时,后面的样式会覆盖前面的样式。

重要性 important :p{color:red!important;}这时p 段落中的文本会显示红色。important 要写在分号前面。



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




vue-router的使用方法介绍input框的23种类型

seo达人

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

input框的类型到底有多少种呢?零零总总算起来有23种。


▍总述

常用的并且能为大多数浏览器所识别的类型大概有:text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

另外还有一些类型:tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。


▍text:文本

代码:

[html] view plain copy
  1. <input type="text" />  

效果:

注意:当input没有填写类型时,默认为文本类型。

[html] view plain copy
  1. <input />  


▍password:密码

代码:

[html] view plain copy
  1. <input type="password" />  

效果:


▍number:数字

代码:

[html] view plain copy
  1. <input type="number" />  

效果:


▍button:按钮

代码:

[html] view plain copy
  1. <input type="button" value="我是按钮" />  

效果:


▍tel:电话

代码:

[html] view plain copy
  1. <input type="tel" />  

效果:

注意:tel类型似乎没有什么实际作用。


▍email:邮件

代码:

[html] view plain copy
  1. <input type="email" />  

效果:

注意:火狐对email类型有校验,360浏览器无校验。


▍file:文件

代码:

[html] view plain copy
  1. <input type="file" />  

效果:


▍range:滑动条

代码:

[html] view plain copy
  1. <input type="range" />  

效果:


▍date:日期

代码:

[html] view plain copy
  1. <input type="date" />  

效果:


▍month:月份

代码:

[html] view plain copy
  1. <input type="month" />  

效果:


▍week:周

代码:

[html] view plain copy
  1. <input type="week" />  

效果:


▍time:时间

代码:

[html] view plain copy
  1. <input type="time" />  

效果:


▍datetime:时间、日、月、年(UTC时间)

代码:

[html] view plain copy
  1. <input type="datetime" />  

效果:

注意:火狐、360浏览器都对datetime不支持,会按照text类型处理。


datetime-local:时间、日、月、年(本地时间)

代码:

[html] view plain copy
  1. <input type="datetime-local" />  

效果:


▍radio:单选框

代码:

[html] view plain copy
  1. <input type="radio" name="man" id="man" value="man"/><label for="man"></label>  
  2. <input type="radio" name="man" id="women" value="woman"/><label for="woman"></label>  

效果:


▍checkbox:复选框

代码:

[html] view plain copy
  1. <input type="checkbox" name="interest" value="run" id="run" /><label for="run">跑步</label>  
  2. <input type="checkbox" name="interest" value="guitar" id="guitar" /><label for="guitar">吉他</label>  
  3. <input type="checkbox" name="interest" value="yoga" id="yoga" /><label for="yoga">瑜伽</label>  
  4. <input type="checkbox" name="interest" value="read" id="read" /><label for="read">阅读</label>  

效果:


▍image:图片

代码:

[html] view plain copy
  1. <input type="image" src="http://p0.so.qhimgs1.com/bdr/_240_/t01cbdeda95800117ac.jpg" />  

效果:


▍color:颜色

代码:

[html] view plain copy
  1. <input type="color" />  

效果:


▍search:搜索框

代码:

[html] view plain copy
  1. <input type="search" />  

效果:

注意:search似乎与text的效果没有什么区别。。。


▍reset:重置按钮

代码:

[html] view plain copy
  1. <input type="reset" />  

效果:

注意:reset按钮一般用于form表单中


▍submit:提交按钮

代码:

[html] view plain copy
  1. <input type="submit" />  

效果:

注意:submit按钮一般用于form表单中


▍hidden:隐藏

代码:

[html] view plain copy
  1. <input type="hidden" />  

效果:


注意:hidden类型会将input隐藏,所以什么都看不到,而且被隐藏的input框也不会占用空间。


▍url:路径

代码:

[html] view plain copy
  1. <input type="tel" />  

效果:

注意:火狐对url类型有校验,360浏览器无校验。


▍写在结尾

总的来说,目前input框也就只有这23种类型,虽然有的类型可能用不上一两次甚至是一次都用不上,但是了解一下还是不错的。



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




vue-router的使用方法介绍

seo达人

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

vue-router

对于大多数单页面应用,都推荐使用官方支持的 vue-router 库。

学习网址:https://router.vuejs.org/installation.html#direct-download-cdn

提示:本篇博客仅仅介绍搭建项目之后,再下载vue-router的情况,并非搭建项目是直接引入vue-router。

一、安装方法(npm方式)

在终端运行以下指令

[html] view plain copy
  1. npm install vue-router  

注意:--save 与 --save-dev 的区别

--save(可以省略) 下载的第三方依赖到package.js中的dependencies。

--save-dev 下载开发时依赖,指环境配置,下载到package.js中的devDependencies,webpack、bable等等均属于开发

时依赖。

二、导入与使用

vue-router下载之后,需要在入口文件main.js导入,具体做法如下:

[javascript] view plain copy
  1. Vue.use(VueRouter);  
  2. Vue.use(VueAxios, axios);  
  3.   
  4. // routes:数组,在该数组中配置所有的路由;  
  5. const routes = [  
  6.   {path:'/',component:myHome,name:'home'},  
  7.   {path:'/product/:productName/:price',component:myProduct,name:'product'}  
  8. ];  
  9. // 创建router实例  
  10. const router = new VueRouter({  
  11.   routes  
  12. });  
  13. /* eslint-disable no-new */  
  14. new Vue({  
  15.   el: '#app',  
  16.   // 引入到根实例中才可以使用导航功能  
  17.   router,  
  18.   components: {App},  
  19.   template: '<App/>',  
  20.   data(){  
  21.     return {  
  22.   
  23.     }  
  24.   }  
  25. })  

三、官网介绍使用步骤

网址:https://router.vuejs.org/zh/guide/#javascript

[javascript] view plain copy
  1. // 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)  
  2.   
  3. // 1. 定义 (路由) 组件。  
  4. // 可以从其他文件 import 进来  
  5. const Foo = { template: '<div>foo</div>' }  
  6. const Bar = { template: '<div>bar</div>' }  
  7.   
  8. // 2. 定义路由  
  9. // 每个路由应该映射一个组件。 其中"component" 可以是  
  10. // 通过 Vue.extend() 创建的组件构造器,  
  11. // 或者,只是一个组件配置对象。  
  12. // 我们晚点再讨论嵌套路由。  
  13. const routes = [  
  14.   { path: '/foo', component: Foo },  
  15.   { path: '/bar', component: Bar }  
  16. ]  
  17.   
  18. // 3. 创建 router 实例,然后传 `routes` 配置  
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。  
  20. const router = new VueRouter({  
  21.   routes // (缩写) 相当于 routes: routes  
  22. })  
  23.   
  24. // 4. 创建和挂载根实例。  
  25. // 记得要通过 router 配置参数注入路由,  
  26. // 从而让整个应用都有路由功能  
  27. const app = new Vue({  
  28.   router  
  29. }).$mount('#app')  
  30.   
  31. // 现在,应用已经启动了!  

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




浅谈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
  1. <?php    
  2.      header("Content-Type: text/html; charset=utf-8");  
  3.      $username = $_GET["name"];  
  4.      echo "<p>Hi,".$username."!</p>";  
  5. ?>  
  6.   
  7. //这段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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



主流验证码调研说明文档

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

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

seo达人

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

1.总结

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

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

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

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

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

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

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

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

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

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

2.感悟

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

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


世界杯快到了,看我用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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档