干货:HTML5几个功能开发

离线缓存为HTML5开发移动应用提供了基础

HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量。同时,这个功能算得上是另一个方向的后台“操作记录”,而不占用任何后台资源,减轻设备硬件压力,增加运行流畅性。在线app支持边使用边下载离线缓存,或者不下载离线缓存;而离线app必须是下载完离线缓存才能使用。

css选择器:

(1)标记选择器(简单选择器)

(2)class选择器

.s1{

属性名:属性

}

还有一种有名字的class选择器,如下:

div.s1{

font-size;120px;

}

(3)id选择器

#d1{

font-size:italic;

font-weight:900;

}

除此之外,写第一个HTML5 App

  • 启动Eclipse,然后在菜单“File”下选择“New > Android Project”

  • 在项目根目录下,创建两个新目录:

  • /libs

  • /assets/www

  • 复制phonegap.js(从PhoneGap解压缩后的Android目录中,将解压缩后的带版本号的js文件名修改为phonegap.js)到/assets/www。

  • 复制phonegap.jar(从PhoneGap解压缩后的Android目录中,将解压缩后的带版本号的jar文件名修改为phonegap.jar)到/libs。

  • 复制xml整个目录(从PhoneGap解压缩后的Android目录中,包括一个plugins.xml)到/res。【v1.0 rc2以上】

  • 对Eclipse的src文件夹中的主要Java文件进行少量调整。

  • 将class的继承由Activity改为DroidGap

  • setContentView()替换为super.loadUrl(“file:///android_asset/www/index.html”);

  • 添加import com.phonegap.*;

  • 移除import android.app.Activity;

  • 在这里你可能会遇到Eclipse找不到phonegap-1.0.0.jar的错误。在这种情况下,右键单击/libs文件夹找到Build Paths/ > Configure Build Paths。然后在Libraries标签页中添加phonegap-1.0.0.jar到项目中。如果Eclipse不是很稳定,你需要点击F5刷新一次项目。

  • 最后介绍一些关于HTML5
  • 简单的操作的一些技巧

    重要标记

    (1)链接

    <a href="地址”%20target="打开的窗口" title="提示信息"></a>

    target="_black":在新的窗口中打开链接

    target="_selt":缺省值,在当前窗口中打开

    (2)图片链接

    <a href="地址" border="0"><img src="test.jpg" alt="干货:HTML5几个功能开发"></a>

    border属性值:为了去掉默认边框。

    (3)发邮件

    <a href="mailto:739299362@qq.com?subject=hello">发邮件</a>

    (4)锚点(在同一页面进行跳转)

    <a name="top">跳到这里</a>

    <a href="#top">跳到top</a>

    (5)表格

    <table border="1" width="60%" cellpadding="10" cellspacing="0">

    <tr><td>表格一</td><td>表格二</td></tr>

    <tr><td>BIAOGE</td><td>BIAOGE</td></tr>

    </table>

    表格的对齐

    align属性:水平对齐。 值:left(缺省):偏左/rignt/center

    valign属性:垂直对齐。 值:top/bottom(缺省)/middle

    不规则表格

    colspan属性:合并水平单元格(合并列)

    rowspan属性:合并竖直单元格(合并行)

    表格可以嵌套

    表格的完整定义

    <table>

    <caption>主题</caption> 只能是0个或者1个

    <thead>表头</thead> 只能是0个或者1个

    <tfoot>表脚</tfoot>

    <tbody>表体</tbody>

    </table>

    • 我的微信
    • 这是我的微信扫一扫
    • weinxin
    • 我的微信公众号
    • 我的微信公众号扫一扫
    • weinxin
    avatar

    发表评论

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: