W3C标准和ES规范之一文通
W3C标准和ES规范之一文通
以下是关于W3C标准和ES规范的透彻解析,通过结构化对比和生活化类比帮助理解和记忆:
一、核心概念对比(总览)
维度 | W3C标准 | ES规范(ECMAScript) |
---|---|---|
定位 | Web技术的建筑蓝图 | JavaScript的语言宪法 |
管辖范围 | HTML/CSS/DOM/Web API等网页技术标准 | JavaScript语言的语法与核心功能规范 |
制定组织 | W3C(万维网联盟) | ECMA国际组织 |
更新节奏 | 分模块迭代(如HTML5、CSS3) | 每年发布一个版本(ES2015/ES6起) |
典型内容 | 标签语义、样式规则、浏览器交互接口 | 变量声明、函数定义、异步处理等语法规则 |
二、W3C标准详解
1. 核心组成(三驾马车)
① HTML(骨架)
- 作用:定义页面内容结构
- 版本演进:
- HTML4 → XHTML → HTML5(语义化标签、多媒体支持)
- 典型标准:
<article>
/<section>
语义标签<canvas>
绘图API- Web表单验证
② CSS(皮肤)
- 作用:控制页面视觉表现
- 版本演进:
- CSS2 → CSS3(模块化)
- 关键模块:
- Flex/Grid布局
- 动画(@keyframes)
- 媒体查询(响应式设计)
③ DOM/Web API(神经系统)
- 作用:实现动态交互
- 关键API:
- DOM操作(document.getElementById)
- 事件模型(addEventListener)
- 存储(LocalStorage)
- 地理位置(Geolocation API)
2. 典型应用场景
// 遵循W3C标准的代码示例
// HTML结构
<article id="post"><h1>标题</h1><div class="content">正文</div>
</article>// CSS样式
#post {width: 80%;margin: 0 auto;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}// JavaScript交互
document.querySelector('#post').addEventListener('click', () => {alert('内容被点击!');});
三、ES规范解析
1. 发展历程(里程碑版本)
版本 | 年份 | 核心特性 |
---|---|---|
ES3 | 1999 | 正则表达式、异常处理 |
ES5 | 2009 | 严格模式、JSON支持 |
ES6 | 2015 | 类、模块、箭头函数、Promise |
ES2020 | 2020 | 可选链(?.)、空值合并(??) |
2. 语言特性分层
3. 与浏览器关系
- JavaScript = ECMAScript + Web API
- 运行流程:
- 解析ES语法
- 调用W3C API操作DOM
- 触发浏览器渲染
四、协同工作模式
1. 技术栈配合示例
// ES6模块导入
import { validate } from './utils.js';// W3C表单验证
document.getElementById('form').addEventListener('submit', (e) => {e.preventDefault();if (validate(e.target.value)) {// 使用Fetch API(W3C标准)fetch('/api', { method: 'POST' }).then(ES6 Promise处理);}});
2. 版本兼容策略
场景 | 解决方案 |
---|---|
旧浏览器不支持ES6语法 | Babel转译 + polyfill |
不同浏览器CSS特性差异 | 厂商前缀 + PostCSS自动处理 |
DOM API兼容性问题 | 特性检测 + 垫片库(core-js) |
五、快速记忆指南
1. 核心关系比喻
- W3C ≈ 建筑规范(规定房子怎么盖)
- ES ≈ 施工手册(指导工人如何操作)
2. 学习路线图
- 先学ES:掌握变量、函数等基础语法
- 再学W3C:操作DOM、样式控制
- 综合应用:通过事件驱动连接两者
3. 常见误区
- ❌ “JavaScript由W3C管理” → 正解:ES规范由ECMA制定
- ❌ “CSS是编程语言” → 正解:CSS是样式描述语言
- ❌ “HTML5包含ES6” → 正解:二者属于不同标准体系
通过以上结构化解析,可清晰理解:
W3C定义Web能做什么(能力边界),ES规定JavaScript怎么写(实现方式)。二者共同构建现代Web应用的能力基石。
相关文章:
W3C标准和ES规范之一文通
W3C标准和ES规范之一文通 以下是关于W3C标准和ES规范的透彻解析,通过结构化对比和生活化类比帮助理解和记忆: 一、核心概念对比(总览) 维度W3C标准ES规范(ECMAScript)定位Web技术的建筑蓝图JavaScript的语…...
Linux:应用层协议
协议是一种 "约定". socket api的接口, 在读写数据时, 都是按 "字符串" 的方式来发送接收的. 如果我们要传输一些"结构化的数据" 怎么办呢? 无论我们采用什么方案, 只要保证, 一端发送时构造的数据, 在另一端能够正确的进行解析, 就是ok的. 这种…...
深度学习五大模型:CNN、Transformer、BERT、RNN、GAN详细解析
# 深度学习五虎将:当CNN遇见Transformer的奇幻漂流 ## 序章:AI江湖的兵器谱排行 2012年,多伦多大学的厨房里,Hinton的学生们用GPU煎了个"AlexNet"荷包蛋,从此开启了深度学习的热兵器时代。如今五大模型各显…...
微服务组件详解——sentinel
1.启动sentinel: 下载jar sentinel-dashboard-1.8.0.jar 使用以下命令直接运行 jar 包(JDK 版本必须≥ 1.8): java -Dserver.port9999 -jar D:\sentinel-dashboard-1.8.0.jar 控制台访问地址:http://localhost:9999…...
波导阵列天线 学习笔记11双极化全金属垂直公共馈电平板波导槽阵列天线
摘要: 本communicaition提出了一种双极化全金属垂直公共馈电平板波导槽阵列天线。最初提出了一种公共馈电的单层槽平板波导来实现双极化阵列。此设计消除了传统背腔公共馈电的复杂腔体边缘的必要性,提供了一种更简单的天线结构。在2x2子阵列种发展了宽十…...
swift 开发效率提升工具
安装github copliot for xcode github/CopilotForXcode brew install --cask github-copilot-for-xcode安装swiftformat for xcode brew install swiftformatXcode Swift File代码格式化-SwiftFormat...
3-5 WPS JS宏 工作表的移动与复制学习笔记
************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...
Centos7部署k8s(单master节点安装)
单master节点部署k8s集群(Centos) 一、安装前准备 1、修改主机名 按照资源准备修改即可 # master01 hostnamectl set-hostname master01 ; bash # node1 hostnamectl set-hostname node1 ; bash # node2 hostnamectl set-hostname node2 ; bash2、修改hosts文件 以下命令所…...
Tomcat
1.Tomcat是什么? Tomcat 是一个开源的、轻量级的 Servlet 容器,也被称为 Web 服务器,由 Apache 软件基金会的 Jakarta 项目开发,在 Java Web 开发领域应用广泛。 1)Servlet 容器:Servlet 是 Java 语言编写…...
基于SpringBoot+Vue的电影订票及评论网站的设计与实现(源码+SQL脚本+LW+部署讲解等)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
地基简识Spring MVC 组件
Spring MVC 是一个基于 MVC 设计模式的框架,其核心组件协同工作以处理 HTTP 请求并生成响应。以下是各组件的详细说明及其协作流程: 一、核心组件 DispatcherServlet(前端控制器) 作用:接收所有请求并协调其他…...
如何通过Python网络爬虫技术应对复杂的反爬机制?
要使用Python网络爬虫技术绕过复杂的反爬虫机制,可以采取以下几种策略: 设置User-Agent:通过设置不同的User-Agent,模拟正常用户的浏览器访问,避免被网站识别为爬虫。可以使用fake_useragent库来随机生成User-Agent。…...
深入浅出:Spring AI 集成 DeepSeek 构建智能应用
Spring AI 作为 Java 生态中备受瞩目的 AI 应用开发框架,凭借其简洁的 API 设计和强大的功能,为开发者提供了构建智能应用的强大工具。与此同时,DeepSeek 作为领先的 AI 模型服务提供商,在自然语言处理、计算机视觉等领域展现了卓…...
Node.js二:第一个Node.js应用
精心整理了最新的面试资料和简历模板,有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 创建的时候我们需要用到VS code编写代码 我们先了解下 Node.js 应用是由哪几部分组成的: 1.引入 required 模块:我们可以使用 requi…...
【HarmonyOS Next】鸿蒙状态管理装饰器V1和V2混用方案
【HarmonyOS Next】鸿蒙状态管理装饰器V1和V2混用方案 一、V1和V2为什么需要混用 自从api7开始,一直到api10。V1的实际使用中,开发人员发现Observed和ObjectLink 监听实现多层级嵌套对象的更新的方案,太过于臃肿。当需要监听处理更新的多层…...
【技海登峰】Kafka漫谈系列(三)详解Kafka的数据结构与存储机制
【技海登峰】Kafka漫谈系列(三)详解Kafka的数据结构与存储机制 Kafka 使用消息日志(Log)机制来持久化保存数据,我们知道Kafka实际是以Partition分区为单位进行负载均衡和资源分配,每个Partition又由多个Replica副本组成,副本之间分布于不同的Broker上来保证高可用,因此…...
PyCharm接入本地部署DeepSeek 实现AI编程!【支持windows与linux】
今天尝试在pycharm上接入了本地部署的deepseek,实现了AI编程,体验还是很棒的。下面详细叙述整个安装过程。 本次搭建的框架组合是 DeepSeek-r1:1.5b/7b Pycharm专业版或者社区版 Proxy AI(CodeGPT) 首先了解不同版本的deepsee…...
腾讯云扩容记录
腾讯云扩容: sudo yum install -y cloud-utils-growpart 安装扩容工具 sudo file -s /dev/vda1 有数据 sudo LC_ALLen_US.UTF-8 growpart /dev/vda 1 sudo resize2fs /dev/vda1 df -Th 完毕 以下是对执行的命令的详细解释以及背后的原理: 1. 安装 cloud…...
计算机毕业设计Hadoop+Spark+DeepSeek-R1大模型音乐推荐系统 音乐数据分析 音乐可视化 音乐爬虫 知识图谱 大数据毕业设计
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
本地部署大语言模型-DeepSeek
DeepSeek 是国内顶尖 AI 团队「深度求索」开发的多模态大模型,具备数学推理、代码生成等深度能力,堪称"AI界的六边形战士"。 Hostease AMD 9950X/96G/3.84T NVMe/1G/5IP/RTX4090 GPU服务器提供多种计费模式。 DeepSeek-R1-32B配置 配置项 规…...
Windows逆向工程入门之MASM数据结构使用
公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 第一章:MASM数据定义体系精要 1.1 基础数据类型全景 1.1.1 整型数据规范 1.1.2 浮点数据编码 1.2 复合数据结构 1.2.1 多维数组定义 1.2.2 复杂结构体 第二章…...
python 之协程笔记
协程 协程的本质是用户态线程,由程序自行控制切换时机,无需操作系统介入。与线程相比,协程的三大核心优势: 资源占用极低:一个协程仅需KB级内存,可轻松创建数万个切换效率惊人:上下文切换在用户…...
使用 REINFORCE 算法强化梯度策略
一、整体概述 此代码利用 REINFORCE 算法(一种基于策略梯度的强化学习算法)来解决 OpenAI Gym 中的 CartPole-v1 环境问题。CartPole-v1 环境的任务是控制一个小车,使连接在小车上的杆子保持平衡。代码通过构建一个神经网络作为策略网络&…...
【C++并发编程实战】第1章 你好,C++的并发世界!
文章目录 1. 何谓并发2. 为什么使用并发?3. 什么时候不使用并发4. C多线程历史5. 第一个并发程序 1. 何谓并发 最简单和最基本的并发,是指两个或更多独立的活动同时发生。计算机领域的并发指的是在单个系统里同时执行多个独立的任务,而非顺序的进行一些…...
【QT线程】子线程阻塞主线程的一次网络api请求案例
阻塞源码赏析 这是最近一次项目遇到的问题,原因是我觉得子线程里俩次请求间隔太短了,会引起服务器屏蔽我的api因此,我故作聪明加多了一个延时函数,欢迎各位鉴赏代码。 // 并行发起双请求 QNetworkRequest liveRequest(liveUrl);…...
DockerでOracle Database 23ai FreeをセットアップしMAX_STRING_SIZEを拡張する手順
DockerでOracle Database 23ai FreeをセットアップしMAX_STRING_SIZEを拡張する手順 はじめに環境準備ディレクトリ作成Dockerコンテナ起動 データベース設定変更コンテナ内でSQL*Plus起動PDB操作と文字列サイズ拡張設定検証 管理者ユーザー作成注意事項まとめ 中文版请访问这里…...
【计算机网络入门】初学计算机网络(五)
目录 1.编码&解码、调制&解调 2.常用编码方法 2.1 不归零编码(NRZ) 2.2 归零编码(RZ) 2.3 反向非归零编码(NRZI) 2.4 曼彻斯特编码 2.5 差分曼彻斯特编码 3. 各种编码的特点 4.调制 5.有线传输介质 5.1 双绞线 5.2 同轴电缆 5.3 光…...
unity学习60: 滑动条 和 滚动条 滚动区域
目录 1 滚动条 scrollbar 1.1 创建滚动条 1.2 scrollbar的子物体 1.3 scrollbar的属性 2 滚动视图 scroll View 2.1 创建1个scroll View 2.1.1 实际类比,网页就是一个 scroll view吧 2.2 子物体构成 2.3 核心component : Scroll Rect 3 可视区域 view p…...
【Linux网络-HTTP协议】HTTP基础概念+构建HTTP
代码定位:南毅c/Linux - Gitee.com HTTP协议 介绍 虽然我们说,应用层协议是我们程序猿自己定的.但实际上,已经有大佬们定义了一些现成的,又非常好用的应用层协议,供我们直接参考使用。HTTP(超文本传输协议)就是其中之一。 在互联网世界中,…...
2025年企业网络安全实战指南:常见漏洞解析与全方位防御策略
2025年企业网络安全实战指南:常见漏洞解析与全方位防御策略 作者: 网络安全专家 日期: 2025-02-27 分类: [网络安全] 标签: [漏洞防护, 信息安全, 企业安全] 引言:漏洞是攻击者的入口,防御是安全的基石 2025年,网络安全威胁持续升级。根据Gartner最新报告,全球企业因漏洞…...
一个py文件搞定mysql查询+Json转换+表数据提取+根据数据条件生成excel文件+打包运行一条龙
import os import argparse import pymssql import json import pandas as pd from datetime import datetime from pandas.io.formats.excel import ExcelFormatter import openpyxl# 投注类型映射字典 BET_MAPPING {1: WIN, 2: PLA, 3: QIN, 4: QPL,5: DBL, 6: TCE, 7: QTT,…...
P1123 取数游戏
题目描述 一个 NM 的由非负整数构成的数字矩阵,你需要在其中取出若干个数字,使得取出的任意两个数字不相邻(若一个数字在另外一个数字相邻 8 个格子中的一个即认为这两个数字相邻),求取出数字和最大是多少。 输入格式…...
Spock框架:让单元测试更优雅的高效武器
📖 前言:为什么选择Spock? 在软件开发领域,单元测试是保证代码质量的基石。但传统的JUnit/TestNG测试框架在面对复杂测试场景时,往往会显得力不从心。Spock框架作为新一代测试框架的佼佼者,以其独特的BDD&…...
STM32中的ADC
目录 一:什么是ADC 二:ADC的用途 三:STM32F103ZET6的ADC 3.1ADC对应的引脚 3.2ADC时钟 3.3ADC的工作模式 编辑3.4ADC校准 3.5ADC转换结构和实际电压的换算 四:ADC配置步骤 五:两个重要的函数 一:…...
React Portals深度解析:突破组件层级的渲染艺术
React Portals的核心概念、使用场景、实现方法、优缺点以及最佳实践。根据我搜索到的资料,都详细讨论了Portals的使用方法、应用场景和注意事项。比如提供了代码示例,说明如何用createPortal将组件渲染到DOM的其他位置,而则强调了Portals在解决z-index和overflow问题上的优势…...
AWS SQS跨账户访问失败排查指南
引言 在使用AWS SQS(Simple Queue Service)时,跨账户访问是常见的业务场景。例如,账户A的应用程序向队列发送消息,账户B的消费者从队列拉取消息。尽管AWS官方文档明确支持此类配置,但在实际应用中,由于权限模型的复杂性,开发者和运维人员常会遇到“策略已配置但无法接…...
数据挖掘工程师的技术图谱和学习路径
数据挖掘工程师的技术图谱和学习路径: 1.基础知识 数据挖掘工程师是负责从大量数据中发现潜在模式、趋势和规律的专业人士。以下是数据挖掘工程师需要掌握的基础知识: 数据库知识:熟悉关系数据库和非关系数据库的基本概念和操作,掌握SQL语言。 统计学基础:了解统计学的基…...
0301 leetcode - 1502.判断是否能形成等差数列、 682.棒球比赛、657.机器人能否返回原点
1502.判断是否能形成等差数列 题目 给你一个数字数组 arr 。 如果一个数列中,任意相邻两项的差总等于同一个常数,那么这个数列就称为 等差数列 。 如果可以重新排列数组形成等差数列,请返回 true ;否则,返回 false…...
【03】STM32F407 HAL 库框架设计学习
【03】STM32F407 HAL 库框架设计学习 摘要 本文旨在为初学者提供一个关于STM32F407微控制器HAL(Hardware Abstraction Layer)库框架设计的详细学习教程。通过本文,读者将从零开始,逐步掌握STM32F407的基本知识、HAL库的配置步骤…...
React低代码项目:Redux 状态管理
吐司问卷:Redux 状态管理 Date: February 18, 2025 5:37 PM (GMT8) Redux 管理用户信息 命名规范: 以 Info 结尾表示获取Reudx信息,比如 useGetUserInfo.ts 以 data 结尾表示获取服务端信息,比如 useLoadQuestionData 采用 Re…...
Vue核心知识:动态路由实现完整方案
在Vue中实现动态路由,并结合后端接口和数据库表设计,是一个复杂的项目,需要多个技术栈和步骤的配合。以下将详细描述整个实现过程,包括数据库设计、后端接口设计、前端路由配置以及如何实现动态路由的功能。 目录 一、需求分析二…...
Linux安装jdk,node,mysql,redis
准备工作: 1.安装VMware软件,下载CentOs7镜像文件,在VMware安装CentOs7 2.宿主机安装Xshell用来操作linux 3. .宿主机安装Xftp用来在宿主机和虚拟机的linux传输文件 案例1:在 /home/soft文件夹解压缩jdk17,并配置环…...
数据库原理与使用基础教程
数据库原理与使用基础教程 大纲 数据库基础概述 什么是数据库?数据库管理系统(DBMS)概述数据库的类型数据库模型与结构 关系型数据库 关系型数据库简介表(Table)、字段(Field)、记录ÿ…...
GCC 与 Clang:两大编译器的全面对比与深度解析!
GCC 与 Clang:两大编译器的全面对比与深度解析!🔥 你是否曾为选择编译器而纠结?GCC 和 Clang 作为 C/C 开发中最主流的编译器,它们各自有什么优势和特点?为什么有人说 Clang 更现代,而 GCC 更强…...
ue5 创建多列StreeView的方法与理解
创建StreeView的多列样式怎么就像是创建单行单列差不多?貌似就是在单行单列中加入了多列widget? 示例代码 DetailTabWidget #pragma once #include "TreeViewItemBase.h"class SDetailTabWidget : public SCompoundWidget {SLATE_BEGIN_ARGS(SDetailTabWidget){…...
GPT-4.5来了
https://chat.xutongbao.top/...
java后端开发day25--阶段项目(二)
(以下内容全部来自上述课程) 1.美化界面 private void initImage() {//路径分两种://1.绝对路径:从盘符开始写的路径 D:\\aaa\\bbb\\ccc.jpg//2.相对路径:从当前项目开始写的路径 aaa\\bbb\\ccc.jpg//添加图片的时…...
【小羊肖恩】小羊杯 Round 2 C+K
题目链接:https://ac.nowcoder.com/acm/contest/100672#question C.是毛毛虫吗? 思路: 其实很简单,假设我们要满足题目所给条件,那么这个毛毛虫最坏情况下肯定是一条如下图所示的无向图 右端省略号为对称图形 &…...
计算机网络——详解TCP三握四挥
文章目录 前言一、三次握手1.1 三次握手流程1.2 tcp为什么需要三次握手建立连接? 二、四次挥手2.1 四次挥手流程2.2 为什么是四次,不是三次?2.3 为什么要等待2msl?2.4 TCP的保活计时器 前言 TCP和UDP是计算机网络结构中运输层的两…...
PHP实现国密SM4算法,银行系统加密算法,JAVA和PHP可相互转换(附完整源码)
最终实现效果:PHP生成加密串,JAVA代码中完成匹配 JAVA SM4库实现效果 /*** 签名** param content 请求报文体* param secret 密钥* return*/public static String sign(String content, String secret) {String charSet "UTF-8";String c…...