整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5技术不知从何学起,那这12个网站你值得拥有

论你是专门做研发的还是业余兴趣,学习HTML5都是一个很好的自我增值。只要对HTML5充满兴趣,学习并不是一件难事。网上有很多让人眼花缭乱的HTML5培训课程,免费的课程不够系统,收费的课程水太深,一不小心就会被坑。如果大家想系统地学习HTML5技术,小编给大家推荐几个网站。

HTML5基础知识

W3C

全称“W3School”,简直是学习网站中的“战斗机”,每一节都有学生时代老师般的“板书”,丰富的实例展示,还有工具书、小测验等提升工具,私教般的存在!

Dive into HTML5

这个网站几乎都是关于HTML5的文档,讲一些很基础的知识,简洁清新。如果想学习HTML5的同时提高英语阅读能力,这个网站是极好的。类似的英文网站还有woorkup。

如果英语不好,小编只能帮你到这了。

h5之家

除了丰富且与时俱进的教程,这个网站还有很多关于HTML5业界的独特见解,闲暇时候看看,拓展知识又能在人前装X,这样的网站哪里找!


HTML5案例网站

HTML5xCSS3

拥有超丰富的HTML5案例和模板,随便点开一个案例都好看到让人震惊。里面的全部都是HTML5响应式网站哟!

360html5基地

350旗下的HTML5作品展示网站,大部分是HTML5游戏展示,可爱有趣。比如打开一个割绳子的HTML5展示:

HTML5 games

相对360来说更丰富的HTML5游戏资源,玩着玩着技能激发设计灵感呢!


HTML5技术网站

whatwg

网络超文本应用技术工作小组(Web Hypertext Application Technology Working Group)的博客,里面一些文章能让人受益匪浅。

HTML5医生

一些关于html5语义及如何使用它们的文章,医生会定时回答网友们的问题。

HTML5中国

一个真的能手把手教你6小时做一个HTML5坦克大战游戏的网站,还有各类HTML5的资讯、沟通交流论坛等。

HTML5技术网

一个充满干货的网站!你想要的不想要的,这里全都有!


HTML5测试网站

HTMLDemos

测试HTML5标签在各浏览器的兼容性,还能查看各种HTML5的标准Demo演示。

html5test

能为浏览器对HTML5的兼容性打分,可以知道你当前的浏览器对HTML5的支持情况如何,各种标签和组件的支持情况。

当然,光看网站有的小伙伴会觉得没有方向感,不妨结合教科书来个系统的学习。入门级必备两本教材《Head first HTML&CSS》和《JavaScript DOM编程艺术》,看书再结合网站学习,相信不久你就会成为HTML5大神啦!

如果你学习HTML5技术不是出于兴趣,而是出于某些“大家都懂的”原因,其实不必苦苦拿着教材钻研,我们可以从能最快捷地解决问题出发。比如需要制作微信HTML5页面的,可以用网上如易企秀、maka这类的免费平台,如果是制作HTML5网站,不妨选择建站宝盒这种自助建站工具,完全不涉及打码,每一个互联网人都能用它制作出炫酷多彩的网站。http://www.iisp.com/design/?s=yuqiuping

不积跬步,无以至千里。千里之行,始于足下。从现在开始,每天给自己20分钟了解HTML5技术,你会发现其实编程也挺有趣的。

日微软在官网终于放出了Chromium内核打造的新款Edge浏览器,感兴趣的朋友可以“”进行下载。

此前,有关微软将使用Chrome浏览器内核打造全新Edge浏览器的新闻就已铺天盖地,本次终于放出下载版可见微软已经确认其能够给大众开放来使用了,这也就意味着离正式版已经不远。根据外媒消息,新款Edge浏览器可能会随Windows 10 20H1更新直接登陆Windows 10系统,并取代现有的Edge内核老款Edge浏览器。

自Windows 10系统发布以来,其市场占有率不断攀升,已经达到了53%。但是Edge浏览器作为Windows 10系统默认浏览器,其在大多数时候扮演的角色是其它浏览器的下载工具,一旦用户下载完自己习惯使用的浏览器,那么Edge浏览器的登场几率就非常低了,这使得Edge浏览器的地位和处境非常尴尬。

基于Chromium内核打造的新款Edge浏览器能否扭转这种局面呢?看过这篇之后,我想每个人心中都会有一个明确的答案。

·Chromium内核Edge浏览器简介

微软在官网下载页面放出了新款Edge浏览器的三个版本:Beta、Dev和Canary,三者有何区别我们会在后面的浏览器信息部分进行详细介绍。本次笔者下载了Canary版本,之后的文章里,我们将新款Edge浏览器统一称为Edge Canary,但是要注意,这并不是新款Edge浏览器的真正命名。

首先来看看Edge Canary浏览器的界面,如下:

第一次打开Edge Canary

通过安装包安装好之后,Edge Canary会自动打开,并进入上图所示界面。用户可以在这里执行两个操作:一是设置浏览器默认页面风格;二是执行其它浏览器数据的导入,且导入速度非常快。

欢迎页面右上角也可以随时调整页面风格

如果没有在开始界面设置页面风格也不用担心,后续可以通过空白页右上角的“小齿轮”图标的下拉菜单来进行调整。微软给出了三种默认风格,包括聚焦、启示和信息,另外还可以根据自身喜好进行自定义,不过现在这个功能还不是太过完善,能够设置的选项就是热门网站、每日一图(相当于浏览器的壁纸)和显示提要三项。

“启示”风格页面

“信息”风格页面

不同风格的默认界面所展示的信息不同,聚焦页面没有壁纸,背景为白色或黑色,中间为必应搜索框,下方为常用网站标签;启示风格与聚焦风格页面内容一样,只是多了每日一图,而且必应搜索框和常用网站标签上下分开;信息风格页面多了MicroSoft资讯页,可以看作是新闻聚合页。

可以通过欢迎页面了解浏览器特性

如果想要深入了解Edge Canary特性的话,可以通过浏览器的欢迎页面查看各项特性演示。

与Chrome商店庞大的插件群相比,Edge Canary的插件数量总共128款

从扩展界面进入微软插件商店

既然是基于Chrome浏览器内核打造,那么Edge Canary自然支持插件。目前微软的插件商店已经上线,通过Edge Canary右上角的菜单栏“扩展”选项进入扩展界面,之后再点击左上角的“从Microsoft Store获取扩展”文字链来进入插件商店。

进入Chrome应用商店的话,中国用户需要通过科学上网的方式来实现,微软插件商店目前可以正常进入。不过与Chrome插件数量对比的话,微软商店中的插件数量并不多,满打满算只有128款。不过我大概浏览了一遍,常用的插件都有,比如Adblock Plus、McAfee WebAdvisor等。另外,微软插件商店的响应速度非常快,网络质量极佳。

插件位置与Chrome一样,都在右上角账号左侧

插件安装好之后,会跟Chrome浏览器一样出现在右上角账户名左侧位置。

插件管理界面与Chrome不同

Chrome浏览器插件管理界面

不过插件管理界面与Chrome浏览器的布局不同,Edge Canary采用左右栏布局,Chrome采用上下布局,不过基本功能都一样。

可以设置黑色皮肤

Edge Canary默认皮肤为浅色,可以通过设置选项调整为黑色,笔者个人更喜欢后者。

下载器页面UI

下载器UI界面与Chrome相比也是大同小异。不过从实际体验来看,Edge Canary下载器目前不如Chrome好用,同样的软件Edge Canary下载可能会出错,但Chrome浏览器则可以跑满网速。

从整个界面设计来看,Edge Canary就像是Chrome浏览器的翻版,整体布局、菜单选项、收藏夹模式等都与Chrome相差不大,一眼就能看出其与Chrome的关系。

不过Edge Canary在性能方面与Chrome是否也相差不大呢?下面我们进入测试环节来看看具体的结果究竟如何?

·测试说明

1.本次尽量找一些不涉及这五款浏览器的测试标准,像IE系的测试,谷歌系的测试,Mozilla系的测试能PASS就PSAA掉了。JetStream 2这样的苹果系测试与这些浏览器没有什么交集,所以被引入了进来。

2.除了HTML5、ARES-6、JavaScript脚本、操作响应速度这几项基准性能测试之外,我们还使用B站超级弹幕视频:【炮姐/AMV】我永远都会守护在你的身边!(B站ID:av810872)进行了内存、CPU、GPU峰值占用情况的测试。

3.本次测试各浏览器均为2019年9月21日当期最新版本号,后续更新成绩如有变动请按实际测试为准。

·测试项目与相关说明

JetStream 2:JavaScript脚本测试;

JetStream 2细致的JavaScript脚本测试

Speedometer:网页操作响应速度测试;

Speedometer模拟操作响应速度测试

MotionMark:图形渲染测试;

MotionMark的高负载图形渲染测试

HTML5:HTML5兼容性综合测试。

详细的HTML5测试项目

·测试平台硬件信息:

处理器:英特尔酷睿i7 8086K

内存:16GB×2 DDR4-3200MHz内存

硬盘:英特尔760P 1TB固态硬盘

显卡:公版NVIDIA GeForce GTX 1070

操作系统:Windows 10 1903

·五款浏览器基本信息

本次测试主角是基于Chromium打造的新款Edge浏览器,采用了与Chrome浏览器相同的Webkit内核。新款浏览器像Chrome一样提供了三种不同激进程度的版本,分别为Beta版,Dev版以及Canary(金丝雀)版,如下:

Beta、Dev、Canary三种通道

Canary版本最为激进,几乎每天都会进行更新,且不会提供更新日志,因此有可能会遇到较为严重的BUG;

Dev版本功能激进,但可用性较好,对于普通用户来说,如果想要尝鲜,又不想太过保守,Dev版算是首选,当然动手能力强的可以选择Canary版本;

Beta版自然是最为保守的版本了,一般来说基本相当于正式版,不会有大的BUG,比现有正式版会略微超前一点。

本次我们选择了最为激进的Edge Canary版本进行测试,另外还选择了Chrome、Edge、Opera、FireFox四款浏览器做参照。下面是这五款浏览器的基本信息:

5款浏览器基本信息一览

·性能测试

接下来看看四项基准性能测试情况,具体如下:

5款浏览器基准性能测试

可以看到,基于Chromium打造的Edge Canary与Chrome浏览器各项性能相差不大,二者总分也极为相近。

此外,五款浏览器中,FireFox综合性能最强,总分达到1409.057分;Opera浏览器在图形性能方面吃了不少亏,总分基本与Chrome持平。

而一贯被用户轻视的Edge内核Edge浏览器让人大跌眼镜,虽然操作响应速度表现极差,但其它三项测试表现极其不错,总分甚至超过了Chrome,位列本次测试的第二名。

从测试也可以看出,其实Windows 10系统自带的老款Edge浏览器在性能上并没有明显短板,甚至还比别家浏览器要更好一些,但是操作响应速度这种直接关系到用户体验的单项测试表现不佳,直接反映出用户为什么不愿意用Edge浏览器的原因。

基准测试得分明确之后,再来看看内存、CPU、GPU占用情况。我们选择了B站经典视频《【炮姐/AMV】我永远都会守护在你的身边!》来进行测试,下图显示了该视频峰值弹幕量,而其总弹幕量已经超过百万。因此能够非常明显的影响到浏览器的内存占用情况。

峰值内存占用情况

以下是五款浏览器默认内存占用、峰值内存占用、峰值CPU百分比、峰值GPU百分比的测试情况汇总:

5款浏览器硬件占用情况对比

总体来说,Edge Canary表现与Chrome相差不大,但是峰值内存、CPU、GPU占用率都比Chrome要略高一些,同时比老款Edge浏览器要略低一些。

五款浏览器中,最吃内存的是FireFox,默认占用与峰值占用都明显高于其它四款,所以内存小的话用起来会比较捉急。另外其对GPU加速的依赖度也较高。

Opera浏览器比较依赖GPU加速,峰值GPU占比达25.5%,另外Edge Canary也比较依赖GPU加速,峰值达到23.2%,

此外,新老Edge浏览器的最明显不同就是在GPU加速方面,老款Edge浏览器不太依赖GPU,峰值占用率也仅为6.1%。

·Edge Canary使用感受

作为一个纯粹的10年以上Chrome浏览器老用户,我在打开Edge Canary的那一刻,就深刻感受到了其与Chrome浏览器之间的联系。标签页、地址栏、收藏栏的布局一模一样,只是在图标的UI设计上略有不同。

本篇文章就是使用Edge Canary浏览器完成,虽然在一些细节方面与Chrome有一些细微差异,但总体就像是在使用Chrome浏览器一样。另外虽然是Canary版本,但至少我下到的这一版本在使用过程中没有出现任何BUG。在兼容性、页面响应速度、视频流媒体播放、网页图形渲染方面没有感觉到卡顿。

就目前情况来看,Chromium内核打造的新款Edge浏览器完全可以在未来Windows的更新中取代掉现有的Edge内核Edge浏览器,在性能基本持平的情况下,Edge Canary对操作响应速度的提升非常大,足以带给用户优于老款Edge浏览器的使用体验。

【ZOL客户端下载】看最新科技资讯,APP市场搜索“中关村在线”,客户端阅读体验更好。(7276250)

目前PC浏览器选择众多的情况下,笔者决定对于目前的一些产品进行一次对比性测试,从而来探寻目前谁才是最好的PC浏览器。对此,笔者选取了目前市场中用户常用的四款浏览器产品的进行对比评测,它们分别为:谷歌Chrome浏览器、UC浏览器、猎豹安全浏览器、傲游云浏览器。所测试的版本均为这些公司官网中所提供的最新版本,其中Chrome浏览器为64位版,其它三款浏览器为32位版。

这次的测试中,笔者将会对这四款浏览器在用户干扰情况、系统内存占用、HTML5性能、网页渲染速度的情况分别展开针对性测试,每个测试项第一名将会获得5分,第二名为3分,第三名2分,第四名为1分。最终四项分数相加,得分最高者就是目前PC浏览器中最好的那个。

▌用户干扰情况测试

但凡有一定PC电脑使用经验的用户便会知道,由于Windows系统自身的开放性以及国内软件厂商对于软件设定上的无节制,用户在使用的过程中很有可能遇到非自主选择安装、被软件捆绑干扰的情况。所以,笔者在评测的第一项专门针对这一问题的进行了测试。

在浏览器的安装界面中,Chrome、猎豹安全浏览器、UC浏览器除了提供了设置为默认浏览器的建议外,均未向用户进行其他捆绑应用的陷阱性安装。不过,猎豹浏览器官网中会在下载页面中提供猎豹+金山毒霸套装的下载推荐。

在安装过程中最会对用户产生干扰的是傲游云浏览器,它在安装界面环节就默认勾选了名为“驱动人生”的软件的安装项,而这一软件与浏览器本身的关联性微乎其微。安装完成后,“驱动人生”软件的快捷方式也会随着傲游云浏览器一并添加到用户的桌面当中来。这无疑间接影响了用户在安装软件时的心情,对用户的软件安装进行了引导,同时还占用了用户电脑的空间。另外,傲游云浏览器还会在用户浏览的底栏中加入哈哈MX的滚动链接,对于一般用户而言,即便对其推送的内容不感兴趣,多数也只能默许接受。

笔者还发现,猎豹浏览器在使用的过程中存在着无休止提示用户将其设置为系统默认浏览器的问题。如上图所示,无论用户是点击取消还是关闭的“x”,用户在重新进入猎豹浏览器的后在浏览器界面中,仍会无休止的出现这一提示选项。这样的做法干扰了用户在不同浏览器中的选择权,并且在无形中霸占了用户的屏幕。

▌用户干扰情况测试总结:

Chorme及UC无疑是本项测试中最为用户着想的浏览器,其次则是不停提示你选它为“正宫”的猎豹安全浏览器,之后是存在捆绑安装嫌疑的傲游云浏览器。所以本项测试中,Chrome与UC浏览器均获得5分,猎豹安全浏览器获得2分,傲游云浏览器获得1分。

▌系统内存占用测试

本次测试的四款产品中,最新的64位Chrome浏览器的发布一大好处就是可以让目前已经普及的64位系统可以更省内存的来运行它,UC浏览器2.0中也表示自己搭载的最新M35内核可以有效降低CPU运转负荷,完美释放硬件潜能。猎豹浏览器也在更新日志中提到,最新版本中新增内存智能优化,物理内存使用最多降低90%。那么,这些产品的内存占用率究竟如何呢?

笔者将所有浏览器均保持在开启后的默认主界面状态中,通过Windows8系统中的任务管理器中的监测数据不难发现,尽管Chrome已经升级为了与系统相符的64版,但依旧占用了89.4MB的系统内存。同样在更新日志中标明新增内存智能优化的猎豹浏览器的内存占用也高达了66.1MB。UC浏览器占用内存为33.3MB,傲游为22.44MB。

从上面的对比图表中更能清晰的发现,Chrome和猎豹安全浏览器在系统内存占用上劣势明显,Chrome内存占用约为UC浏览器的3倍、傲游云浏览器的4倍之多。猎豹安全浏览器的内存占用约为UC浏览器的2倍、傲游云浏览器的3倍。而更大的内存占用无疑将会影响电脑的功耗,从而影响笔记本电脑在使用电池情况下的续航时间,近日有国外博主在提供笔记本续航秘籍时就建议用户尽量不要使用Chrome浏览器,而通过本次测试也再次验证了,在笔记本外出续航状态需要使用浏览器时,Chrome、猎豹安全浏览器并不是很好的选择。

▌系统内存占用测试总结:

本项测试中傲游云浏览器明显表现最佳,比它稍微占用的多一些的为UC浏览器。而猎豹安全浏览器和Chrome浏览器明显表现不佳。所以本项测试中,傲游云浏览器5分、UC浏览器3分、猎豹安全浏览器2分、Chrome浏览器1分。

▌HTML5性能测试

HTML5代表了未来的一大趋势,大量IT巨头均长期关注了这一技术,谷歌Chrome更是专门推出ChromeOS的操作系统来押注未来网页技术的发展将会直接影响到电脑操作系统的形态。本项中也专门针对这一能力对四款浏览器进行了测试。

从HTML5test网站的跑分来看,尽管Chrome浏览器背后的谷歌称的上是这方面的主导者,但是它的跑分成绩却处在了第二名,落后于傲游云浏览器测得的515分。UC浏览器的跑分处在第三名的位置上,得分为507分。猎豹安全浏览器相比较于这三者而言表现最不佳,为505分。

不过,笔者还对这四款浏览器在运行HTML5应用时的实际体验进行了测试,可能由于这四款产品的得分均达到了500以上,所以在网页应用运行时的差别很难感受的到。无论是运行HTML5的3D建筑应用演示案例,还是使用像FindUI这样的在线产品设计应用时,四款浏览器在相应速度、使用流畅性上并无区别。

▌HTML5性能测试总结:

尽管四款浏览器在跑分上有细微差别,但在实体体验中的差别几乎为零。不过,我们还是要依据最终得分来排出名次,所以本项测试中的最终得分为,傲游云浏览器获得了5分,Chrome浏览器3分,UC浏览器2分,猎豹安全浏览器1分。

▌网页渲染速度测试:

说到什么浏览器最快,很多人会想到谷歌的Chrome,毕竟这款浏览器一直以“快”字作为主打,无论是其首发广告,还是在日后的相关硬件产品的宣传中,都在潜移默化的告诉用户自己才是最快的产品。而真正的测试结果又如何呢?笔者在本项测试中将四款浏览器在相同网速下通过专用测速网站http://nontroppo.org/timer/中进行测试,最终得到打开完整的网页所用的平均速度。

从最终的测试成绩中可以看出,Chrome浏览器在本次的测试中非但不是最快的,反而还是最慢的。当其他浏览器的速度均达到了300kb/s以上的水平时,Chrome仅为288kb/s,明显落后于其他产品。UC浏览器和猎豹安全浏览器还均达到了350kb/s以上的水平,UC浏览器的369kb/s的平均速度更是明显领先于其他产品。傲游云浏览器的表现则中规中矩,平均速度为320kb/s。

▌网页渲染速度测试总结:

相同网速和网页的情况下,第一名UC浏览器加载总用时为1508ms,最后一名Chrome则为1930ms。猎豹安全浏览器和傲游浏览器分别为1590ms与1740ms。本项测试中,第一名UC浏览器获得5分,猎豹安全浏览器为3分,傲游云浏览器2分,Chrome浏览器仅为1分。

▌总结:

综合本次涉及的用户干扰情况、系统内存占用、HTML5性能、网页渲染速度四项测试中的综合得分来看,Chrome浏览器10分、UC浏览器15分、猎豹安全浏览器8分、傲游云浏览器13分。

可见,UC浏览器无疑是本次浏览器综合测试中佼佼者,它在使用中几乎无国内软件常见的用户干扰行为,同时还提供了最快的网页渲染速度,并且还有着不错的系统内存优化能力以及HTML5性能。

文/魏德龄

关注IT耳朵微信号erduomi以更全面的视角来观察互联网和科技