HTML5【2】

Azureky
199 阅读17分钟

本文是学习HTML5掘金小册所整理的笔记 第二篇~ 2023.12.27

文档编辑属性 API

小结：HTML5 的文档编辑属性为开发者提供了一组灵活和强大的工具，可以在 Web 网页实现各种文本编辑和格式化功能。开发者可以根据自己的需求和网站的特点，选择合适的编辑属性，为用户提供更好的文本输入和编辑体验。

需要注意的是，如果开发者想要在实现网页可编辑的功能时，应该优先考虑使用 contenteditable。只有在及其特殊的情况下（例如需要在整个文档中进行编辑时）才建议使用 designMode。

两个API的兼容性都很好，因此不太需要考虑兼容性问题。

文档编辑能力：让用户能直接在页面上编辑文本、插入图片、更改样式等操作（就例如写博客、电子邮件等操作）

HTML5中有两个可方便实现文档可编辑能力的API：contenteditable 和 designmode。

contenteditable

​ 可以在任何一个标签中将这个属性设置为true(默认为false)，可以将任何元素变成可编辑的状态。

<h1>HTML5 Contenteditable</h1>
<div contenteditable="true">
  <p>这是一个可编辑的段落。</p>
</div>

此时，这个div元素已经变成可编辑元素，用户可以在其中编辑文字，插入图片等。

contenteditable 还可以与其他属性配合使用，例如 spellcheck 和 placeholder。

  • spellcheck 属性可以控制是否启用拼写检查。

  • placeholder 属性可以设置一个占位符文本，当用户未输入任何内容时显示。

    【备注】：如果想要检验拼写检查，只需要让编辑框获取焦点即可自动进行拼写校验。

designMode

designMode 是 Dom对象上的一个属性，它可以将整个文档变成可编辑的模式。只需将 document.designMode 属性设置为 on，用户就可以在整个文档中编辑文本、插入图片和更改样式等内容。

<script>
    function enableDesignMode() {
      document.designMode = "on";
    }
  </script>

*需要注意的是，在使用 designMode 时无法编辑 <iframe> 标签中的内容，并且在某些浏览器中，使用 designMode 可能会导致一些安全问题。

地理定位 API

HTML 地理定位 API 提供了一种简单且可靠的方法，使得开发人员可以便捷地获取用户的地理位置信息，并利用该信息构建地理位置相关的 Web 应用程序。通过结合其他地理位置 API，开发者可以创建出高度交互和实用的 Web 应用程序，例如基于位置的搜索和导航应用程序。

HTML5提供了地理定位API，让网站可以获取用户的地理位置信息。

使用步骤：首先需要请求用户授权——> 获取用户位置信息——> 错误处理

用户授权 if(navigator.geolocation)

//不可重写，浏览器默认格式
<script>
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // 成功获取用户位置
  }, function(error) {
    // 获取用户位置失败
  });
} else {
  // 浏览器不支持地理定位
}
</script>

获取用户位置信息，使用getCurrentPosition()

<script>
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    // 使用经度和纬度信息来处理您的应用程序逻辑
  }, function(error) {
    // 获取用户位置失败
  });
} else {
  // 浏览器不支持地理定位
}
</script>

getCurrentPosition() 返回值

若获取地理位置成功，则 getCurrentPosition() 方法会返回一个位置信息对象，该对象的属性及其含义：

属性描述
coords.latitude十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔，海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向，从正北开始以度计
coords.speed速度，以米/每秒计
timestamp响应的日期/时间

以下是一个实际应用的例子：

// .js代码
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    document.getElementById("location").innerHTML = "浏览器不支持地理位置信息。";
  }
}

function showPosition(position) {
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
  let accuracy = position.coords.accuracy;
  document.getElementById("location").innerHTML = "您的位置(经纬度)是：" + latitude + ", " + longitude + "，精度为 " + accuracy + " 米。";
}

错误情况以及处理

例如用户拒绝授权，地理位置不可用，获取信息超时，其他未知错误。

<script>
function dealError(error) {
  switch(error.code) {
    // 用户拒绝了地理定位请求
    case error.PERMISSION_DENIED:
      console.log("用户拒绝了地理定位请求。");
      break;
    // 地理位置信息不可用
    case error.POSITION_UNAVAILABLE:
      console.log("地理位置信息不可用。");
      break;
    // 获取位置信息超时
    case error.TIMEOUT:
      console.log("获取位置信息超时。");
      break;
    // 其他未知错误
    default:
      console.log("发生其他未知错误");
      break;
  }
}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // 成功获取用户位置
  }, dealError, { timeout: 10000 }); // 设置获取位置信息的超时时间为10秒
} else {
  // 浏览器不支持地理定位
}
</script>

Geolocation对象的高级用法

监听用户位置并实时

开发者可以使用 Geolocation.watchPosition(fn) 来不断监听用户的位置信息以及更新过后的位置信息。

<script>
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
      console.log("浏览器不支持地理定位 API");
  }
}
function showPosition(position) {
  console.log(`用户当前位置: Latitude: ${position.coords.latitude} Longitude: ${position.coords.longitude}`);
}
</script>

取消监听

使用 Geolocation.clearWatch() 方法取消对用户地理位置信息的监听。

以下是一个包含兼容性检测，错误检测的使用HTML5 Geolocation获取用户位置的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<input type="button" onclick="getLocation()" value="确认" />
	<div id="position"></div>
	<script type="text/javascript">
		var x = document.getElementById('position');
		function getLocation() {
			if (navigator.geolocation) {
			try {
				navigator.geolocation.getCurrentPosition(
					function getLocationSuccess(e) {
						x.innerHTML = '纬度：' + e.coords.latitude +
						'<br/>经度：' + e.coords.longitude;
					},
					function getLocationError(err) {
						switch (err.code) {
							case err.PERMISSION_DENIED:
								x.innerHTML = '用户拒绝对获取地理位置的请求。<br/>' + err.message;
								break;
							case err.POSITION_UNAVAILABLE:
								x.innerHTML = '位置信息是不可用的。<br/>' + err.message;
								break;
							case err.TIMEOUT:
								x.innerHTML = '请求用户地理位置超时。<br/>' + err.message;
								break;
							case err.UNKNOWN_ERROR:
								x.innerHTML = '未知错误。<br/>' + err.message;
								break;
						}
					}
				);
			 } else {
			} catch (err) {
				x.innerHTML = '该浏览器不支持获取地理位置。';
			}
		}
	</script>
</body>
</html>

注意：

拖放（Drag and Drop）API

HTML5 原生为开发者提供了拖放（Drag and Drop 简称 DnD）API，它允许用户将一个 HTML 元素拖拽到另一个元素上。这个功能可以用于实现各种交互效果，例如拖拽文件上传、拖拽排序等。（之前使用旧html时，如果想实现拖放功能，需要使用js代码）

创建可拖放对象

为了让元素可以被拖放，需要将目标元素的标签属性 draggable 设置为 true。

<img src="./images/juejin.svg" draggable="true" width="100" height="32">

拖放API

在拖放过程中的两个核心事件：dragstart 和 dragover。还有一些其他的事件会在拖放的不同阶段触发。

事件描述
dragstart用户开始拖动对象时触发。
dragenter鼠标初次移到目标元素并且正在进行拖动时触发。这个事件的监听器应该之指出这个位置是否允许放置元素。如果没有监听器或者监听器不执行任何操作，默认情况下不允许放置。
dragover拖动时鼠标移到某个元素上的时候触发。大多数时候，监听器触发的操作与 dragenter 事件相同。
dragleave拖动时鼠标离开某个元素的时候触发。监听器应该移除用于放置反馈的高亮或插入标记。
drag对象被拖拽时每次鼠标移动都会触发。
drop拖动操作结束，放置元素时触发。监听器负责检索被拖动的数据以及在放置位置插入它。
dragend拖动对象时用户释放鼠标按键的时候触发。

注意：拖放 API 在拖放期间只会触发拖放事件，对于拖放操作期间的鼠标事件，比如 mousemove 事件并不会触发。

拖放对象DragTransfer

DragTransfer 拖放对象包含的属性及方法

属性描述
types包含了可用数据类型的 DOMString 列表。
effectAllowed表示拖动操作的可接受效果的 DOMString。
dropEffect表示放置操作的效果的 DOMString。
files包含了用户拖动到拖放区域内的文件的 FileList。
setData(format, data)添加指定类型给定的数据
getData(format)返回指定的数据。如果没有该数据则返回空字符串。
clearData([format])移除指定格式的数据。如果省略参数则移除所有数据。

​ *DragTransfer 拖放对象常见的Types属性： 包含了可用数据类型的 DOMString 列表，它们表示可以在拖放操作中传输的数据类型。

类型描述
text/plain表示纯文本数据类型。
text/html表示 HTML 格式的文本数据类型。
text/xml表示 XML 格式的文本数据类型。
text/uri-list表示一个 URL 列表。
application/json表示 JSON 格式的数据类型。
image/png表示 PNG 格式的图片数据类型。
image/jpeg表示 JPEG 格式的图片数据类型。
image/gif表示 GIF 格式的图片数据类型。
audio/mpeg表示 MP3 格式的音频数据类型。
video/mp4表示 MP4 格式的视频数据类型
application/pdf表示 PDF 格式的文档数据类型。

使用 DragTransfer 对象 例如将图片拖动到div容器中

  1. 设置拖动开始事件 ondragstart 和 DataTransfer.setData

    设置完成可拖放对象后，需要对元素被拖动的时候会发生什么事件做相应的处理，一般来说通过ondragstart 事件调用一个函数，拖动过程中通过 DataTransfer.setData 来对拖动的数据格式以及内容做处理。

    HTML 代码部分，ondragstart 绑定 drag(event) 方法。

     <img src="./images/juejin.svg" draggable="true" ondragstart="drag(event)" id="drag_container1" width="100" height="32">

    JavaScript 代码部分，使用DataTransfer.setData 设置拖拽的数据格式和内容。text/plain 也就是文本类型（也可以设置为 Text），传递的数据内容是元素的 id。

    function drag(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
}

  2. 放置到哪里 ondragover

    需要注意的是，默认情况下，无法将数据或者元素放置到其他元素中。如果需要设置允许放置，必须阻止对应元素的默认处理方式。

    HTML 代码，对目标元素绑定 ondragover 事件。设置了一个可以被拖拽放置的元素容器。

    <div class="container" ondragover="allowDrop(event)"></div>

    JavaScript 代码，允许目标元素作为容器接受拖拽元素的放置. 也就是阻止对应元素的默认处理方式。

    function allowDrop(event) {
  event.preventDefault();
}

  3. 进行放置 ondrop

    最后，当放置被拖元素以及携带的数据时，会发生 ondrop 事件，方便开发者处理元素拖放后要处理的回调内容。

    HTML 代码，为容器绑定 ondrop 事件。

    <div class="container" ondrop="drop(event)"></div>

    JavaScript 代码，拖拽完成后向目标容器放置拖拽元素。

    function drop(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  event.target.appendChild(document.getElementById(data));
}

注意：getData(format) 的数据类型必须与 setData(format, data) 类型保持一致，如果没有找到对应的数据类型，则返回一个空字符串。

兼容性问题 （部分的浏览器不能使用html5的拖放功能）

  • jQuery UI 插件

jQuery UI 提供了一套拖放插件，支持大部分主流浏览器以及 IE6 及以上版本，开发者可以在 jQuery UI 官网下载并引入相应的 JavaScript 和 CSS 文件，然后使用 draggable 和 droppable 方法来实现拖放功能。

Canvas（标签&API）

开发者可以在 Canvas 上绘制任何内容，并使用 JavaScript 对其进行控制和实现复杂交互。HTML5 Canvas 是一个强大的工具，可以帮助开发者实现各种有趣的视觉效果和交互体验，一个经常使用的场景就是通过 Canvas 技术来实现 HTML5 游戏。

Canvas 基本用法步骤

创建canvas 指定长宽

<canvas id="canvas" width="400" height="300"></canvas>

获取 Canvas 上下文对象

在使用 Canvas 前，需要先获取 Canvas 元素的上下文对象。

const canvas = document.getElementById('canvas');  //获取 Canvas 元素
const context = canvas.getContext('2d');  //获取 2D 渲染上下文对象

*前端实现 3D 效果用的是 WebGL

设置 Canvas 属性

例如画笔的颜色、线条的宽度等。

context.strokeStyle = 'red';   //设置了画笔的颜色为红色
context.lineWidth = 6;   //线条的宽度为 6 像素

更多的canvas属性：

属性描述
fillStyle用于设置填充颜色
strokeStyle用于设置线条颜色
lineWidth用于设置线条的宽度
lineCap用于设置线条的端点样式
lineJoin用于设置线条相交处的样式
miterLimit用于控制当线条相交处的角度太小时如何处理
globalAlpha用于设置 Canvas 的全局透明度
shadowColor用于设置阴影的颜色

除了上面列举的属性之外，还有很多 Canvas 绘制相关的属性，详细可以参考官方文档：Canvas Context 2D 文档

绘制图形

  • 绘制路径API —— 绘制直线、折线等线段

使用 beginPath() 方法开始绘制路径，使用 moveTo() 方法设置起始点，使用 lineTo() 方法绘制直线段，最后使用 stroke() 方法绘制路径的边框。

// 从 (x1, y1) 点到 (x2, y2) 点绘制一条线
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
  • 绘制矩形 rect() 方法
// 从 (x, y) 点绘制一个宽为 width 高为 height 的矩形
context.rect(x, y, width, height);
context.stroke();

在这个例子中，我们使用 rect() 方法绘制了一个起点为 (x, y)、宽度为 width、高度为 height 的矩形，并使用 stroke() 方法绘制了矩形的边框。

  • 绘制圆形 arc() 方法
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();

在这个例子中，我们使用 arc() 方法绘制了一个以 (x, y) 为圆心、半径为 radius 的圆形，并使用 stroke() 方法绘制了圆形的边框。

  • 绘制图像（将图片粘贴到画布上） 使用 drawImage() 方法
const image = new Image();
image.src = 'html5.png';
image.onload = function() {
  context.drawImage(image, x, y);
};

在这个例子中，我们创建了一个图像对象，并设置它的 src 属性为 html5.png。在图像加载完成后，使用 drawImage() 方法将图像绘制在 Canvas 上。

结束时清除 Canvas

在绘图完成后，可以使用 clearRect() 方法清除 Canvas 上的图形。

context.clearRect(0, 0, canvas.width, canvas.height);

  var ctx = canvas.getContext('2d');

// 清除画布 封装按钮
  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  <button onclick="clearCanvas()">清除画布</button>   //清除画布按钮

canvas高级—— 使用 Canvas 制作动画效果

Canvas 另外一个高级用法并且也是被广大开发者津津乐道的就是可以非常方便的制作动画效果，并且再搭配上 requestAnimationFrame() API 一起使用，效果更佳。

SVG

  • HTML5默认支持 SVG标签（Scalable Vector Graphics，可缩放矢量图形），它是一种基于 XML 的标记语言，用于创建可缩放的矢量图形。SVG 图像使用数学表示法来描述形状、颜色和文本等元素。

  • SVG的优点：SVG 图像可以无限放大而不会失去清晰度(矢量图)，可以使用js来交互(更改SVG的样式)，传输速度更快

  • 应用：图标类库，例如iconfont SVG 图像非常适合用于创建图表和数据可视化

SVG使用方式

直接内嵌SVG标签

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" id="html5"><path fill="#E44D26" d="M19.569 27l8.087 89.919 36.289 9.682 36.39-9.499 8.096-90.102h-88.862zm72.041 20.471l-.507 5.834-.223 2.695h-42.569l1.017 12h40.54l-.271 2.231-2.615 28.909-.192 1.69-22.79 6.134v-.005l-.027.012-22.777-5.916-1.546-17.055h11.168l.791 8.46 12.385 3.139.006-.234v.012l12.412-2.649 1.296-13.728h-38.555l-2.734-30.836-.267-3.164h55.724000000000004l-.266 2.471zM27.956 1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-5.143v5.633h-5.623v-16.822zM51.738 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-5.623v-11.243zM64.777 1.627h5.862l3.607 5.911 3.603-5.911h5.865v16.822h-5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-16.822zM86.513 1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path>
  </svg>

通过 <img> 标签加载 SVG 文件（感觉最好不用这种方式）

<img alt="替换文字" src="xxx.svg" />

<img> 标签加载 SVG 文件时，值得注意的是：不能被缩放或修改，不能与用户交互，甚至不能用

SVG基础语法

<svg></svg>

SVG 属性

SVG 提供了许多属性，用于定义 SVG 图形的大小、颜色、样式和转换等。常见的 SVG 属性包括 width、height、fill(fill="red" 填充颜色)、stroke、stroke-width、以及 transform图像旋转(transform="rotate(45)")等。

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red" stroke="black" stroke-width="2" />
</svg>

SVG 属性

SVG 提供了许多元素，用于创建和组合 SVG 图形。常见的 SVG 元素包括 rect矩形 、circle 圆形、line 、path 和text 等。

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red" />
  <circle cx="100" cy="100" r="50" fill="green" />
  <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" /> //使用了坐标
  <path d="M50,50 L100,100 L50,100 Z" fill="none" stroke="black" stroke-width="2" />
  <text x="100" y="150" font-size="24" text-anchor="middle">Hello, Juejin HTML5!</text>
</svg>

SVG 坐标系

SVG 使用笛卡尔坐标系来定位和绘制元素。原点 (0, 0) 位于 SVG 图形的左上角，向右为正 X 轴，向下为正 Y 轴。例如绘制直线段：

<svg width="200" height="200">
  <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
</svg>

SVG高级用法

SVG 滤镜——使用 filter 属性、SVG 渐变——线性渐变 <linearGradient>，径向渐变 <radialGradient>、SVG 动画 SVG 官方文档

SVG 与 Canvas

SVGCanvas
XML 语言图形JavaScript 绘制的 2D 图形
不依赖分辨率依赖分辨率
支持事件处理机制不支持事件处理机制
复杂度过高影响渲染速度可以绘制复杂型场景，呈现效果与图片一致
不适合图像密集型应用，比如游戏适合编写图像密集型应用，特别是小游戏

SVG 库和框架

当涉及到较为复杂的效果和动画的场景时，使用原生标签比较复杂，使用第三方框架，提升研发效率。

SVG.js 等

Web Storage 对象 —— 来帮Cookie的忙

在 HTML5 出现之前，应用程序数据一般来说只能存储在 Cookie 中，开发者没有选择的余地，但是 Cookie 存放的消息会伴随每一次服务器请求而携带，对于一些场景来说是不合理的。

*Cookie 更多的用途是用在身份认证来保证网站资源的安全性，而不是大数据量的本地数据存储。

大数据量本地存储方案取而代之的是 webstorage和indexedDB。

Web Storage 对像

HTML5 Web Storage：使用浏览器提供的本地存储机制来存储数据

HTML5 Web 存储提供了两种本地存储机制：localStorage 和 sessionStorage。这两个 API 可以在浏览器中存储键值对数据，可以根据需要将数据存储在客户端，以便在用户下次访问应用程序时再次使用。这样可以避免每次都向服务器发送请求，提高应用程序的性能和响应速度。

localStorage 和 sessionStorage 除了存储时间不同之外，具有完全相同的 API，具体如下：

API描述
setItem(key, value)存储键值对
getItem(key)获取对应键的内容，如果没有返回为 null。
removeItem(key)移除对应键的内容
clear()移除当前域名下面所有的存储内容。

localStorage 对象 本地存储对象

永久性存储 —— localStorage 对象允许您在浏览器中存储键值对数据，并在用户关闭浏览器后仍然保留这些数据。这意味着 localStorage 中存储的数据可以在用户下次访问应用程序时再次使用。

localStorage 可以在多个窗口和标签之间共享数据，而 sessionStorage 只能在单个会话中共享数据。

localStorage 在不同浏览器都会有一个容量限制，当超出容量过后继续存储就会出现异常导致程序崩溃. 超出容量后的异常处理：采用 LRU 算法进行处理等

// 存储数据 以键值对的形式
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空数据
localStorage.clear();

sessionStorage 对象 会话存储对象

会话级别存储 —— sessionStorage 对象也允许您在浏览器中存储键值对数据，但是它只在用户关闭浏览器之前保留这些数据，当用户关闭浏览器后，这些数据将被清除。

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
var value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空数据
sessionStorage.clear();

需要注意的是:

Web Storage 的存储内容只能是 String 类型

其他类型会通过元素自身的 toString() 方法将其转换成 String 类型后进行存储

如果需要存储对象，需要使用 JSON.stringify() 进行转换后存储。

// 将 JavaScript 对象转换为字符串并存储到 localStorage 中
const obj = { name: 'HTML5 基础课', author: '前端周公子' };
localStorage.setItem('course', JSON.stringify(obj));

// 从 localStorage 中检索存储的对象并将其反序列化为原始值
const courseObj = JSON.parse(localStorage.getItem('course'));
console.log(courseObj.name); // 输出 "HTML5 基础课"
console.log(courseObj.author); // 输出 "前端周公子"

JSON.parse():

​ JSON 通常用于与服务端交换数据。

​ 在接收服务器数据时一般是字符串。

​ 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

Web Storage 与 Cookie 比较

CookieWeb Storage
是否与服务器交互会跟随每次 HTTP 请求发送到服务端完全存放到浏览器本地，不与服务端交互，更安全
存储容量2KB≈5MB（不同浏览器不同大小）
存储周期可以通过 js 设置过期时间localStorage 永久存储，sessionStorage 会话级别存储
可操作性需要自己封装 js 方法操作内置丰富的 api，比如 getItem()、setItem() 和 removeItem() 等。
是否跨域跨域，且需要设置作用域跨域，仅在当前域可用。

@Azureky

avatar
文章
阅读
粉丝