资源描述让你站在HTML巨人的肩膀上，制作非常酷炫的HTML前端web幻灯片资源-CSDN下载

共8个文件

png：3个

js：2个

css：1个

html

103 浏览量 2023-10-20 14:12:06 上传评论收藏 3.45MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Z89yPSUZDhDS3ZDl.zip （8个子文件）

Z89yPSUZDhDS3ZDl

fileDD.js 3KB

impress.js 32KB

img

socket.png 130KB

yy.png 97KB

dwjwlxs.mp3 3.64MB

h5.png 4KB

css

impress-demo.css 22KB

index.html 12KB

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=1024"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <title>HTML5</title> <link href="css/impress-demo.css" rel="stylesheet"/> </head> <body class="impress-supported"> <div class="fallback-message"> <p>您的浏览器 <b>不支持impress.js所需的功能</b> , 所以提供了一个简化的版本演示.</p> <p>请使用最新版本的以下浏览器： <b>Chrome</b>, <b>Safari</b> 或 <b>Firefox</b> .</p> </div> <div id="impress"> <div class="step slide" data-x="-1000" data-y="-1500"> <img src="img/h5.png"> <h1>HTML5 介绍</h1> </div>  <div class="step slide" data-x="0" data-y="-1500"> <q class="font14">HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的<i>HTML 4.01</i>和<i>XHTML 1.0</i>标准。它希望能够<u>减少互联网富应用（RIA）对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API</u>。</q> </div> <div class="step slide" data-x="1000" data-y="-1500"> <h2>HTML5的8大新特性</h2> <ul class="list"> <li>语义</li> <li>三维、图形与特效</li> <li>离线存储</li> <li>多媒体</li> <li>设备通用</li> <li>性能与集成</li> <li>连接</li> <li>CSS3</li> </ul> </div> <div id="title" class="step" data-x="0" data-y="0" data-scale="4"> <span class="try">进入正题</span> <h1>HTML <sup>5</sup></h1> <span class="footnote"><sup>*</sup>W3C万维网联盟</span> </div> <div id="yuyi" class="step item" data-x="850" data-y="3000" data-rotate="90" data-scale="3"> <h3>语义</h3> <img src="img/yy.png" width="100%"> <p class="font6">HTML5 引入了新的 HTML 元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。 </p> </div> <div class="step item" data-x="-850" data-y="3000" data-rotate="90" data-scale="2"> <h4>十个常用的新标签列表</h4> <ul class="list"> <li><article> 定义文章</li> <li><aside> 定义文章的侧边栏</li> <li><figure> 一组媒体对象以及文字</li> <li><figcaption> 定义 figure 的标题</li> <li><footer> 定义页脚</li> <li><header> 定义页眉</li> <li><hgroup> 定义对网页标题的组合</li> <li><nav> 定义导航</li> <li><section> 定义文档中的区段</li> <li><time> 定义日期和时间</li> </ul> <p class="font4">被弃用的标签：<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。 </p> </div> <div class="step item" data-x="-1600" data-y="3600" data-rotate="90" data-scale="1"> <h4>新表单标签</h4> <ul class="list font8"> <li><input type="number"> <input type="number" placeholder="只能输入数字"></li> <li><input type="search"> <input type="search" results=s></li> <li><input type="date"> <input type="date"></li> <li><input type="month"> <input type="month"></li> <li><input type="week"> <input type="week"></li> <li><input type="time"> <input type="time"></li> <li><input type="color"> <input type="color"></li> <li><input type="range" step="20" min="1" max="100"> <input type="range" step="20" min="1" max="100"> </li> <li><input list="datalist"> <input list="ilist"> <datalist id=ilist> <option value="a" label="a"> <option value="b" label="b"> <option value="c" label="c"> </datalist> </ul> </div> <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="4"> <b>No Cookie</b> <p>以前，这些都是由 Cookie 完成的。但是 Cookie 只有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。</p> </div> <div id="tiny" class="step" data-x="2305" data-y="2825" data-z="-3000" data-rotate="300" data-scale="1"> <p> IndexedDB    SQL_Lite <b>Web  Storage</b> <span class="thoughts">sessionStorage    localStorage</span> <span class="thoughts2">Application_Cache</span> </p> </div> <div id="ing" class="step" data-x="3500" data-y="-1450" data-rotate="270" data-scale="6"> <p id="drag">拖拽与拖放 (Drag & Drop)<br>与<br>文件处理 (File API)</p> <div id="filedrag">拖动文件到这里（最好是图片或文本文件）</div> </div> <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6"> <p>网络应用<b>核心</b>---<b class="imagination">连接</b></p> </div> <div id="socket" class="step" data-x="7300" data-y="2000" data-rotate="20" data-scale="4"> <h3>WebSocket</h3> <h5>WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。</h5> <div class="des"> <div class="font4"> <img src="img/socket.png"> <p>现在，很多网站为了实现即时通讯，所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求，然而HTTP请求的header信息是非常长的，这样会占用很多的带宽和服务器资源。</p> <p>WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。能更好的节省服务器资源和带宽并达到实时通讯。</p> <p>在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。</p> </div> </div> </div> <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2"> <p>桌面通知（Notifications）</p> <input id="notify" type="button" value="点此查看桌面通知"> </div> <div id="its-in-3d" class="step" data-x="6200" data-y="4500" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2"> <h3>三维、图形与特效</h3> <p><span class="have">3D效果</span><span class="you">来了</span><span class="noticed">注意！</span></p> <p><span class="its">CSS3-3D</span> <span class="in">in</span> <b>WebGL<sup>*</sup></b></p>

评论收藏

内容反馈