W3C 标准

W3C 教程

W3C 教程

W3C(World Wide Web Consortium,万维网联盟)是由蒂姆·伯纳斯-李于 1994 年创立的国际标准组织,负责制定 Web 的核心技术标准,如 HTML、CSS、XML、DOM 等,确保 Web 的开放性与互操作性。

W3C 做什么

• 制定标准:发布 Web 技术的正式推荐标准(Recommendation)
• 维护规范:管理 HTML、CSS、SVG、Web 服务等规范的演进
• 推动互操作:协调浏览器厂商实现一致性
• 教育培训:提供标准教程与开发指南
• 认证许可:W3C 成员(公司/机构)共同决策标准方向

W3C 的成就

标准	作用
HTML	网页结构语言
CSS	网页样式语言
XML 系列	数据交换与结构化
DOM	文档对象模型
Web 服务	SOAP、WSDL、RDF 等

W3C 流程

工作草案(Working Draft)
   ↓
候选推荐( Candidate Recommendation)
   ↓
正式推荐( Proposed Recommendation)
   ↓
W3C 推荐标准( Recommendation)

本站学习内容

1. W3C 简介与程序
2. HTML、XHTML、XML 活动
3. CSS、XSL、XML Schema 活动
4. XPath、XQuery、DOM 活动
5. SOAP、WSDL、RDF 及其他活动

W3C 简介

W3C 简介

1. 成立背景

1994 年,万维网发明者蒂姆·伯纳斯-李在 MIT 创立 W3C,旨在通过标准让 Web 长期良性发展,保证每个国家的每个人都能平等访问网络资源。

2. 组织架构

• 总部:由全球多家机构联合运营(MIT、ERCIM、庆应义塾大学、Beihang 等)
• 成员:企业、大学、政府机构等付费加入,参与标准制定
• 工作组:按技术领域划分,如 HTML 工作组、CSS 工作组
• 员工:技术专家与协调人员

3. W3C 的使命

• 让 Web 对所有人开放(无障碍、多语言、多设备)
• 保证标准向后兼容
• 保持开放中立,避免单一厂商垄断
• 推动 Web 技术持续演进

4. 重要规范

HTML5        网页结构
CSS3         样式与布局
XML / XSLT   数据与转换
DOM          动态交互
SVG          矢量图形
WebAssembly  高性能计算
WebRTC       实时通信
WCAG         无障碍指南

5. W3C 与浏览器厂商

标准草案由 W3C 发布,浏览器厂商(Chrome、Firefox、Safari、Edge)按标准实现并反馈意见,标准与实现互相促进,最终成为普遍可用的 Web 能力。

W3C 程序

W3C 程序

1. 标准制定流程

W3C 通过严格的流程推进标准,确保公开、透明、可审查:

1. 提交提案(Note / 成员提案)
2. 成立工作组(Working Group)
3. 工作草案(Working Draft,WD)
4. 候选推荐(Candidate Recommendation,CR)
5. 拟议推荐(Proposed Recommendation,PR)
6. 正式推荐(Recommendation,REC)

2. 各类文档说明

文档类型	说明
Working Draft	草案,公开讨论,随时可能修改
Candidate Recommendation	候选推荐,邀请实现与测试
Proposed Recommendation	拟议推荐,征求最终评审
Recommendation	正式标准,稳定可用
Note	非标准文档,供参考

3. W3C 成员机制

• 成员包括企业(Google、Microsoft、Apple、华为、阿里等)、研究机构、公益组织
• 成员参与工作组会议、评审与投票
• 公开读者也可通过邮件列表、GitHub Issues 贡献意见

4. 社区与贡献

# 参与方式
w3.org/community    社区组(Community Group)
w3.org/groups       工作组列表
GitHub              很多规范在 w3c/* 仓库公开讨论

# 无障碍建议
w3.org/WAI          无障碍倡议

5. 验证工具

validator.w3.org     HTML/CSS 验证器
jigsaw.w3.org        CSS 验证器
validator.w3.org/checklink  链接检查

W3C HTML 活动

W3C HTML 活动

1. HTML 发展历程

HTML 2.0(1995)    首个标准化版本
HTML 3.2(1997)    表格、脚本支持
HTML 4.01(1999)   CSS 分离、框架
XHTML 1.0(2000)   XML 严格语法
HTML5(2014)       语义化、多媒体、Canvas
HTML 5.2(2017)    最后版本
HTML Living Standard  持续演进版(WHATWG)

2. HTML5 核心特性

• 语义标签:header、nav、article、section、footer
• 多媒体:video、audio 原生支持
• 图形:canvas、SVG
• 表单增强:日期、邮箱、范围等新 input 类型
• 离线能力:localStorage、Web Workers、WebSocket

3. 语义化示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>语义化页面</title>
</head>
<body>
  <header>网站头部</header>
  <nav>导航菜单</nav>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容...</p>
    </article>
  </main>
  <footer>页脚信息</footer>
</body>
</html>

4. W3C 与 WHATWG

2019 年起,W3C 与 WHATWG(浏览器厂商主导的组织)达成协议,HTML/DOM 规范由 WHATWG 维护 Living Standard,W3C 负责发布快照版本,二者合作推进。

W3C XHTML 活动

W3C XHTML 活动

1. 什么是 XHTML

XHTML(Extensible HyperText Markup Language)是使用 XML 语法重写的 HTML,更严格、更规范,便于程序解析与数据交换。

2. XHTML 版本

XHTML 1.0(2000)    严格语法,分为 Strict/Transitional/Frameset
XHTML 1.1(2001)    模块化,基于 Ruby 等扩展
XHTML 2.0(放弃)    未能推广,被 HTML5 取代

3. XHTML 与 HTML 的区别

规则	HTML	XHTML
标签闭合	可不闭合(部分)	必须闭合
标签小写	大小写均可	必须小写
属性引号	可省略	必须加引号
空元素	<br>	<br />
根元素	html	html + xmlns

4. XHTML 文档结构

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  <head>
    <title>XHTML 示例</title>
  </head>
  <body>
    <p>Hello <em>XHTML</em>!</p>
  </body>
</html>

5. 现状

随着 HTML5 普及,XHTML 已不再是主流推荐,但其严格性思想(标签闭合、小写、引号)已成为现代 Web 开发规范的一部分。

W3C XML 活动

W3C XML 活动

1. 什么是 XML

XML(Extensible Markup Language,可扩展标记语言)是 W3C 1998 年发布的通用数据格式标准,用于结构化存储与交换数据,被配置文件、Web 服务、Office 文档等广泛采用。

2. XML 家族

XML         基础语法
XSLT        转换(XML→XML/HTML/文本)
XPath       节点导航
XQuery      查询语言
XML Schema  模式验证(XSD)
DOM / SAX   解析接口
XLink / XPointer   链接与定位

3. XML 文档示例

<?xml version="1.0" encoding="UTF-8"?>
<library>
  <book id="b1">
    <title>XML 入门</title>
    <author>张三</author>
    <price>59.00</price>
  </book>
</library>

4. XML 应用场景

• 配置文件(如 Maven pom.xml、AndroidManifest.xml)
• 数据交换(SOAP、RSS、SVG)
• 文档格式(Office Open XML、docx/xlsx)
• 序列化与传输

5. 验证与工具

# 验证 XML 良构
xmllint --noout file.xml

# 在线工具
w3schools 等提供 XML 解析测试

# 编程解析
Python: xml.etree.ElementTree / lxml
Java:   DOM / SAX / StAX

W3C CSS 活动

W3C CSS 活动

1. 什么是 CSS

CSS(Cascading Style Sheets,层叠样式表)由 W3C 维护,用于控制网页的样式与布局,实现内容与表现分离。

2. CSS 版本演进

CSS1(1996)     字体、颜色、边框基础
CSS2(1998)     定位、媒体类型
CSS2.1(2011)   修正完善
CSS3(分模块)   选择器、渐变、动画、Flex、Grid
CSS4(模块化演进) 继续按模块推进,无整体版本号

3. CSS3 核心模块

• 选择器:属性选择器、伪类、伪元素
• 布局:Flexbox、Grid、Multi-column
• 视觉效果:圆角、阴影、渐变、滤镜
• 动画:transition、animation、transform
• 响应式:媒体查询(Media Queries)
• 字体:@font-face 自定义字体

4. CSS 示例

/* 布局:Flex 居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 响应式 */
@media (max-width: 600px) {
  .container { flex-direction: column; }
}

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.card { animation: fadeIn 1s ease; }

5. W3C CSS 验证器

jigsaw.w3.org/css-validator
# 校验 CSS 语法正确性

W3C XSL 活动

W3C XSL 活动

1. XSL 家族

XSL(Extensible Stylesheet Language)包含三个部分:

组件	用途
XSLT	XML 转换语言(1.0/2.0/3.0)
XPath	XML 节点导航表达式语言
XSL-FO	XML 格式化对象(输出 PDF/打印)

2. XSLT 工作方式

XML 数据 + XSLT 样式表
        ↓
HTML / XML / 文本 / FO

3. XSLT 示例

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <html>
      <body>
        <h2>图书列表</h2>
        <ul>
          <xsl:for-each select="library/book">
            <li><xsl:value-of select="title"/></li>
          </xsl:for-each>
        </ul>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

4. XSLT 版本对比

XSLT 1.0(1999)   基础模板与函数,广泛支持
XSLT 2.0(2007)   更强类型、正则、分组
XSLT 3.0(2017)   流式处理、JSON、Map/Array

# 处理器
libxslt(命令行 xsltproc)
Saxon(Java/.NET)
内置浏览器(现代浏览器支持 XSLT 1.0)

5. 实际应用

• XML 转 HTML 页面展示
• 报表生成(XML → XSL-FO → PDF)
• 数据格式转换(系统间集成)

W3C XML Schema 活动

W3C XML Schema 活动

1. 什么是 XML Schema

XML Schema(XSD)是 W3C 定义 XML 文档结构的模式语言,类似数据库的表结构定义,用于验证 XML 数据的类型与约束。

2. 与 DTD 对比

特性	DTD	XML Schema(XSD)
类型系统	弱(仅文本)	强(整数/日期/自定义)
语法	非 XML	XML 语法
命名空间	不支持	原生支持
约束能力	有限	丰富(Facet、模式)

3. Schema 示例

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <xs:element name="library">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="book" maxOccurs="unbounded">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="title" type="xs:string"/>
              <xs:element name="price" type="xs:decimal"/>
            </xs:sequence>
            <xs:attribute name="id" type="xs:ID" use="required"/>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

4. 数据类型与 Facet

<!-- 数值约束 -->
<xs:element name="age">
  <xs:simpleType>
    <xs:restriction base="xs:integer">
      <xs:minInclusive value="0"/>
      <xs:maxInclusive value="150"/>
    </xs:restriction>
  </xs:simpleType>
</xs:element>

<!-- 枚举 -->
<xs:restriction base="xs:string">
  <xs:enumeration value="dev"/>
  <xs:enumeration value="prod"/>
</xs:restriction>

<!-- 正则 -->
<xs:pattern value="[0-9]{3}-[0-9]{4}"/>

5. 验证工具

# 命令行
xmllint --schema book.xsd book.xml

# Python
from lxml import etree
schema = etree.XMLSchema(etree.parse("book.xsd"))
schema.assertValid(etree.parse("book.xml"))

W3C XPath 活动

W3C XPath 活动

1. 什么是 XPath

XPath 是 W3C 制定的 XML 节点查询语言,用路径表达式在 XML 文档中导航和选择节点,是 XSLT、XQuery、Selenium 等的基础。

2. 节点与轴

文档结构:
document
 └── element
     ├── attribute
     ├── text
     ├── comment
     └── child elements

3. 基本路径表达式

/library/book           绝对路径,选择所有 book
library/book            相对路径
//book                  文档任意位置的所有 book
book/title              子元素
book/@id                属性
book/text()             文本节点
//book[1]               第一个 book
//book[last()]          最后一个 book
//book[@id='b1']        属性过滤

4. 运算符与函数

# 比较
//book[price > 50]
//book[title = 'XML']

# 逻辑
//book[price > 50 and price < 100]

# 函数
//book[contains(title, '入门')]
//book[starts-with(@id, 'b')]
count(//book)             统计数量
string-length(title)      字符串长度
normalize-space(.)        去除空白

5. 应用场景

# XSLT 中使用
<xsl:value-of select="//book[1]/title"/>

# XQuery 中使用
for $b in /library/book return $b/title

# Python lxml
from lxml import etree
doc = etree.parse("data.xml")
for el in doc.xpath("//book[price>50]/title"):
    print(el.text)

# Selenium 网页定位
driver.find_element(By.XPATH, "//div[@class='login']/input")

W3C XQuery 活动

W3C XQuery 活动

1. 什么是 XQuery

XQuery 是 W3C 制定的 XML 查询语言,类似 SQL 之于关系数据库,用于从 XML 数据中查询、过滤、组合信息。

2. FLWOR 表达式

FLWOR(for-let-where-order-return)是 XQuery 的核心:

xquery version "3.0";

for $b in /library/book
let $p := $b/price
where $p > 50
order by $p descending
return <book>{ $b/title }({ $p })</book>

3. 简单查询示例

# 选择所有标题
//book/title

# 条件过滤
//book[author = "张三"]

# 构造新 XML
<result>{ //book[price > 50] }</result>

# 字符串拼接
for $b in //book return concat($b/title, " - ", $b/author)

4. XQuery 与 SQL 对比

SQL	XQuery
SELECT	FLWOR return
FROM	for / let
WHERE	where
ORDER BY	order by
JOIN	嵌套 for + where 匹配

5. 执行环境

# BaseX / eXist / Saxon 等实现
# 命令行测试(BaseX)
basex -i data.xml "//book[price>50]/title"

# Java 嵌入(Saxon)
XQueryCompiler compiler = processor.newXQueryCompiler();
XQueryExecutable exe = compiler.compile(query);
XQueryEvaluator eval = exe.load();

W3C DOM 活动

W3C DOM 活动

1. 什么是 DOM

DOM(Document Object Model)是 W3C 制定的标准接口,将 HTML/XML 文档表示为树形对象模型,程序可通过 DOM API 读取、修改文档内容与结构。

2. DOM 版本

DOM Level 1(1998)   核心对象与遍历
DOM Level 2(2000)   事件、样式、视图、Range
DOM Level 3(2004)   加载保存、验证、XPath
DOM4(2015)          整合简化,WHATWG 维护 Living Standard

3. DOM 树结构

document
 └── html
     ├── head
     │   └── title
     └── body
         ├── h1
         └── p
             └── text

4. 浏览器 DOM 操作(JavaScript)

// 查找
document.getElementById("app")
document.querySelector(".card")
document.querySelectorAll("li")

// 修改
el.textContent = "新文本"
el.innerHTML = "<b>加粗</b>"
el.setAttribute("class", "active")
el.style.color = "red"

// 创建与删除
const div = document.createElement("div");
document.body.appendChild(div);
div.remove();

// 事件
btn.addEventListener("click", () => { ... });

// 遍历
el.children
el.parentNode
el.nextElementSibling

5. XML DOM(Python)

import xml.etree.ElementTree as ET

tree = ET.parse("data.xml")
root = tree.getroot()
for book in root.findall("book"):
    print(book.find("title").text)

# 修改并保存
root.set("version", "2.0")
tree.write("out.xml")

W3C SOAP 活动

W3C SOAP 活动

1. 什么是 SOAP

SOAP(Simple Object Access Protocol)是 W3C 制定的基于 XML 的消息传递协议,用于分布式环境中交换结构化信息,是传统 Web 服务(WS-*)的核心。

2. SOAP 消息结构

<?xml version="1.0"?>
<soap:Envelope
  xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
  soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">

  <soap:Header>
    <auth>token123</auth>    <!-- 可选,元信息 -->
  </soap:Header>

  <soap:Body>
    <m:GetPrice xmlns:m="http://example.com/ws">
      <m:Item>Apples</m:Item>
    </m:GetPrice>
  </soap:Body>
</soap:Envelope>

3. 传输与绑定

# 通常通过 HTTP POST 传输
POST /ws/price HTTP/1.1
Host: example.com
Content-Type: text/xml; charset=utf-8
SOAPAction: "http://example.com/ws/GetPrice"

<soap:Envelope>...</soap:Envelope>

4. 优点与缺点

优点	缺点
跨语言跨平台	XML 冗长,消息体积大
强类型契约(WSDL)	解析性能低
安全标准成熟(WS-Security)	学习曲线陡
事务/可靠性支持	被 REST 大量替代

5. 调用 SOAP 服务(Python)

from zeep import Client

client = Client("http://example.com/service?wsdl")
result = client.service.GetPrice(Item="Apples")
print(result)

# 手工构造请求
import requests
body = """<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body><GetPrice xmlns="http://example.com"><Item>Apples</Item></GetPrice></soap:Body>
</soap:Envelope>"""
resp = requests.post("http://example.com/ws",
    data=body,
    headers={"Content-Type": "text/xml"})

W3C WSDL 活动

W3C WSDL 活动

1. 什么是 WSDL

WSDL(Web Services Description Language)是 W3C 制定的 Web 服务描述语言,用 XML 描述服务的接口、消息、绑定与端点,是 SOAP 服务的"说明书"。

2. WSDL 文档结构

<definitions xmlns="http://schemas.xmlsoap.org/wsdl/"
    xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
    name="PriceService" targetNamespace="http://example.com/ws">

  <!-- 数据类型 -->
  <types>
    <schema xmlns="http://www.w3.org/2001/XMLSchema">
      <element name="GetPriceRequest">
        <complexType>
          <sequence>
            <element name="Item" type="xs:string"/>
          </sequence>
        </complexType>
      </element>
    </schema>
  </types>

  <!-- 消息 -->
  <message name="GetPriceRequest">
    <part name="parameters" element="tns:GetPriceRequest"/>
  </message>
  <message name="GetPriceResponse">
    <part name="parameters" element="tns:GetPriceResponse"/>
  </message>

  <!-- 端口类型(抽象操作) -->
  <portType name="PricePortType">
    <operation name="GetPrice">
      <input message="tns:GetPriceRequest"/>
      <output message="tns:GetPriceResponse"/>
    </operation>
  </portType>

  <!-- 绑定(具体协议) -->
  <binding name="PriceBinding" type="tns:PricePortType">
    <soap:binding style="document"
        transport="http://schemas.xmlsoap.org/soap/http"/>
    <operation name="GetPrice">
      <soap:operation soapAction="http://example.com/GetPrice"/>
    </operation>
  </binding>

  <!-- 服务端点 -->
  <service name="PriceService">
    <port name="PricePort" binding="tns:PriceBinding">
      <soap:address location="http://example.com/ws"/>
    </port>
  </service>
</definitions>

3. 核心元素

• types:数据类型定义(XSD)
• message:消息抽象定义
• portType:操作集合(接口)
• binding:绑定协议(SOAP/HTTP)
• service/port:具体服务地址

4. WSDL 2.0

WSDL 1.1(2001)    被广泛使用
WSDL 2.0(2007)    简化,引入 interface 概念,但采纳较少
# 实践中 WSDL 1.1 仍是主流

5. 使用场景

# 客户端工具根据 WSDL 生成代码
# Java: wsimport / JAX-WS
# .NET: svcutil
# Python: zeep

# 查看服务方法
from zeep import Client
c = Client("http://example.com/ws?wsdl")
print(c.service.__dir__())   # 列出可调用方法

W3C RDF 活动

W3C RDF 活动

1. 什么是 RDF

RDF(Resource Description Framework,资源描述框架)是 W3C 制定的描述资源及其关系的标准模型,是语义网(Semantic Web)与知识图谱的基础。

2. RDF 三元组

RDF 数据由"主语-谓语-宾语"三元组组成,类似知识图谱的"节点-边-节点":

主语(资源)  谓语(属性)    宾语(值)
"张三"  →  "年龄"   →  "30"
"张三"  →  "居住"   →  "北京"
"北京"  →  "首都"   →  "中国"

3. RDF 表示形式

# Turtle 格式(简洁)
@prefix ex: <http://example.org/> .

ex:zhangsan ex:age "30" ;
            ex:city ex:beijing .
ex:beijing ex:isCapitalOf ex:china .

# RDF/XML 格式
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:ex="http://example.org/">
  <rdf:Description rdf:about="http://example.org/zhangsan">
    <ex:age>30</ex:age>
  </rdf:Description>
</rdf:RDF>

4. RDF 相关标准

RDF            数据模型
RDF Schema     类与属性定义(RDFS)
OWL            本体语言(更丰富的推理)
SPARQL         图数据库查询语言
JSON-LD        JSON 中的 RDF 序列化

5. 应用场景

• 知识图谱(Google Knowledge Graph)
• 数据互联与开放数据(Linked Data)
• 语义搜索与推荐
• 企业数据整合

# SPARQL 查询示例
PREFIX ex: <http://example.org/>
SELECT ?person WHERE {
  ?person ex:city ex:beijing .
}

其他 W3C 活动

其他 W3C 活动

1. Web 平台系列

SVG            可缩放矢量图形
WebAssembly    高性能字节码标准
WebRTC         实时音视频通信
WebSocket      全双工通信协议
Web Workers    后台线程
Service Worker 离线缓存与 PWA
WebAuthn       无密码身份认证
WebGPU         高性能图形计算

2. 无障碍与国际化

WCAG           网页内容无障碍指南
WAI-ARIA       无障碍富互联网应用
i18n           国际化与本地化规范
Unicode 相关工作   字符编码支持

3. 安全与隐私

CSP            内容安全策略
Permissions     权限管理 API
Tracking Prevention  防追踪
Trusted Types   防 XSS 机制

4. 其他重要标准

MathML         数学标记语言
SMIL           同步多媒体集成语言
XForms / XLink / XPointer   XML 补充
Efficient XML Interchange   二进制 XML

5. W3C 的未来方向

• Web 性能与体验持续优化
• AI 与 Web 的结合(机器学习 API)
• 沉浸式 Web(XR 扩展现实)
• 隐私保护与安全增强
• 可访问性普及

6. 如何跟进

官网: w3.org
标准库: w3.org/TR
博客: w3.org/blog
GitHub: github.com/w3c
验证器: validator.w3.org

W3C 持续推动 Web 标准演进,学习标准是开发者保持竞争力的基础。