由万维网和HTML的发明者Tim Berners-Lee主持的万维网联盟（W3C）是负责带领Web标准发展的组织。

W3C发布的说明Web标准的文档称为规范（specification，缩写为spec）。这些规范对HTML、CSS等语言的参数进行了定义。也就是说，规范对语言规则进行了标准化。要了解W3C的活动，请访问www.w3.org。

由于种种原因，另一个组织，Web超文本应用技术工作组（WHATWG），在负责开发HTML5规范的大量内容。W3C将WHATWG的工作纳入了其正在开发的规范的正式版本之中。可以通过www.whatwg.org 访问WHATWG。

查看这些规范：

• HTML5（W3C）：https://www.w3.org/TR/html5/
• HTML5.1（W3C）：https://www.w3.org/TR/html51/
• 开发中的HTML标准（WHATWG）：https://www.whatwg.org/specs/web-apps/current-work/multipage/

渐进增强（progressive enhancement） 的理念：开始用所有人都能访问的HTML内容和行为构建网站，再用CSS加入你的设计，最后用JavaScript（一种编程语言）添加额外的行为。这些组件都是分离的，但可以同时发挥作用。

Astro - The web framework for content-driven websites

web.dev

GoogleChrome/web-vitals - Essential metrics for a healthy site.

Web Skills

Chrome for developers

favicon 生成

OWASP Web Security Testing Guide

50 unique mini-projects to sharpen your HTML, CSS & JavaScript skills（Github）

学习 Web 开发 - MDN

浏览器权限请求示例

Motion One - A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

重新理解 Web

WebGPU 理论基础

DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.

工具

Emmet — Web 开发人员的必备工具包

Griddy - Learn the CSS Grid!

CSS

最佳 CSSS 框架，根据 Github Star 数据

基础：

学习CSS布局

Color Formats in CSS

An Interactive Guide to Flexbox

3D in CSS

浏览器样式重置：

normalize.css

现代 CSS 解决方案：Modern CSS Reset

A Modern CSS Reset

小巧的 css 框架：

picocss - Minimal CSS Framework for Semantic HTML

concrete.css - A simple and to the point classless CSS stylesheet

Milligram - A minimalist CSS framework

https://www.starterapp.style/

magick.css

matcha.css - Drop-in semantic styling library in pure CSS.

一些样式参考：

scrollbar 样式

CSS Inspiration -- CSS灵感（Github）

30+ Responsive CSS Hamburger Menu Example

The Biggest Collection of Loading Animations

Learn and Practice Modern CSS

如何使用 CSS flexbox 制作时间线

资料：

实现 Div 居中的 10 中方法（英文）

如何使用CSS创建高级动画，这个函数必须掌握

你不应该依赖CSS 100vh，这就是原因!

谈谈 H5 移动端适配原理

Defensive CSS 收集各种防御性的 CSS 技巧，防止客户端出现各种破坏 CSS 显示的情况

The Guide To Responsive Design In 2023 and Beyond

UnoCSS: The instant on-demand Atomic CSS engine（Github）

About Us Pop-Out Effect (codepen.io)

13 Pure CSS Mobile Devices from @marvelapp

you-dont-need/You-Dont-Need-JavaScript: CSS is powerful, you can do a lot of things without JS. (github.com)

现代的图片展示方式（英文，主要讲 <img srcset> 属性的一些妙用）

GradientsGuru - 漂亮的渐变背景， 可拷贝为 css

Tailwindcss

Awesome things related to Tailwind CSS

Web 组件

CortexJS 一个数学公式的 Web Component 组件。

css-doodle - 用于使用 CSS 绘制图案的 Web 组件

Web

Web 前端入门（Microsoft）（英文）

WebGL 理论基础（中文）

Web3

Web 3.0 通识课 - 飞书云文档 (feishu.cn)

WTF Academy - 开发者的 Web3 开源大学

Web 性能优化

了解 HTTP 协议后才能理解的预加载

动画

Epic Easing：Easing 动画生成调试预览工具

如何用 CSP 防止 XSS 注入攻击 - 本文讲解怎么使用浏览器的 CSP（内容安全策略），防止网页被 XSS （跨站点脚本注入攻击）。

性能优化

几个方法让图片加载更快一些

库

分类	名称	Github	文档	说明
UI	Penguin UI		🔗	Plug-n-play UI component library for Tailwind CSS & Alpine JS
代码高亮	Shiki	🔗	🔗	美观而强大的代码高亮器