HTML通用培训课件.pptxVIP

“新动能计划”通用培训系列课程 · 揭秘HTML5 · 什么是HTML5 HTML的全称是Hypertext Markup Language（超文本标记语言）。HTML是用于描述网页文档的标记语言。HTML从1993到如今的发展，它作为网络语言标准规范，在计算机的发展史中有着不可或缺的地位。在2000年对基于Html4.0的版本进行了微小改进HTML4.01，并成为了国际标准化组织和国际电工委员会的标准，被沿用至今。 HTML5同样是一个4.0之上的新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML 4.01标准。 HTML5的八大特性 HTML5的八大特性--语义化的标签 HTML5 引入了新的 HTML 元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。 HTML HTML5 HTML5的八大特性--语义化的标签 article 定义文章 aside 定义文章的侧边栏 figure 一组媒体对象以及文字 figcaption 定义 figure 的标题 footer定义页脚 header定义页眉 hgroup定义对网页标题的组合 nav定义导航 section 定义文档中的区段 time定义日期和时间 被弃用的标签：acronym、applet、basefont、big、center、dir、font、frame、 s、isindex、noframes、 frameset 、strike、tt、u和xmp。 十个HTML5常用的新标签： HTML5的八大特性—离线存储 HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势： 1、离线浏览 – 用户可在应用离线时使用它们 2、速度 – 已缓存资源加载得更快 3、减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。 原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 。 HTML5的八大特性—设备通用 设备通用主要是指：拖拽与拖放 (Drag Drop) 与 文件处理 (File API)。 。 过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag Drop 拖拽事件，再结合FileAPI 中的 FileReader，一切变得so easy~ HTML5的八大特性—连接 现在，很多网站为了实现即时通讯，所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求，然而HTTP请求的header信息是非常长的，这样会占用很多的带宽和服务器资源。 WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。能更好的节省服务器资源和带宽并达到实时通讯。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 。 连接则主要是指：WebSocket Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。 HTML5的八大特性—多媒体 。 audio src=sound.mp3 controls/audio video src=movie.webm autoplay controls/video HTML5的八大特性—三维图形与特效 。 三维图形与特效则是指：Canvas 画布元素以及WebGL 传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。 可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。 WebGL是一种3D绘图标准，有别于过往需加装浏览器插件，透过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。 canvas id=canvas width=300 height=300/canvas script var ctx = document.getElementById(canvas).getContext(2d); ctx.fillRect(2