HTML能做什么？Web开发的十大应用场景

一、HTML——不止是"写网页"那么简单

当我们说起HTML，很多人的第一反应就是"写网页的"。这个回答没错，但不够全面。HTML作为Web技术的基石，它的应用范围远比你想象的要广阔得多。

从简单的个人主页到复杂的Web应用，从信息展示到在线交易，从内容创作到游戏娱乐——几乎所有运行在浏览器中的应用，底层都离不开HTML的支撑。可以说，HTML是整个互联网世界的"通用建筑材料"。

1.1 HTML的核心价值

为什么HTML能有如此广泛的应用？这源于它的几个核心特性：

#mermaid-svg-GXghvDJFGCcIxdjl{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-GXghvDJFGCcIxdjl .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-GXghvDJFGCcIxdjl .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-GXghvDJFGCcIxdjl .error-icon{fill:#552222;}#mermaid-svg-GXghvDJFGCcIxdjl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GXghvDJFGCcIxdjl .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-GXghvDJFGCcIxdjl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GXghvDJFGCcIxdjl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GXghvDJFGCcIxdjl .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-GXghvDJFGCcIxdjl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GXghvDJFGCcIxdjl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GXghvDJFGCcIxdjl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GXghvDJFGCcIxdjl .marker.cross{stroke:#333333;}#mermaid-svg-GXghvDJFGCcIxdjl svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GXghvDJFGCcIxdjl p{margin:0;}#mermaid-svg-GXghvDJFGCcIxdjl .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-GXghvDJFGCcIxdjl .cluster-label text{fill:#333;}#mermaid-svg-GXghvDJFGCcIxdjl .cluster-label span{color:#333;}#mermaid-svg-GXghvDJFGCcIxdjl .cluster-label span p{background-color:transparent;}#mermaid-svg-GXghvDJFGCcIxdjl .label text,#mermaid-svg-GXghvDJFGCcIxdjl span{fill:#333;color:#333;}#mermaid-svg-GXghvDJFGCcIxdjl .node rect,#mermaid-svg-GXghvDJFGCcIxdjl .node circle,#mermaid-svg-GXghvDJFGCcIxdjl .node ellipse,#mermaid-svg-GXghvDJFGCcIxdjl .node polygon,#mermaid-svg-GXghvDJFGCcIxdjl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-GXghvDJFGCcIxdjl .rough-node .label text,#mermaid-svg-GXghvDJFGCcIxdjl .node .label text,#mermaid-svg-GXghvDJFGCcIxdjl .image-shape .label,#mermaid-svg-GXghvDJFGCcIxdjl .icon-shape .label{text-anchor:middle;}#mermaid-svg-GXghvDJFGCcIxdjl .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-GXghvDJFGCcIxdjl .rough-node .label,#mermaid-svg-GXghvDJFGCcIxdjl .node .label,#mermaid-svg-GXghvDJFGCcIxdjl .image-shape .label,#mermaid-svg-GXghvDJFGCcIxdjl .icon-shape .label{text-align:center;}#mermaid-svg-GXghvDJFGCcIxdjl .node.clickable{cursor:pointer;}#mermaid-svg-GXghvDJFGCcIxdjl .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-GXghvDJFGCcIxdjl .arrowheadPath{fill:#333333;}#mermaid-svg-GXghvDJFGCcIxdjl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-GXghvDJFGCcIxdjl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-GXghvDJFGCcIxdjl .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-GXghvDJFGCcIxdjl .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-GXghvDJFGCcIxdjl .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-GXghvDJFGCcIxdjl .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-GXghvDJFGCcIxdjl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-GXghvDJFGCcIxdjl .cluster text{fill:#333;}#mermaid-svg-GXghvDJFGCcIxdjl .cluster span{color:#333;}#mermaid-svg-GXghvDJFGCcIxdjl div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-GXghvDJFGCcIxdjl .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-GXghvDJFGCcIxdjl rect.text{fill:none;stroke-width:0;}#mermaid-svg-GXghvDJFGCcIxdjl .icon-shape,#mermaid-svg-GXghvDJFGCcIxdjl .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-GXghvDJFGCcIxdjl .icon-shape p,#mermaid-svg-GXghvDJFGCcIxdjl .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-GXghvDJFGCcIxdjl .icon-shape .label rect,#mermaid-svg-GXghvDJFGCcIxdjl .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-GXghvDJFGCcIxdjl .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-GXghvDJFGCcIxdjl .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-GXghvDJFGCcIxdjl :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

HTML的核心价值

通用性

简单性

可扩展性

开放性

任何浏览器都能解析任何设备都能显示

语法简单易于学习人类可读机器可解析

可与CSS/JS结合可通过自定义标签扩展

开放标准不被垄断免费使用无需授权

• 通用性：HTML是互联网的通用语言，只要有浏览器就能打开HTML文件，不受操作系统、设备类型的限制
• 简单性：HTML的语法非常直观，标签语义化，即使是非专业人士也能快速上手
• 可扩展性：HTML本身只负责结构，但它可以与CSS、JavaScript、Canvas、WebGL等技术结合，创造出无限可能
• 开放性：HTML是开放的国际标准，由W3C和WHATWG共同维护，任何人都可以免费使用

1.2 从"文档标记"到"应用平台"

HTML最初只是用来标记学术文档的工具，但经过三十多年的发展，它已经演变成了一个强大的应用开发平台。

#mermaid-svg-MBSIBaQZyYRaKeWL{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-MBSIBaQZyYRaKeWL .error-icon{fill:#552222;}#mermaid-svg-MBSIBaQZyYRaKeWL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MBSIBaQZyYRaKeWL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MBSIBaQZyYRaKeWL .marker.cross{stroke:#333333;}#mermaid-svg-MBSIBaQZyYRaKeWL svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MBSIBaQZyYRaKeWL p{margin:0;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge{stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .section–1 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section–1 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section–1 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section–1 text{fill:#ffffff;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth–1{stroke-width:17;}#mermaid-svg-MBSIBaQZyYRaKeWL .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:#ffffff;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-0 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-0 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-0 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-0 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-0{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-0{stroke-width:14;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-1 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-1 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-1 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-1 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-1{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-1{stroke-width:11;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-2 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-2 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-2 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-2 text{fill:#ffffff;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-2{stroke-width:8;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:#ffffff;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-3 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-3 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-3 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-3 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-3{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-3{stroke-width:5;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-4 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-4 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-4 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-4 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-4{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-4{stroke-width:2;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-5 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-5 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-5 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-5 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-5{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-5{stroke-width:-1;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-6 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-6 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-6 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-6 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-6{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-6{stroke-width:-4;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-7 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-7 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-7 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-7 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-7{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-7{stroke-width:-7;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-8 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-8 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-8 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-8 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-8{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-8{stroke-width:-10;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-9 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-9 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-9 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-9 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-9{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-9{stroke-width:-13;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-10 rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-10 path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-10 circle,#mermaid-svg-MBSIBaQZyYRaKeWL .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-10 text{fill:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .node-icon-10{font-size:40px;color:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .edge-depth-10{stroke-width:-16;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-MBSIBaQZyYRaKeWL .lineWrapper line{stroke:black;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled circle,#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:lightgray;}#mermaid-svg-MBSIBaQZyYRaKeWL .disabled text{fill:#efefef;}#mermaid-svg-MBSIBaQZyYRaKeWL .section-root rect,#mermaid-svg-MBSIBaQZyYRaKeWL .section-root path,#mermaid-svg-MBSIBaQZyYRaKeWL .section-root circle{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-MBSIBaQZyYRaKeWL .section-root text{fill:#ffffff;}#mermaid-svg-MBSIBaQZyYRaKeWL .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-MBSIBaQZyYRaKeWL .edge{fill:none;}#mermaid-svg-MBSIBaQZyYRaKeWL .eventWrapper{filter:brightness(120%);}#mermaid-svg-MBSIBaQZyYRaKeWL :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

1991

纯文本时代

只能显示文字和链接，类似格式化文档

1995

多媒体萌芽

支持图片、表格、表单，网页变得丰富

1997

样式与脚本

CSS和JS加入，网页开始有样式和交互

2005

Web 2.0

Ajax兴起，网页可以动态加载数据，接近应用体验

2014

HTML5 爆发

音视频、Canvas、本地存储…网页变身为应用

2020后

全能力时代

WebAssembly、PWA、WebGL…几乎无所不能

HTML能力的演进

今天的HTML早已不是那个"只能展示文字和图片"的标记语言了。基于HTML构建的Web应用，可以实现几乎所有传统桌面软件能做到的事情——甚至更多。

二、场景一：企业官网与品牌展示

企业官网是HTML最经典、最广泛的应用场景之一。几乎每一个企业、机构、品牌都有自己的官方网站，而这些网站绝大多数都是用HTML构建的。

2.1 企业官网的作用

企业官网就像是一家公司在互联网上的"门面"，它承担着多重功能：

#mermaid-svg-bbB3zqk2HZw8Ol75{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-bbB3zqk2HZw8Ol75 .error-icon{fill:#552222;}#mermaid-svg-bbB3zqk2HZw8Ol75 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-bbB3zqk2HZw8Ol75 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-bbB3zqk2HZw8Ol75 .marker.cross{stroke:#333333;}#mermaid-svg-bbB3zqk2HZw8Ol75 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-bbB3zqk2HZw8Ol75 p{margin:0;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge{stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section–1 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section–1 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section–1 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section–1 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section–1 text{fill:#ffffff;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth–1{stroke-width:17;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-0 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-0 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-0 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-0 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-0 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-0{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-0{stroke-width:14;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-1 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-1 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-1 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-1 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-1 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-1{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-1{stroke-width:11;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 text{fill:#ffffff;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-2{stroke-width:8;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-3 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-3 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-3 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-3 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-3 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-3{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-3{stroke-width:5;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-4 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-4 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-4 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-4 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-4 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-4{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-4{stroke-width:2;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-5 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-5 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-5 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-5 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-5 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-5{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-5{stroke-width:-1;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-6 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-6 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-6 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-6 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-6 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-6{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-6{stroke-width:-4;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-7 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-7 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-7 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-7 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-7 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-7{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-7{stroke-width:-7;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-8 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-8 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-8 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-8 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-8 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-8{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-8{stroke-width:-10;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-9 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-9 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-9 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-9 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-9 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-9{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-9{stroke-width:-13;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-10 rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-10 path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-10 circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-10 polygon,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-10 text{fill:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .node-icon-10{font-size:40px;color:black;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge-depth-10{stroke-width:-16;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:lightgray;}#mermaid-svg-bbB3zqk2HZw8Ol75 .disabled text{fill:#efefef;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-root rect,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-root path,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-root circle,#mermaid-svg-bbB3zqk2HZw8Ol75 .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-root text{fill:#ffffff;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-root span{color:#ffffff;}#mermaid-svg-bbB3zqk2HZw8Ol75 .section-2 span{color:#ffffff;}#mermaid-svg-bbB3zqk2HZw8Ol75 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-bbB3zqk2HZw8Ol75 .edge{fill:none;}#mermaid-svg-bbB3zqk2HZw8Ol75 .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-bbB3zqk2HZw8Ol75 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

企业官网的作用

品牌形象展示

企业文化

品牌调性

视觉设计

信息发布

公司介绍

新闻动态

产品信息

客户服务

联系方式

在线客服

常见问题

营销转化

产品推广

活动宣传

线索收集

人才招聘

招聘信息

企业文化展示

简历投递

2.2 企业官网的技术实现

企业官网通常由以下几个核心页面组成：

<!– 典型企业官网页面结构示意 –>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XX科技 – 领先的企业解决方案提供商</title>
<meta name="description" content="XX科技专注于为企业提供数字化转型解决方案…">
</head>
<body>
<!– 顶部导航 –>
<header class="site-header">
<div class="logo">XX科技</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="products.html">产品中心</a></li>
<li><a href="solutions.html">解决方案</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>

<!– 首屏横幅 –>
<section class="banner">
<h1>引领数字化转型，赋能企业未来</h1>
<p>为全球企业提供领先的技术解决方案</p>
<a href="#contact" class="btn-primary">立即咨询</a>
</section>

<!– 核心产品 –>
<section class="products">
<h2>核心产品</h2>
<div class="product-list">
<article class="product-card">
<img src="product1.jpg" alt="产品一">
<h3>智能云平台</h3>
<p>一站式企业上云解决方案</p>
<a href="#" class="btn-more">了解更多</a>
</article>
<!– 更多产品卡片… –>
</div>
</section>

<!– 页脚 –>
<footer class="site-footer">
<div class="footer-info">
<div class="contact">联系方式：400-888-8888</div>
<div class="copyright">© 2026 XX科技 版权所有</div>
</div>
</footer>
</body>
</html>

2.3 为什么企业官网选择HTML

典型案例：

• 科技公司官网：华为、小米、阿里巴巴官网
• 传统企业官网：银行、汽车、快消品牌官网
• 政府机构网站：政务公开、在线办事服务平台
• 学校教育机构：大学官网、在线教育平台首页

三、场景二：电商平台与在线交易

电子商务是HTML应用的又一大领域。从淘宝、京东这样的综合电商平台，到各种品牌独立站、小程序商城——HTML技术支撑着数万亿美元的在线交易。

3.1 电商页面的核心组成

一个典型的电商网站包含这些核心页面：

#mermaid-svg-VhcCwB62vZfgRS6K{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-VhcCwB62vZfgRS6K .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-VhcCwB62vZfgRS6K .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-VhcCwB62vZfgRS6K .error-icon{fill:#552222;}#mermaid-svg-VhcCwB62vZfgRS6K .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VhcCwB62vZfgRS6K .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-VhcCwB62vZfgRS6K .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VhcCwB62vZfgRS6K .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VhcCwB62vZfgRS6K .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-VhcCwB62vZfgRS6K .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VhcCwB62vZfgRS6K .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VhcCwB62vZfgRS6K .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VhcCwB62vZfgRS6K .marker.cross{stroke:#333333;}#mermaid-svg-VhcCwB62vZfgRS6K svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VhcCwB62vZfgRS6K p{margin:0;}#mermaid-svg-VhcCwB62vZfgRS6K .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-VhcCwB62vZfgRS6K .cluster-label text{fill:#333;}#mermaid-svg-VhcCwB62vZfgRS6K .cluster-label span{color:#333;}#mermaid-svg-VhcCwB62vZfgRS6K .cluster-label span p{background-color:transparent;}#mermaid-svg-VhcCwB62vZfgRS6K .label text,#mermaid-svg-VhcCwB62vZfgRS6K span{fill:#333;color:#333;}#mermaid-svg-VhcCwB62vZfgRS6K .node rect,#mermaid-svg-VhcCwB62vZfgRS6K .node circle,#mermaid-svg-VhcCwB62vZfgRS6K .node ellipse,#mermaid-svg-VhcCwB62vZfgRS6K .node polygon,#mermaid-svg-VhcCwB62vZfgRS6K .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VhcCwB62vZfgRS6K .rough-node .label text,#mermaid-svg-VhcCwB62vZfgRS6K .node .label text,#mermaid-svg-VhcCwB62vZfgRS6K .image-shape .label,#mermaid-svg-VhcCwB62vZfgRS6K .icon-shape .label{text-anchor:middle;}#mermaid-svg-VhcCwB62vZfgRS6K .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-VhcCwB62vZfgRS6K .rough-node .label,#mermaid-svg-VhcCwB62vZfgRS6K .node .label,#mermaid-svg-VhcCwB62vZfgRS6K .image-shape .label,#mermaid-svg-VhcCwB62vZfgRS6K .icon-shape .label{text-align:center;}#mermaid-svg-VhcCwB62vZfgRS6K .node.clickable{cursor:pointer;}#mermaid-svg-VhcCwB62vZfgRS6K .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-VhcCwB62vZfgRS6K .arrowheadPath{fill:#333333;}#mermaid-svg-VhcCwB62vZfgRS6K .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-VhcCwB62vZfgRS6K .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-VhcCwB62vZfgRS6K .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VhcCwB62vZfgRS6K .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-VhcCwB62vZfgRS6K .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VhcCwB62vZfgRS6K .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-VhcCwB62vZfgRS6K .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-VhcCwB62vZfgRS6K .cluster text{fill:#333;}#mermaid-svg-VhcCwB62vZfgRS6K .cluster span{color:#333;}#mermaid-svg-VhcCwB62vZfgRS6K div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-VhcCwB62vZfgRS6K .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-VhcCwB62vZfgRS6K rect.text{fill:none;stroke-width:0;}#mermaid-svg-VhcCwB62vZfgRS6K .icon-shape,#mermaid-svg-VhcCwB62vZfgRS6K .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VhcCwB62vZfgRS6K .icon-shape p,#mermaid-svg-VhcCwB62vZfgRS6K .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-VhcCwB62vZfgRS6K .icon-shape .label rect,#mermaid-svg-VhcCwB62vZfgRS6K .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VhcCwB62vZfgRS6K .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-VhcCwB62vZfgRS6K .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-VhcCwB62vZfgRS6K :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

电商网站

首页

商品列表页

商品详情页

购物车页

结算页

用户中心

Banner轮播

分类导航

推荐商品

筛选条件

排序功能

商品网格

商品图片轮播

规格选择

加入购物车

商品列表

数量调整

价格计算

地址选择

支付方式

订单确认

3.2 商品展示的HTML结构

商品详情页是电商网站中最重要的页面之一，它的HTML结构通常是这样的：

<!– 商品详情页结构 –>
<div class="product-detail">
<!– 左侧：商品图片 –>
<div class="product-gallery">
<div class="main-image">
<img src="product-main.jpg" alt="商品主图">
</div>
<div class="thumbnails">
<img src="thumb1.jpg" alt="缩略图1">
<img src="thumb2.jpg" alt="缩略图2">
<img src="thumb3.jpg" alt="缩略图3">
</div>
</div>

<!– 右侧：商品信息 –>
<div class="product-info">
<h1 class="product-title">【新品上市】超高清智能手表 运动监测 心率检测</h1>
<div class="price-section">
<span class="current-price">¥599</span>
<span class="original-price">¥999</span>
<span class="discount">6折</span>
</div>
<div class="product-attrs">
<div class="attr-item">
<label>颜色</label>
<div class="attr-options">
<span class="option active">星空黑</span>
<span class="option">月光银</span>
<span class="option">玫瑰金</span>
</div>
</div>
<div class="attr-item">
<label>数量</label>
<div class="quantity">
<button class="minus">–</button>
<input type="number" value="1">
<button class="plus">+</button>
</div>
</div>
</div>
<div class="action-buttons">
<button class="btn-add-cart">加入购物车</button>
<button class="btn-buy-now">立即购买</button>
</div>
</div>

<!– 下方：商品详情 –>
<div class="product-tabs">
<ul class="tab-nav">
<li class="active">商品详情</li>
<li>规格参数</li>
<li>用户评价</li>
<li>售后保障</li>
</ul>
<div class="tab-content">
<!– 商品详情图文内容 –>
</div>
</div>
</div>

3.3 HTML在电商中的重要性

虽然现代电商平台背后有复杂的后端系统和数据库，但用户最终看到和操作的，依然是由HTML构成的页面。

HTML在电商中的关键作用：

数据说话：据统计，亚马逊的页面加载速度每提高100毫秒，销售额就能增加1%。这足以说明HTML页面优化对电商的重要性。

四、场景三：新闻媒体与内容平台

新闻网站、博客平台、内容社区——这些以内容为核心的网站，是HTML应用的又一重要领域。从早期的门户网站到如今的自媒体平台，HTML始终是内容呈现的最佳载体。

4.1 内容平台的HTML结构

文章页面是内容平台的核心。一个语义化良好的文章HTML结构应该是这样的：

<!– 文章详情页语义化结构 –>
<article class="article">
<!– 文章头部 –>
<header class="article-header">
<h1>HTML5新特性详解：Web开发的革命性变革</h1>
<div class="article-meta">
<span class="author">作者：张三</span>
<span class="date">2026年8月11日</span>
<span class="category">分类：前端开发</span>
<span class="views">阅读：1,234</span>
</div>
</header>

<!– 文章正文 –>
<div class="article-content">
<p>HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定…</p>

<h2>一、语义化标签</h2>
<p>语义化标签是HTML5最重要的特性之一…</p>

<figure>
<img src="html5-structure.jpg" alt="HTML5语义化结构示意图">
<figcaption>图1：HTML5语义化标签结构示意</figcaption>
</figure>

<blockquote>
<p>HTML5不仅仅是HTML标准的升级，更是Web应用平台的一次革命。</p>
</blockquote>

<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;…&lt;/head&gt;
&lt;body&gt;…&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<!– 文章底部 –>
<footer class="article-footer">
<div class="tags">
<span class="tag">HTML5</span>
<span class="tag">前端开发</span>
<span class="tag">Web技术</span>
</div>
<div class="share">
分享到：微信 微博 QQ
</div>
</footer>
</article>

<!– 评论区 –>
<section class="comments">
<h2>评论 (28)</h2>
<div class="comment-list">
<article class="comment">
<div class="comment-author">
<img src="avatar1.jpg" alt="用户头像">
<span class="name">李四</span>
</div>
<p>写得太好了，学到了很多！</p>
</article>
</div>
</section>

4.2 HTML语义化对内容平台的价值

对于内容平台来说，HTML语义化尤为重要：

#mermaid-svg-Cw4jzJb1fcLpVZXy{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Cw4jzJb1fcLpVZXy .error-icon{fill:#552222;}#mermaid-svg-Cw4jzJb1fcLpVZXy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Cw4jzJb1fcLpVZXy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .marker.cross{stroke:#333333;}#mermaid-svg-Cw4jzJb1fcLpVZXy svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Cw4jzJb1fcLpVZXy p{margin:0;}#mermaid-svg-Cw4jzJb1fcLpVZXy .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .cluster-label text{fill:#333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .cluster-label span{color:#333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .cluster-label span p{background-color:transparent;}#mermaid-svg-Cw4jzJb1fcLpVZXy .label text,#mermaid-svg-Cw4jzJb1fcLpVZXy span{fill:#333;color:#333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .node rect,#mermaid-svg-Cw4jzJb1fcLpVZXy .node circle,#mermaid-svg-Cw4jzJb1fcLpVZXy .node ellipse,#mermaid-svg-Cw4jzJb1fcLpVZXy .node polygon,#mermaid-svg-Cw4jzJb1fcLpVZXy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Cw4jzJb1fcLpVZXy .rough-node .label text,#mermaid-svg-Cw4jzJb1fcLpVZXy .node .label text,#mermaid-svg-Cw4jzJb1fcLpVZXy .image-shape .label,#mermaid-svg-Cw4jzJb1fcLpVZXy .icon-shape .label{text-anchor:middle;}#mermaid-svg-Cw4jzJb1fcLpVZXy .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Cw4jzJb1fcLpVZXy .rough-node .label,#mermaid-svg-Cw4jzJb1fcLpVZXy .node .label,#mermaid-svg-Cw4jzJb1fcLpVZXy .image-shape .label,#mermaid-svg-Cw4jzJb1fcLpVZXy .icon-shape .label{text-align:center;}#mermaid-svg-Cw4jzJb1fcLpVZXy .node.clickable{cursor:pointer;}#mermaid-svg-Cw4jzJb1fcLpVZXy .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .arrowheadPath{fill:#333333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Cw4jzJb1fcLpVZXy .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Cw4jzJb1fcLpVZXy .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Cw4jzJb1fcLpVZXy .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Cw4jzJb1fcLpVZXy .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Cw4jzJb1fcLpVZXy .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Cw4jzJb1fcLpVZXy .cluster text{fill:#333;}#mermaid-svg-Cw4jzJb1fcLpVZXy .cluster span{color:#333;}#mermaid-svg-Cw4jzJb1fcLpVZXy div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Cw4jzJb1fcLpVZXy .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Cw4jzJb1fcLpVZXy rect.text{fill:none;stroke-width:0;}#mermaid-svg-Cw4jzJb1fcLpVZXy .icon-shape,#mermaid-svg-Cw4jzJb1fcLpVZXy .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Cw4jzJb1fcLpVZXy .icon-shape p,#mermaid-svg-Cw4jzJb1fcLpVZXy .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Cw4jzJb1fcLpVZXy .icon-shape .label rect,#mermaid-svg-Cw4jzJb1fcLpVZXy .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Cw4jzJb1fcLpVZXy .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Cw4jzJb1fcLpVZXy .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Cw4jzJb1fcLpVZXy :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

语义化HTML对内容平台的价值

SEO优化

可访问性

阅读体验

内容结构化

搜索引擎更好理解内容

提高排名获得更多流量

标题 摘要 图片正确识别

屏幕阅读器正确朗读

视障用户也能获取信息

符合WCAG无障碍标准

浏览器阅读器模式

打印样式自动适配

跨平台阅读一致性

便于内容抽取和聚合

RSS订阅 知识图谱

AI更容易理解和处理

4.3 内容平台的类型

小知识：你现在正在阅读的这篇文章，最终也是以HTML的形式呈现在你的浏览器中的。无论是微信公众号、CSDN还是掘金，文章内容本质上都是用HTML标签组织起来的。

五、场景四：在线教育与知识付费

在线教育是近年来发展最快的互联网领域之一。从MOOC平台到直播课堂，从知识付费到在线考试——HTML技术为教育的数字化提供了强有力的支撑。

5.1 在线教育的页面形态

一个完整的在线课程页面，通常包含以下部分：

#mermaid-svg-KXpAT0AC3N4UgT4a{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-KXpAT0AC3N4UgT4a .error-icon{fill:#552222;}#mermaid-svg-KXpAT0AC3N4UgT4a .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KXpAT0AC3N4UgT4a .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KXpAT0AC3N4UgT4a .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KXpAT0AC3N4UgT4a .marker.cross{stroke:#333333;}#mermaid-svg-KXpAT0AC3N4UgT4a svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KXpAT0AC3N4UgT4a p{margin:0;}#mermaid-svg-KXpAT0AC3N4UgT4a .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-KXpAT0AC3N4UgT4a .cluster-label text{fill:#333;}#mermaid-svg-KXpAT0AC3N4UgT4a .cluster-label span{color:#333;}#mermaid-svg-KXpAT0AC3N4UgT4a .cluster-label span p{background-color:transparent;}#mermaid-svg-KXpAT0AC3N4UgT4a .label text,#mermaid-svg-KXpAT0AC3N4UgT4a span{fill:#333;color:#333;}#mermaid-svg-KXpAT0AC3N4UgT4a .node rect,#mermaid-svg-KXpAT0AC3N4UgT4a .node circle,#mermaid-svg-KXpAT0AC3N4UgT4a .node ellipse,#mermaid-svg-KXpAT0AC3N4UgT4a .node polygon,#mermaid-svg-KXpAT0AC3N4UgT4a .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-KXpAT0AC3N4UgT4a .rough-node .label text,#mermaid-svg-KXpAT0AC3N4UgT4a .node .label text,#mermaid-svg-KXpAT0AC3N4UgT4a .image-shape .label,#mermaid-svg-KXpAT0AC3N4UgT4a .icon-shape .label{text-anchor:middle;}#mermaid-svg-KXpAT0AC3N4UgT4a .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-KXpAT0AC3N4UgT4a .rough-node .label,#mermaid-svg-KXpAT0AC3N4UgT4a .node .label,#mermaid-svg-KXpAT0AC3N4UgT4a .image-shape .label,#mermaid-svg-KXpAT0AC3N4UgT4a .icon-shape .label{text-align:center;}#mermaid-svg-KXpAT0AC3N4UgT4a .node.clickable{cursor:pointer;}#mermaid-svg-KXpAT0AC3N4UgT4a .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-KXpAT0AC3N4UgT4a .arrowheadPath{fill:#333333;}#mermaid-svg-KXpAT0AC3N4UgT4a .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-KXpAT0AC3N4UgT4a .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-KXpAT0AC3N4UgT4a .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-KXpAT0AC3N4UgT4a .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-KXpAT0AC3N4UgT4a .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-KXpAT0AC3N4UgT4a .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-KXpAT0AC3N4UgT4a .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-KXpAT0AC3N4UgT4a .cluster text{fill:#333;}#mermaid-svg-KXpAT0AC3N4UgT4a .cluster span{color:#333;}#mermaid-svg-KXpAT0AC3N4UgT4a div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-KXpAT0AC3N4UgT4a .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-KXpAT0AC3N4UgT4a rect.text{fill:none;stroke-width:0;}#mermaid-svg-KXpAT0AC3N4UgT4a .icon-shape,#mermaid-svg-KXpAT0AC3N4UgT4a .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-KXpAT0AC3N4UgT4a .icon-shape p,#mermaid-svg-KXpAT0AC3N4UgT4a .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-KXpAT0AC3N4UgT4a .icon-shape .label rect,#mermaid-svg-KXpAT0AC3N4UgT4a .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-KXpAT0AC3N4UgT4a .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-KXpAT0AC3N4UgT4a .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-KXpAT0AC3N4UgT4a :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

在线课程页面

课程封面区

课程目录

视频播放区

学习资料区

讨论问答区

进度记录

课程标题

讲师介绍

价格/报名按钮

章节目录

课时列表

学习进度标记

视频播放器

播放控制

倍速/画质设置

课件下载

随堂测验

作业提交

评论区

提问功能

老师答疑

5.2 HTML5对在线教育的赋能

HTML5的出现，对在线教育行业产生了革命性的影响：

原生视频支持：在HTML5之前，网页播放视频需要安装Flash插件。而HTML5的<video>标签让视频播放成为浏览器的原生能力，无需任何插件。

<!– HTML5视频播放器 –>
<video
id="courseVideo"
width="800"
height="450"
controls
poster="course-cover.jpg"
preload="metadata">
<source src="lesson1.mp4" type="video/mp4">
<source src="lesson1.webm" type="video/webm">
您的浏览器不支持HTML5视频播放。
</video>

在线考试与测验：HTML的表单元素和JavaScript结合，可以实现在线测验、考试系统。

<!– 在线测验示例 –>
<div class="quiz">
<div class="question">
<h3>问题1：HTML中用于定义导航的语义化标签是？</h3>
<div class="options">
<label><input type="radio" name="q1" value="A"> A. header</label>
<label><input type="radio" name="q1" value="B"> B. nav</label>
<label><input type="radio" name="q1" value="C"> C. section</label>
<label><input type="radio" name="q1" value="D"> D. aside</label>
</div>
</div>

<div class="question">
<h3>问题2：以下哪些是HTML5新增的语义化标签？（多选）</h3>
<div class="options">
<label><input type="checkbox" name="q2" value="A"> A. article</label>
<label><input type="checkbox" name="q2" value="B"> B. div</label>
<label><input type="checkbox" name="q2" value="C"> C. footer</label>
<label><input type="checkbox" name="q2" value="D"> D. main</label>
</div>
</div>

<button class="btn-submit">提交答案</button>
</div>

5.3 在线教育的技术优势

相比传统教育，基于HTML的在线教育有以下优势：

典型平台：

• MOOC平台：中国大学MOOC、Coursera、edX
• 职业教育：慕课网、极客时间、拉勾教育
• K12教育：猿辅导、作业帮、学而思网校
• 知识付费：得到、喜马拉雅、知乎Live

六、场景五：Web应用与SaaS系统

Web应用（Web App）是HTML技术应用的高级形态。与传统的"展示型网站"不同，Web应用更像是运行在浏览器中的软件——用户可以在里面完成复杂的操作和任务。

6.1 什么是Web应用

Web应用是指通过浏览器访问的、具有完整功能的应用软件。它不像传统软件那样需要下载安装，打开浏览器就能使用。

#mermaid-svg-rJOUkAvU6egPP6Tz{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-rJOUkAvU6egPP6Tz .error-icon{fill:#552222;}#mermaid-svg-rJOUkAvU6egPP6Tz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rJOUkAvU6egPP6Tz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rJOUkAvU6egPP6Tz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rJOUkAvU6egPP6Tz .marker.cross{stroke:#333333;}#mermaid-svg-rJOUkAvU6egPP6Tz svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rJOUkAvU6egPP6Tz p{margin:0;}#mermaid-svg-rJOUkAvU6egPP6Tz .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-rJOUkAvU6egPP6Tz .cluster-label text{fill:#333;}#mermaid-svg-rJOUkAvU6egPP6Tz .cluster-label span{color:#333;}#mermaid-svg-rJOUkAvU6egPP6Tz .cluster-label span p{background-color:transparent;}#mermaid-svg-rJOUkAvU6egPP6Tz .label text,#mermaid-svg-rJOUkAvU6egPP6Tz span{fill:#333;color:#333;}#mermaid-svg-rJOUkAvU6egPP6Tz .node rect,#mermaid-svg-rJOUkAvU6egPP6Tz .node circle,#mermaid-svg-rJOUkAvU6egPP6Tz .node ellipse,#mermaid-svg-rJOUkAvU6egPP6Tz .node polygon,#mermaid-svg-rJOUkAvU6egPP6Tz .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-rJOUkAvU6egPP6Tz .rough-node .label text,#mermaid-svg-rJOUkAvU6egPP6Tz .node .label text,#mermaid-svg-rJOUkAvU6egPP6Tz .image-shape .label,#mermaid-svg-rJOUkAvU6egPP6Tz .icon-shape .label{text-anchor:middle;}#mermaid-svg-rJOUkAvU6egPP6Tz .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-rJOUkAvU6egPP6Tz .rough-node .label,#mermaid-svg-rJOUkAvU6egPP6Tz .node .label,#mermaid-svg-rJOUkAvU6egPP6Tz .image-shape .label,#mermaid-svg-rJOUkAvU6egPP6Tz .icon-shape .label{text-align:center;}#mermaid-svg-rJOUkAvU6egPP6Tz .node.clickable{cursor:pointer;}#mermaid-svg-rJOUkAvU6egPP6Tz .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-rJOUkAvU6egPP6Tz .arrowheadPath{fill:#333333;}#mermaid-svg-rJOUkAvU6egPP6Tz .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-rJOUkAvU6egPP6Tz .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-rJOUkAvU6egPP6Tz .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-rJOUkAvU6egPP6Tz .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-rJOUkAvU6egPP6Tz .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-rJOUkAvU6egPP6Tz .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-rJOUkAvU6egPP6Tz .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-rJOUkAvU6egPP6Tz .cluster text{fill:#333;}#mermaid-svg-rJOUkAvU6egPP6Tz .cluster span{color:#333;}#mermaid-svg-rJOUkAvU6egPP6Tz div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-rJOUkAvU6egPP6Tz .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-rJOUkAvU6egPP6Tz rect.text{fill:none;stroke-width:0;}#mermaid-svg-rJOUkAvU6egPP6Tz .icon-shape,#mermaid-svg-rJOUkAvU6egPP6Tz .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-rJOUkAvU6egPP6Tz .icon-shape p,#mermaid-svg-rJOUkAvU6egPP6Tz .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-rJOUkAvU6egPP6Tz .icon-shape .label rect,#mermaid-svg-rJOUkAvU6egPP6Tz .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-rJOUkAvU6egPP6Tz .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-rJOUkAvU6egPP6Tz .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-rJOUkAvU6egPP6Tz :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

需要下载安装

打开浏览器即用

趋势

传统桌面软件

Photoshop

Office

QQ

Web应用

Figma

飞书文档

网页版微信

常见的Web应用类型：

6.2 Web应用的界面结构

一个典型的后台管理系统（SaaS系统的常见形态）的HTML结构：

<!– 后台管理系统布局 –>
<div class="admin-layout">
<!– 左侧侧边栏 –>
<aside class="sidebar">
<div class="logo">管理系统</div>
<nav class="side-menu">
<ul>
<li class="active">
<a href="#dashboard">
<span class="icon">📊</span>
<span>数据概览</span>
</a>
</li>
<li>
<a href="#users">
<span class="icon">👥</span>
<span>用户管理</span>
</a>
</li>
<li>
<a href="#orders">
<span class="icon">📦</span>
<span>订单管理</span>
</a>
</li>
<li>
<a href="#settings">
<span class="icon">⚙️</span>
<span>系统设置</span>
</a>
</li>
</ul>
</nav>
</aside>

<!– 右侧主区域 –>
<div class="main-area">
<!– 顶部导航 –>
<header class="top-header">
<div class="breadcrumb">首页 / 数据概览</div>
<div class="header-right">
<span class="notification">🔔</span>
<div class="user-info">
<img src="avatar.jpg" alt="头像">
<span>管理员</span>
</div>
</div>
</header>

<!– 主要内容 –>
<main class="main-content">
<!– 数据卡片 –>
<div class="stats-cards">
<div class="card">
<h3>总用户数</h3>
<p class="number">12,345</p>
<span class="trend up">↑ 12.5%</span>
</div>
<!– 更多统计卡片… –>
</div>

<!– 数据表格 –>
<div class="data-table">
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>注册时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>2026-08-01</td>
<td><span class="status active">正常</span></td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>

6.3 Web应用为什么会崛起

近年来，Web应用发展迅猛，越来越多的软件从桌面端迁移到了Web端。背后的原因是什么？

#mermaid-svg-dbEd3OCKaTRLzReR{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-dbEd3OCKaTRLzReR .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-dbEd3OCKaTRLzReR .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-dbEd3OCKaTRLzReR .error-icon{fill:#552222;}#mermaid-svg-dbEd3OCKaTRLzReR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dbEd3OCKaTRLzReR .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-dbEd3OCKaTRLzReR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dbEd3OCKaTRLzReR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dbEd3OCKaTRLzReR .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-dbEd3OCKaTRLzReR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dbEd3OCKaTRLzReR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dbEd3OCKaTRLzReR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dbEd3OCKaTRLzReR .marker.cross{stroke:#333333;}#mermaid-svg-dbEd3OCKaTRLzReR svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dbEd3OCKaTRLzReR p{margin:0;}#mermaid-svg-dbEd3OCKaTRLzReR .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-dbEd3OCKaTRLzReR .cluster-label text{fill:#333;}#mermaid-svg-dbEd3OCKaTRLzReR .cluster-label span{color:#333;}#mermaid-svg-dbEd3OCKaTRLzReR .cluster-label span p{background-color:transparent;}#mermaid-svg-dbEd3OCKaTRLzReR .label text,#mermaid-svg-dbEd3OCKaTRLzReR span{fill:#333;color:#333;}#mermaid-svg-dbEd3OCKaTRLzReR .node rect,#mermaid-svg-dbEd3OCKaTRLzReR .node circle,#mermaid-svg-dbEd3OCKaTRLzReR .node ellipse,#mermaid-svg-dbEd3OCKaTRLzReR .node polygon,#mermaid-svg-dbEd3OCKaTRLzReR .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-dbEd3OCKaTRLzReR .rough-node .label text,#mermaid-svg-dbEd3OCKaTRLzReR .node .label text,#mermaid-svg-dbEd3OCKaTRLzReR .image-shape .label,#mermaid-svg-dbEd3OCKaTRLzReR .icon-shape .label{text-anchor:middle;}#mermaid-svg-dbEd3OCKaTRLzReR .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-dbEd3OCKaTRLzReR .rough-node .label,#mermaid-svg-dbEd3OCKaTRLzReR .node .label,#mermaid-svg-dbEd3OCKaTRLzReR .image-shape .label,#mermaid-svg-dbEd3OCKaTRLzReR .icon-shape .label{text-align:center;}#mermaid-svg-dbEd3OCKaTRLzReR .node.clickable{cursor:pointer;}#mermaid-svg-dbEd3OCKaTRLzReR .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-dbEd3OCKaTRLzReR .arrowheadPath{fill:#333333;}#mermaid-svg-dbEd3OCKaTRLzReR .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-dbEd3OCKaTRLzReR .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-dbEd3OCKaTRLzReR .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-dbEd3OCKaTRLzReR .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-dbEd3OCKaTRLzReR .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-dbEd3OCKaTRLzReR .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-dbEd3OCKaTRLzReR .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-dbEd3OCKaTRLzReR .cluster text{fill:#333;}#mermaid-svg-dbEd3OCKaTRLzReR .cluster span{color:#333;}#mermaid-svg-dbEd3OCKaTRLzReR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-dbEd3OCKaTRLzReR .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-dbEd3OCKaTRLzReR rect.text{fill:none;stroke-width:0;}#mermaid-svg-dbEd3OCKaTRLzReR .icon-shape,#mermaid-svg-dbEd3OCKaTRLzReR .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-dbEd3OCKaTRLzReR .icon-shape p,#mermaid-svg-dbEd3OCKaTRLzReR .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-dbEd3OCKaTRLzReR .icon-shape .label rect,#mermaid-svg-dbEd3OCKaTRLzReR .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-dbEd3OCKaTRLzReR .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-dbEd3OCKaTRLzReR .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-dbEd3OCKaTRLzReR :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

Web应用崛起的原因

技术成熟

使用方便

维护成本低

数据安全

跨平台

HTML5/ES6+ 能力增强

浏览器性能大幅提升

WebAssembly带来高性能

无需下载安装

打开浏览器即用

永远是最新版本

统一在服务器端更新

无需维护客户端版本

降低IT运维成本

数据存储在云端

权限控制更精细

备份与安全更可靠

Windows/Mac/Linux都能用

手机平板也能访问

一次开发多端运行

未来趋势：随着Web技术的不断发展和浏览器性能的持续提升，越来越多过去只能在桌面端实现的软件，现在都有了Web版本。甚至像Photoshop这样的重量级软件，也推出了Web版。可以预见，Web应用的未来不可限量。

七、场景六：在线游戏与互动娱乐

你可能想不到，HTML还能用来做游戏！从简单的休闲小游戏到复杂的3D大作，HTML技术正在游戏领域崭露头角。

7.1 HTML5游戏的技术基础

HTML5游戏主要基于以下技术：

#mermaid-svg-JCqIEZAaVQrCNux8{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-JCqIEZAaVQrCNux8 .error-icon{fill:#552222;}#mermaid-svg-JCqIEZAaVQrCNux8 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JCqIEZAaVQrCNux8 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JCqIEZAaVQrCNux8 .marker.cross{stroke:#333333;}#mermaid-svg-JCqIEZAaVQrCNux8 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JCqIEZAaVQrCNux8 p{margin:0;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge{stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .section–1 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section–1 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section–1 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section–1 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section–1 text{fill:#ffffff;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth–1{stroke-width:17;}#mermaid-svg-JCqIEZAaVQrCNux8 .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-0 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-0 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-0 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-0 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-0 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-0{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-0{stroke-width:14;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-1 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-1 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-1 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-1 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-1 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-1{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-1{stroke-width:11;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 text{fill:#ffffff;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-2{stroke-width:8;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-3 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-3 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-3 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-3 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-3 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-3{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-3{stroke-width:5;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-4 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-4 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-4 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-4 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-4 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-4{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-4{stroke-width:2;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-5 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-5 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-5 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-5 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-5 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-5{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-5{stroke-width:-1;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-6 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-6 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-6 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-6 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-6 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-6{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-6{stroke-width:-4;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-7 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-7 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-7 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-7 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-7 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-7{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-7{stroke-width:-7;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-8 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-8 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-8 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-8 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-8 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-8{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-8{stroke-width:-10;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-9 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-9 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-9 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-9 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-9 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-9{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-9{stroke-width:-13;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-10 rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-10 path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-10 circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-10 polygon,#mermaid-svg-JCqIEZAaVQrCNux8 .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-10 text{fill:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .node-icon-10{font-size:40px;color:black;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .edge-depth-10{stroke-width:-16;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled circle,#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:lightgray;}#mermaid-svg-JCqIEZAaVQrCNux8 .disabled text{fill:#efefef;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-root rect,#mermaid-svg-JCqIEZAaVQrCNux8 .section-root path,#mermaid-svg-JCqIEZAaVQrCNux8 .section-root circle,#mermaid-svg-JCqIEZAaVQrCNux8 .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-JCqIEZAaVQrCNux8 .section-root text{fill:#ffffff;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-root span{color:#ffffff;}#mermaid-svg-JCqIEZAaVQrCNux8 .section-2 span{color:#ffffff;}#mermaid-svg-JCqIEZAaVQrCNux8 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-JCqIEZAaVQrCNux8 .edge{fill:none;}#mermaid-svg-JCqIEZAaVQrCNux8 .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-JCqIEZAaVQrCNux8 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

HTML5游戏技术栈

图形渲染

Canvas 2D

WebGL 3D

SVG 矢量图

游戏引擎

Phaser

Cocos Creator

Three.js

Babylon.js

音频处理

Web Audio API

audio 标签

输入控制

键盘事件

鼠标事件

触摸事件

游戏手柄

网络通信

WebSocket

WebRTC

7.2 一个最简单的HTML5游戏

让我们来看一个用Canvas实现的简单游戏示例——接豆子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>接豆子小游戏</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
background: #2c3e50;
color: white;
font-family: Arial, sans-serif;
}
canvas {
border: 2px solid #3498db;
background: #34495e;
border-radius: 8px;
}
.info {
margin-bottom: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<h2>🎮 接豆子小游戏</h2>
<div class="info">
<span>得分: <span id="score">0</span></span>
<span style="margin-left: 20px;">按 ← → 键移动</span>
</div>
<canvas id="gameCanvas" width="400" height="500"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');

let score = 0;

// 接盘（玩家）
const paddle = {
width: 80,
height: 15,
x: (canvas.width – 80) / 2,
speed: 8,
dx: 0
};

// 豆子
const bean = {
x: Math.random() * (canvas.width – 20),
y: 0,
radius: 10,
speed: 3
};

// 键盘控制
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') paddle.dx = –paddle.speed;
if (e.key === 'ArrowRight') paddle.dx = paddle.speed;
});

document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
paddle.dx = 0;
}
});

// 游戏主循环
function gameLoop() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 更新接盘位置
paddle.x += paddle.dx;
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width) {
paddle.x = canvas.width – paddle.width;
}

// 更新豆子位置
bean.y += bean.speed;

// 检测碰撞（接到豆子）
if (bean.y + bean.radius > canvas.height – paddle.height &&
bean.y + bean.radius < canvas.height &&
bean.x > paddle.x &&
bean.x < paddle.x + paddle.width) {
score++;
scoreElement.textContent = score;
bean.x = Math.random() * (canvas.width – 20);
bean.y = 0;
bean.speed += 0.2; // 难度递增
}

// 豆子落地，重置
if (bean.y > canvas.height) {
bean.x = Math.random() * (canvas.width – 20);
bean.y = 0;
}

// 绘制接盘
ctx.fillStyle = '#3498db';
ctx.fillRect(paddle.x, canvas.height – paddle.height,
paddle.width, paddle.height);

// 绘制豆子
ctx.beginPath();
ctx.arc(bean.x, bean.y, bean.radius, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();
ctx.closePath();

requestAnimationFrame(gameLoop);
}

gameLoop();
</script>
</body>
</html>

这只是一个最简单的例子。通过Canvas和WebGL，开发者可以制作出媲美原生游戏的3D大作。

7.3 HTML5游戏的优势

典型游戏类型：

• 休闲小游戏：跳一跳、合成大西瓜、羊了个羊
• 网页游戏：策略类、RPG类、模拟经营类
• 3D游戏：基于WebGL的3D网页游戏
• H5营销游戏：品牌活动推广游戏、抽奖游戏

八、场景七：移动端H5与小程序

移动互联网时代，HTML技术在移动端也大放异彩。无论是移动端网页（H5）还是微信小程序，本质上都与HTML技术有着千丝万缕的联系。

8.1 移动端H5页面

H5是"HTML5"的简称，在移动端语境下，H5通常指那些专门为手机浏览器优化的网页。

#mermaid-svg-zRueICAqszYTyEsW{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-zRueICAqszYTyEsW .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-zRueICAqszYTyEsW .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-zRueICAqszYTyEsW .error-icon{fill:#552222;}#mermaid-svg-zRueICAqszYTyEsW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-zRueICAqszYTyEsW .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-zRueICAqszYTyEsW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-zRueICAqszYTyEsW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-zRueICAqszYTyEsW .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-zRueICAqszYTyEsW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-zRueICAqszYTyEsW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-zRueICAqszYTyEsW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-zRueICAqszYTyEsW .marker.cross{stroke:#333333;}#mermaid-svg-zRueICAqszYTyEsW svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-zRueICAqszYTyEsW p{margin:0;}#mermaid-svg-zRueICAqszYTyEsW .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-zRueICAqszYTyEsW .cluster-label text{fill:#333;}#mermaid-svg-zRueICAqszYTyEsW .cluster-label span{color:#333;}#mermaid-svg-zRueICAqszYTyEsW .cluster-label span p{background-color:transparent;}#mermaid-svg-zRueICAqszYTyEsW .label text,#mermaid-svg-zRueICAqszYTyEsW span{fill:#333;color:#333;}#mermaid-svg-zRueICAqszYTyEsW .node rect,#mermaid-svg-zRueICAqszYTyEsW .node circle,#mermaid-svg-zRueICAqszYTyEsW .node ellipse,#mermaid-svg-zRueICAqszYTyEsW .node polygon,#mermaid-svg-zRueICAqszYTyEsW .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-zRueICAqszYTyEsW .rough-node .label text,#mermaid-svg-zRueICAqszYTyEsW .node .label text,#mermaid-svg-zRueICAqszYTyEsW .image-shape .label,#mermaid-svg-zRueICAqszYTyEsW .icon-shape .label{text-anchor:middle;}#mermaid-svg-zRueICAqszYTyEsW .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-zRueICAqszYTyEsW .rough-node .label,#mermaid-svg-zRueICAqszYTyEsW .node .label,#mermaid-svg-zRueICAqszYTyEsW .image-shape .label,#mermaid-svg-zRueICAqszYTyEsW .icon-shape .label{text-align:center;}#mermaid-svg-zRueICAqszYTyEsW .node.clickable{cursor:pointer;}#mermaid-svg-zRueICAqszYTyEsW .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-zRueICAqszYTyEsW .arrowheadPath{fill:#333333;}#mermaid-svg-zRueICAqszYTyEsW .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-zRueICAqszYTyEsW .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-zRueICAqszYTyEsW .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-zRueICAqszYTyEsW .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-zRueICAqszYTyEsW .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-zRueICAqszYTyEsW .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-zRueICAqszYTyEsW .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-zRueICAqszYTyEsW .cluster text{fill:#333;}#mermaid-svg-zRueICAqszYTyEsW .cluster span{color:#333;}#mermaid-svg-zRueICAqszYTyEsW div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-zRueICAqszYTyEsW .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-zRueICAqszYTyEsW rect.text{fill:none;stroke-width:0;}#mermaid-svg-zRueICAqszYTyEsW .icon-shape,#mermaid-svg-zRueICAqszYTyEsW .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-zRueICAqszYTyEsW .icon-shape p,#mermaid-svg-zRueICAqszYTyEsW .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-zRueICAqszYTyEsW .icon-shape .label rect,#mermaid-svg-zRueICAqszYTyEsW .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-zRueICAqszYTyEsW .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-zRueICAqszYTyEsW .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-zRueICAqszYTyEsW :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

移动端H5应用

营销活动页

移动官网

H5小游戏

移动端Web App

电子邀请函

双11活动页

节日贺卡

抽奖活动

手机版官网

落地页

休闲小游戏

互动测试

移动版邮箱

移动办公

婚礼邀请函

会议通知

8.2 H5页面的特点

H5页面之所以流行，是因为它有独特的优势：

经典H5案例：

• 每到年底刷屏的各种"年度报告"H5（网易云音乐、支付宝年度账单等）
• 各种测试类H5（测一测你的性格、你是哪个角色等）
• 品牌营销H5（新品发布、节日活动宣传等）
• 投票助力H5（需要朋友圈分享拉票的活动）

8.3 小程序与HTML的关系

微信小程序、支付宝小程序等"小程序"，虽然不是标准的HTML，但它们的技术体系与HTML高度相似：

#mermaid-svg-zTvTCXDX1heLfJIe{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-zTvTCXDX1heLfJIe .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-zTvTCXDX1heLfJIe .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-zTvTCXDX1heLfJIe .error-icon{fill:#552222;}#mermaid-svg-zTvTCXDX1heLfJIe .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-zTvTCXDX1heLfJIe .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-zTvTCXDX1heLfJIe .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-zTvTCXDX1heLfJIe .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-zTvTCXDX1heLfJIe .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-zTvTCXDX1heLfJIe .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-zTvTCXDX1heLfJIe .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-zTvTCXDX1heLfJIe .marker{fill:#333333;stroke:#333333;}#mermaid-svg-zTvTCXDX1heLfJIe .marker.cross{stroke:#333333;}#mermaid-svg-zTvTCXDX1heLfJIe svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-zTvTCXDX1heLfJIe p{margin:0;}#mermaid-svg-zTvTCXDX1heLfJIe .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-zTvTCXDX1heLfJIe .cluster-label text{fill:#333;}#mermaid-svg-zTvTCXDX1heLfJIe .cluster-label span{color:#333;}#mermaid-svg-zTvTCXDX1heLfJIe .cluster-label span p{background-color:transparent;}#mermaid-svg-zTvTCXDX1heLfJIe .label text,#mermaid-svg-zTvTCXDX1heLfJIe span{fill:#333;color:#333;}#mermaid-svg-zTvTCXDX1heLfJIe .node rect,#mermaid-svg-zTvTCXDX1heLfJIe .node circle,#mermaid-svg-zTvTCXDX1heLfJIe .node ellipse,#mermaid-svg-zTvTCXDX1heLfJIe .node polygon,#mermaid-svg-zTvTCXDX1heLfJIe .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-zTvTCXDX1heLfJIe .rough-node .label text,#mermaid-svg-zTvTCXDX1heLfJIe .node .label text,#mermaid-svg-zTvTCXDX1heLfJIe .image-shape .label,#mermaid-svg-zTvTCXDX1heLfJIe .icon-shape .label{text-anchor:middle;}#mermaid-svg-zTvTCXDX1heLfJIe .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-zTvTCXDX1heLfJIe .rough-node .label,#mermaid-svg-zTvTCXDX1heLfJIe .node .label,#mermaid-svg-zTvTCXDX1heLfJIe .image-shape .label,#mermaid-svg-zTvTCXDX1heLfJIe .icon-shape .label{text-align:center;}#mermaid-svg-zTvTCXDX1heLfJIe .node.clickable{cursor:pointer;}#mermaid-svg-zTvTCXDX1heLfJIe .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-zTvTCXDX1heLfJIe .arrowheadPath{fill:#333333;}#mermaid-svg-zTvTCXDX1heLfJIe .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-zTvTCXDX1heLfJIe .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-zTvTCXDX1heLfJIe .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-zTvTCXDX1heLfJIe .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-zTvTCXDX1heLfJIe .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-zTvTCXDX1heLfJIe .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-zTvTCXDX1heLfJIe .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-zTvTCXDX1heLfJIe .cluster text{fill:#333;}#mermaid-svg-zTvTCXDX1heLfJIe .cluster span{color:#333;}#mermaid-svg-zTvTCXDX1heLfJIe div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-zTvTCXDX1heLfJIe .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-zTvTCXDX1heLfJIe rect.text{fill:none;stroke-width:0;}#mermaid-svg-zTvTCXDX1heLfJIe .icon-shape,#mermaid-svg-zTvTCXDX1heLfJIe .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-zTvTCXDX1heLfJIe .icon-shape p,#mermaid-svg-zTvTCXDX1heLfJIe .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-zTvTCXDX1heLfJIe .icon-shape .label rect,#mermaid-svg-zTvTCXDX1heLfJIe .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-zTvTCXDX1heLfJIe .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-zTvTCXDX1heLfJIe .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-zTvTCXDX1heLfJIe :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

类似

类似

类似

小程序技术

HTML

CSS

JavaScript

WXML 微信标签语言

WXSS 样式表

JS 逻辑层

小程序的开发思路、标签用法、样式写法都和HTML非常接近。掌握了HTML/CSS/JS之后，学习小程序几乎没有门槛——这也是HTML的魅力所在，它的知识体系可以迁移到很多相关技术上。

8.4 响应式设计：一套代码适配所有设备

HTML结合CSS的响应式设计，可以实现"一套代码，多端适配"——同一个页面在电脑、平板、手机上都能完美显示。

#mermaid-svg-VIhaPE0IyBwH3iP0{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-VIhaPE0IyBwH3iP0 .error-icon{fill:#552222;}#mermaid-svg-VIhaPE0IyBwH3iP0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VIhaPE0IyBwH3iP0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .marker.cross{stroke:#333333;}#mermaid-svg-VIhaPE0IyBwH3iP0 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VIhaPE0IyBwH3iP0 p{margin:0;}#mermaid-svg-VIhaPE0IyBwH3iP0 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .cluster-label text{fill:#333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .cluster-label span{color:#333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .cluster-label span p{background-color:transparent;}#mermaid-svg-VIhaPE0IyBwH3iP0 .label text,#mermaid-svg-VIhaPE0IyBwH3iP0 span{fill:#333;color:#333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .node rect,#mermaid-svg-VIhaPE0IyBwH3iP0 .node circle,#mermaid-svg-VIhaPE0IyBwH3iP0 .node ellipse,#mermaid-svg-VIhaPE0IyBwH3iP0 .node polygon,#mermaid-svg-VIhaPE0IyBwH3iP0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VIhaPE0IyBwH3iP0 .rough-node .label text,#mermaid-svg-VIhaPE0IyBwH3iP0 .node .label text,#mermaid-svg-VIhaPE0IyBwH3iP0 .image-shape .label,#mermaid-svg-VIhaPE0IyBwH3iP0 .icon-shape .label{text-anchor:middle;}#mermaid-svg-VIhaPE0IyBwH3iP0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-VIhaPE0IyBwH3iP0 .rough-node .label,#mermaid-svg-VIhaPE0IyBwH3iP0 .node .label,#mermaid-svg-VIhaPE0IyBwH3iP0 .image-shape .label,#mermaid-svg-VIhaPE0IyBwH3iP0 .icon-shape .label{text-align:center;}#mermaid-svg-VIhaPE0IyBwH3iP0 .node.clickable{cursor:pointer;}#mermaid-svg-VIhaPE0IyBwH3iP0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .arrowheadPath{fill:#333333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-VIhaPE0IyBwH3iP0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VIhaPE0IyBwH3iP0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-VIhaPE0IyBwH3iP0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VIhaPE0IyBwH3iP0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-VIhaPE0IyBwH3iP0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-VIhaPE0IyBwH3iP0 .cluster text{fill:#333;}#mermaid-svg-VIhaPE0IyBwH3iP0 .cluster span{color:#333;}#mermaid-svg-VIhaPE0IyBwH3iP0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-VIhaPE0IyBwH3iP0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-VIhaPE0IyBwH3iP0 rect.text{fill:none;stroke-width:0;}#mermaid-svg-VIhaPE0IyBwH3iP0 .icon-shape,#mermaid-svg-VIhaPE0IyBwH3iP0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VIhaPE0IyBwH3iP0 .icon-shape p,#mermaid-svg-VIhaPE0IyBwH3iP0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-VIhaPE0IyBwH3iP0 .icon-shape .label rect,#mermaid-svg-VIhaPE0IyBwH3iP0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VIhaPE0IyBwH3iP0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-VIhaPE0IyBwH3iP0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-VIhaPE0IyBwH3iP0 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

大屏显示

中屏显示

小屏显示

响应式网页

桌面端三栏布局 内容丰富

平板端两栏布局 适当简化

手机端单列布局 重点突出

响应式设计的核心是CSS媒体查询（Media Query），我们将在后面的章节详细讲解。

九、场景八：数据可视化与大屏展示

在数据驱动决策的今天，数据可视化越来越重要。HTML配合SVG、Canvas和ECharts、D3.js等库，可以制作出精美的数据图表和大屏展示。

9.1 常见的数据可视化形式

#mermaid-svg-ktQEXjNpcBTgu7Ch{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-ktQEXjNpcBTgu7Ch .error-icon{fill:#552222;}#mermaid-svg-ktQEXjNpcBTgu7Ch .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ktQEXjNpcBTgu7Ch .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ktQEXjNpcBTgu7Ch .marker.cross{stroke:#333333;}#mermaid-svg-ktQEXjNpcBTgu7Ch svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ktQEXjNpcBTgu7Ch p{margin:0;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge{stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section–1 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section–1 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section–1 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section–1 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section–1 text{fill:#ffffff;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth–1{stroke-width:17;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-0 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-0 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-0 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-0 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-0 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-0{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-0{stroke-width:14;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-1 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-1 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-1 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-1 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-1 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-1{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-1{stroke-width:11;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 text{fill:#ffffff;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-2{stroke-width:8;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-3 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-3 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-3 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-3 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-3 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-3{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-3{stroke-width:5;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-4 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-4 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-4 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-4 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-4 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-4{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-4{stroke-width:2;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-5 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-5 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-5 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-5 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-5 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-5{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-5{stroke-width:-1;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-6 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-6 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-6 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-6 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-6 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-6{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-6{stroke-width:-4;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-7 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-7 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-7 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-7 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-7 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-7{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-7{stroke-width:-7;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-8 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-8 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-8 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-8 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-8 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-8{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-8{stroke-width:-10;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-9 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-9 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-9 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-9 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-9 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-9{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-9{stroke-width:-13;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-10 rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-10 path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-10 circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-10 polygon,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-10 text{fill:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .node-icon-10{font-size:40px;color:black;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge-depth-10{stroke-width:-16;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:lightgray;}#mermaid-svg-ktQEXjNpcBTgu7Ch .disabled text{fill:#efefef;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-root rect,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-root path,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-root circle,#mermaid-svg-ktQEXjNpcBTgu7Ch .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-root text{fill:#ffffff;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-root span{color:#ffffff;}#mermaid-svg-ktQEXjNpcBTgu7Ch .section-2 span{color:#ffffff;}#mermaid-svg-ktQEXjNpcBTgu7Ch .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-ktQEXjNpcBTgu7Ch .edge{fill:none;}#mermaid-svg-ktQEXjNpcBTgu7Ch .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-ktQEXjNpcBTgu7Ch :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

数据可视化形式

基础图表

柱状图

折线图

饼图

散点图

雷达图

高级图表

热力图

桑基图

关系图

仪表盘

地图

大屏展示

数据大屏

指挥中心

监控面板

信息图

信息长图

流程图

组织架构图

9.2 数据大屏的HTML结构

数据可视化大屏是当下非常流行的一种HTML应用，常见于指挥中心、监控室、展厅等场所。

<!– 数据大屏布局结构 –>
<div class="data-screen">
<!– 顶部标题 –>
<header class="screen-header">
<h1>智慧城市运营指挥中心</h1>
<div class="header-info">
<span id="currentTime">2026-08-11 14:30:00</span>
</div>
</header>

<!– 主体三栏布局 –>
<div class="screen-body">
<!– 左侧面板 –>
<div class="panel-left">
<div class="chart-card">
<h3>人口分布统计</h3>
<div id="chart-population" class="chart-container"></div>
</div>
<div class="chart-card">
<h3>交通流量趋势</h3>
<div id="chart-traffic" class="chart-container"></div>
</div>
</div>

<!– 中间主区域 –>
<div class="panel-center">
<div class="map-card">
<div id="map-container" class="map-container"></div>
<div class="center-stats">
<div class="stat-item">
<span class="number">1,234万</span>
<span class="label">总人口</span>
</div>
<!– 更多数据项… –>
</div>
</div>
</div>

<!– 右侧面板 –>
<div class="panel-right">
<div class="chart-card">
<h3>环境质量指数</h3>
<div id="chart-environment" class="chart-container"></div>
</div>
<div class="chart-card">
<h3>事件实时动态</h3>
<div id="event-list" class="event-list">
<ul>
<li><span class="time">14:28</span> 某路段发生交通事故</li>
<li><span class="time">14:25</span> 空气质量预警解除</li>
<!– 更多事件… –>
</ul>
</div>
</div>
</div>
</div>
</div>

9.3 数据可视化的常用工具

十、场景九：邮箱与富文本编辑器

你每天收发的HTML邮件、使用的富文本编辑器，也是HTML的重要应用场景。虽然看起来不起眼，但它们深刻地影响着我们的数字生活。

10.1 HTML邮件

现代电子邮件早已不是纯文本了。营销邮件、通知邮件、账单邮件——大多都是用HTML编写的精美邮件。

<!– HTML邮件模板示例 –>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>订单确认</title>
<style>
/* 邮件客户端CSS支持有限，通常使用行内样式和table布局 */
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0"
bgcolor="#ffffff" style="border-radius: 8px;">
<!– 邮件头部 –>
<tr>
<td align="center" bgcolor="#4a90e2"
style="padding: 30px; border-radius: 8px 8px 0 0;">
<h1 style="color: white; margin: 0;">XX商城</h1>
</td>
</tr>
<!– 邮件内容 –>
<tr>
<td style="padding: 30px;">
<h2 style="color: #333;">尊敬的用户，您好！</h2>
<p style="color: #666; line-height: 1.6;">
您的订单已提交成功，感谢您的购买！
</p>

<table width="100%" cellpadding="10" cellspacing="0"
style="border: 1px solid #eee; margin: 20px 0;">
<tr style="background: #f9f9f9;">
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
</tr>
<tr>
<td>无线蓝牙耳机</td>
<td align="center">1</td>
<td align="right">¥299.00</td>
</tr>
</table>

<p style="text-align: center; margin: 30px 0;">
<a href="https://example.com/order/12345"
style="display: inline-block; padding: 12px 30px;
background-color: #4a90e2; color: white;
text-decoration: none; border-radius: 25px;">
查看订单详情
</a>
</p>
</td>
</tr>
<!– 邮件底部 –>
<tr>
<td align="center" style="padding: 20px; color: #999; font-size: 12px;">
<p>此邮件由系统自动发送，请勿直接回复</p>
<p>© 2026 XX商城 版权所有</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

HTML邮件的特点：

• 兼容性要求极高：不同邮件客户端（Gmail、Outlook、QQ邮箱等）对HTML和CSS的支持差异很大
• 通常使用table布局：因为某些邮件客户端对CSS布局支持不好
• 大量使用行内样式：外部样式表和内部样式表的支持有限

10.2 富文本编辑器

富文本编辑器（Rich Text Editor）允许用户在网页中编辑带格式的文档，就像使用Word一样。它的底层技术就是HTML。

常见的富文本编辑器：

富文本编辑器的核心原理：利用浏览器提供的contenteditable属性，让普通的HTML元素变成可编辑状态。

<!– contenteditable 属性让HTML元素可编辑 –>
<div contenteditable="true" class="editor">
<h3>这是一个可编辑的富文本区域</h3>
<p>你可以在这里输入文字，也可以<strong>加粗</strong>、
<em>斜体</em>、添加<a href="#">链接</a>等。</p>
<ul>
<li>列表项一</li>
<li>列表项二</li>
</ul>
</div>

加上工具栏和JavaScript逻辑，就能实现一个完整的富文本编辑器。你在各种网站上使用的内容编辑器、评论框，底层基本都是这个原理。

十一、场景十：物联网与嵌入式Web

HTML的应用还不止于传统的电脑和手机。在物联网时代，越来越多的设备开始内置Web服务器，通过HTML页面来提供配置和管理界面。

11.1 什么是嵌入式Web

很多智能设备（路由器、摄像头、打印机、智能家居等）都内置了一个轻量级的Web服务器，用户可以通过浏览器访问设备的IP地址来进行配置和管理。

#mermaid-svg-withkm93KTMWGZCU{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-withkm93KTMWGZCU .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-withkm93KTMWGZCU .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-withkm93KTMWGZCU .error-icon{fill:#552222;}#mermaid-svg-withkm93KTMWGZCU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-withkm93KTMWGZCU .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-withkm93KTMWGZCU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-withkm93KTMWGZCU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-withkm93KTMWGZCU .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-withkm93KTMWGZCU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-withkm93KTMWGZCU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-withkm93KTMWGZCU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-withkm93KTMWGZCU .marker.cross{stroke:#333333;}#mermaid-svg-withkm93KTMWGZCU svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-withkm93KTMWGZCU p{margin:0;}#mermaid-svg-withkm93KTMWGZCU .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-withkm93KTMWGZCU .cluster-label text{fill:#333;}#mermaid-svg-withkm93KTMWGZCU .cluster-label span{color:#333;}#mermaid-svg-withkm93KTMWGZCU .cluster-label span p{background-color:transparent;}#mermaid-svg-withkm93KTMWGZCU .label text,#mermaid-svg-withkm93KTMWGZCU span{fill:#333;color:#333;}#mermaid-svg-withkm93KTMWGZCU .node rect,#mermaid-svg-withkm93KTMWGZCU .node circle,#mermaid-svg-withkm93KTMWGZCU .node ellipse,#mermaid-svg-withkm93KTMWGZCU .node polygon,#mermaid-svg-withkm93KTMWGZCU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-withkm93KTMWGZCU .rough-node .label text,#mermaid-svg-withkm93KTMWGZCU .node .label text,#mermaid-svg-withkm93KTMWGZCU .image-shape .label,#mermaid-svg-withkm93KTMWGZCU .icon-shape .label{text-anchor:middle;}#mermaid-svg-withkm93KTMWGZCU .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-withkm93KTMWGZCU .rough-node .label,#mermaid-svg-withkm93KTMWGZCU .node .label,#mermaid-svg-withkm93KTMWGZCU .image-shape .label,#mermaid-svg-withkm93KTMWGZCU .icon-shape .label{text-align:center;}#mermaid-svg-withkm93KTMWGZCU .node.clickable{cursor:pointer;}#mermaid-svg-withkm93KTMWGZCU .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-withkm93KTMWGZCU .arrowheadPath{fill:#333333;}#mermaid-svg-withkm93KTMWGZCU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-withkm93KTMWGZCU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-withkm93KTMWGZCU .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-withkm93KTMWGZCU .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-withkm93KTMWGZCU .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-withkm93KTMWGZCU .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-withkm93KTMWGZCU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-withkm93KTMWGZCU .cluster text{fill:#333;}#mermaid-svg-withkm93KTMWGZCU .cluster span{color:#333;}#mermaid-svg-withkm93KTMWGZCU div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-withkm93KTMWGZCU .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-withkm93KTMWGZCU rect.text{fill:none;stroke-width:0;}#mermaid-svg-withkm93KTMWGZCU .icon-shape,#mermaid-svg-withkm93KTMWGZCU .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-withkm93KTMWGZCU .icon-shape p,#mermaid-svg-withkm93KTMWGZCU .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-withkm93KTMWGZCU .icon-shape .label rect,#mermaid-svg-withkm93KTMWGZCU .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-withkm93KTMWGZCU .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-withkm93KTMWGZCU .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-withkm93KTMWGZCU :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

嵌入式Web应用

路由器管理

网络摄像头

打印机配置

智能家居控制

工业设备监控

192.168.1.1路由器后台

实时视频查看摄像头设置

打印配置状态监控

灯光 空调控制场景模式

产线监控设备参数设置

11.2 为什么设备喜欢用HTML做界面

你一定用过的例子：

• 路由器管理后台（192.168.1.1 或 192.168.0.1）
• 网络摄像头的Web管理界面
• 打印机的Web配置页面
• NAS网络存储的管理界面
• 智能网关、智能家居控制页面

11.3 嵌入式Web的技术特点

嵌入式设备的资源通常比较有限（CPU性能低、内存小），所以嵌入式Web开发有一些特殊的要求：

#mermaid-svg-latjXZHspWAghEFK{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-latjXZHspWAghEFK .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-latjXZHspWAghEFK .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-latjXZHspWAghEFK .error-icon{fill:#552222;}#mermaid-svg-latjXZHspWAghEFK .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-latjXZHspWAghEFK .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-latjXZHspWAghEFK .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-latjXZHspWAghEFK .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-latjXZHspWAghEFK .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-latjXZHspWAghEFK .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-latjXZHspWAghEFK .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-latjXZHspWAghEFK .marker{fill:#333333;stroke:#333333;}#mermaid-svg-latjXZHspWAghEFK .marker.cross{stroke:#333333;}#mermaid-svg-latjXZHspWAghEFK svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-latjXZHspWAghEFK p{margin:0;}#mermaid-svg-latjXZHspWAghEFK .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-latjXZHspWAghEFK .cluster-label text{fill:#333;}#mermaid-svg-latjXZHspWAghEFK .cluster-label span{color:#333;}#mermaid-svg-latjXZHspWAghEFK .cluster-label span p{background-color:transparent;}#mermaid-svg-latjXZHspWAghEFK .label text,#mermaid-svg-latjXZHspWAghEFK span{fill:#333;color:#333;}#mermaid-svg-latjXZHspWAghEFK .node rect,#mermaid-svg-latjXZHspWAghEFK .node circle,#mermaid-svg-latjXZHspWAghEFK .node ellipse,#mermaid-svg-latjXZHspWAghEFK .node polygon,#mermaid-svg-latjXZHspWAghEFK .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-latjXZHspWAghEFK .rough-node .label text,#mermaid-svg-latjXZHspWAghEFK .node .label text,#mermaid-svg-latjXZHspWAghEFK .image-shape .label,#mermaid-svg-latjXZHspWAghEFK .icon-shape .label{text-anchor:middle;}#mermaid-svg-latjXZHspWAghEFK .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-latjXZHspWAghEFK .rough-node .label,#mermaid-svg-latjXZHspWAghEFK .node .label,#mermaid-svg-latjXZHspWAghEFK .image-shape .label,#mermaid-svg-latjXZHspWAghEFK .icon-shape .label{text-align:center;}#mermaid-svg-latjXZHspWAghEFK .node.clickable{cursor:pointer;}#mermaid-svg-latjXZHspWAghEFK .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-latjXZHspWAghEFK .arrowheadPath{fill:#333333;}#mermaid-svg-latjXZHspWAghEFK .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-latjXZHspWAghEFK .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-latjXZHspWAghEFK .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-latjXZHspWAghEFK .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-latjXZHspWAghEFK .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-latjXZHspWAghEFK .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-latjXZHspWAghEFK .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-latjXZHspWAghEFK .cluster text{fill:#333;}#mermaid-svg-latjXZHspWAghEFK .cluster span{color:#333;}#mermaid-svg-latjXZHspWAghEFK div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-latjXZHspWAghEFK .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-latjXZHspWAghEFK rect.text{fill:none;stroke-width:0;}#mermaid-svg-latjXZHspWAghEFK .icon-shape,#mermaid-svg-latjXZHspWAghEFK .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-latjXZHspWAghEFK .icon-shape p,#mermaid-svg-latjXZHspWAghEFK .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-latjXZHspWAghEFK .icon-shape .label rect,#mermaid-svg-latjXZHspWAghEFK .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-latjXZHspWAghEFK .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-latjXZHspWAghEFK .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-latjXZHspWAghEFK :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

嵌入式Web的特点

轻量化

低功耗

响应快

兼容性好

精简的前端框架

CSS文件要小

少用大图片

减少后台请求

优化资源加载

页面加载要快

操作响应及时

不能依赖高级浏览器特性

兼容老旧浏览器

十二、HTML的边界与未来

看了这么多应用场景，你可能会问：HTML有没有做不到的事情？答案当然是有的。了解HTML的边界，可以帮助我们更理性地选择技术方案。

12.1 HTML的局限性

但值得注意的是，这些边界正在被不断突破：WebAssembly让Web应用的性能接近原生，Web API让浏览器能调用越来越多的系统能力，PWA让Web应用可以离线运行……

12.2 HTML的未来发展

#mermaid-svg-vuhrfkD3UWBktFAz{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-vuhrfkD3UWBktFAz .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-vuhrfkD3UWBktFAz .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-vuhrfkD3UWBktFAz .error-icon{fill:#552222;}#mermaid-svg-vuhrfkD3UWBktFAz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vuhrfkD3UWBktFAz .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-vuhrfkD3UWBktFAz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vuhrfkD3UWBktFAz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vuhrfkD3UWBktFAz .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-vuhrfkD3UWBktFAz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vuhrfkD3UWBktFAz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vuhrfkD3UWBktFAz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vuhrfkD3UWBktFAz .marker.cross{stroke:#333333;}#mermaid-svg-vuhrfkD3UWBktFAz svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vuhrfkD3UWBktFAz p{margin:0;}#mermaid-svg-vuhrfkD3UWBktFAz .edge{stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .section–1 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section–1 path,#mermaid-svg-vuhrfkD3UWBktFAz .section–1 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section–1 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section–1 text{fill:#ffffff;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth–1{stroke-width:17;}#mermaid-svg-vuhrfkD3UWBktFAz .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-0 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-0 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-0 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-0 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-0 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-0{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-0{stroke-width:14;}#mermaid-svg-vuhrfkD3UWBktFAz .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-1 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-1 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-1 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-1 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-1 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-1{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-1{stroke-width:11;}#mermaid-svg-vuhrfkD3UWBktFAz .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-2 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-2 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-2 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-2 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-2 text{fill:#ffffff;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-2{stroke-width:8;}#mermaid-svg-vuhrfkD3UWBktFAz .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-3 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-3 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-3 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-3 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-3 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-3{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-3{stroke-width:5;}#mermaid-svg-vuhrfkD3UWBktFAz .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-4 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-4 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-4 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-4 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-4 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-4{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-4{stroke-width:2;}#mermaid-svg-vuhrfkD3UWBktFAz .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-5 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-5 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-5 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-5 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-5 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-5{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-5{stroke-width:-1;}#mermaid-svg-vuhrfkD3UWBktFAz .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-6 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-6 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-6 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-6 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-6 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-6{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-6{stroke-width:-4;}#mermaid-svg-vuhrfkD3UWBktFAz .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-7 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-7 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-7 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-7 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-7 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-7{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-7{stroke-width:-7;}#mermaid-svg-vuhrfkD3UWBktFAz .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-8 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-8 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-8 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-8 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-8 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-8{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-8{stroke-width:-10;}#mermaid-svg-vuhrfkD3UWBktFAz .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-9 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-9 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-9 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-9 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-9 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-9{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-9{stroke-width:-13;}#mermaid-svg-vuhrfkD3UWBktFAz .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-10 rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-10 path,#mermaid-svg-vuhrfkD3UWBktFAz .section-10 circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-10 polygon,#mermaid-svg-vuhrfkD3UWBktFAz .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-10 text{fill:black;}#mermaid-svg-vuhrfkD3UWBktFAz .node-icon-10{font-size:40px;color:black;}#mermaid-svg-vuhrfkD3UWBktFAz .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .edge-depth-10{stroke-width:-16;}#mermaid-svg-vuhrfkD3UWBktFAz .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled,#mermaid-svg-vuhrfkD3UWBktFAz .disabled circle,#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:lightgray;}#mermaid-svg-vuhrfkD3UWBktFAz .disabled text{fill:#efefef;}#mermaid-svg-vuhrfkD3UWBktFAz .section-root rect,#mermaid-svg-vuhrfkD3UWBktFAz .section-root path,#mermaid-svg-vuhrfkD3UWBktFAz .section-root circle,#mermaid-svg-vuhrfkD3UWBktFAz .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-vuhrfkD3UWBktFAz .section-root text{fill:#ffffff;}#mermaid-svg-vuhrfkD3UWBktFAz .section-root span{color:#ffffff;}#mermaid-svg-vuhrfkD3UWBktFAz .section-2 span{color:#ffffff;}#mermaid-svg-vuhrfkD3UWBktFAz .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-vuhrfkD3UWBktFAz .edge{fill:none;}#mermaid-svg-vuhrfkD3UWBktFAz .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-vuhrfkD3UWBktFAz :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

HTML的未来方向

性能提升

WebAssembly 普及

浏览器持续优化

WebGPU 图形加速

能力扩展

Web Bluetooth 蓝牙

WebUSB 设备连接

WebXR 虚拟现实

文件系统访问

应用形态

PWA 渐进式应用

小程序生态

低代码平台

智能化

AI 辅助开发

自动化测试

智能界面生成

几个值得关注的方向：

• WebAssembly（Wasm）：可以将C/C++/Rust等语言编译成浏览器可执行的字节码，性能接近原生。这意味着未来Photoshop、AutoCAD这样的大型软件都可以在浏览器里运行。
• WebGPU：下一代Web图形API，提供更底层的GPU访问能力，让浏览器可以实现更逼真的3D效果和更强大的并行计算。
• PWA（渐进式Web应用）：让Web应用可以像原生App一样安装到桌面、离线运行、推送消息，模糊了Web和原生应用的界限。
• AI与Web的结合：浏览器内置AI能力，Web应用可以在本地运行AI模型，保护隐私的同时提供更智能的体验。

12.3 为什么HTML值得学习

看完了这十大应用场景，我想你已经有了答案——为什么HTML值得学习？

#mermaid-svg-7Ahi11ewU0hM00Mj{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-7Ahi11ewU0hM00Mj .error-icon{fill:#552222;}#mermaid-svg-7Ahi11ewU0hM00Mj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7Ahi11ewU0hM00Mj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7Ahi11ewU0hM00Mj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7Ahi11ewU0hM00Mj .marker.cross{stroke:#333333;}#mermaid-svg-7Ahi11ewU0hM00Mj svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7Ahi11ewU0hM00Mj p{margin:0;}#mermaid-svg-7Ahi11ewU0hM00Mj .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-7Ahi11ewU0hM00Mj .cluster-label text{fill:#333;}#mermaid-svg-7Ahi11ewU0hM00Mj .cluster-label span{color:#333;}#mermaid-svg-7Ahi11ewU0hM00Mj .cluster-label span p{background-color:transparent;}#mermaid-svg-7Ahi11ewU0hM00Mj .label text,#mermaid-svg-7Ahi11ewU0hM00Mj span{fill:#333;color:#333;}#mermaid-svg-7Ahi11ewU0hM00Mj .node rect,#mermaid-svg-7Ahi11ewU0hM00Mj .node circle,#mermaid-svg-7Ahi11ewU0hM00Mj .node ellipse,#mermaid-svg-7Ahi11ewU0hM00Mj .node polygon,#mermaid-svg-7Ahi11ewU0hM00Mj .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7Ahi11ewU0hM00Mj .rough-node .label text,#mermaid-svg-7Ahi11ewU0hM00Mj .node .label text,#mermaid-svg-7Ahi11ewU0hM00Mj .image-shape .label,#mermaid-svg-7Ahi11ewU0hM00Mj .icon-shape .label{text-anchor:middle;}#mermaid-svg-7Ahi11ewU0hM00Mj .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-7Ahi11ewU0hM00Mj .rough-node .label,#mermaid-svg-7Ahi11ewU0hM00Mj .node .label,#mermaid-svg-7Ahi11ewU0hM00Mj .image-shape .label,#mermaid-svg-7Ahi11ewU0hM00Mj .icon-shape .label{text-align:center;}#mermaid-svg-7Ahi11ewU0hM00Mj .node.clickable{cursor:pointer;}#mermaid-svg-7Ahi11ewU0hM00Mj .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-7Ahi11ewU0hM00Mj .arrowheadPath{fill:#333333;}#mermaid-svg-7Ahi11ewU0hM00Mj .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-7Ahi11ewU0hM00Mj .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-7Ahi11ewU0hM00Mj .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-7Ahi11ewU0hM00Mj .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-7Ahi11ewU0hM00Mj .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-7Ahi11ewU0hM00Mj .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-7Ahi11ewU0hM00Mj .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-7Ahi11ewU0hM00Mj .cluster text{fill:#333;}#mermaid-svg-7Ahi11ewU0hM00Mj .cluster span{color:#333;}#mermaid-svg-7Ahi11ewU0hM00Mj div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-7Ahi11ewU0hM00Mj .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-7Ahi11ewU0hM00Mj rect.text{fill:none;stroke-width:0;}#mermaid-svg-7Ahi11ewU0hM00Mj .icon-shape,#mermaid-svg-7Ahi11ewU0hM00Mj .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-7Ahi11ewU0hM00Mj .icon-shape p,#mermaid-svg-7Ahi11ewU0hM00Mj .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-7Ahi11ewU0hM00Mj .icon-shape .label rect,#mermaid-svg-7Ahi11ewU0hM00Mj .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-7Ahi11ewU0hM00Mj .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-7Ahi11ewU0hM00Mj .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-7Ahi11ewU0hM00Mj :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

为什么学习HTML

应用广泛

入门友好

职业前景好

可迁移性强

是一切Web技术的基础

网站 应用 游戏 移动端…

几乎无处不在

语法简单直观

可视化反馈强

适合零基础入门

前端开发岗位需求大

薪资待遇不错

发展路径清晰

学了HTML可以学CSS/JS

可以学小程序/Vue/React

技术栈迁移成本低

CSS是给HTML加样式

JS是操作HTML元素

框架也是基于HTML的

HTML是Web世界的"普通话"，是进入互联网行业的第一张门票。无论你未来想做前端开发、后端开发、产品经理，还是UI设计、运营推广，懂HTML都会让你如虎添翼。

十三、结语

从企业官网到电商平台，从内容创作到在线教育，从Web应用到互动游戏，从移动H5到物联网——HTML的身影无处不在。它看似简单，却构筑了整个互联网的内容基础。

这十大应用场景，只是HTML广泛应用的一个缩影。实际上，HTML的应用远比我们列举的要多得多。你现在正在阅读的这篇文章，本身就是HTML应用的一个鲜活例子。

更令人兴奋的是，HTML技术还在不断发展进化。WebAssembly、WebGPU、PWA、WebXR……每一项新技术都在拓展HTML的边界，让Web应用的能力越来越强大。

学习HTML，不只是学习一门技术，更是获得一张通往互联网世界的通行证。有了这张通行证，你可以探索Web开发的无限可能——无论是做一个个人网站，开发一款Web应用，还是创造一个有趣的小游戏，甚至是改变世界的伟大产品。

下一篇文章中，我们将为你呈现一份详细的前端开发学习路线图，帮你规划从入门到精通的完整路径。

学习提示：看完这篇文章后，回想一下你每天使用的网站和应用，看看哪些是用HTML构建的。你会发现，HTML技术已经渗透到数字生活的方方面面。

本文是《HTML从入门到精通》专栏的第5篇文章。如果你觉得这篇文章对你有帮助，欢迎继续阅读后续文章，和我一起系统地学习HTML，从入门走向精通。