Web无障碍开发教程 目录 Web无障碍简介 无障碍设计原则 HTML语义化 键盘可访问性 视觉设计与无障碍 多媒体无障碍 表单与交互元素无障碍 辅助技术兼容性 测试与评估 法律和政策合规 网站无障碍声明 Web无障碍简介 什么是Web无障碍 Web无障碍（Web Accessibility）是指设计和开发网站、工具和技术时，确保所有人，包括残障人士，都能平等地访问和使用Web内容。它的目标是消除Web使用中的障碍，让互联网成为一个包容性更强的空间。 Web无障碍涉及多个方面，包括但不限于： 视觉：为视力障碍者提供屏幕阅读器兼容的内容 听觉：为听力障碍者提供音频内容的文字转录 运动：为行动不便 …
1. 介绍 什么是结构化数据？ 结构化数据是一种通过特定的格式和标记语言来描述网页内容的方法，使搜索引擎能够更准确地理解和展示网页内容。常见的格式包括JSON-LD（JavaScript Object Notation for Linked Data）、Microdata和RDFa（Resource Description Framework in Attributes）。网站管理员通过为网页添加结构化数据，可以提供更详细的信息，帮助搜索引擎创建富媒体摘要（Rich Snippets）、知识图谱（Knowledge Graph）条目等，从而提高网页在搜索结果中的可见性和吸引力。 结构化数据与S …
创建多边形 <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=ed …
<!DOCTYPE html> <html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <meta name=“viewport” content=“width=device-width,user-scalable=no”> <meta name=“viewport” content=R …
在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这是“换行符/空格间隙问题”。 <!DOCTYPE html> <html> <head> <title>display:inline-block元素之间空隙的产生原因和解决办法</title> <style type=“text/css”> .parent .chil …
WebRTC需要通过长链接查找到通信双方，然后通过 peer to peer 的方式传输音频数据。 PeerConnection PeerConnection是WebRTC中封装的对象。每一路的音视频会话都会有唯一的一个PeerConnection对象，WebRTC通过这个PeerConnection对象进行视频的发起、传输、接收和挂断等操作。 PeerConnection中包含的属性如下： localDescription：本地描述信息，类型：RTCSessionDescription remoteDescription：远端描述信息，类型：RTCSessionDescription oni …
如果不考虑体验问题，iframe 是最完美的微前端解决方案。 但着产品体验的需求增强，iframe 又带来了一些不好的体验。 url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。 UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中.. 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加 …
Htmlimagelement 接口的 crossOrigin 属性是一个字符串，它指定了在检索图像时使用的跨来源资源共享设置。 指定在获取图像资源时使用的 CORS 模式的关键字的 DOMString。如果不指定 crossOrigin，则在不使用 CORS (获取无 CORS 模式)的情况下获取图像。 anonymous 元素的请求的模式设置为 cors，凭据模式设置为 same-origin。这意味着，如果从加载文档的同一源获取映像，则启用 CORS 并发送凭据。 use-credentials Htmlimagelement 的请求将使用 CORS 模式和 include 凭证模式; …