Html5学习系列

华铭發表於 2020-1-19 18:01:00

<h2 id="h2_1">Html5学习系列</h2>
 
 
<h3 id="h3_2">HTML5 规定了一种通过 video 元素来包含视频的标准方法</h3>
 
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
 
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
 
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
 
<h3 id="h3_3">如需在 HTML5 中显示视频，您所有需要的是：</h3>
<video src="movie.ogg" controls="controls">
</video>
control 属性供添加播放、暂停和音量控件。
 
 
<h3 id="h3_4">HTML5 规定了一种通过 audio 元素来包含音频的标准方法。</h3>
 
audio 元素能够播放声音文件或者音频流。
 
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：
 
实例
 
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
 
 
<h2 id="h2_5">HTML5 拖放实例</h2>
 
 
设置元素为可拖放
 
<h4 id="h4_6">首先，为了使元素可拖动，把 draggable 属性设置为 true ：</h4>
 
<img draggable="true" />
 
 
拖动什么 - ondragstart 和 setData()
 
<h4 id="h4_7">然后，规定当元素被拖动时，会发生什么。</h4>
 
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
 
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
 
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
 
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
 
 
 
<h4 id="h4_8">放到何处 - ondragover</h4>
 
ondragover 事件规定在何处放置被拖动的数据。
 
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
 
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
 
event.preventDefault()
 
 
 
<h4 id="h4_9">进行放置 - ondrop</h4>
 
当放置被拖数据时，会发生 drop 事件。
 
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
 
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
 
代码解释：
 
    调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    被拖数据是被拖元素的 id ("drag1")
    把被拖元素追加到放置元素（目标元素）中
 
 
 
<h2 id="h2_10">HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像</h2>
 
<h3 id="h3_11">创建 Canvas 元素</h3>
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
<h4 id="h4_12">通过 JavaScript 来绘制</h4>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
 
 
 
<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
 
</script>
 
 
<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
 
</script>
 
把图片放到画布上
<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
 
</script>
 
 
 
<h2 id="h2_13">什么是SVG？</h2>
 
    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    SVG 用于定义用于网络的基于矢量的图形
    SVG 使用 XML 格式定义图形
    SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
    SVG 是万维网联盟的标准
 
 
<h3 id="h3_14">SVG 的优势</h3>
 
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
 
    SVG 图像可通过文本编辑器来创建和修改
    SVG 图像可被搜索、索引、脚本化或压缩
    SVG 是可伸缩的
    SVG 图像可在任何的分辨率下被高质量地打印
    SVG 可在图像质量不下降的情况下被放大
<h4 id="h4_15">把 SVG 直接嵌入 HTML 页面</h4>
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
实例
<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
 
</body>
</html>
 
 
<h4 id="h4_16">Canvas 与 SVG 的比较</h4>
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
<ul>
<li>依赖分辨率</li>
<li>不支持事件处理器</li>
<li>弱的文本渲染能力</li>
<li>能够以 .png 或 .jpg 格式保存结果图像</li>
<li>最适合图像密集型的游戏，其中的许多对象会被频繁重绘</li>
</ul>
SVG
<ul>
<li>不依赖分辨率</li>
<li>支持事件处理器</li>
<li>最适合带有大型渲染区域的应用程序（比如谷歌地图）</li>
<li>复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</li>
<li>不适合游戏应用</li>
</ul>
 
<h3 id="h3_17">HTML5 - 使用地理定位</h3>
 
请使用 getCurrentPosition() 方法来获得用户的位置。
 
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。
 
 
<!DOCTYPE html>
<html>
<body>
点击这个按钮，获得您的坐标：
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  " Longitude: " + position.coords.longitude;       
  }
function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
</body>
</html>
 
<h2 id="h2_18">在客户端存储数据</h2>
 
HTML5 提供了两种在客户端存储数据的新方法：
 
    localStorage - 没有时间限制的数据存储
    sessionStorage - 针对一个 session 的数据存储
 
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
 
 
 
<h3 id="h3_19">localStorage 方法</h3>
 
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
 
如何创建和访问 localStorage：
实例
 
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
 
 
 
下面的例子对用户访问页面的次数进行计数：
实例
<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
 
 
 
 
 
<h3 id="h3_20">sessionStorage 方法</h3>
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
实例
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
 
 
 
 
<h2 id="h2_21">使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。</h2>
 
 
<h4 id="h4_22">什么是应用程序缓存（Application Cache）？</h4>
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
<ul>
<li>离线浏览 - 用户可在应用离线时使用它们</li>
<li>速度 - 已缓存资源加载得更快</li>
<li>减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。</li>
</ul>
 
 
 
<h4 id="h4_23">Cache Manifest 基础</h4>
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
 
 
 
<h4 id="h4_24">web worker 是运行在后台的 JavaScript，不会影响页面的性能。</h4>
<h5 id="h5_25">什么是 Web Worker？</h5>
 
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
 
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
浏览器支持
 
所有主流浏览器均支持 web worker，除了 Internet Explorer。
HTML5 Web Workers 实例
 
下面的例子创建了一个简单的 web worker，在后台计数：
 
 
在创建 web worker 之前，请检测用户的浏览器是否支持它：
 
if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }
 
创建 web worker 文件
 
现在，让我们在一个外部 JavaScript 中创建我们的 web worker。
 
在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：
 
var i=0;
 
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
 
timedCount();
 
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
 
注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
 
 
创建 Web Worker 对象
我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。
下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }
 
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
 
当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
 
<h4 id="h4_26">完整的 Web Worker 实例代码</h4>
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：
实例
<!DOCTYPE html>
<html>
<body>
 
Count numbers: <output id="result"></output>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
 
 
<script>
var w;
 
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}
 
function stopWorker()
{
w.terminate();
}
</script>
 
</body>
</html>
 
 
<h2 id="h2_27">HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。</h2>
 
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
 
 
 
接收 Server-Sent 事件通知
 
EventSource 对象用于接收服务器发送事件通知：
实例
 
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + " ";
  };
 
 
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。
PHP 代码 (demo_sse.php)：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释：
<ul>
<li>把报头 "Content-Type" 设置为 "text/event-stream"</li>
<li>规定不对页面进行缓存</li>
<li>输出发送日期（始终以 "data: " 开头）</li>
<li>向网页刷新输出数据</li>
</ul>
 
 
 
 
<h2 id="h2_28">HTML5 新的 Input 类型</h2>
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
<ul>
<li>email</li>
<li>url</li>
<li>number</li>
<li>range</li>
<li>Date pickers (date, month, week, time, datetime, datetime-local)</li>
<li>search</li>
<li>color</li>
</ul>
 
<h2 id="h2_29">HTML5 的新的表单元素：</h2>
HTML5 拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素：
<ul>
<li>datalist</li>
<li>keygen</li>
<li>output</li>
</ul>
 
----来自w3cschool 
来源：https://www.cnblogs.com/zmlljx/p/12215085.html

頁: [1]

琼殿技术论坛's Archiver

Html5学习系列