收藏私塾在线
 

欢迎您来到私塾在线网!   

请登录! 

免费注册 


html5的笔记
状态: 离线
人气:117442
访问用户量:100
笔记经验:
总积分:155
级别:普通会员
搜索本笔记
ta的交流分类
ta的交流主题贴(11)
ta的所有交流贴(11)
ta的全部笔记
全部笔记(11)
未分类笔记(0)
html5实战(11)
存档
2012-09(11)

2017-03-19 15:45:09
HTML 5 实战 之 HTML 5的简介
浏览(28032)|评论(48)   交流分类:Web前端技术|笔记分类: html5实战

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>元素开发一个应用实例
精品视频课程推荐

研磨设计模式——跟着cc学设计系列视频教程
本视频课程是北京Java私塾原创精品书籍《研磨设计模式》一书的配套学习视频,由《研磨设计模式》的第一作者CC录制 课程目标:全面、系统的掌握GoF设计模式的知识,达到可以在实际项目开发中运用的能力 技术要点:如何实现可配置、如何实现缓存以及缓存的管理、如何实现用缓存来控制多实例的创建、如何实现参数化工厂、 如何实现可扩展工厂、如何实现原型管理器、如何实现Java的静态代理和动态代理、如何实现多线程处理队列请求、 如何实现命令的参数化配置、可撤销的操作、宏命令、队列请求和日志请求、如何实现翻页迭代、如何检测环状结构、 如何实现通用的增删改查、如何模拟工作流来处理流程、如何实现简单又通用的XML读取、如何实现模拟AOP的功能......

深入浅出学Shrio视频教程
内容概述:Shiro是目前最热门、最易用、功能超强大的Java权限管理框架,强烈推荐,每个项目都必备的权限管理技术!通过本课程,你将从零开始直到彻底掌握Shiro的相关开发知识,达到可以进行实际项目开发的能力。包括:权限管理基础、Shiro入门、配置、身份认证、授权、Realms、Session管理、和Spring的集成、Web、Cache等众多开发细节技术 技术要点:源码级分析Shiro的授权过程、自定义开发Realm、多个Realms的开发配置、自定义开发AuthenticationStrategy、自定义开发自定义SessionDAO、和Struts2+Spring3的集成(包括修正struts2的bug)、Shiro和SpringMVC+Spring3的集成、包装使用其他的Cache框架、缓存数据同步更新的解决方案等等实际开发中常用的内容

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

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

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

浏览(28032)|评论(48)   交流分类:Web前端技术|笔记分类: html5实战

评论(48)
48楼 waisi  2017-03-19 引用

学习一下

47楼 换换明  2017-03-19 引用
谢谢分销
46楼 悠闲Star  2017-03-19 引用

辛苦,辛苦!

45楼 hello123456  2016-08-19 引用
感觉不错
44楼 hello123456  2016-08-19 引用
感觉不错
43楼 kongji  2016-02-02 引用

感谢分享,学习了

42楼 tu1chao  2015-11-06 引用
41楼 JHASO  2015-09-15 引用
顶顶顶
40楼 JHASO  2015-09-15 引用
顶顶顶
39楼 清风  2015-09-15 引用

好东西

38楼 carl10086  2015-09-07 引用

继续学习

37楼 yanglizeng  2015-05-27 引用

好的

36楼 Simon  2015-03-12 引用
学习下
35楼 liudm5368  2015-03-03 引用
hao
34楼 999thw  2014-12-29 引用

大势所趋

33楼 mayj_0215  2014-12-18 引用
不错,好东西
32楼 zy0427  2014-04-19 引用
看看~~~~~
31楼 steve_52945  2014-03-29 引用
謝謝,感恩
30楼 hf9998  2014-03-24 引用
good
请登录后评论 登录

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

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