HTML5

1. 提供了定义页面不同部分的新语义元素:

<article> <aside> <details>(元素用于描述有关文档或文档片段的详细信息) <figcaption>(元素标记图像标题) <figure>(元素标记文档中的一个图像) <footer> <header> <main> <mark>(带有标记、需要突出显示的文本) <nav> <section> <summary>(标签包含 details 元素的标题) <time>(标签定义日期或时间,或者两者) www.w3school.com.cn/html/html5_...

2. 图形

(1)canvas[www.w3school.com.cn/tags/html_r...]

创建canvas元素

arduino 复制代码
<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制(canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成)

ini 复制代码
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //JavaScript 使用 id 来寻找 canvas 元素:
var cxt=c.getContext("2d"); //创建 context 对象
cxt.fillStyle="#FF0000";  //fillStyle 方法将其染成红色
cxt.fillRect(0,0,150,75); //fillRect 方法规定了形状、位置和尺寸(在画布上绘制 150x75 的矩形,从左上角开始 (0,0))。
</script>

canvas可以画线条、画圆、画渐变背景、把一张图放在画布上等。

(2)svg(可伸缩矢量图形)

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
ini 复制代码
<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>

(3)Canvas vs. SVG

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

Canvas vs. SVG比较

Canvas
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

3. 新的媒介元素[www.w3school.com.cn/tags/html_r...]

标签 描述
<audio> 定义声音或音乐内容。
<embed> 定义外部应用程序的容器(比如插件)。
<source> 定义 和 的来源。
<track> 定义 和 的轨道。
<video> 定义视频或影片内容。

4.新的表单元素

标签 描述
<datalist> 定义输入控件的预定义选项。
<keygen> 定义键对生成器字段(用于表单)。
<output> 定义计算结果。

5.新的属性语法

HTML5 允许四种不同的属性语法。

该例演示 标签中使用的不同语法:

标签 描述
Empty <input type="text" value="Bill Gates" disabled>
Unquoted <input type="text" value=Bill>
Double-quoted <input type="text" value="Bill Gates">
Single-quoted <input type="text" value='Bill Gates'>

6.新的输入类型

| 新的输入类型

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

| 新的输入属性

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

HTML API

地理定位(Geolocation(地理定位)用于定位用户的位置。)

getCurrentPosition()
xml 复制代码
<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>

[www.w3school.com.cn/html/html5_...]

拖放

xml 复制代码
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
   ev.preventDefault();
}

function drag(ev) {
   ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

[www.w3school.com.cn/html/html5_...]

web存储

1.通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。

2.在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。

3.与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。

4.本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。

HTML 本地存储提供了两个在客户端存储数据的对象:
  • window.localStorage - 存储没有截止日期的数据
  • window.sessionStorage - 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)

在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:

csharp 复制代码
if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉!不支持 Web Storage ..
}
localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。

javascript 复制代码
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
localStorage.getItem("lastname");
// 删除
localStorage.removeItem("lastname");
// 清空localStorage中的所有数据
localStorage.clear();
** 注意:名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!
sessionStorage 对象

sessionStorage 对象等同 localStorage 对象,不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页,数据也会被删除。

arduino 复制代码
// 存储
sessionStorage.setItem("lastname", "Gates");
// 取回
sessionStorage.getItem("lastname");
// 删除
sessionStorage.removeItem("lastname");
// 清空sessionStorage中的所有数据
sessionStorage.clear();

[www.w3school.com.cn/html/html5_...]

应用缓存

HTML5 引入了应用程序缓存(Application Cache),这意味着可对 web 应用进行缓存,并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势:

  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
xml 复制代码
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
文档内容 ......
</body>

</html>

带有 cache manifest 的 HTML 文档(供离线浏览) 如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议文件扩展名是:".appcache"。

注意:manifest 文件需要设置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

bash 复制代码
CACHE MANIFEST    //必需
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js     //上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件被加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然可用。

NETWORK:    //NETWORK 部分规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:(使用星号来指示所有其他其他资源/文件都需要因特网连接)
login.asp

FALLBACK:
/html/ /offline.html    //FALLBACK 部分规定如果无法建立因特网连接,则用 "offline.html" 替代 /html/ 目录中的所有文件:(第一个 URI 是资源,第二个是替补)

一旦应用被缓存,它就会保持缓存直到发生下列情况:

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

关于应用程序缓存的注意事项:

1.请留心缓存的内容。

2.一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。

3.注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器的限制是每个站点 5MB)。

[www.w3school.com.cn/html/html5_...]

Web Workers

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

Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。

xml 复制代码
<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {//在创建 web worker 之前,请检测用户浏览器是否支持它:
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");  //检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:
        }
        w.onmessage = function(event) { //向 web worker 添加一个 "onmessage" 事件监听器:
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() { 
    w.terminate();  //当创建 web worker 后,它会继续监听消息(即使在外部脚本完成后)直到其被终止为止。如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
    w = undefined;  //如果您把 worker 变量设置为 undefined,在其被终止后,可以重复使用该代码:
}
</script>

</body>
</html>

Web Worker 和 DOM

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

  • window 对象
  • document 对象
  • parent 对象

[www.w3school.com.cn/html/html5_...]

SSE

Server-Sent 事件允许网页从服务器获得更新。
Server-Sent 事件 - One Way Messaging

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

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。

例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。

接收 Server-Sent 事件通知

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

bash 复制代码
var source = new EventSource("demo_sse.php");//-   创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
source.onmessage = function(event) {//-   每当接收到一次更新,就会发生 onmessage 事件
    document.getElementById("result").innerHTML += event.data + "<br>";//-   当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
};

[www.w3school.com.cn/html/html5_...]

相关推荐
Yaml41 分钟前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo4 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v8 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫8 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.14 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript