前端三件套：HTML、CSS、JavaScript各自的角色

一、前端开发的三大支柱

在Web开发的世界里，有三门语言构成了前端技术的基石，它们被称为"前端三件套"——HTML、CSS和JavaScript。这三者相互配合、各司其职，共同构建出我们每天浏览的每一个网页。

对于初学者来说，理解这三门技术各自的角色以及它们之间的关系，是踏入前端世界的第一步。就像盖房子需要钢筋、水泥和水电一样，网页的构建也需要这"三件套"协同工作。

1.1 为什么叫"三件套"

“三件套"这个词，本意是指三套配套使用的物品。在前端领域，HTML、CSS、JavaScript之所以被称为"三件套”，是因为它们：

• 缺一不可：任何一个现代网页都离不开这三者的共同作用
• 相互配合：各自负责不同的层面，组合在一起才能形成完整的网页
• 层层递进：学习顺序通常是HTML → CSS → JavaScript，由易到难

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

基础

美化

灵魂

前端三件套

HTML 结构

CSS 样式

JavaScript 行为

定义内容结构

控制外观布局

实现交互逻辑

1.2 一个经典的比喻

为了帮助你更好地理解三者的关系，我们用一个"人"的比喻来说明：

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

网页 = 一个人

HTML = 骨骼和身体

CSS = 外貌和穿着

JavaScript = 思想和行为

决定了身体的结构头、躯干、四肢的位置

决定了长相、发型衣服、配饰

决定了会说话、会思考能走路、能与人互动

• HTML是骨架：没有HTML，就没有页面的基本结构，内容无处安放
• CSS是皮肤和衣服：没有CSS，页面就是一堆白底黑字的纯文本，毫无美感
• JavaScript是大脑和肌肉：没有JS，页面就是静态的、不能动的，无法响应用户操作

再用一个更贴近生活的例子——PPT演示文稿：

1.3 三者的协作关系

HTML、CSS、JavaScript并不是孤立存在的，它们在浏览器中紧密协作：

JavaScript

CSS

HTML

浏览器

用户

JavaScript

CSS

HTML

浏览器

用户

#mermaid-svg-HsriM9M33mleNrx5{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-HsriM9M33mleNrx5 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-HsriM9M33mleNrx5 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-HsriM9M33mleNrx5 .error-icon{fill:#552222;}#mermaid-svg-HsriM9M33mleNrx5 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-HsriM9M33mleNrx5 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-HsriM9M33mleNrx5 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-HsriM9M33mleNrx5 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-HsriM9M33mleNrx5 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-HsriM9M33mleNrx5 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-HsriM9M33mleNrx5 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-HsriM9M33mleNrx5 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-HsriM9M33mleNrx5 .marker.cross{stroke:#333333;}#mermaid-svg-HsriM9M33mleNrx5 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-HsriM9M33mleNrx5 p{margin:0;}#mermaid-svg-HsriM9M33mleNrx5 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HsriM9M33mleNrx5 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-HsriM9M33mleNrx5 .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-HsriM9M33mleNrx5 .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-HsriM9M33mleNrx5 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-HsriM9M33mleNrx5 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-HsriM9M33mleNrx5 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-HsriM9M33mleNrx5 .sequenceNumber{fill:white;}#mermaid-svg-HsriM9M33mleNrx5 #sequencenumber{fill:#333;}#mermaid-svg-HsriM9M33mleNrx5 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-HsriM9M33mleNrx5 .messageText{fill:#333;stroke:none;}#mermaid-svg-HsriM9M33mleNrx5 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HsriM9M33mleNrx5 .labelText,#mermaid-svg-HsriM9M33mleNrx5 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-HsriM9M33mleNrx5 .loopText,#mermaid-svg-HsriM9M33mleNrx5 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-HsriM9M33mleNrx5 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-HsriM9M33mleNrx5 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-HsriM9M33mleNrx5 .noteText,#mermaid-svg-HsriM9M33mleNrx5 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-HsriM9M33mleNrx5 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HsriM9M33mleNrx5 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HsriM9M33mleNrx5 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-HsriM9M33mleNrx5 .actorPopupMenu{position:absolute;}#mermaid-svg-HsriM9M33mleNrx5 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-HsriM9M33mleNrx5 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-HsriM9M33mleNrx5 .actor-man circle,#mermaid-svg-HsriM9M33mleNrx5 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-HsriM9M33mleNrx5 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

打开网页

解析HTML结构

构建DOM树

解析CSS样式

构建CSSOM树

合并生成渲染树

显示页面

点击按钮

触发JS事件

修改DOM结构

修改CSS样式

更新页面显示

从这个流程可以看出：

二、HTML——网页的结构层

HTML（HyperText Markup Language，超文本标记语言）是网页的基础。它负责定义网页的内容和结构，告诉浏览器"页面上有什么"。

2.1 HTML的核心职责

HTML的主要任务是标记内容的语义和结构，而不是样式。

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

HTML的职责

内容标记

标题 h1-h6

段落 p

列表 ul/ol/li

图片 img

链接 a

结构组织

页面头部 header

导航栏 nav

主要内容 main

侧边栏 aside

页脚 footer

语义表达

强调 strong/em

引用 blockquote

代码 code

时间 time

HTML关注的问题是：

• 这里是标题还是段落？
• 这是一张图片还是一段文字？
• 这是导航菜单还是正文内容？
• 这是列表还是表格？

HTML不关注的问题是：

• 文字是什么颜色？（CSS的事）
• 字体是微软雅黑还是宋体？（CSS的事）
• 点击后会发生什么？（JavaScript的事）

2.2 HTML代码示例

让我们看一个简单的HTML文档，感受一下它的结构特征：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
</head>
<body>
<!– 页面头部 –>
<header>
<h1>欢迎来到我的个人主页</h1>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>

<!– 主要内容 –>
<main>
<section id="about">
<h2>关于我</h2>
<p>你好，我是一名前端开发工程师，热爱编程和设计。</p>
<img src="avatar.jpg" alt="我的头像">
</section>

<section id="skills">
<h2>我的技能</h2>
<ul>
<li>HTML / HTML5</li>
<li>CSS / CSS3</li>
<li>JavaScript</li>
</ul>
</section>
</main>

<!– 页脚 –>
<footer>
<p>&copy; 2026 我的个人主页. All rights reserved.</p>
</footer>
</body>
</html>

从这个例子可以看出，HTML代码的特点是：

• 标签化：所有内容都用标签包裹，如 <h1>、<p>、<ul> 等
• 结构化：通过嵌套形成清晰的层级关系
• 语义化：标签名本身就说明了内容的含义（header是头部，nav是导航，section是区块）

2.3 HTML的语义化思维

学习HTML，最重要的不是记住多少个标签，而是培养语义化思维——用正确的标签标记正确的内容。

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

语义化HTML的好处

对人友好

对机器友好

对开发友好

代码可读性强一眼看懂内容含义

便于团队协作降低维护成本

SEO搜索引擎优化提高网站排名

屏幕阅读器友好提升可访问性

结构清晰便于样式设计

减少类名代码更简洁

反例：用div写一切

初学者常见的一个问题就是"div至上主义"——不管什么内容都用<div>标签：

<!– 不好的写法：全是div，看不出内容含义 –>
<div class="header">
<div class="title">欢迎来到我的主页</div>
<div class="nav">
<div class="nav-item">首页</div>
<div class="nav-item">关于</div>
</div>
</div>
<div class="content">
<div class="section-title">关于我</div>
<div class="paragraph">我是一名前端工程师</div>
</div>

虽然这样写浏览器也能正常显示，但代码缺乏语义，就像一篇没有标点符号和段落划分的文章——内容都在，但读起来非常费劲。

正解：使用语义化标签

<!– 好的写法：标签本身就说明了内容含义 –>
<header>
<h1>欢迎来到我的主页</h1>
<nav>
<ul>
<li>首页</li>
<li>关于</li>
</ul>
</nav>
</header>
<main>
<section>
<h2>关于我</h2>
<p>我是一名前端工程师</p>
</section>
</main>

2.4 HTML的局限性

HTML虽然重要，但它也有明显的局限性：

一句话总结HTML：它是网页的骨架和内容载体，决定了"有什么"，但不决定"长什么样"和"能做什么"。

三、CSS——网页的表现层

CSS（Cascading Style Sheets，层叠样式表）负责网页的外观和样式，告诉浏览器"页面长什么样"。如果说HTML是毛坯房，那CSS就是精装修。

3.1 CSS的核心职责

CSS的主要任务是控制网页的视觉呈现，包括颜色、字体、布局、动画等一切与"美"相关的东西。

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

CSS的职责

文字样式

字体 font-family

字号 font-size

颜色 color

行高 line-height

盒模型控制

内边距 padding

外边距 margin

边框 border

大小 width/height

页面布局

浮动 float

定位 position

Flex布局

Grid布局

视觉效果

背景 background

阴影 shadow

渐变 gradient

圆角 border-radius

动画过渡

过渡 transition

动画 animation

变形 transform

CSS关注的问题是：

• 这个标题用什么字体？多大？什么颜色？
• 这两个元素之间的间距是多少？
• 这个按钮是方形的还是圆角的？
• 鼠标悬停上去有什么效果？
• 页面在手机上怎么显示？

3.2 CSS代码示例

让我们给之前的HTML页面添加一些CSS样式，看看效果变化：

/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 页面整体样式 */
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}

/* 页面头部 */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 20px;
text-align: center;
}

header h1 {
font-size: 36px;
margin-bottom: 20px;
}

/* 导航样式 */
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 30px;
}

nav a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 8px 16px;
border-radius: 20px;
transition: background-color 0.3s;
}

nav a:hover {
background-color: rgba(255, 255, 255, 0.2);
}

/* 主要内容区 */
main {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}

section {
background-color: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

section h2 {
font-size: 24px;
color: #667eea;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #667eea;
}

/* 页脚 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}

添加CSS之后，原本朴素的HTML页面立刻变得美观、专业。这就是CSS的魔力——它能让同样的内容呈现出完全不同的视觉效果。

3.3 CSS的三大特性

CSS之所以叫"层叠样式表"，是因为它有三个核心特性：

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

CSS三大特性

层叠性 Cascading

继承性 Inheritance

优先级 Specificity

多个样式可以叠加作用于同一个元素

样式冲突时按优先级决定谁生效

子元素会继承父元素的某些样式

如颜色、字体等会自动传递给后代

不同选择器有不同权重

权重高的样式覆盖权重低的

层叠性：同一个元素可以被多个CSS规则同时作用。比如一个按钮，可能既有通用的按钮样式，又有自己的特殊样式，这些样式会叠加在一起最终生效。

继承性：有些样式会自动从父元素传递给子元素。比如给<body>设置了字体颜色，页面中所有的文字默认都会继承这个颜色，除非子元素单独设置了其他颜色。

优先级：当多个样式规则冲突时（比如一个说文字是红色，一个说文字是蓝色），浏览器会按照优先级来决定用哪个。简单来说：行内样式 > ID选择器 > 类选择器 > 标签选择器。

3.4 CSS的引入方式

CSS有三种引入方式，各有适用场景：

最佳实践：实际开发中强烈推荐使用外部样式表，将CSS代码单独放在.css文件中，通过<link>标签引入。这样结构和样式分离，代码更清晰，也便于维护和复用。

3.5 CSS的进化之路

CSS从诞生至今也经历了多次重大升级：

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

1996

CSS 1

基础样式属性，字体、颜色、边距等

1998

CSS 2

定位、浮动、z-index等布局属性

2011

CSS 2.1

修正完善，广泛使用多年

2012起

CSS3

模块化升级，圆角、阴影、渐变、动画、Flex等

至今

CSS Living

持续迭代，Grid、变量、容器查询等新特性不断加入

CSS发展历程

CSS3并不是一个单一的标准，而是由许多独立的模块组成的。每个模块独立发展、独立发布，所以我们会看到有些CSS3特性已经被广泛支持，而有些还处于实验阶段。

一句话总结CSS：它是网页的美容师和设计师，决定了页面"好不好看"和"怎么排版"。

四、JavaScript——网页的行为层

JavaScript（简称JS）是一门编程语言，负责网页的交互和逻辑，告诉浏览器"页面能做什么"。如果说HTML是骨架、CSS是皮肤，那JavaScript就是大脑和神经。

4.1 JavaScript的核心职责

JavaScript让网页从"静态"变成"动态"，从"只读"变成"可交互"。

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

JavaScript的职责

页面交互

点击事件

表单验证

弹窗提示

菜单展开收起

数据处理

表单数据收集

数据计算

字符串处理

日期时间操作

DOM操作

获取元素

修改内容

添加/删除元素

修改样式

网络请求

Ajax请求

Fetch API

与后端数据交互

局部刷新页面

动画效果

自定义动画

定时器

缓动效果

复杂交互动画

JavaScript关注的问题是：

• 用户点击这个按钮后会发生什么？
• 表单数据怎么验证和提交？
• 页面滚动到什么位置显示什么效果？
• 怎么从服务器获取数据并显示在页面上？
• 怎么实现轮播图、下拉菜单等交互组件？

4.2 JavaScript代码示例

让我们给页面添加一些JavaScript交互效果：

// 等待页面加载完成
document.addEventListener('DOMContentLoaded', function() {

// 1. 导航菜单点击高亮效果
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
// 移除所有高亮
navLinks.forEach(l => l.classList.remove('active'));
// 添加当前高亮
this.classList.add('active');

// 2. 平滑滚动到对应区域
const targetId = this.getAttribute('href');
const targetSection = document.querySelector(targetId);
if (targetSection) {
e.preventDefault();
targetSection.scrollIntoView({ behavior: 'smooth' });
}
});
});

// 3. 返回顶部按钮
const backToTopBtn = document.createElement('button');
backToTopBtn.textContent = '↑ 回到顶部';
backToTopBtn.style.cssText = `
position: fixed;
bottom: 30px;
right: 30px;
padding: 10px 20px;
background: #667eea;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
z-index: 1000;
`;
document.body.appendChild(backToTopBtn);

// 监听滚动，控制按钮显示隐藏
window.addEventListener('scroll', function() {
if (window.scrollY > 300) {
backToTopBtn.style.opacity = '1';
} else {
backToTopBtn.style.opacity = '0';
}
});

// 点击回到顶部
backToTopBtn.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});

// 4. 技能列表动画效果
const skillItems = document.querySelectorAll('#skills li');
skillItems.forEach((item, index) => {
item.style.opacity = '0';
item.style.transform = 'translateX(-20px)';
item.style.transition = 'all 0.5s ease';

// 延迟依次显示
setTimeout(() => {
item.style.opacity = '1';
item.style.transform = 'translateX(0)';
}, 300 * index);
});
});

添加了JavaScript之后，页面就"活"了起来：

• 点击导航菜单可以平滑滚动到对应区域
• 页面向下滚动时会出现"回到顶部"按钮
• 技能列表会有逐个出现的动画效果

这些都是HTML和CSS无法独立完成的，必须依靠JavaScript的编程能力。

4.3 JavaScript的运行环境

JavaScript最初是为浏览器设计的，但现在它的应用范围已经远远超出了浏览器：

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

JavaScript运行环境

浏览器端

服务端

桌面端

移动端

网页交互

前端框架 Vue/React

浏览器扩展

Node.js

Express/Koa 框架

API服务开发

Electron

VS Code 就是Electron写的

小程序

React Native

uni-app

为什么JavaScript这么火？ 一个重要原因就是它是唯一一门能够同时在前端、后端、移动端、桌面端开发的语言，真正实现了"一门语言，全栈开发"。

4.4 JavaScript与HTML/CSS的互动

JavaScript的一个重要能力就是操作DOM（文档对象模型）和CSSOM（CSS对象模型），也就是动态修改HTML结构和CSS样式。

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

操作

操作

监听

触发

变化

变化

JavaScript

DOM HTML结构

CSSOM 样式

用户事件

页面更新

常见的DOM操作：

// 获取元素
const title = document.getElementById('title');
const buttons = document.querySelectorAll('.btn');

// 修改内容
title.textContent = '新的标题';
title.innerHTML = '<span>新的标题</span>';

// 添加/删除元素
const newDiv = document.createElement('div');
newDiv.textContent = '我是新来的';
document.body.appendChild(newDiv);

// 修改样式
title.style.color = 'red';
title.style.fontSize = '24px';

// 添加/删除类名
title.classList.add('highlight');
title.classList.remove('old-class');
title.classList.toggle('active');

4.5 JavaScript的语言特点

一句话总结JavaScript：它是网页的大脑和灵魂，赋予页面交互能力和逻辑思维，让网页从"展示信息"变成"提供服务"。

五、三者如何协同工作

了解了三者各自的角色之后，我们来看看它们在实际开发中是如何协同工作的。

5.1 分离原则：关注点分离

在前端开发中，有一个非常重要的原则叫做关注点分离（Separation of Concerns）：

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

结构与样式分离

结构与行为分离

样式与行为分离

关注点分离原则

HTML 负责结构

CSS 负责样式

JS 负责行为

为什么要分离？

• 可维护性：修改样式不用动HTML，修改逻辑不用动CSS，各司其职
• 可复用性：一份CSS可以用在多个页面，一段JS可以复用在多个组件
• 可协作性：团队成员可以并行开发，分别负责结构、样式、交互
• 可访问性：CSS失效时页面依然可读，JS禁用时内容依然可用

反例：混写的糟糕代码

<!– 不好的写法：结构、样式、行为混在一起 –>
<div style="color:red; font-size:20px; background:yellow; padding:10px; border:1px solid #ccc; margin:10px;"
onclick="this.style.color='blue'; this.style.fontSize='24px'; alert('你点击了我！');">
点击我试试
</div>

这种写法虽然能运行，但问题很多：

• 样式写在标签里，其他元素想用就得复制粘贴
• JS逻辑和HTML绑死了，难以维护和修改
• 代码又长又乱，可读性很差

正解：三者分离

<!– HTML：只负责结构 –>
<div id="myBtn" class="btn">点击我试试</div>

/* CSS：只负责样式 */
.btn {
color: red;
font-size: 20px;
background: yellow;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
cursor: pointer;
}

.btn.active {
color: blue;
font-size: 24px;
}

/* JS：只负责行为 */
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
this.classList.toggle('active');
alert('你点击了我！');
});

这样写，代码结构清晰，修改任何一部分都不会影响其他部分，这才是专业的前端开发方式。

5.2 协作流程：从页面加载到交互

让我们完整梳理一下，从用户输入网址到页面交互的全过程中，三者是如何配合的：

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

用户输入网址

浏览器请求HTML

服务器返回HTML

浏览器解析HTML构建DOM树

遇到link标签请求CSS文件

解析CSS构建CSSOM树

DOM + CSSOM生成渲染树

布局与绘制页面首次显示

遇到script标签请求并执行JS

JS操作DOM/CSSOM页面动态更新

用户交互事件触发JS执行

再次更新页面

关键要点：

5.3 一个完整的例子：待办事项列表

让我们通过一个经典的"待办事项"小应用，完整感受三者的协作：

<!– HTML：结构层 –>
<div class="todo-app">
<h2>我的待办事项</h2>
<div class="input-group">
<input type="text" id="todoInput" placeholder="添加新的待办事项…">
<button id="addBtn">添加</button>
</div>
<ul id="todoList">
<!– 待办事项将通过JS动态添加 –>
</ul>
<div class="stats">
<span id="todoCount">共 0 项待办</span>
<button id="clearBtn">清空已完成</button>
</div>
</div>

/* CSS：样式层 */
.todo-app {
max-width: 500px;
margin: 50px auto;
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.todo-app h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}

.input-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

#todoInput {
flex: 1;
padding: 10px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s;
}

#todoInput:focus {
outline: none;
border-color: #667eea;
}

#addBtn {
padding: 10px 20px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}

#addBtn:hover {
background: #5a6fd1;
}

#todoList {
list-style: none;
margin-bottom: 20px;
}

.todo-item {
display: flex;
align-items: center;
padding: 12px;
border-bottom: 1px solid #f0f0f0;
transition: background 0.3s;
}

.todo-item:hover {
background: #f9f9f9;
}

.todo-item.completed .todo-text {
text-decoration: line-through;
color: #999;
}

.todo-text {
flex: 1;
margin-left: 10px;
}

.delete-btn {
background: none;
border: none;
color: #ff6b6b;
cursor: pointer;
font-size: 16px;
opacity: 0;
transition: opacity 0.3s;
}

.todo-item:hover .delete-btn {
opacity: 1;
}

.stats {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid #f0f0f0;
font-size: 14px;
color: #666;
}

#clearBtn {
background: none;
border: none;
color: #667eea;
cursor: pointer;
}

// JavaScript：行为层
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');
const todoCount = document.getElementById('todoCount');
const clearBtn = document.getElementById('clearBtn');

let todos = [];

// 添加待办
function addTodo(text) {
const todo = {
id: Date.now(),
text: text,
completed: false
};
todos.push(todo);
renderTodos();
}

// 渲染待办列表
function renderTodos() {
todoList.innerHTML = '';

todos.forEach(todo => {
const li = document.createElement('li');
li.className = 'todo-item' + (todo.completed ? ' completed' : '');
li.innerHTML = `
<input type="checkbox" ${todo.completed ? 'checked' : ''}>
<span class="todo-text">${todo.text}</span>
<button class="delete-btn">×</button>
`;

// 复选框切换完成状态
const checkbox = li.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', () => toggleTodo(todo.id));

// 删除按钮
const deleteBtn = li.querySelector('.delete-btn');
deleteBtn.addEventListener('click', () => deleteTodo(todo.id));

todoList.appendChild(li);
});

updateCount();
}

// 切换完成状态
function toggleTodo(id) {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.completed = !todo.completed;
renderTodos();
}
}

// 删除待办
function deleteTodo(id) {
todos = todos.filter(t => t.id !== id);
renderTodos();
}

// 更新计数
function updateCount() {
const remaining = todos.filter(t => !t.completed).length;
todoCount.textContent = `共 ${remaining} 项待办`;
}

// 清空已完成
function clearCompleted() {
todos = todos.filter(t => !t.completed);
renderTodos();
}

// 事件绑定
addBtn.addEventListener('click', () => {
const text = todoInput.value.trim();
if (text) {
addTodo(text);
todoInput.value = '';
todoInput.focus();
}
});

todoInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addBtn.click();
}
});

clearBtn.addEventListener('click', clearCompleted);

通过这个例子，我们可以清楚地看到三者的分工：

• HTML：定义了待办应用的整体结构——标题、输入框、按钮、列表、统计区域
• CSS：让待办应用看起来美观——阴影卡片、圆角、悬停效果、完成状态的划线样式
• JavaScript：赋予待办应用功能——添加事项、标记完成、删除、统计、清空等交互逻辑

5.4 三者的学习顺序

对于初学者，建议的学习顺序是：

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

HTML 基础

CSS 基础

HTML5 新特性

CSS3 进阶

JavaScript 基础

JavaScript 进阶

前端框架

为什么是这个顺序？

当然，这个顺序不是绝对的。学到一定程度后，你可以并行学习CSS进阶和JS基础，根据自己的节奏调整。

六、常见误区与正确理解

在学习前端的过程中，很多初学者会对这三者的关系产生一些误解。让我们来澄清几个常见的误区。

6.1 误区一：HTML最简单，随便看看就行

错误认识：HTML就是一堆标签，记一下就完事了，没什么技术含量。

正确理解：HTML虽然语法简单，但要写好并不容易。

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

HTML的深度

语义化选择

可访问性

SEO优化

HTML5新特性

什么内容用什么标签需要经验积累

ARIA属性屏幕阅读器支持

合理的标题层级结构化数据

Canvas WebGL多媒体 本地存储

• 语义化是一门学问：选择合适的标签，构建合理的文档结构，需要对HTML标签有深入的理解
• 可访问性很重要：让残障人士也能正常使用网站，这需要扎实的HTML功底
• SEO与HTML息息相关：搜索引擎主要靠HTML结构来理解页面内容

结论：HTML入门容易，但精通同样需要时间和经验。不要轻视HTML，它决定了你的前端地基牢不牢。

6.2 误区二：CSS太简单，不就是调样式吗

错误认识：CSS就是改改颜色、调调边距，没什么难的。

正确理解：CSS的广度和深度远超你的想象。

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

CSS的广度和深度

布局体系

传统盒模型

浮动布局

定位布局

Flex弹性布局

Grid网格布局

多列布局

动画系统

transition过渡

animation动画

transform变形

3D变换

高级特性

CSS变量

CSS函数

滤镜与混合模式

裁剪与遮罩

容器查询

:has选择器

原理机制

选择器优先级

层叠上下文

BFC

重绘与回流

CSS看起来简单，但要真正掌握需要深入理解很多概念：

• 各种布局方案的原理和适用场景
• 层叠上下文和BFC等核心机制
• 性能优化和最佳实践
• 浏览器兼容性处理

很多工作了三五年的前端工程师，都不敢说自己完全精通CSS。

结论：CSS易学难精，越深入越能体会到它的博大精深。

6.3 误区三：学会了框架就不用学原生JS了

错误认识：现在都用Vue、React了，还学什么原生JavaScript？

正确理解：框架是建立在原生JS之上的，原生JS是内功，框架是招式。

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

原生 JavaScript

Vue.js

React

Angular

Svelte

各种组件库

各种组件库

业务项目

• 框架会迭代，但原生JS永不过时：jQuery时代过去了，Vue/React也会有被新框架取代的一天，但JavaScript本身是基础
• 理解原理需要原生JS功底：不知道框架底层是怎么工作的，遇到问题就只能抓瞎
• 面试必考原生JS：越好的公司越看重基础，框架可以速成，但基础需要积累

结论：框架可以让你走得更快，但原生JS基础决定了你能走多远。

6.4 误区四：三者是独立的，各学各的

错误认识：HTML是HTML，CSS是CSS，JS是JS，相互独立，分开学习就行。

正确理解：三者紧密关联，需要结合起来学习和理解。

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

DOM操作

样式动态修改

类名约定

前端综合能力

HTML

CSS

JS

实际开发中，三者是交织在一起的：

• JS需要操作HTML的DOM元素
• JS需要动态添加/修改CSS类名
• CSS需要根据HTML的结构和状态来设计
• 做项目时需要同时考虑结构、样式和交互

结论：学习到一定阶段后，要通过做项目把三者整合起来，形成完整的前端能力。

七、学习建议与成长路径

了解了前端三件套各自的角色之后，你可能会问：我该怎么学习呢？下面给你一些实用的建议。

7.1 不同阶段的学习重点

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

重点 HTML + CSS

重点 JavaScript

重点 框架 + 工程化

深入原理 + 全栈

入门阶段0-3个月

能写出静态页面

进阶阶段3-6个月

能实现交互功能

高级阶段6-12个月

能开发完整项目

专家阶段1年以上

架构师 / 技术专家

入门阶段（0-3个月）：

• 重点掌握HTML常用标签和语义化
• 重点掌握CSS基础样式和盒子模型
• 目标：能独立写出静态网页

进阶阶段（3-6个月）：

• 深入学习JavaScript基础语法和DOM操作
• 学习CSS Flex、Grid布局和响应式设计
• 目标：能独立开发有交互效果的网页

高级阶段（6-12个月）：

• 学习前端框架（Vue或React）
• 学习工程化工具（Webpack/Vite）
• 目标：能独立开发完整的前端项目

专家阶段（1年以上）：

• 深入原理：浏览器、性能优化、框架源码
• 拓展能力：全栈开发、跨端开发
• 目标：成为技术专家或架构师

7.2 高效学习方法

最重要的一条：动手写代码。编程是一门实践的学问，看十遍教程不如自己写一遍。遇到问题也别怕，报错是编程的常态，每个bug都是你进步的阶梯。

7.3 推荐学习资源

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

学习资源

官方文档

在线教程

练习平台

社区论坛

MDN Web Docs最权威的前端文档

W3C 规范官方标准文档

菜鸟教程入门友好

廖雪峰JS教程系统性强

freeCodeCamp免费编程练习

CodePen创意代码分享

CSDN国内技术社区

掘金优质技术文章

GitHub开源项目宝库

重点推荐MDN：MDN Web Docs是前端开发者的"圣经"，由Mozilla维护，内容权威、全面、更新及时。遇到任何HTML/CSS/JS的问题，查MDN就对了。

八、结语

读完这篇文章，相信你已经对前端三件套——HTML、CSS、JavaScript各自的角色有了清晰的认识。让我们再来回顾一下：

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

定义

比喻

关键词

定义

比喻

关键词

定义

比喻

关键词

前端三件套

HTML 结构层

CSS 表现层

JavaScript 行为层

页面的内容和结构

建筑的钢筋骨架

语义化

页面的样式和布局

建筑的装修外观

美观

页面的交互和逻辑

建筑的水电电梯

交互

• HTML：是网页的骨架和内容，回答"有什么"的问题
• CSS：是网页的皮肤和样式，回答"长什么样"的问题
• JavaScript：是网页的大脑和行为，回答"能做什么"的问题

三者相辅相成、缺一不可，共同构成了丰富多彩的Web世界。

作为前端初学者，你不需要一次性把所有东西都学会。从HTML开始，一步一个脚印，每学一部分就动手做点东西出来，慢慢积累，你会发现自己不知不觉中就掌握了前端开发的核心技能。

通往前端大神的路很长，但只要方向正确、脚步不停，就一定能到达。下一篇文章，我们将继续深入探索HTML的应用场景，看看它在Web开发中到底能做哪些事情。

学习提示：看完这篇文章后，建议你回顾一下自己对HTML、CSS、JavaScript的认知。试着用自己的话向别人解释一下这三者分别是什么、有什么用。如果你能讲清楚，说明你真的理解了。

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