React Native中添加Base64支持

React Native中添加Base64支持

9个月前 (03-08) 浏览: 621 评论: 0

最近极客人在使用React Native制作的自己的博客客户端,客户端在调用Wordpress Rest API时有些操作需要使用HTTP认证,而HTTP认证中主要就是在HTTP请求中的头部加入 "Authorization"字段,Authorization字段的内容时 用户名:密码 的base64编码 环境依赖 Base64编解码算法在Nodejs的buffer组件中有支持,首先我们需要在React Native项目根目录下运行命令行安装buffer依赖: 安装完毕后,React Native根目录的app.json中的dependencies便会自动加入下面一条: React Native中添加Base64支持 使用方式 引入 编码 解码   Buffer项目主页: 更多buffer的使用方法参考Buffer主页:https://github.com/feross/buffer

Ubuntu下利用Java CV获取双目摄像头图像

Ubuntu下利用Java CV获取双目摄像头图像

9个月前 (03-06) 浏览: 288 评论: 0

毕业设计的项目是做一个通过双目摄像头测出物体的距离,然后控制模型车避开较近的障碍物,所以需要将安装在模型车上双目摄像头的图像传输,发送到电脑端进行双目测距算法的计算,然后电脑将计算的结果发送到小车,小车控制行驶方向从而避开障碍物。小车上使用Pcduino开发板,安装Ubuntu系统,外插Arduino扩展板,连接小车的硬件部分。 从淘宝上买回的双目摄像头后,使用java cv获取到双目摄像头图像的方式与单目摄像头的方式是类似的。不同的地方是要想分离双目摄像头的画面需要设置代码中的分辨率参数。 如果不对分辨率进行任何的设置,得到的效果是这样的: 双目摄像头画面 是不是似曾相识,我们在电影院看3D电影不戴眼镜看到的就是这样的。对于开发者来说两路图片混合在一起显然不是好事,需要在代码里做如下设置。 因为笔者手中的摄像头每一只分辨率为640480,所以将分辨率改成1280480,可以成功的将图片分离。 图片分离以后的效果是这样的: 双目摄像头图像分离 代码使用了java cv的库,如果是maven项目,需要这样配置依赖: 在pom.xml中project节点下添加: 更多的环境配置可以访问 java cv的官方Github主页。

怎样释放Android手机存储空间

怎样释放Android手机存储空间

9个月前 (02-23) 浏览: 197 评论: 0

Android应用在运行之中会产生一些数据,比如图片的缓存,数据库文件,配置文件等等。我们开发时可能会有这样的一个需求清除应用内缓存的数据,可以让用户选择删除应用内产生的数据,这也是比较人性化的设计点。过多的缓存会占用手机的存储空间,据说也会降低手机的IO性能。 下面这是简书Android APP中提供了清除缓存的设计: 那么Android应用在运行中会产生哪些数据呢?它们都被存放在哪里?然后我们根据产生数据的位置实现清除功能 首先简单讲讲Android的四种数据存储方式 1、SharePreferenc 一种轻型的数据存储方式,实际上是基于XML文件存储的“key-value”键值对数据;通常用来存储程序的一些配置信息。 SharePreference的存储目录: 其存储在“data/data/程序包名/shared_prefs目录下。 SharePreference修改和存储数据 根据Context的getSharedPrerences(key, [模式])方法获取SharedPreference对象; 利用SharedPreference的editor()方法获取Editor对象; 通过Editor的putXXX()方法,将键值对存储数据; 通过Editor的commit()方法将数据提交到SharedPreference内 2、SQLite SQLite是一个轻量级关系型数据库,既然是关系型数据库,那操作起来其实跟mysql、sql server差不多的。 Android提供了强大数据库管理库,同时也支持运行哦原生命令,实现数据库的增删改查 3、 File Android中可以在设备本身的存储设备或外接的存储设备中创建用于保存数据的文件。在默认状态下,文件是不能在不同程序间共享的。 File可以通过FileInputStream和FileOutputStream对文件进行操作。 4、ContentProvider ContentProvider相对于其它的方式比较复杂,当然其功能相对于其它的方式也是革命性的改变。它能够实现跨应用之间的数据操作。利用ContentResolver对象的delete、update、insert、query等方法去操ContentProvider的对象,让ContentProvider对象的方法去对数据操作。 实现方式为: 在A程序中定义一个ContentProvider,重载其增删查改等方法; 在A程序中的AndroidManifest.xml中注册ContentProvider; 在B程序中通过ContentResolver和Uri来获取ContentProvider的数据,同样利用Resolver的增删查改方法来获得和处理数据 Android应用的数据存储路径 应用内数据的所有路径和对应的数据清除代码: /data/data/com.xxx.xxx/cache - 应用内缓存(注:对应方法getCacheDir() )   /data/data/com.xxx.xxx/databases - 应用内数据库   /data/data/com.xxx.xxx/shared_prefs - 应用内配置文件   /data/data/com.xxx.xxx/files - 应用内文件(注:对应方法getFilesDir())   由于Android应用数据存储的权限比较宽泛,一个Android应用几乎可以在SD卡任意位置创建一个目录和文件,所以上面的几个存储路径只是Android应用最基本的存储路径。更多的清除代码实现在下面的清除工具类中将于更详细的讲解 清除工具类的代码实现 为了方便使用,下面时我封装好的数据清除工具类:   系统设置应用管理的”清除数据“的实现方法 在Android系统设置的应用管理中,提供了”清除数据“的功能,这一功能对应用数据的清除更加彻底,我们可以在代码中实现类似的需求,不过下面代码的执行将使应用退出:  

【图片去霾算法实践】NDK下二维数组的传递

【图片去霾算法实践】NDK下二维数组的传递

10个月前 (01-16) 浏览: 255 评论: 1

最近看到了一篇关于图片“去霾算法”的文章,一下子就有了兴趣,所以想着能不能实现。由于数学能力捉急,无法理解文章的思想和相关论文。于是在Github上找到了相关的Java代码,算法的效果十分明显: 去霾前的图片 去霾算法处理后的图片 不知道是不是算法太复杂,还是Java效率相对较低的缘故,一个3M的JPG图片处理下来需要近20秒的时间。 效果明显的算法让我萌生了开发一款去霾相机的想法,为了获得更快的处理速度,在研究Java去霾算法代码后,我决定将其写成C++代码,然后通过NDK(Android原生开发)移植到Android平台。 项目的基本思想是在Android/Java下获得图片的Bitmap将其像素点转成二维的int二维数组,然后将int二维数组传入JNI层,交给NDK层C++代码处理,NDK层处理完毕后返回去霾后的int二维数组,由Java层转成Bitmap重新显示或保存。 经过一天的奋斗,我终于实现了用C++代码实现“去霾”算法并顺利移植到Android原生开发中。效果已实现,目前还有很多BUG,图片大小稍大时算法耗费的时间和内存过大. Android 图片去霾 本文预计会写一个系列,后续根据情况可能会开源。如果你对去霾算法实践感兴趣,可以关注我的简书和博客:http://wangbaiyuan.cn ,后续将持续更新 本篇文章介绍NDK和Java层怎样互传二维数组 NDK->C++ ndkArray[mHeight][mWidth]->cppArray[mHeight][mWidth]   C++->NDK cppArray[mHeight][mWidth]->ndkArray[mHeight][mWidth]  

Ruby图片处理基本算法(二)二值、灰度、浮雕…

Ruby图片处理基本算法(二)二值、灰度、浮雕…

11个月前 (12-30) 浏览: 245 评论: 0

一、灰度算法 彩色照片每一个像素的颜色值由红、绿、蓝三种值混合而成,红绿蓝的取值分别由很多种,于是像素的颜色值也可以有很多种颜色值,这就是彩色图片的原理,而灰度照片则只有256种颜色,一般的处理方法是将图片颜色值的RGB三个通道值设为一样,这样图片的显示效果就会是灰色。 灰度处理一般有三种算法: 1 最大值法:即新的颜色值R=G=B=Max(R,G,B),这种方法处理后的图片看起来亮度值偏高。 2 平均值法:即新的颜色值R=G=B=(R+G+B)/3,这样处理的图片十分柔和 3 加权平均值法:即新的颜色值R=G=B=(R * Wr+G*Wg+B*Wb),一般由于人眼对不同颜色的敏感度不一样,所以三种颜色值的权重不一样,一般来说绿色最高,红色其次,蓝色最低,最合理的取值分别为Wr = 30%,Wg = 59%,Wb = 11% 下面是加权平均值法的Ruby实现:   灰度效果: out_grey.jpg 二、二值化 图像二值化就是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的黑白效果。所有灰度大于或等于阈值的像素被判定为属于特定物体,其灰度值为255表示,否则这些像素点被排除在物体区域以外,灰度值为0,表示背景或者例外的物体区域。 图像二值化常常用于破解验证码等图片识别应用上     二值化效果 out_binary.jpg 三、底片 底片效果的实现很简单,就是将RGB的每一个通道值取反,就是用255去减   底片效果 out_contrary.jpg 四、浮雕效果 浮雕的算法相对复杂一些,用当前点的RGB值减去相邻点的RGB值并加上128作为新的RGB值。由于图片中相邻点的颜色值是比较接近的,因此这样的算法处理之后,只有颜色的边沿区域,也就是相邻颜色差异较大的部分的结果才会比较明显,而其他平滑区域则值都接近128左右,也就是灰色,这样 就具有了浮雕效果。 在实际的效果中,这样处理后,有些区域可能还是会有”彩色”的一些点或者条状痕迹,所以最好再对新的RGB值做一个灰度处理。   浮雕效果 out_emboss.jpg 项目主页 geekeren/RubyImageProcess

Ruby解析bmp文件及图片处理算法(一)

Ruby解析bmp文件及图片处理算法(一)

11个月前 (12-30) 浏览: 154 评论: 0

一、BMP文件格式详解(BMP file format) BMP文件格式,又称为Bitmap(位图)或是DIB(Device-Independent Device,设备无关位图),是Windows系统中广泛使用的图像文件格式 下面以Notepad++为分析工具,结合Windows的位图数据结构对BMP文件格式进行一个深度的剖析。 BMP文件的数据按照从文件头开始的先后顺序分为四个部分: bmp文件头(bmp file header):提供文件的格式、大小等信息 位图信息头(bitmap information):提供图像数据的尺寸、位平面数、压缩方式、颜色索引等信息 调色板(color palette): 可选,如使用索引来表示图像,调色板就是索引与其对应的颜色的映射表 Ø 位图数据(bitmap data):就是图像数据啦^_^ 下面结合Windows结构体的定义,通过一个表来分析这四个部分。 BMP文件数据结构 我们一般见到的图像以24位图像为主,即R、G、B三种颜色各用8个bit来表示,这样的图像我们称为真彩色,这种情况下是不需要调色板的,也就是所位图信息头后面紧跟的就是位图数据了。因此,我们常常见到有这样一种说法:位图文件从文件头开始偏移54个字节就是位图数据了,这其实说的是24或32位图的情况。这也就解释了我们按照这种程序写出来的程序为什么对某些位图文件没用了。 BMP文件头数据结构 Paste_Image.png 位图信息头数据结构 位图信息头数据结构 位图数据 每个像素占一个字节,取得这个字节后,以该字节为索引查询相应的颜色,并显示到相应的显示设备上就可以了。 注意:由于位图信息头中的图像高度是正数,所以位图数据在文件中的排列顺序是从左下角到右上角,以行为主序排列的。 也即我们见到的第一个像素60是图像最左下角的数据,第二个人像素60为图像最后一行第二列的数据,…一直到最后一行的最后一列数据,后面紧接的是倒数第二行的第一列的数据,依此类推。 如果图像是24位或是32位数据的位图的话,位图数据区就不是索引而是实际的像素值了。下面说明一下,此时位图数据区的每个像素的RGB颜色阵列排布: 24位RGB按照BGR的顺序来存储每个像素的各颜色通道的值,一个像素的所有颜色分量值都存完后才存下一个下一个像素,不进行交织存储。 32位数据按照BGRA的顺序存储,其余与24位位图的方式一样。 像素的排布规则与前述一致。 对齐规则 讲完了像素的排列规则以及各像素的颜色分量的排列规则,最后我们谈谈数据的对齐规则。我们知道Windows默认的扫描的最小单位是4字节,如果数据对齐满足这个值的话对于数据的获取速度等都是有很大的增益的。因此,BMP图像顺应了这个要求,要求每行的数据的长度必须是4的倍数,如果不够需要进行比特填充(以0填充),这样可以达到按行的快速存取。这时,位图数据区的大小就未必是 图片宽×每像素字节数×图片高 能表示的了,因为每行可能还需要进行比特填充。 填充后的每行的字节数为: ,其中BPP(Bits Per Pixel)为每像素的比特数。 在程序中,我们可以表示为: int iLineByteCnt = (((m_iImageWidth * m_iBitsPerPixel) + 31) >> 5) << 2; 这样,位图数据区的大小为: m_iImageDataSize = iLineByteCnt * m_iImageHeight; 我们在扫描完一行数据后,也可能接下来的数据并不是下一行的数据,可能需要跳过一段填充数据: skip = 4 - ((m_iImageWidth * m_iBitsPerPixel)>>3) & 3; 二、Ruby实现BMP图片的解析 根据上面的BMP图片格式的介绍,我可以写出以下Ruby代码。   file对象中的read(length)是从文件指针开始读出length个字节的数据,数据类型是字符串,通过unpack函数,我们可以通过传入unpack参数解析出bmp图片的数据结构。 以为例,根据上面的BMP文件数据结构的分析,read(14)是读出bmp文件的前14个字节的文件头,参数'a2LS2L'可以将14个字节的数据解析为 两个字符(1*2字节)、一个Long型(1*8字节)、两个Short型(2*2字节),分别取出bmp图片的文件类型(“BM”)、文件大小、两个保留字段、 图像数据偏移量(@imageDataSize) 。 Paste_Image.png 再从文件中读入@imageDataSize个字节的数据,解析为字符数组,里面除了一些因对齐规则以外的数据都是图片的数据;   如果是24位BMP图片,那么每个像素占据三个字节,分别为RGB中的B、G、R值。 以一个height=2,width=2的图片为例,其图片数据部分转成单字节数组如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 124 254 258 123 212 21 221 56 107 204 251 100 52 100 111 59 其中每一行的无效数据:skipByteALine = 4 - ((2 * 24)>>3) & 3=2 为了更形象地表示图片像素与RGB数据的对应关系,在此我以二维矩阵的方式展示上面的一维数组: Paste_Image.png 由于对齐原则,第一行的7 、8,第二行的15、16元素将被丢弃。 基于以上考虑,可以通过以下Ruby代码获取指定像素位置的RGB值   通过以下Ruby代码设置指定像素位置的RGB值   三、Ruby处理图片 通过上面介绍的setRGB和getRGB方法来修改bmp的图片数据字节数组,我们就可以对bmp的指定像素进行操作了,下面介绍将图片灰度化:   上面的代码我取得所有像素的RGB,然后求出R、G、B值的平均值,RGB值三值相同时像素呈现为灰色 上面的操作只会修改图像数据字节数组,修改完毕需要保存到磁盘,保存方法如下:   原图: raw.jpg 处理效果: out_grey.jpg 下篇文章我将介绍二值化、浮雕滤镜、底片滤镜等图像处理算法 预览: Paste_Image.png 项目主页 geekeren/RubyImageProcess   参考文章 http://blog.csdn.net/hzqnju/article/details/5927825 http://www.jianshu.com/p/30fbaab6d0a6 http://blog.csdn.net/hxker/article/details/50013303 http://blog.csdn.net/o_sun_o/article/details/8351037

用Ruby简书爬虫统计用户文章信息

用Ruby简书爬虫统计用户文章信息

11个月前 (12-16) 浏览: 335 评论: 0

思沃大讲堂培训,要求我们把自己学习的心得感悟输出在简书上,公司还会统计大家的文章,包括文章数量、评论量、被喜欢量等等。这么多人,人工统计起来自然很麻烦,当然程序员会把这么艰巨光荣繁琐的工作交给代码,于是他们就写了一个爬虫。适值极客人正在学习Ruby,所以就突发奇想写了一个Ruby爬虫统计简书用户的文章,带动自己的Ruby学习。 如果让我抓取一个网站的内容,我的第一想法可能会是抓取它的HTML,不过也会反过来问自己一句这个网站有没有Rss订阅源地址,RSS的订阅源的内容是xml,相比html更加简洁和高效,而且由于xml的结构稳定一点(html可能那天换一个css可能就会导致我的爬虫用不了啦),解析起来会更加方便一点。在考察完简书没有提供RSS后,我就决定选择html来暴力地抓取简书了。 分析简书网址 首页:http://www.jianshu.com/ 用户主页:http://www.jianshu.com/users/用户ID(暂估计这么说) 我们可以获取用户的关注、粉丝、文章、字数、收获喜欢等信息 Paste_Image.png 用户最新文章http://www.jianshu.com/users/用户ID(暂估计这么说)/latest_articles 我们可以获取用户文章列表,以此统计用户文章的评论量、阅读量等等,通过遍历文章列表将评论量、阅读量相加即可获取评论总量、阅读总量 需要指出的是,由于文章列表页不能把用户的文章全部列出来,而是列出10条,用户在浏览器中滚动到文章列表底部会自动加载,是用js向后台请求数据然后在前端多次拼接出来,所以想一次性地抓一次就把用户的评论总量、阅读总量是不行的,用户列表页分页的。所以我采取分页抓取的方式,那么怎么知道用户文章一共有多少页呢?我们从用户主页中获取了用户的文章总数,所以除以10加1可以获取页数 用户列表页分页的,10条/页,其中第 m 页URL: http://www.jianshu.com/users/用户ID(暂估计这么说)/latest_articles?page=m Paste_Image.png 抓取网页,获取html Ruby提供的HTTP访问方法十分简洁高效,当然方法不止一种,对其他方法感兴趣的同学我自行Google,在此我贴出自己的代码:   顾问生义,我想不需要解释代码的意思了吧 根据上面介绍的简书网址规则,就可以通过上述代码抓取到相应网页的HTML 分析抓取内容的结构 获取完相应网页的HTML内容后要做的就是分析HTML的内容和结构。我们用眼睛很容易看出网页上的内容,但是爬虫看到的只有html源代码。下面我从抓取的HTML中提取了下列有用的代码: 用于提取用户的关注量、粉丝量、文章数、字数、收获喜欢数   用于提取用户文章评论总量、阅读总量   抠出关键信息 上面我已经提取出有用的关键的HTML,现在要做的是让爬虫做同样的事情。所以我用到啦正则匹配。 正则匹配出粉丝", "关注", "文章", "字数", "收获喜欢"   其他匹配代码请参看源代码 整合信息,多样化地输出成果物 当统计出用户的文章信息后,就是把统计信息输出来。为了让输出的产物更加丰富和自定义程度更高,所以我采取了渲染模板的方式,将数据和界面分离。 模板文件:   然后在Ruby代码中加载模板文件,并将@{title}、@{time}、 @{content}、 @{content}替换真实的统计信息   当然,那天只要加一个out2json就可轻松做一个API,实现更高的定制化效果啦 项目主页 https://github.com/geekeren/jianshu_spider 使用方法 下载项目代码并运行 更详细的项目介绍请移步Github项目主页

Html5,你为什么要语义化标签?

Html5,你为什么要语义化标签?

12个月前 (12-07) 浏览: 138 评论: 1

语义化标签,顾名思义也就是可以直接读懂的标签。最早接触HTML5的时候,对HTML5的语义化并没有太深的理解,只是对Html几个新增的功能很感兴趣,比如画布;Html5的语义化标签,header,footer ,nav等,这些本质上就是Div,在html4时代,我们用div id="header","footer",也能漂亮地完成header、footer这些标签相同的效果,html5为什么要多此一举把这些div单独分离出来作为新的标签呢? 专注内容与结构 在HTML5之前,DIV+CSS实际上就能很好渲染出一个web页面。HTML5已不仅仅满足于怎样将一个网页表现出来了,而是更加专注网页的结构,更加务实地关注网页的内容。 我们用div来表示页面元素,但是这些div都没有实际意义。为了区分不同的结构,我们往往给这些div设置不同id,ID名称标记了这个Div负责的区块。而HTML5则为这些不同的区块创造不同的标签。 我们浏览过成千上万的网页,或看新闻,或听音乐,或看视频,最终你发现其实发现千万个网页实际上有着大同小异的结构:导航条、标题、内容、底部,几乎“万变不离其宗”,html5干脆使用不同的语义化的标签来各司其职地代表网页的不同部分。当使用了这些语义化的标签后,可以帮助你更好地理解网页的框架。 即使在没有CSS的情况下,HTML页面也能呈现出很好地内容结构、代码结构。 Paste_Image.png 我们来回顾几个HTML5几个语义化标签: 1):article标签:装载显示一个独立的文章内容。 例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。 例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。 2):section 标签:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 3):aside 标签: 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。 4):hgroup 标签:用于对网页或区段的标题元素(h1-h6)进行组合。 例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。 5):header 标签:定义文档的页面组合,通常是一些引导和导航信息。 6):footer 标签:定义 section 或 document 的页脚。 在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。 实例: 7):nav 标签:导航链接放在nav标签里。 nav标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。 8):time 标签:定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。 该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果 9):mark 标签:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。 10):figure标签:规定独立的流内容(图像、图表、照片、代码等等)。 figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。 11):figcaption 标签:定义 figure 元素的标题(caption)。 语义化标签的默认CSS 语义化标签不是html5的“专利”,比如html5之前的h1、h2等等就是语义化标签,他们表示几级标题;虽然我们在html没有引入任何css时,我们仍然可以看到h标签有字体放大加粗的效果。 实际上,html本身是没有表现的,我们看到例如 h1标签是粗体,字体大小2em,加粗;strong是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的。 浏览器默认的CSS 模块化,便于团队开发和维护 不同的语义化标签实际上为我们将网页划分了不同的模块,结构分明更利于分解模块,利于团队的合作和维护。或者当你自己审查元素的时候,当你看到“header”是自然知道这应该是网页的头部,你进入这个标签可能还会发现一个nav标签,你会很快联想到这是个导航条。你可以迅速顾名思义让自己或他人知道网页的结构,而不是看见一堆div让自己头大。 不同标签,其内容可能有不同的关注度 一个网页有不同的部分,但是不一定每一部分都是你感兴趣的,比如当你看到我写的这边文章时,你可能更加关注我的文章内容,可能不那么关注我叫什么名字,不会关注我有多少个粉丝。更夸张一点,当你看到一段精彩的电影时,不会关注旁边弹出的膏药一样的广告,相反广告只会让你恼怒。不同的语义化标签,实际上分割了不同的内容。 语义化标签更加标准化,让机器更懂HTML 读到上面的时候,你可能会说,用户看网页的时候,一般不会像那些程序员哥哥那样强迫症般地查看源代码来看看用了那些语义化标签(程序员哥哥。。。不好意思,好像说的是我自己),谁知道不同的模块,用了哪个语义化标签。对于人来说,不管你是语义化标签还是div,看到的都是活生生的、渲染好的网页啊! 其实,语义化标签,或许并不是给人看的(没有骂程序猿GG的意思),可能还是机器看的。 讲个例子,极客人在使用wordpress时装过一个为文章生成目录的插件。这个插件的原理就是遍历文章提取内容中的h标签,然后生成目录。实际上就是通过识别语义化标签的方式提取内容。 再讲一个类似的但是不是通过识别语义化标签的例子, 见过别人用过一些爬虫插件,就是把别人家网站的博客内容抓下来然后发布到自己的博客上,原理是需要在后台输出要抓取网页的网址,然后过滤网页内容中div的class属性来把文章的导航链接(往往是目录链接)、内容页分离出来。比如有的网站的文章目录使用div class="nav"的css样式,内容使用div class="content"的css,我们可以正则匹配一下nav、content把需要的信息过滤出来。但是不是所有的网站都是使用这种class名称,有的网站也许用div class="post"来表示文章内容。也就是说class="nav",class="content",不是一个标准化的名称。然后nav,article语义标签则为我们可以提供了一个标准化。如果我们很严格按照html5语义标签的使用规则来设计自己的网页,将很利于爬虫“看懂”我们的网页。 内容权重差异化,给SEO会带来变革吗 前面讲到,语义化标签更利于机器看懂我们写的html,同时不同的内容有着不同的关注度。个人绝对这对SEO可以带来一定的变革的。 当我们使用搜索引擎时,很恼火地搜到和搜索词完全不相干的内容。仔细一看才发现自己的搜索词实际上仅仅出现在一个网站的广告词。如果我们可以通过语义化标签,将网页的重点:比如文章的内容,放在一个article,不太重点的广告词、文章推荐列表放在aside里,就可以成功分化不同内容的权重。实际上搜索引擎可以给某些语义化标签更高一点的权重,从而提高搜索精准度。 当然,这是个人对搜索引擎的期待。若如此,这势必可以给SEO带来变革。 有许多个人观点希望大家交流斧正!

Emmet优雅地搭建起Html骨架

Emmet优雅地搭建起Html骨架

12个月前 (12-05) 浏览: 190 评论: 0

曾经看见一位学长在PHP-Storm上输入一段奇怪的代码,当他按下了Tab键后,神奇的事情就发生了。 如果HTML也是一种编程语言的话,私以为Html会是我们接触到的最多的编程语言。可能有人并不知道什么是HTML(超文本标记语言),但是当他人生中第一次上网打开浏览器浏览网页的时候,他与HTML的邂逅就开始了……只是当初,他不知道纷繁绚丽的网页的背后,是HTML语言在默默支撑; HTML+JS+CSS是前端的三大语言。如果把网页比作人的话,HTML给了人以骨架,CSS未知赋予了血肉、发肤以至衣物、妆饰,而JS则给了他运动的灵魂。 这边文章从HTML讲起,对于HTML的基本知识在此就不便赘述了,Google一下,你就知道。在此,我主要讲的是怎样快捷地搭建起HTML的骨架。 把HTML比作骨架并非我心血来潮,我只是在告诉自己写HTML页面要有搭框架的意识。不瞒你说,我以前的HTML的代码都是拼凑而成的。哪里不对改哪里,效率很低。正向箭头 + 标签名+反响箭头这种重复的代码,写多了就觉得腻了。那么有没有什么快捷的方式让我们关注HTML的架构本身,而不是繁杂的html语言本身呢? 用Emmet Tab一下 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度 Emmet 的语法极客人目前还只是刚刚入门,这里主要是抛砖引玉一下,给大家几个例子,更专业的介绍与教程,给大家推荐下面文章:http://www.iteye.com/news/27580 ,在此我也就不大篇幅地复制粘贴了。 ** 输入“!”或“html:5”,然后按Tab键: ** * ** 连续输入元素名称和ID,比如输入p.foo: ** 还有一些较复杂的用法大家自行研究,在此不做赘述,因为我的作用就是抛砖引玉,勾起大家的兴趣。 ** 要见证奇迹的话建议自己亲手试一下!!** 一个例子:实现列表 我要实现的效果如下: 按照搭建骨架的意识,我们得弄清这个列表的结构是什么样子: ** 最外层一个无序列表,这个无序列表每个列表项都嵌套一个有序列表,这个有序列表有两个列表项,每个列表项含有个无序列表 ** Emmet语法如下:   Tab一下: 然后把文字填进去   效果预览 > Javascript 第一章 const let 第二章 function object Java 第一章 class package 第二章 private public 参考文章: * http://www.iteye.com/news/27580 * http://www.powerxing.com/emmet-syntax-cheatsheet/

解决htacess RewriteRule中含有?的问题

解决htacess RewriteRule中含有?的问题

1年前 (2016-11-07) 浏览: 94 评论: 0

最近分别用PHP和java写个一个IP寻找地理位置的在线API,由于想让自己的URL看起来更加漂亮,便使用了htaccess Rewrite语法对URL进行了重写,其中出现无法匹配“?”的情况,最后解决了,在此给大家分享一下: 我想实现的效果是把 于是很容易写了下面规则: 然后始终无法实现相关效果,初步原因是rewrite不能把带问号的QUERY_STRING进行匹配,最后使用下面的规则成功了: %{变量名}可以获取请求的参数

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册