移动端HTML5开发基础知识
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第 19 页
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第 20 页
CSS基础
CSS 指层叠样式表 (Cascading Style Sheets) 层叠样式表是一种用来表现HTML或XML等文件样式的计算机
典型的项目例子： 《移动验收》， 《移动形象进度》等
第5页
《移动验收》主页面
第6页
开发移动应用程序的三种方式：原生、HTML5或 混合
HTML5应用程序：HTML5应用程序使用标准的Web技术 ，通常是HTML5、JavaScript和CSS。这种只编写一次、 可到处运行的移动开发方法构建的跨平台移动应用程序可 以在多个设备上运行。开发人员使用HTML5和JavaScript 能构建功能复杂的应用程序。
移动端系统（如安卓，IOS, WP等）都能支持HTML5 。 支持HTML5的浏览器包括: Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷 歌浏览器），Safari，Opera等； 国内的遨游浏览器（Maxthon），以及基于IE或Chromium （Chrome的工程版或称实验版）所推出的360浏览器、搜 狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器。
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第1页
HTwk.baidu.comL5简介
HTML5是HTML(超文本标记语言)的第五次重大修改. HTML5草案的前身名为 Web Applications 1.0，于2004
年被提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1月22日公布。 2013年5月6日， HTML 5.1正式草案公布。该规范定义了 第五次重大版本
第2页
HTML5简介
HTML5 仍处于完善之中。然而，大部分移动端系统和现代 浏览器都已经支持HTML5 。
第 15 页
HTML文档
HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示
出它们。浏览器不会显示 HTML 标签，而是使用标签来解释 页面的内容
第 16 页
例子解释
<html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落
第3页
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第4页
开发移动应用程序的三种方式：原生、HTML5或 混合
原生应用程序：原生应用程序是某一个移动平台（比如iOS 或安卓）所特有的，使用相应平台支持的开发工具和语言 （比如iOS平台支持Xcode和Objective-C，安卓平台支持 Eclipse和Java）。原生应用程序看起来（外观）和运行起 来（性能）是最佳的。
第 13 页
HTML基础
HTML是HyperText Markup Language(超文本标记语言)的缩 写，是构成所有所有网页基本结构的文本及标签组合。
HTML 不是一种编程语言，而是一种标记语言 (markup language)，使用标记标签来描述网页
第 14 页
HTML标签
HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
耗电量更低。 方便升级，打开即可使用最新版本，免去重新下载升级包的麻
烦，使用过程中就直接更新了离线缓存。
第 12 页
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
典型的项目例子： 《围住神经猫》等社交小游戏
第7页
《围住神经猫》社交小游戏
第8页
开发移动应用程序的三种方式：原生、HTML5或 混合
混合应用程序：混合应用程序让开发人员可以把HTML5应用 程序嵌入到一个原生容器里面，集原生应用程序和HTML5应 用程序的优点（及缺点）于一体。
典型的项目例子： 《移动审批》
第 17 页
例子解释
运行结果：
第 18 页
HTML5新增特性
新的文档类型 (New Doctype) 脚本和链接无需type 语义Header和Footer input新增了部分属性 Audio 支持 Video 支持 Progress 进度条 Canvas标签
第9页
《移动审批》主页面
第 10 页
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第 11 页
HTML5使用上的优势
更低的开发及维护成本； 使页面变得更小，减少了用户不必要的支出；而且性能更好、
语言。解决了内容与表现分离的问题，提高了工作效率。
第 21 页
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声 明。 selector {declaration1; declaration2; ... declarationN }
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同 时将字体大小设置为 14 像素。
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第 20 页
CSS基础
CSS 指层叠样式表 (Cascading Style Sheets) 层叠样式表是一种用来表现HTML或XML等文件样式的计算机
典型的项目例子： 《移动验收》， 《移动形象进度》等
第5页
《移动验收》主页面
第6页
开发移动应用程序的三种方式：原生、HTML5或 混合
HTML5应用程序：HTML5应用程序使用标准的Web技术 ，通常是HTML5、JavaScript和CSS。这种只编写一次、 可到处运行的移动开发方法构建的跨平台移动应用程序可 以在多个设备上运行。开发人员使用HTML5和JavaScript 能构建功能复杂的应用程序。
移动端系统（如安卓，IOS, WP等）都能支持HTML5 。 支持HTML5的浏览器包括: Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷 歌浏览器），Safari，Opera等； 国内的遨游浏览器（Maxthon），以及基于IE或Chromium （Chrome的工程版或称实验版）所推出的360浏览器、搜 狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器。
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第1页
HTwk.baidu.comL5简介
HTML5是HTML(超文本标记语言)的第五次重大修改. HTML5草案的前身名为 Web Applications 1.0，于2004
年被提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1月22日公布。 2013年5月6日， HTML 5.1正式草案公布。该规范定义了 第五次重大版本
第2页
HTML5简介
HTML5 仍处于完善之中。然而，大部分移动端系统和现代 浏览器都已经支持HTML5 。
第 15 页
HTML文档
HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示
出它们。浏览器不会显示 HTML 标签，而是使用标签来解释 页面的内容
第 16 页
例子解释
<html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落
第3页
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第4页
开发移动应用程序的三种方式：原生、HTML5或 混合
原生应用程序：原生应用程序是某一个移动平台（比如iOS 或安卓）所特有的，使用相应平台支持的开发工具和语言 （比如iOS平台支持Xcode和Objective-C，安卓平台支持 Eclipse和Java）。原生应用程序看起来（外观）和运行起 来（性能）是最佳的。
第 13 页
HTML基础
HTML是HyperText Markup Language(超文本标记语言)的缩 写，是构成所有所有网页基本结构的文本及标签组合。
HTML 不是一种编程语言，而是一种标记语言 (markup language)，使用标记标签来描述网页
第 14 页
HTML标签
HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
耗电量更低。 方便升级，打开即可使用最新版本，免去重新下载升级包的麻
烦，使用过程中就直接更新了离线缓存。
第 12 页
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
典型的项目例子： 《围住神经猫》等社交小游戏
第7页
《围住神经猫》社交小游戏
第8页
开发移动应用程序的三种方式：原生、HTML5或 混合
混合应用程序：混合应用程序让开发人员可以把HTML5应用 程序嵌入到一个原生容器里面，集原生应用程序和HTML5应 用程序的优点（及缺点）于一体。
典型的项目例子： 《移动审批》
第 17 页
例子解释
运行结果：
第 18 页
HTML5新增特性
新的文档类型 (New Doctype) 脚本和链接无需type 语义Header和Footer input新增了部分属性 Audio 支持 Video 支持 Progress 进度条 Canvas标签
第9页
《移动审批》主页面
第 10 页
目录 HTML5简介 开发移动应用程序的三种方式 HTML5使用上的优势 HTML基础和HTML5新增特性 CSS基础 JavaScript基础 jQuery基础 实例:《移动审批》
第 11 页
HTML5使用上的优势
更低的开发及维护成本； 使页面变得更小，减少了用户不必要的支出；而且性能更好、
语言。解决了内容与表现分离的问题，提高了工作效率。
第 21 页
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声 明。 selector {declaration1; declaration2; ... declarationN }
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同 时将字体大小设置为 14 像素。