2014年辛星web前端教程贺岁版第五本即html5教程

3星(超过75%的资源)
所需积分/C币:9 2014-10-22 10:31:30 1.84MB PDF
11
收藏 收藏
举报

这是辛星在2014年web前端教程的第五本,即html5的教程,希望对您有所帮助。
目录: 第一节:简介html5 第二节: canvas与svg… 第三节:deo与 audio. 第四节:表单部分 20 第五节:web存储 鲁·。看。自音。。。D。。。。。D自。。。 ●番。a。D·。。D·。。。a。·。。。。D。a。。 30 第六节:web离线应用……36 第七节:其他部分…. 44 附录:意见反馈 .···.························· 3/46 第一节:简介htm5 >>>>>>>追溯历史<<<<<<<<<<<<<<<<<<<<<<< 1.首先不得不说的是1999年12月发布的HTML4.0.1标准,因为它 是在是太经典了,而且一直到现在都还在用,都15年了啊。 2.为了推动Web标准化的发展,一些公司成立了一个 WHATW的 组织,该组织的全名叫做 Web Hypertext Application Technology Working Group,翻峄为汉语叫做WEB超文本应用技术工作组。 3而 WHATWG致力于WEB表单和应用程序,早在10年前(2004 年)就提出了 Web Applications1.0,这也就是HTML5草亲的前身 而W3C则专注于ⅩHTM2.0,对于web标准的竞争开始出现分岐歧。 4终于在2006年,这两个组织打成共识进行合作,合作的最重要 的成果就是HTML5的诞生,HTML5的第一份正式草案在2008年 1月22日就已经发布了,距今已经有六个年头了。 5.而在2012年12月17日,W3C正式宣布HTML5规范已经正式 定稿了,官方给出的说法是“HTML5是开放的WEB网络平台的奠 基石 6在2013年5月6日,HTML5.1正式草案公布。 7.在今天,HTML5再也不神私,它的很多特性也已经被支持了,它 再也不是一个概念,开始走进我们的生话之中。 >>>>>>>>意义<<<<<<<<<<<<<<<<<<<<<<<< 我们知道,每当新事物取代旧事物的肘候,都会有乞的优点,并 且会在一定程度上摒弃旧事物的缺点 2.它是下一代的HTML标准,不过它能持续多长肘间,我不知道, 这个真心没法去预测,或许经夂不衰,或许昙花一现。 3.它引入了一些新元素和新屬性,而且摒弃了一些陈旧的元素,宅 完全支持CS3 4.而且它对ideo和 audio的支持更好,也就是对音频和视频的支 持比较出色。 4/46 5.而且还支持2D和3D绘图,这样对于web的表现层上无疑是 个质的飞跃 6而且乞还支持本地数据存储,而且还支持Web应用 7.当然啦,这里介绍再多也意义不大,我们随着接下来的学习会看 到这一点 >>>>>>>>>文档类型<<<<<<<<<<<<<<< 还记得我们的<! DOCTYPE>声明吗?在HTML5中我们在文档的 第一行这么写就可以了: <1 DOCTYPE html> 2.而其他部分和html的格式还是很相似的,我们来写一个比较简单 的html5文件吧,还是命名为 my. html,代码如下 docTYPE html> chtml> <head i1e>星哥邀你共举杯</ title> /head <body> p>辛星---水爱小倩</p </body> /htm1丬 3.可以看出,hm15并不是在原来的基础上打翻重做,而是一些增 加和修改 4.我们看下效果吧: 星哥邀你共萃杯 和想象中的 eye file:///D: /Users/Administrator/Desktop/一样吗? 辛星--永爱小倩 5/46 5.前面我们也说过了,就是html5不是基于SGML的。 >>>>>>>>>浏览器支持<<<<<<<<<<<<<<<<<<<< 1.并不是所有的浏览器都支持HTML5的。 2.不过一般来说比较新的版本的 Chrome、 Firefox、 Safari、 Opera 的支持还是比较不错的,在9版本以上的也不错,不过我是属于 那种比较排斥旧E的人,虽然我不该带有个人情绪,不过个人确实很 排斥。 3.这里我个人推荐使用谷歌和火狐,当然国内的众多的双核浏览器 也都可以。 >>>>>>>>>>>小结<<<<<<<<<<<<<<<<<< 1.本节我们只是简单的认识一下HTML5,并未有本质上的学习。 2.由于HTML5是对html的一个朴充与修复,而不是彻底打乱重来 因此如果我们的htm功底如果比较扎实的话,那么学习htm15也会 比较轻松。 6/46 第二节: canvas与svg >>>>>>>>>>>> canvas<<<<<<<<<<<<<<<<<<< 1.由于html5引入了一些新元素,劢这里面比较受关注的就是 canvas元素了。 2.但是该元素并不具备绘制图形的能力,该元素只是一个图形容器, 我们使用 Javascript脚本来绘制相应的图形。 3该元素可以理解为一个画布,我们可以给它指定widt和 height 属性来确定这个画布的宽度和高度,而且我们通幸需要定义一个id 属性来让 Javascript脚本来引用,我们可以通过j来绘制旬己的图 形 4.我们先看一段代码妇下: <i DOCTYPE html> chtml> <body》 <canvas id= xin"width="200 height= 100> 您的浏览器不支持 canvas标签,建议最新版火狐浏览器。 /canvas> <script> var c= document. getElementById(xin ) var ct= c getContext( 2d"); ct fillstyle=#933 ct. fillRect(e,0,208,10); </script> </body> </html 6.对于上述代码,我还是解释一下吧,这里我们的 canvas元素中指 定了該画布的id为in,而且它的宽度为200pX,高度为100p×, 那么它中间的文本就是当我们的浏览器不支持 canvas的肘候,显示 在用户浏览器上的内容。 7对于Srit元素中的内容,也就是弑们用于绘图的 Javascript代码 了,首先宅通过 getElementByld来得到这个画布,然后获取到它的 7/46 上下文,也就是 Context,下面我们会介绍上下文是什么意思,然 后设置下颜色,最后绘制了一个矩形 8然后我们看下效果吧: i file://D: Use,stop/ my. html+ G) file: ///D: Users/Administrator/ Desktop/my.html 我们绘制的这 个棕色的矩形 感觉刘果怎 么样? 9.我们看到,确实 Javascript绘制图形能力还是蛮强的,上面我们就 绘制了一个棕色的矩形。 >>>>>>>>>>上下文<<<<<<<<<<<<<<<<<<<<< 1.那么我们说一下这个上下文是怎么回事吧,我也是怕有些朋友们 不明白,如果慫比较凊楚了,可以跳过。 2.我们在使用面向过程的方式来绘图的肘候,必须存储一些状态 比如当前颜色,这些状态等等都作为了一个上下文,宅会对后面作 产生一些影响 3.我最早接触这个概念是在若干年前学习MFC的时候,那个叫做设 备上下文,也就是DC。它里面比较馄乱,虽然包看面向对象的外衣, 但是做事很多地方依然是面向过程,是个典型的大杂烩。 4.这里我们通过 get Context方法来获取宅的上下文,然后可以设置 辶的一些属性,这里指定了参数为2d,表示该¢ anvas对象用于生 成2D图形,这里参数还可以指定为3d,用于绘制立体图形。 8/46 >>>>>>>>>>常见的绘制功能<<<<<<<<<<<<<<< 1.既然anva提供了一个画布,那么我们能用来绘制什么呢?这就 取决于我们对其方法的理解深度了。 2.这个画布就可以看做一个二维的坐标,左上角是(00),而向右就是 X轴的正方向,向下是y轴的正方向。 3绘制线段的时候使用 begin Path0开始,然后使用 moveTo(x,y)方 法设置线段的起点,使用 lineToⅸ,y)方法设置线段的终点,使用 linewidth属性来设置线段的宽度,使用 strokeStryle属性来设置线 条颜色,最后使用 troke0来得到整条线段。 4.我们看如下代码: 1( DoCTYPE html> 2 <html 3 <body> 4 <canvas id= xin" width=200 height=100> 您的浏览器不支持 canvas标签,建议最新版火狐浏览器。 6 </canvas <script 8 var c= document. getElementById( xin") var ct=c get Context("2d"); t.beginPath (; ct. move To(0, 10) t.1neTo(90,100) ct.linewidth= 2.0: t strokeStyle=#933 t stroke(; 16 /script 17 </body> 8 </htm1> 5那么上述代码我想朋友们应该都知道什么意思了,那么我们看下 效果吧 9/46 file:///D: 'Use.stop/my. html+ )fe/ D: /Users/Administrator/Desktop/my ht圖百度t+K食 这亲棕色的线是 我们手工绘制出 来的 6.那么对于绘制矩形我们介绍两个方法吧,一个用于绘制实心矩形, 一个用于空心矩形,我们看下面表格吧 调用方式 功能 fillRect(x, y, width, height) 绘制实心矩形 strokeRect(x,y, width, height) 绘制空心矩形 其中的Ⅹ表示矩形的左上角的横坐标,y表示左上角的纵坐标, 而 width表示矩形宽度, height表示矩形高度 7.我们的文字也可以动态的绘制上去,也介绍两个方法吧,那就是 fullText与 strokeText方法,分别用于绘制实心文字与空心文字,而 我们还可以设置字体与对齐方式,这些都是通过属性完成的,看下 面表格: 方法(属性)名稀 描述 功能 font 属性 设置字体 textAlign 属性 设置文本显示格式 fullText 方法 绘制实心字体 strokeText 方法 绘制空心字体 8.这里值得注意的是,绘制多行文本并不会自动换行,要绘制多行 文本,就必须多次调用 fullText方法了。 9.那么我们给出一个具体的实例吧,看下面代码 0/46

...展开详情
试读 46P 2014年辛星web前端教程贺岁版第五本即html5教程
立即下载 身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
会越来越好 感谢分享,谢谢!!!!
2018-10-02
回复
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
关注 私信
上传资源赚钱or赚积分
最新推荐
2014年辛星web前端教程贺岁版第五本即html5教程 9积分/C币 立即下载
1/46
2014年辛星web前端教程贺岁版第五本即html5教程第1页
2014年辛星web前端教程贺岁版第五本即html5教程第2页
2014年辛星web前端教程贺岁版第五本即html5教程第3页
2014年辛星web前端教程贺岁版第五本即html5教程第4页
2014年辛星web前端教程贺岁版第五本即html5教程第5页
2014年辛星web前端教程贺岁版第五本即html5教程第6页
2014年辛星web前端教程贺岁版第五本即html5教程第7页
2014年辛星web前端教程贺岁版第五本即html5教程第8页
2014年辛星web前端教程贺岁版第五本即html5教程第9页
2014年辛星web前端教程贺岁版第五本即html5教程第10页

试读结束, 可继续读4页

9积分/C币 立即下载