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

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

文章目录

  • Video
  • Audio
  • Drag & Drop
  • Web Storage
    • localStorage
    • sessionStorage
  • Application Cache
  • Web Worker
  • Server-sent Event
  • Canvas
  • SVG

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>
  • controls: 控件（播放器控制条
  • autoplay: 自动播放

<source>: 用于定义<video>元素的媒体资源。
可以提供多个 <source> 元素以支持不同的视频格式。浏览器将选择第一个支持的格式进行播放。

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

<object>: 用于在 <video> 元素不受支持时提供替代内容。这里提供了一个 Flash 视频（SWF 格式）的备用方案.
<embed> 元素是 <object> 的一种替代方式，这里用于嵌入 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>

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)" />

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

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>

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>

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.jsNETWORK:
login.aspFALLBACK:
offline.html

<!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>

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()">开始 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("../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>

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

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

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 + "<br />";  };  }  else  {  document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";  }  
</script>

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>

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>

style:

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

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

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

  • 填充规则为 “evenodd”。

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/706523.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

二次供水物联网：HiWoo Cloud助力城市水务管理升级

二次供水物联网：HiWoo Cloud助力城市水务管理升级

随着城市化的快速推进&#xff0c;二次供水系统作为城市基础设施的重要组成部分&#xff0c;其稳定运行和高效管理显得至关重要。然而&#xff0c;传统的二次供水管理方式在应对复杂多变的城市供水需求时&#xff0c;显得力不从心。为了破解这一难题&#xff0c;HiWoo Cloud平台…
阅读更多...
应用回归分析：弹性网络回归

应用回归分析：弹性网络回归

弹性网络回归&#xff1a;原理、优势与应用 弹性网络回归&#xff08;Elastic Net Regression&#xff09;是一种广泛使用的线性回归方法&#xff0c;它结合了岭回归&#xff08;Ridge Regression&#xff09;和套索回归&#xff08;Lasso Regression&#xff09;的特点。通过…
阅读更多...
【Spring连载】使用Spring Data访问 MongoDB（十四）----Mongodb特有的查询方法

【Spring连载】使用Spring Data访问 MongoDB（十四）----Mongodb特有的查询方法

【Spring连载】使用Spring Data访问 MongoDB&#xff08;十四&#xff09;----Mongodb特有的查询方法 一、定义通用查询方法二、MongoDB特有的查询方法2.1 地理空间查询Geo-spatial Queries2.2 基于JSON的查询方法和字段限制2.3 使用SpEL表达式的基于JSON的查询2.4 全文检索查询…
阅读更多...
【spring boot结合rabbit mq 到点执行，可精确到秒】

【spring boot结合rabbit mq 到点执行，可精确到秒】

【spring boot结合rabbit mq 到点执行&#xff0c;可精确到秒】 创建队列枚举创建自定义的队列消息pojo创建队列和延迟队列发送mq 消息接收mq 消息DateTimeUtil测试注意点 创建队列枚举 public enum QueueEnum {/*** 各种异步消息频道*/TEST(1,"test","队列频道…
阅读更多...
等保2.0高风险项全解析：判定标准与应对方法

等保2.0高风险项全解析：判定标准与应对方法

引言 所谓高风险项&#xff0c;就是等保测评时可以一票否决的整改项&#xff0c;如果不改&#xff0c;无论你多少分都会被定为不合格。全文共58页&#xff0c;写得比较细了&#xff0c;但是想到大家基本不会有耐心去仔细看的&#xff08;凭直觉&#xff09;。这几天挑里边相对…
阅读更多...
android 网络请求总结

android 网络请求总结

1 先看下基础部分&#xff1a; android okhttp网络访问是基于 tcp/ip 的 最上层是应用层的封装&#xff0c;有http&#xff0c;https&#xff08;加密&#xff09;&#xff0c;ftp 下面是socket套接字的封装&#xff0c;就是将ip和端口的封装 在下面就是tcp/udp 在下面 ip协议…
阅读更多...
Java学习--学生管理系统(残破版)

Java学习--学生管理系统(残破版)

代码 Main.java import java.util.ArrayList; import java.util.Scanner;public class Main {public static void main(String[] args) {ArrayList<Student> list new ArrayList<>();loop:while (true) {System.out.println("-----欢迎来到阿宝院校学生管理系…
阅读更多...
可视化图文报表

可视化图文报表

Apache Echarts介绍 Apache Echarts是一款基于Javascript的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表。 官网&#xff1a;Apache ECharts 入门案例&#xff1a; <!DOCTYPE html> <html>…
阅读更多...
flutter build ipa 打包比 xcode archive 打出的ipa包大

flutter build ipa 打包比 xcode archive 打出的ipa包大

为什么 flutter build ipa 打包比 xcode archive 打出的ipa包大&#xff1f; 如果你用Flutter构建的.ipa文件比通过Xcode Archive构建的.ipa文件要大&#xff0c;这可能是因为Flutter构建了一个包含了多平台的二进制文件的通用包。这意味着在Flutter构建的.ipa中包含了所有的C…
阅读更多...
C#，弗洛伊德-瑞文斯特（Floyd-Rivest）算法与源代码

C#，弗洛伊德-瑞文斯特（Floyd-Rivest）算法与源代码

Robert W. Floyd 1 Floyd-Rivest 算法 Floyd-Rivest 算法是一种选择算法&#xff0c;用于在不同元素的数组中找到第k个最小元素。它类似于快速选择算法&#xff0c;但在实际运行中有更好的运行时间。 和 QuickSelect 一样&#xff0c;该算法基于分区的思想工作。对数组进行分…
阅读更多...
济南适宜地提取

济南适宜地提取

题目： 网上下载中国的DEM、土地利用地图(1980、2000、2015年的）和一张最新济南市行政区划 图(要求:莱芜市并入济南后的区划图); 2.网上下载中国2015年年平均降水空间插值数据;3.．网上下载中国2015年年平均气温空间插值数据; (注:以上数据可到资源环境科学与数据中心下载http…
阅读更多...
51单片机 串口

51单片机 串口

一、串口基本认知概念 串口是一种用于在计算机或其他设备之间进行数据传输的通信接口。串口传输是通过发送和接收数据位来进行的&#xff0c;通常是一个字节一个字节地传输。串口通常有多种参数设置&#xff0c;比如波特率、数据位、校验位和停止位等&#xff0c;这些参数需要…
阅读更多...
服务器感染了.Elbie勒索病毒，如何确保数据文件完整恢复？

服务器感染了.Elbie勒索病毒，如何确保数据文件完整恢复？

导言&#xff1a; 今天将和大家分享一个备受关注的话题&#xff1a;Elbie勒索病毒。它不仅是数字世界中的恶梦&#xff0c;更是我们数据安全的宿敌。但是&#xff0c;别担心&#xff0c;我将为你揭开它的面纱&#xff0c;并提供如何挽救被它锁定的数据以及预防的方法。如果您正…
阅读更多...
【Docker】安装及相关的命令

【Docker】安装及相关的命令

目录 一 Docker简介 1.1 是什么 1.2 优缺点 1.3 应用场景 1.4 安装 二 命令 2.1 Docker基本命令 2.2 Docker镜像命令 2.3 Docker容器命令 一 Docker简介 1.1 是什么 Docker是一个开源的应用容器引擎&#xff0c;它基于Go语言实现&#xff0c;并利用操作系统本身已有的…
阅读更多...
【QT+QGIS跨平台编译】之五十四：【QGIS_CORE跨平台编译】—【qgssqlstatementlexer.cpp生成】

【QT+QGIS跨平台编译】之五十四：【QGIS_CORE跨平台编译】—【qgssqlstatementlexer.cpp生成】

文章目录 一、Flex二、生成来源三、构建过程一、Flex Flex (fast lexical analyser generator) 是 Lex 的另一个替代品。它经常和自由软件 Bison 语法分析器生成器 一起使用。Flex 最初由 Vern Paxson 于 1987 年用 C 语言写成。 “flex 是一个生成扫描器的工具，能够识别文本中…
阅读更多...
电机控制----电机极对数的作用

电机控制----电机极对数的作用

电机控制----电机极对数的作用 1. 电机极对数的概念和含义 电机的极对数是指电机运动部件磁场南、北极之间相邻的个数。简单来说&#xff0c;电机极对数就是电机磁极的数量。一般情况下&#xff0c;电机极对数越多&#xff0c;电机的转速越慢&#xff0c;但是转矩越大&#xf…
阅读更多...
状态机2——————

状态机2——————

1.原理 2.代码 2.1 complex_fsm.v module complex_fsm(input wire sys_clk ,input wire sys_rst_n ,input wire pi_money_half ,input wire pi_money_one ,output reg po_cola ,output reg po_money );parameter IDLE 5b00001,HALF 5b00010,ONE 5b00100…
阅读更多...
算法竞赛实用板子

算法竞赛实用板子

一、声明 自用版参考acwing&#xff0c;致力于实用、好用&#xff0c;板子中有个人理解&#xff0c;持续更新。 二、开板 1.快排 void quick_sort(int q[],int l,int r) {if(l>r)return; //出口int il-1,jr1,xq[lr>>1]; //分治方法while(i<j){do i;w…
阅读更多...
k8s（6）

k8s（6）

目录 一.kubectl 命令行管理K8S 陈述式资源管理方式&#xff08;可理解成使用一条kubectl命令及其参数选项来实现资源对象的管理操作&#xff09; service的4的基本类型&#xff1a; service的端口 应用发布策略&#xff1a; 声明式资源管理方式&#xff08;可理解成使用…
阅读更多...
spring boot 自定义注解封装(@RequestLimit注解)

spring boot 自定义注解封装(@RequestLimit注解)

描述&#xff1a; RequestLimit(time3)防重复点击&#xff0c;限制单个会话的请求频率。但是 RequestLimit注解中的参数不能传常量。 例如&#xff1a;不能通过获取application.yml文件中的配置信息&#xff0c;去动态配置限制时间&#xff0c;所以就对RequestLimit注解封装。 …
阅读更多...
最新文章

Copyright @ 2022~2023