7个有用的HTML5学习资源,移动端H5页面注意事项

7个有用的HTML5学习资源

2011/01/18 · HTML5 ·
HTML5

虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用。毫无疑问,几年下来,HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它,但也有许多人还没有接触过HTML5。为了帮助学习这个任务,我们收集了7个有用的HTML5学习资源

  一、HTML5开发者指南

这个文档举例说明了如何编写HTML5文档,为初学者提供了简单和可实践的应用程序,也为高级开发人员提供了更深度的信息。

  二、WHATWG博客

图片 1

  WHATWG博客是网络超文本应用技术工作小组(Web Hypertext Application
Technology Working Group)的博客,就是负责HTML5规格的那群人。

  三、Dive Into HTML 5(钻研HTML5)

图片 2

  Dive Into HTML
5是从HTML5规格和其他标准中精心挑选并详述其特征的一本书。

  四、HTML5医生

图片 3

  HTML5医生发表了许多文章,都是关于HTML5及其语义、及如何正确使用它的。他们也通过”询问医生”收集了很多问题,并在文章中予以回答,所有人都可从中受益。

  五、When can I use

图片 4

  这是一个以表格制成的备忘单形式的单页面,描述了HTML5、CSS3、SVG及其他未来网络技术的特征。

  六、HTML5可视备忘单

图片 5

  这个备忘单就是一个简单的可视网格,包含了所有HTML5标签和相关的属性。

  七、HTML5画廊

图片 6

  HTML5画廊有两个主要目标,一个是展示用HTML5布局的网站,我们可以从中看到别人如何理解HTML5规格和如何应用它。第二是帮助学习HTML5、如何使用HTML5及如何应用HTML5。

原文:webdesignledger  译文:龙南客

 

赞 收藏
评论

图片 7

推荐10个HTML5游戏网站

2011/07/24 · HTML5 ·
HTML5

导读:原文作者Julio
Rivera是一名来自纽约市的创意总监和网页设计师,他是Underworld
Magazines的创始人。以下是全文。

到现在为止,我玩了好几年的在线游戏。我已经看过用Flash和其他软件制作游戏,目前是在用HTML5做游戏,只看到一个完整用CSS3做的游戏。

HTML5正在慢慢成为新的Flash,以前在Flash上很酷的东东,如拖放和下载条等,现在已可以用HTML5做到了。
HTML5的一个很好的资源,Github是一个不错的HTML5社交编程网站。在本文,我推荐10个HTML5的游戏网站,很多游戏开发商正在用HTML5开发新游戏。(相关阅读:2011年最经典的15个
HTML5游戏)

0. html5games.com

图片 8

1. html5games.net

图片 9

图片 10
2. canvasdemos.com

图片 11

3. rocketpack.fi

图片 12

图片 13
4. impactjs.com

图片 14

5. canvasrider.com

图片 15

6. freeciv.net

图片 16

7. gamesforlanguage.com

图片 17

8. yoyogames.com

图片 18

9. mozillalabs.com

图片 19

原文:Julio A
Rivera  译文:敏捷翻译
关关

如需转载,但请注明原文/译文出处、译文超链接和译者等信息,否则视为侵权,谢谢合作!

赞 收藏
评论

图片 7

移动端H5页面注意事项

2017/02/18 · HTML5 ·
移动端

原文出处: Alexee   

1. 单个页面内容不能过多

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信、QQ等。

使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在
设计环节
就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占用
150px,底部占用 110px,共占用了 260px,因此设计稿内容应控制在
1334-260=1074px 的高度内。编写代码时,使用 Chrome
浏览器模拟设备大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta
    标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem
    作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配
    QQ
    的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

图片 21

750*1334 页面示例

2. 标题简短

移动端浏览器导航条宽度有限,简短的标题可以使其展示完整。

3. 二维码图片使用 img 标签引入

二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。应使用 img
标签引入,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

发表评论

电子邮件地址不会被公开。 必填项已用*标注