HTML5
发表HTML14 分钟读完 (大约2152个字)

HTML5

新增语义化标签

HTML5 添加了很多语义元素如下所示：

标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

HTML5 浏览器兼容性处理

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

1
2
3
header, section, footer, aside, nav, main, article, figure {
  display: block; 
}

为 HTML 添加新元素

为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>为 HTML 添加新元素</title>
    <script>
      document.createElement("myHero")
    </script>
    <style>
      myHero {
        display: block;
        background-color: #ddd;
        padding: 50px;
        font-size: 30px;
      }
    </style> 
  </head>

  <body>

    <h1>我的第一个标题</h1>

    <p>我的第一个段落。</p>

    <myHero>我的第一个新元素</myHero>

  </body>
</html>

Internet Explorer 浏览器问题

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

html5shiv.js 引用代码必须放在 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>
 
<body>
</body>
</html>

<canvas>

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

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

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

使用 JavaScript 来绘制图像

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

1
2
3
4
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标
  • 绘制圆形：arc(x,y,r,start,stop)
  • 文本：fillText(text,x,y) - 在 canvas 上绘制实心的文本。strokeText(text,x,y) - 在 canvas 上绘制空心的文本。
  • 渐变：createLinearGradient(x,y,x1,y1) - 创建线条渐变。createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变。当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。使用 createLinearGradient()。使用 createRadialGradient()。
  • 图像：把一幅图像放置到画布上, 使用以下方法:drawImage(image,x,y)

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

  • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

  • 不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

    • 保存数据：localStorage.setItem(key,value);
    • 读取数据：localStorage.getItem(key);
    • 删除单个数据：localStorage.removeItem(key);
    • 删除所有数据：localStorage.clear();
    • 得到某个索引的key：localStorage.key(index);

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

1
2
3
4
5
// 存储:key="sitename" 和 value="hhh" 创建一个 localStorage 键/值对。
localStorage.setItem("sitename", "hhh");

// 查找
document.getElementById("result").innerHTML = "网站名：" +  localStorage.getItem("sitename");

sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

1
2
3
4
5
6
7
8
9
10
//实例展示了用户点击按钮的次数。
if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

应用程序缓存（Application Cache内存缓存）

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

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

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

HTML5 Cache Manifest 实例

1
2
3
4
5
6
7
8
<!DOCTYPE HTML>
<html manifest="demo.appcache">

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

</html>

Manifest 文件

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

manifest 文件可分为三个部分：

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

Web Worker

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

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

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

1
2
3
4
5
6
7
8
9
10
var i=0;

function timedCount()
{
  i=i+1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();
1
2
3
4
5
6
7
8
9
10
11
12
if(typeof(Worker) !== "undefined") {
  //检测是否存在 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;
       };
   } else {
       document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
   }
1
w.terminate();

服务器发送事件(Server-Sent Events,SSE)

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

接收 Server-Sent 事件通知

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

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

WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

1
var Socket = new WebSocket(url, [protocol] );

获取 Web Socket 连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

HTML5

http://example.com/2021/04/20/前端/HTML/HTML5/

作者

冷冷

发布于

2021-04-20

更新于

2021-10-10

许可协议

CC BY-NC-SA 4.0

#
关注我

最新文章

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×