HTML5 新特性速查表
1. 语义化标签
| 标签 | 含义 | 示例 |
|---|
<header> | 页面或区块头部 | <header>网站标题</header> |
<nav> | 导航区域 | <nav><a href="#">首页</a></nav> |
<main> | 主内容区 | <main>主要内容</main> |
<article> | 独立文章/内容块 | <article>博客正文</article> |
<section> | 文档分区/章节 | <section>章节内容</section> |
<aside> | 侧边栏/附属信息 | <aside>广告位</aside> |
<footer> | 页脚 | <footer>版权信息</footer> |
<figure>/ <figcaption> | 图片+说明组合 | <figure><img src="a.jpg"><figcaption>图1</figcaption></figure> |
<mark> | 高亮文本 | <mark>重点</mark> |
<time> | 时间/日期标记 | <time datetime="2026-03-04">今天</time> |
<details>/ <summary> | 可折叠详情 | <details><summary>更多</summary>隐藏内容</details> |
2. 表单增强
| 特性 | 含义 | 示例 |
|---|
type="email" | 邮箱输入验证 | <input type="email"> |
type="url" | URL 输入验证 | <input type="url"> |
type="number" | 数字输入 | <input type="number" min="1" max="10"> |
type="range" | 滑块输入 | <input type="range" min="0" max="100"> |
type="date"/ month/ week | 日期选择 | <input type="date"> |
type="search" | 搜索框 | <input type="search"> |
type="tel" | 电话输入 | <input type="tel"> |
placeholder | 占位提示文字 | <input placeholder="请输入"> |
required | 必填项 | <input required> |
autocomplete | 自动填充控制 | <form autocomplete="on"> |
pattern | 正则验证 | <input pattern="[A-Za-z]{3}"> |
multiple | 多选文件/值 | <input type="file" multiple> |
datalist | 输入建议列表 | <input list="browsers"><datalist id="browsers"><option>Chrome</option></datalist> |
3. 多媒体标签
| 标签 | 含义 | 示例 |
|---|
<video> | 视频播放 | <video src="movie.mp4" controls></video> |
<audio> | 音频播放 | <audio src="music.mp3" controls></audio> |
<source> | 多格式资源 | <source src="video.webm" type="video/webm"> |
<track> | 字幕/文本轨道 | <track kind="subtitles" src="sub.vtt"> |
<embed> | 嵌入外部内容 | <embed src="a.swf"> |
<object> | 嵌入插件内容 | <object data="a.pdf" type="application/pdf"></object> |
4. 图形与存储
| 特性 | 含义 | 示例 |
|---|
<canvas> | 2D 绘图 | <canvas id="c"></canvas> |
<svg> | 矢量图形 | <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg> |
localStorage | 本地持久化存储 | localStorage.setItem('key','value'); |
sessionStorage | 会话级存储 | sessionStorage.getItem('key'); |
indexedDB | 客户端数据库 | let db = indexedDB.open('db'); |
Web Storage | 键值对存储 | window.sessionStorage |
Drag and Drop API | 拖放功能 | draggable="true" |
Geolocation API | 地理位置 | navigator.geolocation.getCurrentPosition(fn) |
Web Workers | 后台线程 | new Worker('worker.js') |
WebSocket | 双向通信 | new WebSocket('ws://...') |
CSS3 新特性速查表
1. 选择器增强
| 选择器 | 含义 | 示例 |
|---|
E:nth-child(n) | 父元素第 n 个子元素 | li:nth-child(2){color:red;} |
E:nth-of-type(n) | 同类型第 n 个元素 | p:nth-of-type(1){font-weight:bold;} |
E:first-of-type/ last-of-type | 同类型首/末元素 | p:first-of-type{} |
E:not(selector) | 排除匹配元素 | div:not(.box){} |
E::before/ E::after | 伪元素插入内容 | div::before{content:"★";} |
E[attr^=val] | 属性值以 val 开头 | a[href^="https"]{color:green;} |
E[attr$=val] | 属性值以 val 结尾 | img[src$=".png"]{border:1px solid #000;} |
E[attr*=val] | 属性值包含 val | a[href*="example"]{} |
E~F | E 之后同层 F 元素 | h1~p{} |
E+F | E 后紧邻的 F 元素 | h1+p{} |
2. 盒模型与布局
| 特性 | 含义 | 示例 |
|---|
box-sizing: border-box | 宽高含 padding 和 border | div{box-sizing:border-box;width:100px;padding:10px;} |
display: flex | 弹性布局 | display:flex;justify-content:center; |
display: grid | 网格布局 | display:grid;grid-template-columns:1fr 1fr; |
gap | 网格/弹性布局间距 | gap: 10px; |
align-items/ justify-content | 弹性布局对齐 | align-items:center; |
place-items | 简写对齐 | place-items:center; |
order | 改变元素顺序 | order:2; |
float/ clear | 浮动与清除 | float:left; clear:both; |
position: sticky | 粘性定位 | position:sticky; top:0; |
3. 动画与过渡
| 特性 | 含义 | 示例 |
|---|
transition | 平滑过渡效果 | transition: all 0.3s ease; |
@keyframes | 定义动画关键帧 | @keyframes fade{from{opacity:0;}to{opacity:1;}} |
animation | 应用动画 | animation: fade 2s infinite; |
animation-delay | 动画延迟 | animation-delay:1s; |
animation-fill-mode | 动画前后状态 | animation-fill-mode: forwards; |
4. 变形与滤镜
| 特性 | 含义 | 示例 |
|---|
transform | 旋转/缩放/位移/倾斜 | transform: rotate(45deg) scale(1.2); |
transform-origin | 变形原点 | transform-origin: top left; |
filter | 图像滤镜效果 | filter: blur(5px) grayscale(100%); |
backdrop-filter | 背景滤镜 | backdrop-filter: blur(10px); |
5. 背景与边框
| 特性 | 含义 | 示例 |
|---|
background-size | 背景图尺寸 | background-size: cover; |
background-clip | 背景绘制区域 | background-clip: text; |
background-blend-mode | 背景混合模式 | background-blend-mode: multiply; |
border-radius | 圆角 | border-radius: 10px; |
box-shadow | 盒子阴影 | box-shadow: 2px 2px 5px rgba(0,0,0,0.3); |
border-image | 图片边框 | border-image: url(border.png) 30 round; |
outline | 外轮廓线 | outline: 2px solid red; |
6. 媒体查询（响应式设计）
| 特性 | 含义 | 示例 |
|---|
@media | 根据设备条件应用样式 | @media(max-width:768px){body{font-size:14px;}} |
min-width/ max-width | 最小/最大宽度 | @media(min-width:1200px){} |
orientation | 横竖屏 | @media(orientation:portrait){} |
resolution | 屏幕分辨率 | @media(resolution:2dppx){} |
7. 其他常用特性（补全）
| 特性 | 含义 | 示例 |
|---|
calc() | 计算值 | width: calc(100% - 20px); |
var() | CSS 变量 | --main-color:#333; color: var(--main-color); |
clamp() | 限制范围值 | font-size: clamp(12px, 2vw, 24px); |
mix-blend-mode | 混合模式 | mix-blend-mode: overlay; |
isolation | 隔离合成层 | isolation: isolate; |
scroll-behavior | 平滑滚动 | scroll-behavior: smooth; |
appearance | 重置控件外观 | appearance: none; |
user-select | 禁止选中文本 | user-select:none; |
pointer-events | 禁用鼠标事件 | pointer-events:none; |
ES6 新特性速查表
1. 变量声明
| 特性 | 含义 | 示例 |
|---|
let | 块级作用域，可重新赋值 | let a = 1; a = 2; |
const | 块级作用域，不可重新赋值（对象属性可变） | const PI = 3.14; |
2. 箭头函数
| 特性 | 含义 | 示例 |
|---|
=> | 简洁函数语法，自动绑定外层 this | const add = (a,b) => a+b; |
3. 模板字符串
| 特性 | 含义 | 示例 |
|---|
` ` | 多行字符串与 ${expr}插值 | `Hello ${name}` |
4. 解构赋值
| 特性 | 含义 | 示例 |
|---|
| 数组解构 | 从数组提取值 | const [x,y] = [1,2]; |
| 对象解构 | 从对象提取值 | const {name} = {name:'Tom'}; |
5. 默认参数
| 特性 | 含义 | 示例 |
|---|
| 默认参数值 | 参数未传时用默认值 | function f(a=1){} |
6. 类语法
| 特性 | 含义 | 示例 |
|---|
class/ extends | 面向对象语法 | class Child extends Parent {} |
7. 模块系统
| 特性 | 含义 | 示例 |
|---|
export/ import | 模块化导入导出 | export const a=1;/ import {a} from './mod.js'; |
8. Promise 异步
| 特性 | 含义 | 示例 |
|---|
Promise | 异步操作对象 | new Promise((resolve,reject)=>{}) |
.then()/ .catch() | 处理结果/捕获错误 | p.then(v=>{}).catch(e=>{}) |
Promise.all() | 并行执行，全部成功才成功 | Promise.all([p1,p2]) |
Promise.race() | 取最先完成的 Promise | Promise.race([p1,p2]) |
Promise.allSettled() | 等待全部完成（不论成败） | Promise.allSettled([p1,p2]) |
Promise.any() | 任意一个成功即成功 | Promise.any([p1,p2]) |
9. 展开运算符 ...
| 特性 | 含义 | 示例 |
|---|
| 数组展开 | 拆分数组元素 | [...arr1, 3] |
| 对象展开 | 合并对象 | {...obj1, b:2} |
| 函数传参 | 展开数组为参数 | Math.max(...arr) |
10. 剩余参数 ...
| 特性 | 含义 | 示例 |
|---|
| 收集剩余参数 | 转为数组 | function f(a,...rest){} |
11. 其他常用特性（补全）
| 特性 | 含义 | 示例 |
|---|
for...of | 遍历可迭代对象（数组、Map、Set 等） | for(const v of arr){} |
Map | 键值对集合，键可以是任意类型 | const m = new Map(); m.set('a',1); |
Set | 不重复值的集合 | const s = new Set([1,2,2]); |
Symbol | 唯一且不可变的值类型 | const sym = Symbol('desc'); |
Generator(function*) | 可暂停的函数 | function* gen(){ yield 1; } |
Proxy | 拦截对象操作 | const proxy = new Proxy(obj, handler); |
Reflect | 操作对象的统一 API | Reflect.get(obj,'prop'); |
Array.from() | 类数组转数组 | Array.from(arguments) |
Array.of() | 创建数组 | Array.of(1,2,3) |
Object.assign() | 浅拷贝对象 | Object.assign({}, obj1) |
includes() | 数组是否包含某元素 | [1,2].includes(2) |
find()/ findIndex() | 查找元素或索引 | [1,2].find(x=>x>1) |
padStart()/ padEnd() | 字符串补位 | '5'.padStart(2,'0') |
entries()/ keys()/ values() | 返回迭代器 | arr.keys() |
12.垃圾回收机制（GC）
只要没有任何变量、属性、作用域等引用它，它就会被自动回收。
