HTML5eWbApp开发注意事项.docx

HTML5及CSS3新增加功能HTML5新增加的常用标签articlearticle 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。audioaudio 标签定义声音，比如音乐或其他音频流。canvascanvas 标签定义图形，比如图表和其他图像。commandcommand 标签定义命令按钮，比如单选按钮、复选框或按钮。datagriddatagrid 标签定义可选数据的列表。datagrid 作为树列表来显示。datalistdatalist 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。dialogdialog 标签定义对话，比如交谈。detailsdetails 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。headerheader 标签定义 section 或 document 的页眉。navnav 标签定义导航链接的部分。progressprogress 标签运行中的进程。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进程。sectionsection 标签定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。videovideo 标签定义视频，比如电影片段或其他视频流。CSS3新增加的属性名称语法border-imageborder-image： none | image [ number | percentage]{1,4} [ / border-width{1,4} ]? [ stretch | repeat | round ]{0,2}border-radiusborder-radius：none | length{1,4} [ / length{1,4} ]?box-shadowbox-shadow：lengthlengthlengthlength || colorbackground-originbackground-origin： border | padding | content background-clipbackground-clip： border-box | padding-box | content-box | no-clipbackground-sizebackground-size：[ length | percentage | auto ]{1,2} | cover | containopacityopacity：lengthtext-shadowtext-shadow：none | length none | [shadow, ] * shadow或none | color [, color ]*transition?transition: property duration timing-function delay;HTML5 Web App开发注意事项1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” /meta content=”yes” name=”apple-mobile-web-app-capable” /meta content=”black” name=”apple-mobile-web-app-status-bar-style” /meta content=”telephone=no” name=”format-detection” /第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码2、HTML5标签的使用在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。3、