HTML|笔记

秋梨陈皮汤
254 阅读23分钟

HTML

HTML是什么

  • HyperTest:超文本-图片 标题 链接 表格等
  • Markup Language:标记语言
<!doctype html>

doctype:标记了当前正在使用的html文件是什么样的html版本,浏览器会根据doctype选择使用的渲染模式

基本语法

image-20241106203713191.png

标签分类

image-20241106203915035.png

head标签

image-20241106204104739.png

bady功能性标签

  • 根元素

    • html

  • 元数据和脚本

    • head
    • title
    • meta
    • base
    • link
    • style
    • noscript
    • script

  • 嵌入内容

    • img
    • area
    • map
    • embed
    • object
    • param
    • source
    • iframe
    • canvas
    • track
    • audio
    • video

  • 文本语义

    • span
    • a
    • rt
    • rp
    • dfn
    • abbr
    • q
    • cite
    • em
    • time
    • var
    • samp
    • i
    • b
    • sub
    • sup
    • small
    • strong
    • mark
    • ruby
    • ins
    • del
    • bdi
    • bdo
    • s
    • kbd
    • wbr
    • code

  • 分组内容

    • br
    • hr
    • figcaption
    • figure
    • p
    • ol
    • ul
    • li
    • div
    • pre
    • blockquot
    • dl
    • dt
    • dd

  • 表单元素

    • fieldset
    • meter
    • legend
    • label
    • input
    • textarea
    • form
    • select
    • optgroup
    • option
    • output
    • button
    • datalist
    • keygen
    • progress

  • 文档模块

    • body
    • aside
    • address
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6
    • section
    • header
    • nav
    • article
    • footer
    • hgroup

  • 表格元素

    • col
    • colgroup
    • caption
    • table
    • tr
    • td
    • th
    • tbody
    • thead
    • tfoot

  • 交互元素

    • menu
    • commanc
    • summary
    • details

列表

  •         <h2>世界电影票房排行榜</h2>
        <ol>
          <li>阿凡达</li>
          <li>泰坦尼克号</li>
          <li>复仇者联盟</li>
        </ol>

    image-20241117194332906.png

  •         <h2>霸王别姬</h2>
        <dl>
          <dt>导演：</dt>
          <dd>陈凯歌</dd>
          <dt>主演：</dt>
          <dd>张国荣</dd>
          <dd>张丰毅</dd>
          <dd>巩俐</dd>
          <dt>上映日期：</dt>
          <dd>1993-01-01</dd>
        </dl>

    image-20241117194546577.png

链接

链接里的target 属性用于指定在哪里打开链接。当target属性被设置为"_blank"时，链接将在新的浏览器标签页或窗口中打开。

注:使用target="_blank"时，应始终与rel="noopener noreferrer"一起使用，以避免安全漏洞，特别是在包含用户生成内容的网站上。这可以防止新页面访问window.opener属性，从而无法操作原始页面。

引用

<cite>小王子</cite>

分行

<p><code>
你好
世界
</code></p>

常见的页面划分

image-20241103181408648.png

DOM树

浏览器拿到html代码会进行解析,解析出一个DOM树

image-20241102220830172.png document:根节点

每个节点都是一个dom节点

语义化

  • 语义:HTML中的元素,属性及属性值都拥有默写含义

  • 开发者应该遵循语义来编写HTML

    • lang属性表示内容所使用的语言

谁在使用我们写的HTML

  • 开发者:修改,维护页面
  • 浏览器:展示页面
  • 搜索引擎:提取关键词,排序 优化搜索引擎会很重要
  • 屏幕阅读器:给盲人读页面内容

语义化的好处

  • 代码可读性
  • '可维护性
  • 搜索引擎优化
  • 提升无障碍性
传达内容,而不是样式

如何做到语义化

  • 了解每个标签和属性的含义 可以去看mdn的文档或者w3c上html5的规范
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

HTML5的特性

语义化标签

image-20241106205719334.png

额外的离线存储能力

image-20241106205855357.png

IndexedDB

是一种在客户端存储大量结构化数据的Web API。以下是关于IndexedDB的一些关键信息：

  1. 定义： IndexedDB是一种底层API，用于在客户端存储大量的结构化数据，包括文件和二进制大型对象（blobs）。它使用索引实现对数据的高性能搜索。

  2. 功能：

    • IndexedDB允许创建具有丰富查询能力的Web应用，无需考虑网络可用性，使得应用在在线和离线时都能正常运行。
    • 它是一个事务型数据库系统，类似于基于SQL的关系数据库管理系统（RDBMS），但使用JavaScript对象而非固定列表。
    • IndexedDB允许存储和检索用键索引的对象，可以存储结构化克隆算法支持的任何对象。
    • 它支持异步操作，以免阻塞应用程序。
    • IndexedDB遵守同源策略，只能在相同域名下操作数据。

  3. 应用场景：

    • 离线应用：使用IndexedDB存储用户数据和应用状态，即使在没有网络连接的情况下也能继续操作。
    • 渐进式Web应用（PWA）：IndexedDB被用于存储应用程序的核心数据和用户的操作记录，使应用即使在离线或低带宽环境下也能正常运行。
    • 高频率数据更新：IndexedDB支持高频率的数据写入和读取操作，适合用于存储和更新实时数据。
    • 客户端数据缓存：将数据从服务器获取后，缓存到IndexedDB中，减少网络延迟。
    • Web游戏数据存储：保存玩家的游戏进度、成就、个性化设置和资源文件。
    • 用户个性化设置存储：保存用户的设置和偏好。

IndexedDB是一种强大的客户端存储解决方案，特别适合需要存储大量结构化数据的场景，尤其是那些需要支持离线模式或处理复杂查询的Web应用。

image-20241106210151452.png

image-20241106213841955.png

IndexedDB是异步的,数据的访问,打开还有读取都是通过异步的

PWA&AMP

PWA（渐进式网络应用）

PWA是一种结合了网页和移动应用程序功能的技术概念，旨在提供类似于原生应用程序的用户体验，包括离线访问、推送通知、后台同步等功能，同时又具有网页的优势，如跨平台、无需下载安装等。

  • Service Worker：PWA使用Service Worker作为核心功能之一，它允许应用在后台运行脚本，即使用户导航离开页面也能继续操作。Service Worker可以用来缓存资源，实现离线访问功能，这在某种程度上是“基于存储”的，因为它涉及到将数据存储在用户的设备上。
  • 缓存API：PWA可以利用缓存API来存储应用程序的外壳、样式表、脚本和图像等资源，以便在离线状态下或网络条件不佳时使用。
  • IndexedDB：虽然不是所有PWA都使用IndexedDB，但它是一种可选的技术，允许PWA在客户端存储大量结构化数据。
主要优势：
  • 跨平台：PWA可以在不同的操作系统和设备上运行，无需为每个平台单独开发应用程序。
  • 无需下载安装：PWA可以通过浏览器直接访问，无需从应用商店下载和安装。
  • 离线访问：PWA可以在离线状态下继续访问先前缓存的内容，提供更好的用户体验。
  • 推送通知：PWA可以向用户发送推送通知，类似于移动应用程序的通知功能。

image-20241106215508646.png

激活态完成以后就可以进行拦截请求,可以把本地缓存的文件直接返回,这是明显提高页面访问效率的一种方式

AMP（加速移动页面）:主要对于搜索引擎来用

AMP是一个由Google支持的开源项目，旨在为使用智能手机或平板电脑的人加速网页加载。

  • 缓存：AMP页面可以通过Google的AMP缓存进行加速，这是一种内容分发网络（CDN），它会缓存AMP页面的内容，以便快速加载。这意味着AMP页面的数据存储在CDN服务器上，而不是直接在用户的设备上。
  • 预加载和预渲染：AMP也利用预加载和预渲染技术来提高页面加载速度，但这更多是关于优化资源加载顺序和减少渲染时间，而不是直接的存储解决方案。
主要特点：
  • 快速加载：AMP页面设计为快速加载，提供更好的用户体验。
  • 简化的HTML和CSS：AMP使用精简版的HTML和CSS，以减少页面加载时间。
  • AMP缓存：AMP页面可以通过Google的AMP缓存进行加速，这是一个代理型的内容分发网络，可以缓存页面内容。

image-20241106215549573.png

笔记:
AMP格式

AMP格式的页面专为在移动设备上快速加载而设计，它们通过限制网页功能的复杂性来实现这一点。

AMP格式的关键特点：

  1. 轻量级组件：

    • AMP页面使用轻量级的HTML组件，这些组件被优化用于快速加载。

  2. 仅限静态资源：

    • AMP页面主要包含静态内容，动态内容和交互性受到限制，以确保页面加载速度。

  3. 缓存支持：

    • AMP页面可以通过Google AMP缓存进行服务，这是一个全球内容分发网络（CDN），可以缓存页面以实现快速加载。

  4. 预加载和预渲染：

    • AMP页面支持预加载和预渲染技术，这意味着页面的某些部分可以在后台提前加载，以便用户点击时能立即显示。

  5. AMP JS库：

    • AMP页面使用一个精简的JavaScript库，该库提供了基本的交互功能，如图像懒加载、视频播放等。

  6. 限制性HTML：

    • AMP页面使用一种限制性的HTML格式，这意味着某些HTML标签和属性不被允许，以确保页面的快速渲染。

  7. 自定义样式：

    • 尽管AMP页面对HTML有所限制，但开发者仍然可以使用CSS来自定义页面样式。

  8. SEO友好：

    • AMP页面对搜索引擎优化（SEO）友好，因为它们可以快速加载，有助于提高点击率和搜索引擎排名。

  9. 跨平台：

    • AMP页面可以在任何支持Web的平台和应用上运行，包括社交媒体、消息应用和搜索引擎。

  10. 安全性：

    • AMP页面要求使用HTTPS，以确保内容的安全传输。

AMP格式的页面特别适合内容驱动的网站，如新闻、博客和电子商务网站，它们可以从快速加载中获益。然而，对于需要复杂交互和动态内容的网站，AMP可能不是最佳选择。开发者可以使用AMP作为移动优化策略的一部分，以改善用户体验和页面性能。

基于此我们可以提高对于网站的曝光和访问速度

PWA与AMP的比较
  • 用户体验：PWA提供更丰富的用户体验，类似于原生应用，而AMP主要关注页面的快速加载。
  • 功能：PWA的功能更全面，支持离线访问和推送通知，而AMP主要针对内容快速展示。
  • SEO：从SEO的角度来看，AMP页面可能会获得更多的Google青睐，因为它们可以提高点击率。PWA虽然对SEO没有直接优势，但更好的用户体验可以提高用户留存率，间接帮助SEO。
  • 开发：PWA需要使用一组特定的技术构建，而AMP则是对现有网页代码的简化。

PWA和AMP都是为了提升移动设备的网页体验而设计的，但它们在功能、用途和开发方式上有所不同。PWA更侧重于增强的离线能力和丰富的交互功能，而AMP侧重于页面加载速度的优化选择，使用PWA还是AMP，取决于具体的项目需求和目标。

二进制

image-20241106220829608.png

function loadAsText(file){
    const reader = new FileReader();
    //result contains loaded file
    reader.onload = function(event){
        console.log(event.target.result);
    }
    //输出文本字符串格式
    reader.readAsText(file);
    //输出二进制数组格式
    reader.readAsArrayBuffer(file);
    //输出base64编码字符串格式
    reader.readAsDataURL(file);
}

API

全称为应用程序编程接口（Application Programming Interface），是一套预先定义的函数、协议和工具，用于构建软件应用程序。API作为软件组件之间交互的中介，允许不同的程序或服务之间进行通信和数据交换。简而言之，API定义了软件组件如何相互协作。

关键特点：

  1. 封装性：

    • API隐藏了内部的复杂性，只暴露必要的接口给开发者。

  2. 模块化：

    • API使得软件可以被分解成模块，每个模块通过API与其他模块交互。

  3. 跨平台：

    • API允许不同平台和语言编写的程序之间进行通信。

  4. 可扩展性：

    • 通过API，可以轻松地添加新功能或集成第三方服务。

  5. 维护和升级：

    • API提供了一种方式，使得在不改变外部接口的情况下，可以更新和维护内部实现。

  6. 安全性：

    • API可以包含安全措施，如认证和授权，以保护数据和系统资源。

  7. 文档：

    • 良好的API通常伴随着详细的文档，指导开发者如何使用接口。
用途：
  • 数据库API允许程序执行查询和操作数据。
  • Web API（如RESTful API）允许网站和应用程序通过HTTP协议交换数据。
  • 操作系统API提供了访问系统资源（如文件、内存）的方法。
  • 硬件API允许软件控制和交互硬件设备。
关键API:

  1. Geolocation API：

    • 允许网页获取用户的位置信息。

  2. Web Audio API：

    • 允许精确控制音频的加载、合成、处理和播放。

  3. Web Storage API：

    • 包括localStorage和sessionStorage，提供了一种在客户端存储数据的方式，替代了传统的cookies。

  4. File API：

    • 允许网页访问用户文件系统，并读取文件内容，常用于文件上传功能。

  5. Fetch API：

    • 提供了一个更现代的、功能丰富的网络请求接口，用于异步请求资源。

  6. Drag and Drop API：

    • 拖拽（Drag）指的是用户通过鼠标点击并移动一个元素。
    • 释放（Drop）指的是用户在拖动元素后释放鼠标按钮，将元素放置到一个目标位置。

Web Worker

是一种在浏览器中运行 JavaScript 的后台线程，它允许你在不影响用户界面线程的情况下执行长时间运行的脚本。

多线程的方式

Service Worker:拦截请求 通过自己的catch来返回一些缓存好的文件

Web Socket

WebSocket是一种网络通信协议，它提供了在单个TCP连接上进行全双工通信的能力。这意味着数据可以在客户端和服务器之间双向实时流动，无需客户端不断发送请求来检查更新。WebSocket API是HTML5中的一部分，它允许在Web页面中创建和管理WebSocket连接。

关键特性和用途：

  1. 全双工通信：

    • WebSocket允许服务器主动向客户端发送消息，而无需客户端先发起请求。这使得WebSocket非常适合需要实时数据传输的应用。

  2. 持久连接：

    • 一旦建立了WebSocket连接，它会保持开放，直到客户端或服务器决定关闭连接。

  3. 低延迟：

    • WebSocket旨在提供低延迟的通信，这对于需要快速响应的应用（如在线游戏、实时聊天应用）非常重要。

  4. 较少的开销：

    • 与HTTP相比，WebSocket在数据传输上具有更少的开销，因为它避免了HTTP请求/响应模型中的一些额外步骤。

  5. 浏览器支持：

    • 现代浏览器普遍支持WebSocket API，使得开发者可以在Web应用中直接使用WebSocket。

  6. 使用场景：

    • WebSocket适用于需要实时数据交换的应用，如在线协作工具、股票交易平台、实时游戏、聊天应用等。

  7. 创建和管理WebSocket连接：

    • 在JavaScript中，可以使用WebSocket对象创建一个新的连接，并通过send()方法发送消息，以及通过onmessage事件监听器接收消息。
const socket = new WebSocket('ws://localhost:8080');
​
socket.addEventListener('open', (event)=>{
    socket.send('Hello server!');
})
​
socket.addEventListener('message', (event)=>{
    console.log('Message from server', event.data);
})

Shadow DOM

是一种特殊的节点

是一种浏览器技术，它允许开发者将一个Web组件的内部实现细节隐藏起来，创建一个封装的影子树（shadow tree）。这意味着组件的内部DOM结构不会被外部脚本访问或修改，从而避免了潜在的冲突和安全问题。

关键特性：

  1. 封装性：

    • Shadow DOM提供了一种方式，使得组件的内部结构不会被外部DOM操作影响。

  2. 组件化：

    • Shadow DOM是实现Web组件化的重要手段，它允许开发者创建可重用的自定义元素。

  3. 样式隔离：

    • 在Shadow DOM中的样式不会泄露到外部DOM，同样，外部样式也不会影响Shadow DOM中的元素，除非明确指定。

  4. DOM操作：

    • Shadow DOM中的节点操作是独立的，不会影响外部DOM。

  5. 事件冒泡：

    • 事件在Shadow DOM中冒泡，但不会冒泡到宿主元素之外，除非事件类型被定义为可以穿过Shadow DOM边界。

  6. 兼容性：

    • Shadow DOM在现代浏览器中得到了较好的支持，但仍需检查特定浏览器的兼容性。

  7. 使用场景：

    • Shadow DOM适用于创建自定义Web组件，如自定义下拉菜单、模态框、弹窗等。

  8. 如何使用Shadow DOM：

    • 通过元素的shadowRoot属性可以访问或创建一个元素的Shadow DOM。
// 创建一个新的div元素作为宿主元素
const hostElement = document.createElement('div');
​
// 附加一个Shadow DOM到宿主元素
const shadowRoot = hostElement.attachShadow({ mode: 'open' });
​
// 创建一些内容并将其添加到Shadow DOM中
const heading = document.createElement('h1');
heading.textContent = 'Hello from Shadow DOM';
shadowRoot.appendChild(heading);
​
// 将宿主元素添加到文档中
document.body.appendChild(hostElement);

h1元素就被封装在Shadow DOM中，不会影响外部DOM结构。

Web Components

是一种Web技术套件，它允许开发者创建可重用的自定义HTML元素，这些元素封装了自己的功能和样式。

Web Components 基于以下四种主要技术构建：

  1. Custom Elements：

    • 允许开发者定义自己的HTML标签，这些标签可以有自己的JavaScript行为和CSS样式。

  2. Shadow DOM：

    • 提供了一种将Web组件的内部实现细节隐藏起来的方式，确保样式和脚本不会泄露到外部DOM，同时外部脚本也无法访问组件的内部结构。

  3. HTML Templates：

    • 提供了一个用于定义HTML内容的模板，这些内容在页面加载时不会被渲染，直到被JavaScript激活。

  4. HTML Imports：

    • 允许开发者将HTML文档分割成多个文件，然后通过<link rel="import">标签导入到其他HTML文件中。
优势：
  • 封装性：Web Components 可以将功能、样式和行为封装在一个单独的组件中，避免全局作用域的污染。
  • 可重用性：一旦定义了一个Web Component，它可以在任何支持Web Components的Web应用中重复使用。
  • 模块化：Web Components 支持模块化开发，每个组件可以独立开发和测试。
  • 性能：由于Shadow DOM的存在，Web Components 的样式计算和布局可以被限制在组件内部，减少了对整个文档的影响。

SVG&Canvas

是Web开发中常用的两种图形技术，它们各自有不同的特点和应用场景。

SVG（Scalable Vector Graphics）：
  • SVG是一种基于XML的矢量图形格式，允许在网页中嵌入高质量的图形。
  • SVG图像以文本形式存储，可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。
  • SVG图形是可伸缩的，无需分辨率依赖，适合用于响应式设计。
  • SVG可以与JavaScript结合，实现动画和交互效果。
  • SVG可以直接嵌入HTML5中，无需使用外部文件。
  • SVG广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。
Canvas：
  • Canvas是一个HTML元素，提供了一个通过JavaScript和HTML来绘制图形的方式。
  • Canvas使用位图来处理图形和动画，这意味着它可以快速渲染大量的图形和动画，但可能会在缩放时失真。
  • Canvas适合处理复杂的动画，因为它可以处理大量的图形和动画。
  • Canvas与WebGL结合使用，可以实现高性能的图形和动画。
  • Canvas在处理大量实时图形操作时性能较好，特别是在需要频繁重绘的场景中。
应用场景：
  • SVG：适合用于图标、数据可视化、动画、游戏开发和设计原型等场景，特别是在需要高清晰度或无限缩放的场景中表现出色。
  • Canvas：适合用于游戏、数据可视化、复杂的动画、3D渲染和视频等场景，尤其是在需要逐像素操作的复杂图形和动画中展现其优势。

WebGL&WebGPU

WebGL和WebGPU都是用于在Web环境中渲染3D图形的技术，但它们在设计理念、性能和应用场景上有所不同。

WebGL
特点：
  1. 跨平台性：WebGL可以在所有支持该技术的现代浏览器中运行，无需安装任何额外的软件或插件。
  2. 高性能：利用GPU进行硬件加速，实现高效的图形渲染，提供流畅的3D体验。
  3. 灵活性：支持多种3D模型格式，如OBJ、FBX等，满足各种应用场景的需求。
  4. 实时交互：能够实现实时的图形渲染和用户交互，提供丰富的交互体验。
应用场景：
  • 在线游戏：在浏览器中运行3D游戏，降低游戏的准入门槛。
  • 虚拟现实和增强现实：创建VR和AR应用，如虚拟旅游、虚拟博物馆、虚拟实验室等。
  • 数据可视化和科学计算：创建交互式的数据可视化应用，适合展示大规模数据集。
  • 模拟器和培训应用：开发飞行模拟器、驾驶模拟器及各类培训应用。
  • 教育应用：创建交互式的3D教育应用，帮助解释和演示复杂概念。
  • 历史和考古重建：3D历史遗迹和考古现场的重建，用于学术研究和公众教育。
WebGPU
特点：
  1. 低级别、跨平台：WebGPU是一种低级别的、跨平台的图形和计算API，允许Web应用程序直接访问GPU的底层硬件资源。
  2. 高效图形渲染和计算处理：提供了更高效的图形渲染和计算处理，提高应用程序的性能和体验。
  3. 支持现代GPU特性：WebGPU将在未来添加新特性，如光线追踪、阴影、反射、环境光遮蔽等。
  4. GPGPU计算：对通用GPU（GPGPU）计算有一流的支持，适用于机器学习等基于模型的计算。
应用场景：
  • Web3D可视化：用于web3d可视化，提升前端大量数据计算的能力。
  • 端侧智能：WebGPU提供的计算着色器，可以适配LLM的并行计算要求，实现端侧智能应用。
  • XR交互：依托于Web平台的易传播特性，WebGPU将促进XR交互的发展。
  • 高性能图形计算：WebGPU允许开发人员利用现代GPU的强大功能在Web上创建令人惊叹的视觉效果和复杂模拟仿真。
  • 跨平台兼容性：WebGPU可以在不同浏览器和平台上协同工作同时保证运行效果的一致性。
  • 面向未来：WebGPU旨在扩展并适应未来的GPU特性和技术特点。
  • Metaverse：WebGPU可以使应用程序在Web上创建身临其境的交互式虚拟世界和体验。

WebGL适合于需要复杂3D图形渲染的应用程序，而WebGPU则适用于需要更高效的图形和计算处理的应用程序，特别是在现代GPU特性和GPGPU计算方面。

WebAssembly

WebAssembly（简称Wasm）是一种新的编码方式，它允许现代Web浏览器以接近原生性能运行代码。

技术特点：
  1. 高效性：WebAssembly旨在提供接近原生应用的性能，通过将C/C++等低级语言编译为WebAssembly二进制格式，开发者可以在浏览器中直接执行这些代码，无需通过JavaScript引擎进行解释执行，从而大大提高了运行效率。
  2. 可移植性：WebAssembly是一种可移植的二进制格式，可以在不同的浏览器和操作系统上运行，这意味着开发者可以使用同一种WebAssembly代码库，在不同平台上构建出具有相同性能表现的Web应用。
  3. 安全性：WebAssembly在浏览器的沙箱环境中执行，遵循同源策略和授权策略，确保了代码运行的安全性。此外，WebAssembly还提供了对内存和资源的严格控制，防止了恶意代码对系统的攻击。
  4. 多语言支持：WebAssembly并不依赖于特定的编程语言，开发者可以使用各种编程语言进行开发，并将其编译为WebAssembly模块。这种多语言支持为前端开发带来了更多的选择和灵活性。
应用场景：
  1. 游戏开发：WebAssembly的高性能和多语言支持为Web游戏开发带来了巨大的潜力。开发者可以使用C/C++等低级语言构建更加复杂和精美的游戏，并在浏览器中流畅运行，为用户提供更好的游戏体验。
  2. 图形处理：WebAssembly可以很好地处理音频和视频文件，因此在图形处理领域具有广泛的应用。通过WebAssembly编写的图形处理器可以让Web前端应用的处理速度更快，同时降低应用的大小。
  3. 计算机视觉：WebAssembly还可以用于计算机视觉领域。通过使用WebAssembly，可以实现一些计算密集型的算法，如语音识别、人脸识别等。这些功能可以被集成到Web前端应用中，为用户带来更加丰富的交互体验。
  4. 应用迁移：WebAssembly的出现为现有的应用迁移提供了更好的可能性。通过将现有的C/C++代码编译为WebAssembly模块，开发者可以将这些代码无缝地集成到现有的Web应用中，而无需重写大部分的代码。
  5. 跨平台应用：通过将现有的移动端应用代码编译为WebAssembly模块，开发者可以在Web平台上轻松地实现应用的跨平台运行。
  6. 人工智能与机器学习：随着人工智能和机器学习技术的不断发展，WebAssembly将成为这些技术在Web平台上实现的重要工具。通过使用WebAssembly，开发者可以构建出更加高效、强大的AI和ML应用。
  7. 云计算与边缘计算：WebAssembly的可移植性和高效性使其成为云计算和边缘计算领域的理想选择。通过将计算任务分配给WebAssembly模块，可以提高整个系统的运行效率和响应速度。

WebAssembly通过其高效性、可移植性、安全性和多语言支持等特点，在多个领域具有广泛的应用前景，并有望在未来引领Web性能革命，推动Web应用的持续发展。

ARIA

通过给标签添加一些额外的属性来使整个页面结构理解起来更容易

ARIA不会改变元素的功能或行为，而是通过提供额外的语义信息来增强网页的可访问性。

ARIA是为了弥补HTML和JavaScript在可访问性方面的不足而设计的一种辅助技术，它通过提供额外的语义信息来帮助残障用户更有效地使用Web应用程序。

了解ARIA并非只是为了供盲人阅读,它可以为我们设计UI系统提供指导意义

avatar
文章
阅读
粉丝