收藏私塾在线
 

欢迎您来到私塾在线网!   

请登录! 

免费注册 

交流首页 » Web前端技术 »HTML 5 实战 之 HTML 5的简介  XML
发表人 内容
html5
[头像]

交流经验:55
总积分:155
级别:普通会员
注册时间: 2012-10-01
文章: 11
离线

1.1:HTML 5的简介
        2004 年, HTML 5 的草案被提起,直到 2007 年才被 W3C 所接纳,到 2008 年首份草案也随之公布, HTML 5 的框架在原先版本的基础之上,废除了许多 HTML 4 不合理的效果标 记,创造性地增加了很多用于富媒体、富图形的新标记,最大限度地减少了对外部插件的依赖;同时,通过对本地离线存储方式的优化,使 HTML 5 更加有利于移动客户端的开发。

学习 HTML 5 的理由:
1 、各浏览器厂商对 HTML 5 的大力支持
2 、应用发展的需求,以开放、共享为主
3 、以 HTML 5 JavaScript Web 技术代表将来浏览器端应用开发的方向
1.2:检测浏览器是否支持HTML 5标记
•在HTML页面中,插入一段HTML 5画布标记,当浏览器支持该标记时,将出现的一个方块形状;反之,则在页面中显示“该浏览器不支持HTML 5的画布标记!”的提示语。
•代码编写与效果演示
•源码分析
    •虽然是同样一个页面,但由于不同的浏览器对HTML 5特征的支持不同,其执行的页面效果也将各异,因此,在编写HTML 5新标记时,有必要需要检测浏览器是否支持该标记。
    •当浏览器在加载Web页面时,它会构造一个文本对象模型(简称DOM),通过该对象模型来表示页面中的HTML各元素,表示形式为各个不同的DOM对象。而全部对象都共享一些公共或特殊的属性,如HTML 5的某些特性;如果在支持该属性的浏览器中打开页面,这些DOM对象是否支持这些特性,就可以很快地被检测出来。
 
1.3:应用全新的HTML 5特征结构化元素
功能说明:
•将页面分成上、中、下三部分,上部分用于导航,中部又分成两个部分,左边设置菜单,右边显示文本内容,下部分显示页面版权信息。
•代码编写与效果演示
源码分析
•从代码中,可以很容易地看出,使用<div id="header">标记元素没有任何实现的意义,即浏览器不能从标记的ID号属性来推断这个标记的真正含义,因为ID号是可以变化的,因此不利于寻找;而HTML 5中的新元素<header>,明确地告诉浏览器它是一个页头,并且该标记可以重复使用,及大提高了开发者的工作效率。
•在HTML 5中,一个<article>可以创建一个新的节点,并且,每个节点都可以有自己的单独元素,如<h1>或<h2>。
 
1.4:Progress交互元素
•定义
•Progress是HTML5中新增的状态交互元素,用来表示页面中的某个任务完成的进度(进程)。例如下载文件时,文件下载到本地的进度值,可以通过该元素动态展示在页面中,展示的方式既可以使用整数(如1~100),也可以使用百分比(如10%~100%).
Progress 元素的属性
   属性                                         描述
   max            整数或浮点数         设置完成时的值,表示总体工作量
   value          整数或浮点数         设置正在进行时的值,表示已经完成的工作量
 
功能说明:
•在页面中创建一个<progress>元素和一个“下载”按钮,当点击按钮时,元素<progress>动态展示下载进度状态和百分比信息;下载结束时,提示“下载成功!”字样。
•代码编写与效果演示
  源码分析
   •在示例的js代码中,编写一个定时事件,在该事件中,累加变量值,并将该值设置为<progress>元素的”value”的属性值,当这个属性值大于或等于<progress>元素的“max”属性值时,则停止累加,并显示“下载完成!”的字样,否则,动态显示正在累加的百分比数。
 
1.5:Meter交互元素
•定义
•Meter 是HTML5中新增的状态交互元素,用于表示在一定数量范围中的值,如投票中,候选人各占比例及考试分数等, Meter元素只是帮助浏览器识别HTML中的数量,而不对该数量做任何格式上的修饰。
meter 元素的属性
属性                               描述
Min                 数量           定义元素展示的最小值,默认值为0
Max                数量           定义元素展示的最大值,默认值为1
Low                数量           定义元素展示的最低值,该值必须小于或等于min
High               数量           定义元素展示的最高值,该值必须小于或等于max
Value             数量           定义元素展示的实际值,可以为浮点数,默认值为0
Optimum        数量           定义元素展示的最优值,该值必须在min与max值之间
 
功能说明:
•在页面中,分别创建两个<meter>元素,通过设置不同的属性值,展示两个候选人的占票数比例,同时,用<span>元素说明百分比例的百分数。
•代码编写与效果演示
源码分析
•在HTML源码中,候选人“李四”所占的比例是百分制中的70,最低比例可能是0,但实际最低为10;最高比例可能为100,但实际最高为90。<meter>元素中的数量也可以用浮点数表示,如第一处代码加粗处;为了展示这些比例值,可以引入其他的元素,如<span>。
本节课程小结
先从检测浏览器是否支持HTML 5新元素开始,由浅入深地简单介绍了HTML 5新增的元素在chrome浏览器的使用方法
页面中的交互操作,是HTML 5的一项重要的新增功能,在本节中,通过介绍HTML 5几个重要的交互元素的使用方法,可以进一步加深对HTML 5元素的了解
在HTML 5中,新增加的元素远不止这些交互元素,我们在下面的章节中将着重介绍一些常用的,功能性很强的重要元素
作业:按照演示,构建自己的第一个HTML5页面
作业:按照讲述,重新使用<progress>元素开发一个应用实例

这篇文章被编辑了 1 次. 最近一次更新是在 2012-09-13 17:05:30


推广链接
精品视频课程推荐

XML基础视频教程
创建规范的XML文档,DTD的作用,并且可以根据要求创建私用的DTD,通过JavaScript解析XML DOM

Weblogic实战视频教程
WebLogic基础知识:WebLogic基本概念、正确安装WebLogic、建域、应用部署于JDBC选择、对WebLogic的监控和日志查看、集群的高可用性;课程目标:彻底掌握WebLogic的基本概念,在理解基本概念的基础上做到正确的安装WebLogic,根据不同的需求创建域,合理选择应用部署和JDBC配置。熟练掌握WebLogic的console监控,了解各种性能和运行指标,以及对监控结果的分析,运用集群的高可用性,对集群架设。

Java数据结构和算法精讲版
本课程专注于数据结构和算法的内容,使用Java来进行代码示例,不空洞的讲解概念和理论,重点放在代码的实现和示例上。 从零开始、全面系统、成体系的讲解数据结构和基本算法,循序渐进的讲述构建软件系统所常见的数据结构和算法。

Ajax+JSON基础实战视频教程
数据校验、Javascript模拟多线程、下拉列表联动、操作XML、AJAX结合JSON的操作、Json-lib的使用

最新jbpm4工作流开发实战视频教程
从零到精通jBPM的开发知识;理解工作流的理论、掌握自行开发工作流的思路、系统学习使用jBPM来实现工作流应用、掌握jBPM和Web项目的结合、掌握一些实际开发中典型的业务实现(会签、委托等)

tomdog
[头像]

交流经验:520
总积分:44846
级别:VIP5
注册时间: 2012-08-17
文章: 215
离线

以后要出HTML5视频?
computer3311
[头像]

交流经验:60
总积分:63
级别:普通会员
注册时间: 2012-09-22
文章: 30
离线

HTML5是方向啊
yantao
[头像]

交流经验:70
总积分:16247
级别:VIP3
注册时间: 2012-07-03
文章: 39
离线

HTML5我所爱
weige5d
[头像]

交流经验:60
总积分:160
级别:普通会员
注册时间: 2012-11-07
文章: 30
离线

不错不错
1234huxian
[头像]

交流经验:48
总积分:4553
级别:VIP1
注册时间: 2012-10-24
文章: 26
离线

好的



个性签名:勇于攀登,永不放弃
空小空515
[头像]

交流经验:90
总积分:190
级别:普通会员
注册时间: 2013-02-22
文章: 48
离线

不错


个性签名:按时想法
hu3625067
[头像]

交流经验:30
总积分:130
级别:普通会员
注册时间: 2013-03-13
文章: 18
离线

hu3625067
[头像]

交流经验:30
总积分:130
级别:普通会员
注册时间: 2013-03-13
文章: 18
离线

学习
sheriff_zh
[头像]

交流经验:54
总积分:154
级别:普通会员
注册时间: 2013-03-28
文章: 27
离线

下载中

lixijun1988
[头像]

交流经验:0
总积分:310
级别:普通会员
注册时间: 2012-10-15
文章: 10
离线

很好

hyu55559
[头像]

交流经验:48
总积分:348
级别:普通会员
注册时间: 2013-04-15
文章: 25
离线

快速回复
yylkok
[头像]

交流经验:18
总积分:128
级别:普通会员
注册时间: 2013-04-19
文章: 10
离线

html5现在用的人挺多的。
liguilincool
[头像]

交流经验:62
总积分:1432
级别:普通会员
注册时间: 2012-08-31
文章: 38
离线

 

javassok写
以后要出HTML5视频?

 

shts860216
[头像]

交流经验:44
总积分:144
级别:普通会员
注册时间: 2013-06-20
文章: 29
离线

好东西,谢谢分享
yzjys
[头像]

交流经验:64
总积分:11934
级别:VIP3
注册时间: 2013-07-16
文章: 31
离线

看看
shakesky
[头像]

交流经验:10
总积分:5236
级别:VIP2
注册时间: 2012-09-20
文章: 5
离线

大势所趋
liguilincool
[头像]

交流经验:62
总积分:1432
级别:普通会员
注册时间: 2012-08-31
文章: 38
离线

 

tomdog写
以后要出HTML5视频?

 

xiaoxiwu2013
[头像]

交流经验:12
总积分:112
级别:普通会员
注册时间: 2013-09-28
文章: 6
离线

视频

sanda520
[头像]

交流经验:86
总积分:515
级别:普通会员
注册时间: 2011-11-19
文章: 45
离线

喜欢ppt跟源码。。。


个性签名:书山有路勤为径,学海无涯苦作舟
 
交流首页 » Web前端技术
前往:   

关于我们 | 联系我们 | 用户协议 | 私塾在线服务协议 | 版权声明 | 隐私保护

版权所有 Copyright(C)2009-2012 私塾在线学习网