• HTML5详解！在HTML上增加的特性

    上一篇文章：
    全面介绍HTML的语法！轻松写出网页

    文章目录

    Video

    <video width="320" height="240" controls="controls" autoplay="autoplay">  
  <source src="./video/movie.ogg" type="video/ogg" />  
  <source src="./video/movie.mp4" type="video/mp4" />  
  <source src="./video/movie.webm" type="video/webm" />  
  <object data="./video/movie.mp4" width="320" height="240">  
    <embed width="320" height="240" src="./video/movie.swf" />  
  object>  
video>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • controls: 控件（播放器控制条
    • autoplay: 自动播放

    : 用于定义

    • src: 路径
    • type: 文件格式

    : 用于在 元素不受支持时提供替代内容。这里提供了一个 Flash 视频（SWF 格式）的备用方案.
    元素是 的一种替代方式，这里用于嵌入 Flash 视频。

    Audio

    <audio controls="controls">  
  <source src="./audio/song.ogg" type="audio/ogg">  
  <source src="./audio/song.mp3" type="audio/mpeg">  
  <embed height="100" width="100" src="./audio/song.mp3" />  
audio>

    • 1
    • 2
    • 3
    • 4
    • 5

    Drag & Drop

    下面的代码实现了拖拽图片的功能.

    <style type="text/css">  
  #div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}  
style>

<script type="text/javascript">  
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>

<p>请把 W3School 的图片拖放到矩形中：p>  
  
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
div>  
<br />  
<img id="drag1" src="./img/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    CSS样式:

    • padding:10px; 设置元素的内边距
    • border:1px solid #aaaaaa; 设置元素的边框为1像素实线，颜色为灰色。

    "div1"内的属性:

    • ondrop: 将块放置后执行的函数
    • ondragover: 松开拖拽时执行的函数

    "drag1"内的属性:

    • draggable: 设置可拖拽
    • ondragstart: 开始拖拽时执行的函数

    javaScript代码:

    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)); // 将被拖动元素追加到放置的目标元素中
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    event 对象: 事件对象. 这个对象提供了有关拖放操作的详细信息，例如鼠标位置、拖动的元素、拖动的目标等。
    dataTransfer 对象： dataTransfer 是 event 对象的一个属性，它用于在拖放操作的源元素和目标元素之间传递数据。
    target对象: target 是事件对象 (event) 的一个属性，它表示触发事件的 DOM(Document Object Model,文档对象模型) 元素。在拖放操作中，target 属性通常用于确定拖动的元素或放置目标的身份。

    Web Storage

    localStorage vs sessionStorage

    localStorage 和 sessionStorage 都是 Web Storage API 提供的客户端存储解决方案，它们允许开发者在用户的浏览器中存储键值对的数据。然而，它们之间有一些关键的区别：

    1. 生命周期：

      • localStorage 的数据存储在浏览器中，不会随着窗口或标签页的关闭而失效。除非用户清除浏览器缓存或通过代码删除，否则数据将一直保留。
      • sessionStorage 的数据仅在当前会话期间有效。如果用户关闭了当前标签页或浏览器窗口，sessionStorage 中的数据将被清除。

    2. 作用域：

      • localStorage 的数据在同一个域（domain）下的所有窗口和标签页之间共享。
      • sessionStorage 的数据仅在同一个窗口或标签页中共享，不同窗口或标签页之间不共享。

    3. 存储大小：

      • localStorage 允许存储更大的数据量，通常支持至少 5MB 的存储空间。
      • sessionStorage 也有一定的存储空间，但通常比 localStorage 小。

    localStorage

    <script>  
  function clickCounter() {  
    if(typeof(Storage) !== "undefined") {  
      if (localStorage.clickcount) {  
        localStorage.clickcount = Number(localStorage.clickcount)+1;  
      } else {  
        localStorage.clickcount = 1;  
      }  
      document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";  
    } else {  
      document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";  
    }  
  }  
script>  
head>  
<body>  
<p><button onclick="clickCounter()" type="button">请点击这里！button>p>  
<div id="result">div>  
<p>请点击按钮使计数器递增。p>  
<p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    sessionStorage

    <script>  
  function clickCounter() {  
    if(typeof(Storage) !== "undefined") {  
      if (sessionStorage.clickcount) {  
        sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;  
      } else {  
        sessionStorage.clickcount = 1;  
      }  
      document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";  
    } else {  
      document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";  
    }  
  }  
script>  
head>  
<body>  
<p><button onclick="clickCounter()" type="button">请点击这里button>p>  
<div id="result">div>  
<p>请点击按钮使计数器递增。p>  
<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    Application Cache

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

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

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

    每个指定了 manifest 的页面在用户对其访问时都会被缓存

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

    manifest 文件有三个部分：

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

    一个栗子:

    CACHE MANIFEST
# 2012-02-21 v1.0.0
theme.css
logo.gif
main.js

NETWORK:
login.asp

FALLBACK:
offline.html

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    DOCTYPE html>  
<html manifest="./demo.appcache">  
<head>  
  <meta charset="UTF-8"/>  
  
  <script>    function getDateTime() {  
      var d = new Date();  
      document.getElementById('timePara').innerHTML = d;  
    }  
  script>  
head>  
<body>  
<p id="timePara">  
  <button onclick="getDateTime()">获得日期和事件button>  
p>  
<p><img src="./img/w3school_banner.gif"/>p>  
<p>请打开这个页面，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。  
p>  
body>  
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    Web Worker

    Web Worker 是在浏览器中运行在后台线程的 JavaScript 脚本, 不会影响页面的性能.

    DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8"/>  
  <title>title>head>  
<body>  
  
<p>计数: <output id="result">output>p>  
<button onclick="startWorker()">开始 Workerbutton>  
<button onclick="stopWorker()">停止 Workerbutton>  
<br /><br />  
  
<script>  
  var w;  
  
  function startWorker()  
  {  
    if(typeof(Worker)!=="undefined")  
    {  
      if(typeof(w)=="undefined")  
      {  
        w=new Worker("../js/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>

    • 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
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    onmessage用来监听Web Worker发来的消息, 并在function函数中作处理.

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    Server-sent Event

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

    <div id="result">div>  
<script>  
  if(typeof(EventSource)!=="undefined")  
  {  
    var source=new EventSource("/example/html5/demo_sse.php");  
    source.onmessage=function(event)  
    {  
      document.getElementById("result").innerHTML+=event.data + "
    "    ;  
    };  
  }  
  else  
  {  
    document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";  
  }  
    script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    Canvas

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">  
  Your browser does not support the canvas element.  
canvas>  
<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>  
  
<p>把图片加载到Canvas上p>  
<img id="scream" width="224" height="162"  
     src="./img/eg_flower.png" alt="The Scream">  
<p>Canvas:p>  
<canvas id="myCanvas" width="244" height="182"  
        style="border:1px solid #d3d3d3;">  
  Your browser does not support the HTML5 canvas tag.  
canvas>  
<script>  
  window.onload = function() {  
    var canvas = document.getElementById("myCanvas");  
    var ctx = canvas.getContext("2d");  
    var img = document.getElementById("scream");  
    ctx.drawImage(img, 10, 10);  
  };  
script>

    • 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

    canvas.getContext("2d");: 获取 2D 渲染上下文（context），存储在变量 ctx 中。

    SVG

    Scalable Vector Graphics, 可伸缩向量图

    <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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />  
svg>

    • 1
    • 2
    • 3
    • 4

    style:

    • 填充为红色（fill:red），

    • 边框为蓝色（stroke:blue），

    • 边框宽度为3像素（stroke-width:3），

    • 填充规则为 “evenodd”。

      evenodd: 填充规则是基于奇偶规则的。

      在一个复杂路径中，形成的区域被看作是从路径起点射出一条射线，然后统计这条射线与路径交叉的次数。如果次数是奇数，则点在路径内部；如果次数是偶数，则点在路径外部。evenodd 规则的填充方式是将路径内部的点进行填充。

      具体来说，evenodd 规则的填充方式是：从路径的起点射出一条射线，当射线与路径相交时，计数加一；当射线穿出路径时，计数减一。根据计数的奇偶性，决定点的填充。)

  • 相关阅读:
    波及Win 11，让安全员自动放弃的零日漏洞，微软这次麻烦了
    6-羧基四甲基罗丹明，CAS号: 91809-67-5
    2023年软件安装管家目录最新
    基于遗传算法的微电网调度(风、光、蓄电池、微型燃气轮机）（Matlab代码实现）
    英文科技论文写作与发表-常见英语写作困扰（第3章）
    SAP 权限设置--访问VPN地址
    排序算法(1)
    网站建设中的视觉设计：吸引和保留用户
    node.js的认识与了解2
    Corel VideoStudio会声会影2022旗舰版本视频剪辑软件
  • 原文地址：https://blog.csdn.net/MagicianofLove/article/details/136311442