HTML5知识

最新推荐文章于 2021-08-30 20:57:54 发布

yanner_

最新推荐文章于 2021-08-30 20:57:54 发布

阅读量414

点赞数

分类专栏： HTML5 文章标签： html5 javascript w3c

本文链接：https://blog.csdn.net/yanner_/article/details/78414629

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML5 是 W3C 与 WHATWG 合作的结果，为HTML5建立的一些规则有：
（1）新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
（2）减少对外部插件的需求（比如 Flash）
（3）更优秀的错误处理
（4）更多取代脚本的标记
（5）HTML5 应该独立于设备
（6）开发进程应对公众透明

2.HTML5 中的一些有趣的新特性
（1）用于绘画的 canvas 元素
（2）用于媒介回放的 video 和 audio 元素
（3）对本地离线存储的更好的支持
（4）新的特殊内容元素，比如 article、footer、header、nav、section
（5）新的表单控件，比如 calendar、date、time、email、url、search

3.HTML5提供了展示视频的标准，通过video元素包含视频，video元素支持三种视频格式：Ogg、MPEG4、WebM，使用如下：

<video src="movie.ogg" width="320" height="240" controls="controls"> //control 属性供添加播放、暂停和音量控件。
Your browser does not support the video tag.
</video>

video提供的方法：play(),pause()等
video提供的属性：paused,height,width等

4.HTML5提供了播放音频的标准，audio元素支持三种音频格式：Ogg Vorbis、MP3、Wav，使用如下：

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

audio标签属性有：autoplay， controls，loop等

5.HTML5提供了拖放的标准（Drag 和 drop）
（1）设置元素可拖放：

<img draggable="true" />

（2）拖动什么：

<img ondragstart="drag(event)"/>
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

（3）放到何处：

<div ondragover="allowDrop(event)"></div>
function allowDrop(ev)
{
ev.preventDefault();   //允许放置命令
}

（4）进行放置：

<div ondrop="drop(event)"></div>
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

6.HTML5提供canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，我们可以控制每一像素使用如下:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");  //使用id寻找canvas元素
var cxt=c.getContext("2d");//getContext("2d")是html5内置对象拥有多种画图方法
cxt.fillStyle="#FF0000";  
cxt.fillRect(0,0,150,75);  //从左上角开始绘制一个150*75的矩形
</script>

7.HTML5 支持内联 SVG
（1）什么是SVG：
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
（2）SVG的优势：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

8.HTML5 Geolocation（地理定位）用于定位用户的位置
一个简单的地理定位实例如下：

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition); //获得用户位置
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

9.HTML 5 Web 存储
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能，HTML5 使用 JavaScript 来存储和访问数据。
HTML5 提供了两种在客户端存储数据的新方法：
（1）localStorage - 没有时间限制的数据存储

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");  //创建localStorage
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");}//访问localStorage
else {
    document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>

（2）sessionStorage - 针对一个 session 的数据存储

<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount) {
            sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;//创建sessionStorage
        } else {
            sessionStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";  //访问sessionStorage
    } else {
        document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
    }
}
</script>

10.HTML 5 应用程序缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
应用程序缓存为应用带来三个优势：
（1）离线浏览 - 用户可在应用离线时使用它们
（2）速度 - 已缓存资源加载得更快
（3）减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
如需启用应用程序缓存，请在文档的标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifest 文件可分为三个部分：
（1）CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
（2）NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
（3）FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
更新缓存，一旦应用被缓存，它就会保持缓存直到发生下列情况：
（1）用户清空浏览器缓存
（2）manifest 文件被修改（参阅下面的提示）
（3）由程序来更新应用缓存
11.HTML 5 Web Workers
Web Workers：当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
Web Workers实例：

<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button> 
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />

<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")   //检测用户浏览器是否支持
  {
  if(typeof(w)=="undefined")
  {
  w=new Worker("/example/html5/demo_workers.js");  //外部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>

12.HTML 5 服务器发送事件
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
接收 Server-Sent 事件通知实例：

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("/example/html5/demo_sse.php"); //EventSource 对象用于接收服务器发送事件通知
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br />";
    };
  }
else
  {
  document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
  }
</script>

yanner_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识

1.HTML5 是 W3C 与 WHATWG 合作的结果，为HTML5建立的一些规则有：（1）新特性应该基于 HTML、CSS、DOM 以及 JavaScript。（2）减少对外部插件的需求（比如 Flash）（3）更优秀的错误处理（4）更多取代脚本的标记（5）HTML5 应该独立于设备（6）开发进程应对公众透明2.HTML5 中的一些有趣的新特性（1）用于绘画的 can
复制链接

扫一扫