HTML&HTML5

HTML和HTML5的一些新闻资讯,技术总结,框架设计等信息,也包含自己的一些学习笔记

.NET正则表达式提取HTML元素所有属性的方法

MitchellChu 2013-06-14 .NET技术 HTML&HTML5

  在各类文本处理中,往往要涉及到在文本中提取数据、替换数据的操作,这种情况下,我们一般使用正则表达式系统来简化我们的处理(一般没谁会自己写吧?写了效率也不一定高啊)。同样,在涉及到HTML的一些处理中,个人也非常喜欢使用正则表达式系统来进行HTML元素内容的替换、提取等操作,HTML也是文本嘛。   随着使用的频次增多,对正则表达式系统的了解自然也就不断深入,在后来的一次,突然发现,正则表达式原来可以提取HTML元素(标签)中的所有属性,甚至 可以直接将HTML解析成DOM树。面对突如其来的强大功能,一时间还真有些不知所措,要知道,在之前,解析HTML咱是靠第三方工具的。正则表达式最多也就是提取下特定的字串内容,替换下内容,像对于提取HTML元素中多个属性的方法想都没想能用正则表达式,而是毫不犹豫的将元素提取出来后老老实实的去做字串处理,要不就是使用第三方的插件来完成这无比艰巨的工作。现在发现正则表达式竟然可以如此简单的完成,太惊喜了!   为了展现正则表达式的强大功能,让我们赶紧找个例子来试试吧——用正则表达式提取HTML标签(元素)中所有的属性。   输入内容:任意HTML源码   要求:提取指定元素的所有属性   输出内容:指定HTML元素的所有属性   来看看正则表达式是怎么完成的,代码: // 注意:本例仅为测试用,投入到生产环境中需要根据需求进行调整 // 测试结果相当的不理想:解析64KB数据,10个匹配项,耗时99s public static IList<IDictionary<string,string>> ParseHtml(string html) { IList<IDictionary<string, string>> tags = new List<IDictionary<string, string>>(); //MitchellChu .NET Blog // 首先定义下正则表达式 Regex regexParser = new Regex("<img(?:\\s*([\\w\\-]+)(?:\\s*=\\s*(?<qouta>['\"]?)([^'\"]*)\\k<qouta>)?\\s*)*>", RegexOptions.IgnoreCase); // 这里注意 ...

Javascript开源前端框架/库汇总

MitchellChu 2013-06-01 HTML&HTML5 Javascript(s) 编程语言

  由于Web的富客户端界面交互日趋复杂,javascript很多老牌的开源框架/库和众多新生的开源框架/库都不断的推出越来越强劲的产品,而恰好现在又正处于HTML4到HTML5和CSS2到CSS3的转移当口,更加加剧了这种框架和库的更新迭代,可以说,当前Javascript的各种开源库和开源框架正处于百家争鸣的阶段。那么身处这个阶段的开发人员自然也不能错过如此好的学习机会。下面就是当前比较流行的一些框架,并对其进行分类[1]。 封装型 典型代表:jQuery、MooTools、Tangram jQuery 和 MooTools都是老牌的开源框架,Tangram是国内百度提供的框架。 特点:只针对“封装原生API”这一块,有插件机制,如jQuery UI组件库。但通常不提供任何架构方面的帮助。更多的是和架构类的轻量框架搭配使用 传统型 典型代表:Dojo、YUI、Closure Library、ExtJS、KISSY、NEJ、JX YUI 和Closure Library分别为Yahoo和Google提供,ExtJS在富客户端的表现比较出色,但现在越来越臃肿。KISSY为国内阿里的框架,NEJ为网易发布的,JX是腾讯提供的框架。 特点:支付宝玉伯被比喻为“大教堂风格”。稳定,覆盖广,代码风格和质量一致,文档丰富详细,更新稳重、缓慢,具有排他性,一旦选择很难替换,通常带有UI组件库 开放型 典型代表:Component、Arale、Oz Component为Node.js(一个非常有名的服务端)开发者中的TJ Holowaychuck牵头开发的框架,Arale为阿里系,Oz为豆瓣发布。 特点:被比喻为“集市风格”。专注于提供开放的基础架构,使用者可以灵活书写模块或整合第三方的库,以适应不同类型的架构需求,解耦性好。 单页应用型 典型代表:Backbone.js、Ember.js、AngularJS、Knockout.js 特点:服务器请求数少、UI反应快、用户体验流畅,但对模式、View处理等具体实现方式的观点不一。一些传统型框架如Dojo、YUI、ExtJS也都开始引入MVC单页应用架构。 其他值得关注 Flight:Twitter开源前端框架,介于单页应用型和开放型之间,核心是事件驱动的、基于DOM的组件机制   [1] 参考的是程序员杂志开源前段框架纵横谈:http://www.programmer.com.cn/15552/ [2]Twitter还有很多开源的项目,所有的开源项目被放在Twitter Open Source上

强制IE浏览器或WebBrowser控件使用指定版本显示网页

MitchellChu 2013-05-30 其他技术 HTML&HTML5 网络锁事

  自从装了IE10之后,就发现好些个网站显示都不是那么的正常,网站上有些功能竟然还会出现一些意想不到的BUG——本来就是针对IE开发的,现在IE下竟然用不起来了,让用户情何以堪?但是就为少量用户使用的系统去大动干戈的调整功能,这实在是让人头疼!在经过一番折腾之后,竟然找到一个非常M$的方法来解决 —— 强制高版本的IE浏览器用低地版本模式显示网页。   就是直接让IE10默认以指定的IE版本的浏览器模式来运行,并用这个指定的版本来进行解析页面,在上一篇定义文档兼容性的文章中,我们已经其实知道了浏览器模式和文档模式的区别,并且我们通过修改X-UA-Compatible来修改了浏览器的文档模式。这个方法本来能够解决我们当下的问题,但实际上,我们不想让整个网站用IE8或者IE7来解析,我们仅是想针对少数的几个人在核心的功能上使用IE8来处理。当然,我们还是能够使用页面上添加meta元素的 —— 但在这里,我们寻求到另外的一个解决方案:由于使用核心功能的人群可控,并且数量少。因此直接控制IE,让高版本的浏览器(版本>=8)按照指定的低版本模式进行解析。方法是直接调整注册表项: HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION 或者 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION 在FEATURE_BROWSER_EMULATION这个注册表项下添加一个DWORD的值,名称为:iexplore.exe值为十进制的8888或者8000。保存后,重新打开IE浏览器(IE8或更高),你就会发现,浏览器此时使用的是IE8模式在进行浏览。   这个方法本来是用在解决那些使用了IE WebBrowser 控件的应用程序在需要特定的浏览器版本支持下的。既然如此,那么让我们更进一步的了解下,在我们的程序中如果使用了IE WebBrowser之后,应该如何指定浏览器版本。其实,如果有心,你可以打开上面两个注册表项的任意一个,说不定就能看到上面已经有一些值了,这些都是已经指定特定浏览器版本的程序。 比如我这里就有下面这些: devenv.exe是VS2010的应用程序,在这里我们可以看到,M$强制要求devenv.exe中使用的浏览器版本为IE9。既然他都这么用,自然而然,我们也应该能从中找到解决问题的方法了。如果你在应用程序:SomeApplication.exe中使用了IE WebBrowser的控件,那么你如果想在SomeApplication.exe这个程序中的WebBrowser控件以某一个指定的版本的浏览器进行解析页面,你就可以在上述的那个注册表项中加入你的程序了。比如你要指定为IE8运行,那么你只要新建一个DWORD值,名称为SomeApplication.exe,值为:8888即可。   到此我们已经会为浏览器和WebBrowser控件指定特定的浏览器运行版本了,但可能你会发现,后面的数值有那么一些不好理解,那我要使用IE怎么办?同样IE8怎么会有8000和8888这样的数值呢,个表示什么?如果你也有疑问,那么请看下表吧,罗列出了常用的数值对照说明表:   值 说明 10001 (0x2711) Internet Explorer 10。网页以IE 10的标准模式展现,页面!DOCTYPE无效 ...

定义文档兼容性,让IE按指定的版本解析我们的页面

MitchellChu 2013-05-29 其他技术 HTML&HTML5

   作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺候的,于是不得不学习各种Hack技术来满足各种浏览器之间的兼容。在这种痛苦中不断的挣扎,MS可能也实在是看不下去了,于是在IE8开始,微软引入了文档兼容性,而这,终于可以让前端的开发人员稍微能够喘口气。   文档兼容性是对 Microsoft Internet Explorer 6 中引入的兼容性模式的扩展,使您可以选择 Internet Explorer 用于显示网页的特定呈现模式。——微软的官方文档。   在这里先介绍两个概念:浏览器模式(browser mode)和文档模式(document mode)。这两个模式的引入,让我们在IE浏览器上能够简单的处理兼容性问题,当然,其实也并不简单,先看看这两个概念的定义:   浏览器模式(browser mode):于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,这样就可以向不同的浏览器返回不同的页面内容。   默认情况下,IE8的浏览器模式为IE8。用户可以通过单击地址栏旁边的兼容性视图按钮来手动切换到不同的浏览器模式。在IE8中,IE8兼容性视图会以IE7文档模式来显示网页,同时会向服务器发送IE7的用户代理字符串。   文档模式(document mode):用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动切换到相应的文档模式。   简而言之:浏览器模式的改变,能够改变请求中User Agent的值,让服务器获取后,能够按照UA的值进行对应处理(如果服务器上有这个处理功能)。而文档模式的改变只反映在本地的浏览器解析HTML上,对客户端显示会有影响,而对服务器透明。同时,修改浏览器模式会影响文档模式,反之却不成立。   使用文档兼容性的方法比较容易,就是在我们要反馈给客户端的HTML代码中的head中添加一个meta元素,用来描述当前的文档需要使用何种浏览器版本来解释当前文档,代码类似下面这样: <html> <head> <!-- Mimic Internet Explorer 7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <title>测试模拟IE7浏览模式</title> </head> <body> <!--这里是你网站的内容--> </body> </html> X-UA-compatible在使用中,大小写不敏感,如果你需要客户端模拟其他的浏览器版本来解析文档你可以设置为对应的版本即可,通常的设置有如下几种:   X-UA-Compatible值 说明 IE=5 ...

html5shiv,让IE9以下的IE支持HTML5元素

MitchellChu 2013-04-26 其他技术 HTML&HTML5 Javascript(s)

随着HTML5日渐流行,很多时候我们会在页面中使用HTML5元素,然而悲催的是,IE的大部分版本(IE9以前)对这些HTML5元素表现出来的是不知所措的视而不见,让我们辛苦布局好的页面在IE下显得是浆糊一桶。为了让这不同的IE版本之间能"认识"HTML5元素,html5shiv出现了! html5shiv的最大特点是让那些个不认HTML5的IE浏览器承认HTML5元素,并按照最基本的处理方式处理HTML5元素——块化(display:block)。

移动开发开源工具——PhoneGap

MitchellChu 2012-11-22 其他技术 HTML&HTML5 Javascript(s)

粗略的介绍下PhoneGap,放在这里。

Referer与noreferrer

MitchellChu 2012-11-12 HTML&HTML5 Javascript(s)

Referer和noreferer

列表中当li漂浮之后的居中问题

MitchellChu 2012-11-05 HTML&HTML5 CSS&CSS3

本文展示处理li浮动(float:left)时,元素一行居中显示的方法

HTML5 Boilerplate流行的前端模板

MitchellChu 2012-09-06 其他技术 HTML&HTML5

当下流行的Web前端开发模板项目HTML5 Boilerplate介绍。

16个HTML5游戏引擎介绍

MitchellChu 2012-08-22 HTML&HTML5

16个不错的HTML5游戏引擎.

FCKEditor更名CKEditor,开源项目的商业之路

MitchellChu 2012-06-29 HTML&HTML5

FCKEditor改名CKEditor,并阉割CKEditor的功能,独立成立CKFinder项目,意味着FCKEditor从此走上了商业化的道路。同样,TinyMCE也紧跟其后。总之,HTML Editor世界,已经没有免费的午餐了,接下来,就让收费来的更猛烈些吧.

在网站页面中嵌入QQ,MSN,Skype,旺旺的在线状态

MitchellChu 2012-06-07 其他技术 HTML&HTML5 创业途中

怎么获取到QQ,MSN,Skype,阿里旺旺和淘宝旺旺的在线代码?这里介绍了获取的方法,并且提供了各个IM的官方网站生成工具地址。

资料:ASCII编码表

MitchellChu 2012-04-02 其他技术 HTML&HTML5

ASCII码对照表.

w3c 关于Element属性(Attribute)的表述翻译

MitchellChu 2012-04-02 其他技术 HTML&HTML5

W3C文档中对Element 的Attribute描述的翻译。个人随便翻译,仅供参考!

[转]7 Useful Resources to Help You Learn HTML5(7个有用的HTML5学习资源)

MitchellChu 2011-06-21 HTML&HTML5

7 Useful Resources to Help You Learn HTML5

关于博主

  一枚成分复杂的网络IT分子,常年游弋于电子商务,属于互联网行业分类中的杂牌军。当前正在待业中...