Emmet优雅地搭建起Html骨架

Emmet优雅地搭建起Html骨架

技术应用 算法语言 软件开发 10个月前 (12-05) 浏览: 173 评论: 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/

网站自动跳转到cjb.net的惊险之旅

网站自动跳转到cjb.net的惊险之旅

计算机技术 11个月前 (11-07) 浏览: 357 评论: 1

极客人昨天在访问王柏元的博客时发现,网站时不时地“抽风”地跳转向www.cjb.net这个网址,几乎刚一打开wangbaiyuan.cn就跳,访问其它的网址都没有遇到这等怪事。这种情况最开始只出现在360极速浏览器上,即使我下意识地清除缓存、cookie,依然没有奏效。最后我换了其它的浏览器,才发现就360极速浏览器才遇到这种情况,而且还是偶然出现的;在尝试网上的方法卸载浏览器插件等的方法解决未果的情况下我只得作罢。兴许360极速浏览器中毒了吧,呵呵,360还号称安全呢! 今天晚上,我发现自动跳转到cjb.net的恼火现象再次出现,而且这次不管什么浏览器都是如此,包括Edge、IE。这才让我觉得是不是网站被“入侵”了,而且”入侵“的方式很明显,植入了含有跳转代码的js。因为当我审查元素”禁用js“时跳转情况就不会出现。然后我看了看,王柏元的博客一个文章页就引用30个js,只要其中一个js文件植入了恶意跳转代码就会出现自动跳转,如此盲目地找谈何容易。 由于网址跳转得极为迅速,我相信这个js文件是在html的head 部分,最后发现我的头部引用一个新浪CDN的jquery.min.js,网址为: http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js;这是我的wordpress主题提供的一个Jquery CDN源,当我把Jquery源由 CDN改成使用本地Jquery时,问题解决了,无疑是新浪的Jquery源被劫持了。打开这个js一看,难怪了: 而且lib.sinaapp.com域名下不管什么链接都是这个内容;最后发现网上推荐的Jquery CDN中,使用新浪的CDN还不少,估计这回中招的人应该不止我一个啊。最后我果断换成了百度的Jquery CDN:http://libs.baidu.com/jquery/1.9.1/jquery.min.js;当然,出现自动跳转到cjb.net的情况不一定和我是同一个原因,但是你可以按照我这个思路去找哪个js文件被污染了。    

webview显示富文本与JS和java的交互

webview显示富文本与JS和java的交互

算法语言 2年前 (2016-01-15) 浏览: 204 评论: 1

WebView是安卓下显示网页的控件,使用它可以实现一个简单的浏览器,访问互联网上的网页。也可以当作一个本地的文本显示控件,和textView类似。用 WebView 或者 TextView 来显示 HTML 内容,其交互的实现方式有较大的区别,以在 HTML 内容中的图片点击事件为例,在 WebView 模式下,开发人员需要通过注入 JavaScript 代码来进行点击事件的响应,Android 系统提供了 WebView 中 JavaScript 网页脚本调用 Java 类方法的机制;而在 TextView 中,图片会被解析为 ImageSpan,通过在 ImageSpan 上注册点击事件来响应。   一、webview显示富文本 比如iniHtml为一段String类型的html代码,使用 即可在webview上显示这段html。   二、webview显示项目资源中网页文件 我们可以将一个html文件index.html放在项目的assets文件下,使用WebView.loadUrl("file:///android_asset/index.html")来显示这个html文件,在这个html文件如果要引用asserts文件夹下的css、js文件,同样使用file:///android_asset/ ; 来访问。 三、java中调用javascript函数 使用loadurl调用java代码 四、javascript怎样调用java函数 在webview使用javascript调用外部的java函数可以让android的webview显示富文本有一种更加原生的体验,而不会让使用者感觉他在使用一个浏览器在查看你的显示文本。为了能让javascript调用java中代码,安卓采取将javascript的一个window下的对象M与java中的对象N做一个绑定或者说是映射,这样在javascript下对M的操作就相当于在java下N的操作。 实现方法:webview启用javascript,绑定js对象 addJavascriptInterface(Object object, String name)函数中第一个参数object是java下的对象,name是映射到javascript下的对象名。你可以为java下的object比如当前的activity申明一个click()函数,在javascript下使用window.name.click() 即可出发java下click函数。 需要指出的是在java中的click函数需要添加声明 @JavascriptInterface

网页添加链接调用APP与跳转下载网址

网页添加链接调用APP与跳转下载网址

算法语言 2年前 (2016-01-09) 浏览: 273 评论: 1

在京东、百度糯米等网站的手机端网页上,常常有有个悬浮提示“点击打开客户端”,如果用户在手机上安装了客户端,将会自动调用客户端打开与当前网页内容一致的客户端页面;如果用户没有安装这些APP,浏览器将会跳转到下载网址,让用户下载客户端。在王柏元的博客客户端中也实现了这一功能。 之前在《安卓实现打开指定链接调用其他应用程序》介绍了如果让客户端点击特定链接(APPLINK)时自动调用客户端软件,在此再次重复一遍: 在打开指定链接需要跳转到的Activity的AndroidManifest.xml清单文件中中加入一条intent-filter标签,并如下面的例子设置scheme、HOST等属性。 怎样链接到客户端指定页面 通过 category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="wbyblog" android:host="wangbaiyuan.cn" android:pathPrefix="/home"/> 这一Intent调用Activity不仅能在applink被点击时启动该APP,还支持类似HTTP的GET传值,这就是跳转到网页对应的客户端页面的前提。 比如:王柏元的博客客户端注册了android:scheme="wbyblog" android:host="wangbaiyuan.cn" android:pathPrefix="/post" 的Intent的postActivity,在浏览器打开链接:"wbyblog://wangbaiyuan.cn/post?postid=1234**&title=网页添加链接调用APP与跳转下载网址 "时,将把postid:1234**和title:网页添加链接调用APP与跳转下载网址 传入postActivity;在postActivity中通过下列代码实现获取传入的值。 这样你就可以根据传值显示特定的app页面了 网页端实现已安装客户端则调用、无则下载 在服务端我们需要动态生成当前网页对应的APPLINK,并通过一个悬浮固定的div显示applink,以便醒目吸引用户点击。比如极客人实现的在手机网页、文章页面,生成有该链接的div(电脑不予显示): 其中关键部分为下面的js代码: js实现了让浏览器打开applink从而自动调用你的app(当然前提是你安装了),并在1000m后跳转到app下载页面,其它并不能判断你的手机上是否安装了你的APP,但是展现的效果是一样的!

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

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

技术应用 算法语言 2年前 (2015-12-30) 浏览: 192 评论: 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"。这样在绑定的搜索框中输入文字即可获得和百度一样的搜索提示。 比如: 网上说百度搜索提示还有很多高级用法,比如自定义搜索提示的背景颜色、字体等等。不过极客人试过发现并不支持,你可以自行尝试,成功了欢迎来王柏元的博客交流!

一个炫酷、快速的PC网址导航站-百元导航

一个炫酷、快速的PC网址导航站-百元导航

前端与界面 2年前 (2015-12-29) 浏览: 127 评论: 0

前几天在一个网站上发现了一个炫酷的导航网页,界面美观大气,采用windows8磁贴风格、网站图标采用扁平化设计。后来发现这个导航网页是开放源码的,于是就下载了一份,并做了细微的修改与优化放在我的主机上,取名“百元导航”。之后我就自豪将“百元导航”设置为我所有浏览器的主页。因为我可以自信地告诉你,这个导航网页二次加载速度绝对快于任何导航网站(不服可亲测),包括主流的百度搜索、360导航。话不多说,百元导航的网址:http://wangbaiyuan.cn/daohang,欢迎大家将其设置为你的浏览器主页和提出宝贵意见。 0.3s的极速加载体验 百元导航的首次加载速度在我的15M宽带下、360极速浏览器谷歌内核下测试速度为851ms,二次加载速度260ms,并且支持第二次没有联网都可以访问。之所以能在不到0.3s的速度里完成加载,是因为网页内的所有资源包括CSS、js以及网页自身的html都缓存在本地。二次访问相当于你在本地硬盘上打开一个网页文件。 怎样实现浏览器资源缓存 一般来说,浏览器会将其访问过的一些资源文件进行保存,比如CSS,JS,这些存储在本地磁盘的网页文件称为缓存,在二次访问时,浏览器一般会优先访问本地缓存里面的内容,如果网页中还有些资源文件在缓存里没有找到或者缓存已经过时,才会通过网络连接向服务器上请求下载。这就是我们在上网时发现一个网站首次访问速度会特别慢、第二次就快很多的缘故。 浏览器缓存css、js是默认行为,缓存时间也是不确定的,为了让浏览器缓存所有的文件,甚至包括网页文件自身,并且让浏览器缓存的CSS、JS缓存的时间足够长,服务器可以做一个缓存文件类型设置和缓存超时设置。 在网站根目录或者当前资源文件目录中的htaccess中加入: 表示将扩展名为flv、gif、jpg、jpeg、png、ico、swf、js、css、pdf、eot 的文件缓存过期时间为2592000秒,30天。如下同理,将js、css过期时间设置为10天: 将txt、xml、html过期时间设置为10天   或者在PHP中使用@header函数发出响应头消息告诉浏览器资源过期时间: 上面实现了将放置此代码的PHP文件返回的文件类型是text/css)缓存过期时间为每天北京时间0点,GMT时间(格林尼治时间)16:00。 有自动提示、支持多引擎的搜索框 搜索框的代码是我在原有的导航网站源代码基础上加入的,支持百度、极客搜、谷歌、360、搜狗搜索,并使用了百度开放的百度搜索框提示代码“opensug.js”实现了自动提示功能。具体的实现方法可以参考我的下一篇博文:支持自动提示的多引擎的搜索框。  

让博客插入的视频宽度自适应

让博客插入的视频宽度自适应

前端与界面 2年前 (2015-10-14) 浏览: 124 评论: 0

好久没写技术类博文,这次暂且水一水上次在博客里发了一段个人制作的视频,使用的优酷提供的分享代码:就是一个embed视频标签,无奈优酷提供的代码视频长宽都是死的,600*400的样子,在电脑上还行,在手机上宽度太大直接撑爆了手机屏幕,用户体验很不好,下面的代码就是实现在不同设备自动适应宽度的。实现原理很简单,就是用js(jquery)动态设定视频的长宽度。 请将下面的代码加进主题的functions.php文件中,并且将代码中所有的#main-wrap-left换成显示文章的div的class名或者ID。  

JavaScript实现文章复制加版权信息

JavaScript实现文章复制加版权信息

算法语言 3年前 (2015-03-14) 浏览: 1813 评论: 0

俗话说“天下网站一般抄”,网上的博客文章常常被转载了无数次,虽然写博客没收入,我想写文章也应该是有版权的。尽管博客文章下面常常加了“转载请申请来源”的版权信息,比如我的是“除特别注明外,本站所有文章均为王柏元的博客原创,为了尊重作者的劳动成果,转载请注明出处http://wangbaiyuan.cn”;但是有些拿来主义者就是“懒得抽筋”,直接复制粘贴不加版权申明。 下面的代码是针对懒得抽筋的人设计的,是使用JavaScript实现文章复制时,在复制内容里自动添加版权信息的功能,如果这样还有人把版权信息有意删除,我就无语了。   JavaScript实现文章复制加版权信息 1.后台主题选项加入自定义代码   你可以将上述代码加进网页尾部,如果你的主题没有加入自定义代码的功能,你也可以这样参考下面的方法: 2.functions.php中加入js脚本函数 将以下代码放到模板函数文件中(最后一个“?>”之前):默认在页脚加载代码。  

登录

忘记密码 ?

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

切换登录

注册