Emmet优雅地搭建起Html骨架

Emmet优雅地搭建起Html骨架

12个月前 (12-05) 浏览: 192 评论: 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/

Ubuntu初见

Ubuntu初见

12个月前 (12-03) 浏览: 192 评论: 0

一、UI 大一的时候就喜欢装各种系统玩,所以在公司要求体验Ubuntu系统前就尝过鲜。对于一个初级用户来说,对一个操作系统最初的接触便是它的UI,我对Ubuntu系统的第一感觉是比较好看的Linux系统,它和Mac系统有点像,但是没有Mac好看。对于习惯了windows的操作系统的用户来说,我还是比较喜欢Windows7和Windows10的UI。不知道是系统本身的原因还是ubuntu对PC显卡支持的不太好的缘故,总有一种Ubuntu的界面渲染不够细腻的感觉。 不论怎样,Ubuntu在接触到的linux系统中是比较美观的一个,可视化操作的支持也是比较好的。如果你还抱怨Ubuntu不及windows漂亮的话,可以尝试在centos上安装一个KDE或者GNOME的桌面环境,就会发现Ubuntu是一个多么美观的Linux系统啦。 二、Linux的发行版 对Ubuntu的定义,最基本的就是Linux的发行版啦。以前总听说发行版这个词,却从来不知道发行版到底是个什么意思。于是查了一下资料在此和大家分享一下。 就Linux的本质来说,它只是操作系统的核心,负责控制硬件、管理文件系统、程序进程等,并不给用户提供各种工具和应用软件。所谓工欲善其事,被必先利其器,一套在优秀的操作系统核心,若没有强大的应用软件可以使用,如C/C++编译器、C/C++库、系统管理工具、网络工具、办公软件、多媒体软件、绘图软件等,也无法发挥它强大的功能,用户也无法仅仅使用这个系统核心进行工作,因此人们以Linux核心为中心,再集成搭配各种各样的系统管理软件或应用工具软件组成一套完整的操作系统,如此的组合便称为Linux发行版。 个人感觉,Linux和Ubuntu的关系与Android和MIUI的关系有一点像。不过Ubuntu在定制方面做的应该更多一点。纯净的Linux系统内核编译出来网上说只有几M大小,最小的Linux系统ttylinux 是一个只需要8M磁盘空间的小型发行版,最低要求是12M 内存。 三、推荐几个良心的GUI应用 wps wps office LInux版,强大的文字、表格、PPT办公软件。现在Android和Windows平台上的WPS office广告越来越多,而Linux上的却相当纯净。 下载地址:http://community.wps.cn/download/ 网易云音乐 发布不久后我就安装了,和Windows下桌面版和UWP版长得一模一样,支持在线和本地音乐播放,桌面歌词。 下载地址:http://music.163.com/#/download Wine QQ Linux下的QQ客户端,基本功能有的,但是感觉Bug比较多,因为和windows上2012年版的QQ差不多,现在好久没有更新了。 * 下载地址:http://www.ubuntukylin.com/applications/showimg.php?lang=cn&id=23 四、分享几个小技巧 多桌面和热区 下载Unity Tweak Tool,和Mac一样支持将鼠标移到屏幕的边缘显示桌面、窗口平铺、任务切换等。这个在同时打开很多窗口的情况下十分方便用户操作。 调出命令行窗口快捷键 Ctrl + Alt + T 更多使用技巧欢迎大家分享交流!

Gradle下利用配置文件对构建工具版本集中控制

Gradle下利用配置文件对构建工具版本集中控制

1年前 (2016-08-12) 浏览: 136 评论: 0

由于Android studio和Android相关SDK和构建工具具有极快的更新速度。对相关版本的修改有时候是一件比较敏感的事情,尤其是在团队项目中,个人在本地修改了相关工具的版本并且不小心提交到远程代码库,别人更新下来往往出现各种问题。Android studio项目文件中版本字段十分分散,当SDK环境出现改变时,修改起来还是比较麻烦的。本文章利用配置文件对构建工具版本集中控制。 在项目根目录下gradle.properties文件定义版本信息并赋值   在使用版本信息的地方引用gradle变量 Dependencies build.gradle(project) build.gradle(module)

AndroidStudio代码混淆和NDK预防apk反编译

AndroidStudio代码混淆和NDK预防apk反编译

2年前 (2016-01-09) 浏览: 849 评论: 0

代码混淆 什么是代码混淆 Java 是一种跨平台的、解释型语言,Java 源代码编译成中间”字节码”存储于 class 文件中。由于跨平台的需要,Java 字节码中包括了很多源代码信息,如变量名、方法名,并且通过这些名称来访问变量和方法,这些符号带有许多语义信息,很容易被反编译成 Java 源代码。为了防止这种现象,我们可以使用 Java 混淆器对 Java 字节码进行混淆。 混淆就是对发布出去的程序进行重新组织和处理,使得处理后的代码与处理前代码完成相同的功能,而混淆后的代码很难被反编译,即使反编译成功也很难得出程序的真正语义。被混淆过的程序代码,仍然遵照原来的档案格式和指令集,执行结果也与混淆前一样,只是混淆器将代码中的所有变量、函数、类的名称变为简短的英文字母代号,在缺乏相应的函数名和程序注释的况下,即使被反编译,也将难以阅读。同时混淆是不可逆的,在混淆的过程中一些不影响正常运行的信息将永久丢失,这些信息的丢失使程序变得更加难以理解。 混淆器的作用不仅仅是保护代码,它也有精简编译后程序大小的作用。由于以上介绍的缩短变量和函数名以及丢失部分信息的原因, 编译后 jar 文件体积大约能减少25% ,这对当前费用较贵的无线网络传输是有一定意义的。   NDK将应用的核心代码或通讯协议打包成so文件 NDK可以实现代码的保护,由于apk的java层代码很容易被反编译,而C/C++库反汇难度较大。 因为java是半解释半编译性语言,,先将java的代码解释成CLASS文件,然后编译给计算机中的JVM虚拟机,然后由虚拟机调用相应的计算机部件进行运算,而安卓的SO文件是linux下的文件,用c或者c++写的,c++你可以看做是C的扩充版,C有良好的机器兼容性,就是因为它可以直接编译为机器指令,执行效率相对java高,而java是跨平台移可植性强大。 C/C++更接近底层系统实现和依赖于编译器,不同编译器生成的二进制代码会相对不同平台有所区别,甚至同一操作系统不同系列的编译器都会有一点差异,比如在linux下编译C/C++得到的二进制代码就很难或无法运行在windows平台上,反之亦然,所以反编译很困难,现在大多数反编译软件都只能反编译成汇编。有一些号称可以反编译成C或者C++的工具,但反编译出来的结果大多看不明白,还不如用汇编。  

安卓实现打开指定链接调用其他应用程序

安卓实现打开指定链接调用其他应用程序

2年前 (2016-01-01) 浏览: 122 评论: 0

有些网站在网页上设置了点击跳转到其官方APP上的链接,比如京东;近期在做王柏元的博客客户端上我加入此功能,用以打开网页上的链接调用我的客户端打开相关文章。下面是实现方法: 安卓实现打开指定链接调用其他应用程序 在打开指定链接需要跳转到的Activity的AndroidManifest.xml清单文件中中加入一条intent-filter标签,并如下面的例子设置scheme、HOST等属性。 并做了一个网页亲测成功:  

支持自动提示的多引擎的搜索框

支持自动提示的多引擎的搜索框

2年前 (2015-12-30) 浏览: 248 评论: 0

使用网上开源的导航站源码制作了我的导航网页“百元导航”后,总觉得它丢掉了导航网站的一个很重要的东西—搜索框。于是极客人为自己的导航站加入了搜索框的功能,支持百度搜索、好搜、极客搜、CSDN搜索、蒲公英PT搜索等(可以加代码轻松扩展),除了网站界面使用了网上的代码,逻辑处理部分的js代码全由本人实现。 html代码: 下面是搜索框的界面的html部分,CSS没有贴在下面,如果需要请留言: javascript代码 要想搜索框支持多搜索引擎切换,首先需要掌握搜索引擎搜索关键词的URL参数,查看有几个GET参数(搜索引擎一般都是用GET传值的),比如下面是搜索引擎搜索“王柏元的博客”的结果页的URL: https://www.baidu.com/s?ie=UTF-8&wd=%E7%8E%8B%E6%9F%8F%E5%85%83 ?ie后面是编码格式,wd后面是搜索的关键词的URLEncode编码。 所以只要做一个表单,在表单内部加入name="ie"的DOM元素,这个元素没有必要在界面上显示,可以在CSS样式中加入“display:none”,下面的addparams函数实现的就是这一功能;再加入name="wd"的文本框,就是输入关键词的那个搜索框。最后将表单的action设置为百度搜索关键词网址:https://www.baidu.com/s 下面的setEngine函数就是切换搜索引擎的函数。传入searchIndex,就是html中select下option的value; 为了在用户切换搜索引擎后,再次打开导航页默认显示切换后的搜索引擎,可采用cookie记录searchIndex。 下面的代码用以在切换搜索引擎时,如果搜索框不为空则自动搜索搜索框内关键词,不用点击“搜索按钮”。 搜索框加入百度搜索自动提示 其中搜索自动提示的功能采用了百度开放的百度搜索框提示:引入一个百度的opensug.js文件,然后在要绑定搜索提示的文本框input元素中加入baiduSug="1"。这样在绑定的搜索框中输入文字即可获得和百度一样的搜索提示。 比如: 网上说百度搜索提示还有很多高级用法,比如自定义搜索提示的背景颜色、字体等等。不过极客人试过发现并不支持,你可以自行尝试,成功了欢迎来王柏元的博客交流!

流量关键词链接页面提升百度权重

流量关键词链接页面提升百度权重

2年前 (2015-12-20) 浏览: 125 评论: 1

百度搜索的排名常常根据页面搜索进入的流量大小进行变化,如果对于一个关键词很多人都会进入同一个网页,百度会认为这个网页能很好地解决这个问题,从而使这个网页在该关键词搜索时排在其它网页的前面。在百度站长平台的后台,我们可以知道有哪些关键词被百度搜索以及是否进入了我们的网页。我们可以通过做一个这个页面,里面全是搜索这些关键词的网址,访问以后进入我们的网站,从而提升我们的网站排名。 流量关键词链接页面提升百度权重 以下的代码是我写的一个流量关键词链接页面,里面全部是我的百度关键词。我们和偶尔点一下,提升相应关键词排名。使用方法是将百度流量关键词导出后放在一个keyword.txt文件里,关键词每行一个,文件路径与下面的PHP代码文件相同。  

通过NWPU-VPN在蒲公英PT上下载资源

通过NWPU-VPN在蒲公英PT上下载资源

2年前 (2015-09-17) 浏览: 3008 评论: 0

九月,步入大三的季节。告别了长安校区,告别了朝夕相对的钟南山,告别了耳边鸟鸣室外花香,我们来到了友谊校区。我们终于从大山搬进城市,市区里消费高了,生活水平却下降了不少。而已经相伴我们两年、给我们无数美好体验的IPV6,也随风吹花落去。 搬进旺园,没有了IPv6,支持IPv4的西工大的蒲公英也向我们也下了逐客令:your IPv4 address 113.200.156.51 is not an NWPU IP,为了解决在校园PT网上下载资源的问题,传说有很多方法,比如IPv6隧道啦,这些方法极客人没有试过,但是极客人成功使用了NWPU开放的VPN服务成功实现在蒲公英上下载资源。 NWPU的校园网VPN服务为方便西工大教职员工在校外访问校内信息资源(如翱翔办公、翱翔网、图书馆等资源)。使用统一身份认证账户进行VPN服务认证(校园翱翔门户的用户名和密码);极客人成功测试对蒲公英有效。 使用IE浏览器(或IE内核)打开NWPU-VPN网站http://vpn.nwpu.edu.cn 按照西工大官网给出的配置,安装好Easy Connect后,在每次下载蒲公英PT资源时打开VPN服务即可。你可以访问http://vpn.nwpu.edu.cn,按照提示操作后浏览器会自动启动已安装的Easy Connect客户端。 启动VPN服务就可以下载PT资源了,不过貌似不能做种。

phinx数据库查询-Phinx教程(3)

phinx数据库查询-Phinx教程(3)

2年前 (2015-08-28) 浏览: 1029 评论: 3

执行查询 Phinx进行数据库查询可以执行 execute()和 query()方法。 execute()方法返回的是执行数据库查询时数据库受影响的行数,而 query()方法返回的结果是一个数组。   注意:这些命令运行基于使用PHP数据对象(PDO) 扩展,它定义了一个轻量级的、一致的接口在PHP中访问数据库。总是确保你的查询与之前使用pdo同在 execute()命令。这是特别重要的在使用分隔符在插入的存储过程或触发器不支持分隔符。 获取行 phinx有两种方法可以获取行:fetchRow()方法将获取单个行,而 fetchAll()方法将返回多行。这两种方法都接受原生的SQL语句作为他们唯一的参数。   处理数据表 表对象 表对象是一个Phinx提供最有用的的api。它允许您使用PHP代码轻松操纵数据库表。您可以通过table()方法对表对象进行实例化,从而实现数据库迁移。 然后您可以使用表对象提供方法来操纵这个表: 创建表 使用表对象创建一个表十分简单,以下举例创建一个表来存储用户: 添加列:addColumn()方法; 添加索引:addIndex()方法:上面使用用户名和电子邮件来创建一个惟一索引列,最后调用save()将更改提交到数据库。 注意:Phinx自动为每个表创建一个名为“id”的自增列作为主键。 我们也可以使用表对象自行指定一个主键。一下代码会禁用Phinx自动生成 “id”的自增列作为主键,并使用其中 的两列创建一个主键:   若设置一个 primary_key但不使用自增属性 AUTO_INCREMENT,需要指定一个id来覆盖默认的 id字段名:   有效的列数据类型 列属性的数据类型指定为字符串,可以下列类型之一: biginteger binary boolean date datetime decimal float integer string text time timestamp uuid 此外,MySQL还支持 enum和 set列类型,Postgres支持 json和 jsonb列类型(PostgreSQL 9.3及以上)。 判断是否存在一个表: hasTable()   删除表 使用 dropTable()方法,同时你最好在 down()方法写上如何再重新创建此表(极客人注:便于后续向下迁移恢复)。   重命名表 重命名表通过访问表对象的一个实例,然后调用 rename()方法实现。   使用列 得到一个列列表:getColumns()方法 要检索所有表列,可以简单地创建一个表对象然后调用getColumns()方法,该方法将返回一个数组。例子如下:   检查是否存在一个列:hasColumn()方法 你可以使用 hasColumn()方法检查是否存在某一列。   重命名一个列:  renameColumn() 访问表对象的一个实例,然后调用 renameColumn()方法。   有顺序添加列 要想在一个列后跟着添加一个新列,使用 after选项来实现。   删除一个列: removeColumn()方法   设定列属性限制 可以使用 limit选项限制列的最大长度:   使用索引 添加一个索引表您可以简单地调用表对象的 addIndex()方法。   默认情况下Phinx会让数据库适配器创建一个正常的索引。我们也可以通过一个额外的参数 addIndex()方法来指定一个唯一的索引。   删除多个索引调用 removeIndex()方法,你必须为每个索引调用这个方法。   请注意: 当使用方法 removeIndex(),不需要再调用 save(),索引会在方法执行后立即删除。 操作外键 Phinx支持创建外键来约束你的数据库表。以下为添加外键的一个例子   “删除”和“更新”操作定义的“删除”和“更新”选项数组。可能性值“SET_NULL”,“NO_ACTION”、“级联”和“限制”。 我们也可以轻松地检查是否存在外键:   最后删除外键使用 dropForeignKey方法。  

【译】构建迁移-up,down,change方法-Phinx教程(2)

【译】构建迁移-up,down,change方法-Phinx教程(2)

2年前 (2015-08-26) 浏览: 772 评论: 0

本文由极客人原创翻译自:http://phinx.readthedocs.org,不周之处,敬请指正;系列文章请访问王柏元的博客Phinx标签页或者用极客搜搜索:Phinx 获取所有文章目录 为转换数据库:对数据进行还原或修改,Phinx 是通过一系列的Migrations文件来实现的。每个Migrations文件其实是一个PHP类,构陷一个migration的方法最好是通过Phinx 提供的API,当然,运行原生的SQL语句也是可以的。 新建Phinx Migration 创建一个新的Phinx Migration迁移。我们要在项目文件夹下运行Phinx的 create命令:运行上述命令完毕后,在migrations文件夹(这个文件夹就是你安装phinx时的那个migrations文件夹) 会生成一个文件名为YYYYMMDDHHMMSS_my_new_migration.php的PHP文件,在前14个字符其实当前时间的时间戳。Phinx自动创建一个框架迁移文件有两个空的和一个被注释掉的方法: AbstractMigration类 所有Phinx Migration迁移类都继承于 AbstractMigration类,它提供了必要的支持来创建数据库迁移。数据库迁移可以创建新表,插入行,添加索引和修改列。 up()方法 当你对数据库进行向上迁移(即对数据库进行新的修改时),并且phinx检测到构建的migrations 之前没有被运行时,up()方法会被phinx自动运行。在up()方法中你需要根据你的意图自己写代码来修改数据库。  Down()方法 当你对数据库进行向下迁移(即对数据库的操作进行还原修改),phinx检测到构建的migrations 之前没有被运行时,Down()的方法会被Phinx自动运行。你应该使用down()方法来扭转/撤销数据库的修改。 Change()的方法 Phinx 0.2.0引入了一个新功能,叫做可逆迁移。你只需要定义可逆迁移的 up()方法的逻辑那么Phinx就可以为你自动找出如何向下迁移。定义一个可逆迁移必须取消 change方法的注释、补全里面的方法定义。例如:当执行这个迁移时,Phinx将创建 user_logins表,同时自动实现如何删除表。需要注意的是,当迁移文件中存在change方法时,Phinx会自动忽略了 up()和 down()方法。如果您还需要使用这些方法,建议您创建一个单独的migration文件。 注意: 在创建或更新表内 change()方法必须使用桌子上 create()和 update()方法。Phinx不能自动确定 save()调用创建一个新表或修改一个现有的一个。Phinx的可逆迁移只能反向实现以下的操作: 新建表 重命名表 添加列属性 重命名列属性 添加索引 添加外键 如果一个操作不能逆转,在向下迁移的时候,Phinx就会抛出 IrreversibleMigrationException异常。

登录

忘记密码 ?

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

切换登录

注册