带你了解不一样的 html5

最新推荐文章于 2024-07-19 23:42:48 发布

steven_jxy

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量1.8k

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/steven_jxy/article/details/109983571

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html

HTML5新特性

1.HTML5新元素

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置
figure	规定独立的流内容（图像、图表、照片、代码等等）
mark	定义带有记号的文本。
hrader	定义了文档的头部区域
footer	定义了文档的尾部区域
nav	定义文档的导航
section	定义文档中的节（section、区段）
summary	标签包含 details 元素的标题
dialog	定义对话框，比如提示框

2.HTML5 Canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成

标签只是图形容器，您必须使用脚本来绘制图形。

<canvas>简单实例如下:
    <canvas id="myCanvas" width="200" height="100"></canvas>

使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>

3.HTML5 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
设置元素为可拖放,首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">

拖动什么 - ondragstart 和 setData()
放到何处 - ondragover
进行放置 - ondrop

4.HTML5 地理定位

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

<script>
    var x=document.getElementById("demo");
    function getLocation(){
        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition);
        }else {x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position){
    x.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

5.HTML5 Audio(音频)、Video(视频)

HTML5 规定了在网页上嵌入音频元素的标准，即使用元素。

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
</video>

6.HTML5 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

<input type="range" name="points" min="1" max="10">
Search Google: <input type="search" name="googlesearch">
电话号码: <input type="tel" name="usrtel">

7.HTML5 表单元素

HTML5 有以下新的表单元素:

标签	描述
datalist	标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
keygen	标签规定用于表单的密钥对生成器字段。
output	标签定义不同类型的输出，比如脚本的输出。

datalist 元素规定输入域的选项列表。

属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用元素的列表属性与元素绑定.

<input list="browsers">
    <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

8.HTML5 表单属性

新属性

autocomplete、novalidate

新属性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

9.HTML5 语义元素

语义元素

10.HTML5 Web 存储

Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

sessionStorage—客户端数据存储，只能维持在当前会话范围内
- sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除
localStorage—客户端数据存储，能维持在多个会话范围内。
- localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

对于大量复杂数据结构，一般使用IndexDB

11.HTML5 离线Web应用（应用程序缓存）

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
   The content of the document......
</body>
</html>

Manifest 文件:

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html

12.HTML5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）

13.HTML5 SSE

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

EventSource 对象用于接收服务器发送事件通知：

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

<?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    $time = date('r');
    echo "data: The server time is: {$time}nn";
    flush();
    ?>

14.HTML5 WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。

steven_jxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带你了解不一样的 html5

HtmlHTML5新特性1.HTML5新元素HTML5提供了新的元素来创建更好的页面结构：标签描述 article 定义页面独立的内容区域。aside定义页面的侧边栏内容。bdi允许您设置一段文本，使其脱离其父元素的文本方向设置figure规定独立的流内容（图像、图表、照片、代码等等）mark定义带有记号的文本。hrader定义了文档的头部区域footer定义了文档的尾部区域nav定义文档的导航section定
复制链接

扫一扫