HTML5、CSS3：完整特性详解（全表格精细化整理）

<header>

定义页面或单个区块的头部区域

网站顶部logo、导航栏、标题简介、头部公告，可在页面多个区块中重复使用

IE9及以上、所有现代浏览器全兼容

<nav>

专门定义导航链接区块

网站主导航、侧边分类导航、页内快捷导航、底部导航链接

IE9及以上、所有现代浏览器全兼容

<main>

定义页面唯一的核心主体内容区域

页面主要正文、核心业务内容，一个页面仅允许出现一次

IE11及以上、现代浏览器全兼容

<section>

定义文档独立章节、内容区块

页面内容分块、功能模块划分、图文组合区块、文章章节拆分

IE9及以上、所有现代浏览器全兼容

<article>

定义独立、完整、可单独复用的内容单元

新闻资讯、博客文章、用户评论、商品卡片、帖子内容

IE9及以上、所有现代浏览器全兼容

<aside>

定义页面辅助性、侧边冗余内容

侧边栏、热门推荐、广告位、备注说明、附属信息

IE9及以上、所有现代浏览器全兼容

<footer>

定义页面或区块底部区域

网站版权信息、备案号、联系方式、底部友情链接、网站声明

IE9及以上、所有现代浏览器全兼容

<figure>

定义图文、图表组合独立区块

图片、图表、视频搭配说明文字的组合模块，独立于正文内容

IE9及以上、所有现代浏览器全兼容

<figcaption>

为 figure 区块提供专属标题与说明文字

图片注释、图表解读、视频简介，搭配 figure 标签使用

IE9及以上、所有现代浏览器全兼容

<mark>

高亮标记文本内容

重点文字标注、搜索结果关键词高亮、核心提示文本

IE9及以上、所有现代浏览器全兼容

<time>

标准化定义日期、时间数据

文章发布时间、活动截止时间、日程安排、数据更新时间

IE9及以上、所有现代浏览器全兼容

新增Input输入类型

type="email"

专属邮箱输入框，浏览器原生校验邮箱格式，格式错误禁止表单提交

type="tel"

手机号输入框，移动端自动唤起数字键盘，适配手机输入场景

type="url"

网址输入框，原生校验URL链接格式，非法链接无法提交

type="number"

纯数字输入框，仅允许输入数字，可搭配max/min/step限制数值范围和步长

type="date"

原生日期选择器，支持快速选择年月日，无需自定义日历组件

type="time"

原生时间选择器，仅支持选择时分，适配时间填报场景

type="datetime-local"

本地日期时间选择器，同时选择年月日和时分，适配完整时间填报

type="month"

月份选择器，仅选择年月，适配月度统计、月度报表填报

type="week"

周数选择器，选择年度周数，适配周度统计、排班场景

type="search"

专属搜索输入框，自带一键清空按钮，适配页面搜索功能

新增表单校验属性

placeholder

输入框占位提示文字，输入内容后自动消失，提升用户体验

required

必填项校验，输入框为空时点击提交，浏览器原生弹出提示，禁止提交

readonly

输入框只读状态，内容不可修改，数据可正常提交到后台

disabled

输入框禁用状态，不可修改、不可聚焦，数据不参与表单提交

max/min/step

限制数字、日期最大值、最小值及增减步长，规范输入范围

autofocus

页面加载完成后，自动聚焦到当前输入框，无需手动点击激活

新增功能表单标签

<datalist>

输入框下拉联想列表，绑定input使用，实现输入模糊匹配、快捷选择

<progress>

进度条组件，用于展示文件上传、数据加载、任务执行进度

<meter>

度量值展示组件，用于展示电量、分数、使用率、比例数值等静态度量数据

<audio>

原生音频播放，无需插件

controls、autoplay、loop、muted、preload

网页背景音乐、音频播放、语音播报、有声读物

<video>

原生视频播放，支持主流视频格式

controls、autoplay、loop、poster、width、muted

网页视频播放、教程视频、宣传视频、短视频展示

<source>

为音视频提供多格式兼容源

src、type

解决不同浏览器音视频格式兼容问题，提升适配性

<canvas>

2D画布，通过JS动态绘制图形

width、height

数据图表、手绘画板、网页游戏、动态特效、数据可视化

<svg>

无损矢量图形，支持自适应缩放

viewBox、fill、stroke、width、height

图标、logo、矢量插画、动态图形、自适应图形展示

localStorage

永久本地数据存储

容量5MB，数据永久保存，手动清除才会失效，不随请求发送后台

缓存用户配置、本地偏好设置、长期缓存数据、免登录本地标记

sessionStorage

会话级临时存储

容量5MB，浏览器窗口关闭后数据自动清空，仅当前会话有效

临时缓存页面表单数据、会话临时参数、页面临时状态

Cookie

传统客户端存储（兼容保留）

容量4KB，数据随HTTP请求自动提交后台，可设置过期时间

用户登录态校验、后台身份验证、短期状态标记

Application Cache

网页离线缓存

缓存网页静态资源，支持离线访问页面，现逐步被Service Worker替代

离线官网、离线文档、弱网适配页面

File API

本地文件读取与解析

支持读取本地文件内容、获取文件信息、预览文件

图片预览、文件上传、文档解析、分片上传功能

Geolocation API

获取用户设备地理位置

需用户授权，支持获取精准经纬度、位置信息

地图定位、附近服务、同城推荐、位置打卡

WebSocket

客户端与服务端双向实时通信

建立长连接，支持服务端主动推送数据，无轮询延迟

在线聊天、实时榜单、消息推送、直播弹幕、实时监控

Drag&Drop

原生元素拖拽交互

原生支持元素拖拽、放置、排序，无需自定义JS拖拽逻辑

列表排序、文件拖拽上传、卡片拖拽布局、可视化拖拽

<font>、<center>、<strike>

标签自带样式，结构与样式混杂，代码冗余，不利于维护

全部使用CSS样式控制字体、居中、删除线效果

<frameset>、<frame>

框架布局体验差、兼容性弱、严重影响SEO优化，早已淘汰

使用iframe、AJAX、前端路由、组件化布局替代

align、bgcolor、border原生属性

标签原生样式属性，不符合结构样式分离的开发原则

统一通过CSS样式设置对齐、背景、边框效果

属性选择器

[attr]

匹配所有拥有attr属性的HTML元素

[attr="val"]

精准匹配attr属性值完全等于val的元素

[attr^="val"]

匹配attr属性值以val字符开头的所有元素

[attr$="val"]

匹配attr属性值以val字符结尾的所有元素

结构伪类选择器

:first-child

匹配父元素下的第一个子元素

:last-child

匹配父元素下的最后一个子元素

:nth-child(n)

匹配父元素第n个子元素，支持奇偶匹配、公式匹配

:nth-of-type(n)

匹配父元素下同类型标签的第n个元素

:empty

匹配无内容、无嵌套子元素的空标签

:not(selector)

反向匹配，排除指定选择器对应的所有元素

状态伪类选择器

:focus

匹配当前获取焦点的表单输入元素

:checked

匹配被选中的单选框、复选框元素

:disabled/:enabled

分别匹配禁用状态、可用状态的表单元素

:hover/:active

分别匹配鼠标悬浮状态、鼠标点击激活状态

伪元素选择器

::before / ::after

在元素前后插入虚拟内容，用于装饰图标、清除浮动、样式点缀

border-radius

实现元素圆角边框，支持单角、四角独立设置

支持数值、百分比；设置50%可实现圆形、椭圆效果

box-shadow

为盒子元素添加阴影，打造立体卡片效果

参数：水平偏移、垂直偏移、模糊度、扩散度、颜色、内外阴影

text-shadow

为文字添加阴影，实现立体文字、发光文字效果

参数：水平偏移、垂直偏移、模糊度、阴影颜色

opacity

设置元素整体透明度，包含子元素全部透明

取值0-1，0为完全透明，1为完全不透明

rgba()

颜色透明设置，仅当前颜色透明，不影响子元素样式

参数：红、绿、蓝、透明度（0-1），多用于背景透明

border-image

使用图片替代纯色边框，实现个性化边框样式

参数：图片路径、切割尺寸、平铺重复方式

text-overflow

控制文本溢出显示效果，解决文字溢出排版问题

搭配ellipsis实现文字溢出省略号显示

word-wrap/word-break

控制文本自动换行、强制换行规则

解决长英文、长数字、无空格文本溢出容器问题

线性渐变

linear-gradient(方向, 起始色, 结束色)

支持上下、左右、自定义角度渐变，适配按钮、背景、横幅渐变样式

径向渐变

radial-gradient(形状, 起始色, 结束色)

从中心向外扩散的圆形/椭圆渐变，适配圆形按钮、光影背景、渐变卡片

重复线性渐变

repeating-linear-gradient()

自动平铺重复线性渐变，可实现条纹背景、刻度线条等规律样式

重复径向渐变

repeating-radial-gradient()

平铺重复径向渐变，实现波纹、圆点、环形渐变装饰效果

2D平面变换

translate(x,y)

元素平面平移，不脱离文档流，不影响其他元素布局

scale(x,y)

元素平面缩放，支持横向、纵向单独缩放，实现放大缩小效果

rotate(deg)

元素平面旋转，单位为角度，适配图标、卡片旋转动效

skew(x,y)

元素平面倾斜变形，实现特殊几何样式效果

3D立体变换

perspective

设置透视距离，模拟人眼3D视觉效果，是3D变换基础

rotateX()/rotateY()

沿X轴、Y轴立体旋转，实现元素翻转、立体展示效果

translate3d()

三维空间平移，支持X/Y/Z三轴位移，立体位置调整

transform-style: preserve-3d

开启子元素3D空间，保留立体效果，是复杂3D特效必备属性

过渡 transition（状态平滑切换）

transition-property

指定需要开启平滑过渡的CSS属性，支持单个或多个属性

transition-duration

设置过渡动画的持续时长，单位为秒/毫秒

transition-timing-function

设置过渡速度曲线，支持匀速、先快后慢、先慢后快等运动规律

transition-delay

设置过渡动画延迟执行时间，实现延时动效

动画 animation（复杂动态效果）

@keyframes

定义动画关键帧，设置动画不同阶段的样式状态

animation-name

绑定关键帧动画名称，让元素执行对应动画

animation-duration/animation-count

分别设置动画单次时长、动画循环播放次数

animation-direction

设置动画播放方向，支持正向、反向、交替播放

Flex弹性布局（一维布局）

display: flex

开启弹性容器，子元素自动适配容器尺寸，默认横向排列

justify-content

控制子元素水平对齐方式，支持居中、两端对齐、均分间距等

align-items

控制子元素垂直对齐方式，一键实现垂直居中，解决传统布局痛点

flex-grow/flex-shrink

控制子元素自适应放大、缩小比例，实现均分、自适应排版

Grid网格布局（二维布局）

display: grid

开启二维网格布局，同时控制行列排版，是目前最强网页布局方案

grid-template-columns/rows

自定义行列尺寸，支持等分、自适应、固定尺寸混合排版

grid-gap

统一设置网格间距，无需额外边距适配，排版更规整

多列布局

column-count/column-gap

文本、内容自动分多列展示，适配文章、资讯、图文流式排版

@media 媒体查询

根据屏幕宽度、设备分辨率、设备类型，差异化加载样式，实现响应式适配

rem/em/vw/vh 相对单位

新型自适应单位，跟随屏幕、根字体大小自动缩放，适配移动端多尺寸屏幕

max-width/min-width

限制元素最大、最小宽度，防止大屏拉伸变形、小屏溢出错乱