HTML部分(1)

因为租服务器，域名部分需要去备案，而我这里要等几天才可以备案，所有先把html部分学习笔记发出来

大多数都是基于 B+S（浏览器+服务器）的结构。而简单的前端实现，基于HTML，CSS，JS
HTML是一个空白的架子，搭建了主题结构，而HTML+CSS就是可以好看的界面，而JS增加了交互性等动态性能

HTML 的基础理论

#mermaid-svg-djnu4MQwGFPpI9mR .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-djnu4MQwGFPpI9mR .label text{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .node rect,#mermaid-svg-djnu4MQwGFPpI9mR .node circle,#mermaid-svg-djnu4MQwGFPpI9mR .node ellipse,#mermaid-svg-djnu4MQwGFPpI9mR .node polygon,#mermaid-svg-djnu4MQwGFPpI9mR .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-djnu4MQwGFPpI9mR .node .label{text-align:center;fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .node.clickable{cursor:pointer}#mermaid-svg-djnu4MQwGFPpI9mR .arrowheadPath{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-djnu4MQwGFPpI9mR .flowchart-link{stroke:#333;fill:none}#mermaid-svg-djnu4MQwGFPpI9mR .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-djnu4MQwGFPpI9mR .edgeLabel rect{opacity:0.9}#mermaid-svg-djnu4MQwGFPpI9mR .edgeLabel span{color:#333}#mermaid-svg-djnu4MQwGFPpI9mR .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-djnu4MQwGFPpI9mR .cluster text{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-djnu4MQwGFPpI9mR .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-djnu4MQwGFPpI9mR text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-djnu4MQwGFPpI9mR .actor-line{stroke:grey}#mermaid-svg-djnu4MQwGFPpI9mR .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-djnu4MQwGFPpI9mR .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-djnu4MQwGFPpI9mR #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-djnu4MQwGFPpI9mR .sequenceNumber{fill:#fff}#mermaid-svg-djnu4MQwGFPpI9mR #sequencenumber{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR #crosshead path{fill:#333;stroke:#333}#mermaid-svg-djnu4MQwGFPpI9mR .messageText{fill:#333;stroke:#333}#mermaid-svg-djnu4MQwGFPpI9mR .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-djnu4MQwGFPpI9mR .labelText,#mermaid-svg-djnu4MQwGFPpI9mR .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-djnu4MQwGFPpI9mR .loopText,#mermaid-svg-djnu4MQwGFPpI9mR .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-djnu4MQwGFPpI9mR .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-djnu4MQwGFPpI9mR .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-djnu4MQwGFPpI9mR .noteText,#mermaid-svg-djnu4MQwGFPpI9mR .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-djnu4MQwGFPpI9mR .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-djnu4MQwGFPpI9mR .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-djnu4MQwGFPpI9mR .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-djnu4MQwGFPpI9mR .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .section{stroke:none;opacity:0.2}#mermaid-svg-djnu4MQwGFPpI9mR .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-djnu4MQwGFPpI9mR .section2{fill:#fff400}#mermaid-svg-djnu4MQwGFPpI9mR .section1,#mermaid-svg-djnu4MQwGFPpI9mR .section3{fill:#fff;opacity:0.2}#mermaid-svg-djnu4MQwGFPpI9mR .sectionTitle0{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .sectionTitle1{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .sectionTitle2{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .sectionTitle3{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-djnu4MQwGFPpI9mR .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .grid path{stroke-width:0}#mermaid-svg-djnu4MQwGFPpI9mR .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-djnu4MQwGFPpI9mR .task{stroke-width:2}#mermaid-svg-djnu4MQwGFPpI9mR .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .taskText:not([font-size]){font-size:11px}#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-djnu4MQwGFPpI9mR .task.clickable{cursor:pointer}#mermaid-svg-djnu4MQwGFPpI9mR .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-djnu4MQwGFPpI9mR .taskText0,#mermaid-svg-djnu4MQwGFPpI9mR .taskText1,#mermaid-svg-djnu4MQwGFPpI9mR .taskText2,#mermaid-svg-djnu4MQwGFPpI9mR .taskText3{fill:#fff}#mermaid-svg-djnu4MQwGFPpI9mR .task0,#mermaid-svg-djnu4MQwGFPpI9mR .task1,#mermaid-svg-djnu4MQwGFPpI9mR .task2,#mermaid-svg-djnu4MQwGFPpI9mR .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutside0,#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutside2{fill:#000}#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutside1,#mermaid-svg-djnu4MQwGFPpI9mR .taskTextOutside3{fill:#000}#mermaid-svg-djnu4MQwGFPpI9mR .active0,#mermaid-svg-djnu4MQwGFPpI9mR .active1,#mermaid-svg-djnu4MQwGFPpI9mR .active2,#mermaid-svg-djnu4MQwGFPpI9mR .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-djnu4MQwGFPpI9mR .activeText0,#mermaid-svg-djnu4MQwGFPpI9mR .activeText1,#mermaid-svg-djnu4MQwGFPpI9mR .activeText2,#mermaid-svg-djnu4MQwGFPpI9mR .activeText3{fill:#000 !important}#mermaid-svg-djnu4MQwGFPpI9mR .done0,#mermaid-svg-djnu4MQwGFPpI9mR .done1,#mermaid-svg-djnu4MQwGFPpI9mR .done2,#mermaid-svg-djnu4MQwGFPpI9mR .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-djnu4MQwGFPpI9mR .doneText0,#mermaid-svg-djnu4MQwGFPpI9mR .doneText1,#mermaid-svg-djnu4MQwGFPpI9mR .doneText2,#mermaid-svg-djnu4MQwGFPpI9mR .doneText3{fill:#000 !important}#mermaid-svg-djnu4MQwGFPpI9mR .crit0,#mermaid-svg-djnu4MQwGFPpI9mR .crit1,#mermaid-svg-djnu4MQwGFPpI9mR .crit2,#mermaid-svg-djnu4MQwGFPpI9mR .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-djnu4MQwGFPpI9mR .activeCrit0,#mermaid-svg-djnu4MQwGFPpI9mR .activeCrit1,#mermaid-svg-djnu4MQwGFPpI9mR .activeCrit2,#mermaid-svg-djnu4MQwGFPpI9mR .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-djnu4MQwGFPpI9mR .doneCrit0,#mermaid-svg-djnu4MQwGFPpI9mR .doneCrit1,#mermaid-svg-djnu4MQwGFPpI9mR .doneCrit2,#mermaid-svg-djnu4MQwGFPpI9mR .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-djnu4MQwGFPpI9mR .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-djnu4MQwGFPpI9mR .milestoneText{font-style:italic}#mermaid-svg-djnu4MQwGFPpI9mR .doneCritText0,#mermaid-svg-djnu4MQwGFPpI9mR .doneCritText1,#mermaid-svg-djnu4MQwGFPpI9mR .doneCritText2,#mermaid-svg-djnu4MQwGFPpI9mR .doneCritText3{fill:#000 !important}#mermaid-svg-djnu4MQwGFPpI9mR .activeCritText0,#mermaid-svg-djnu4MQwGFPpI9mR .activeCritText1,#mermaid-svg-djnu4MQwGFPpI9mR .activeCritText2,#mermaid-svg-djnu4MQwGFPpI9mR .activeCritText3{fill:#000 !important}#mermaid-svg-djnu4MQwGFPpI9mR .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-djnu4MQwGFPpI9mR g.classGroup text .title{font-weight:bolder}#mermaid-svg-djnu4MQwGFPpI9mR g.clickable{cursor:pointer}#mermaid-svg-djnu4MQwGFPpI9mR g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-djnu4MQwGFPpI9mR g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-djnu4MQwGFPpI9mR .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-djnu4MQwGFPpI9mR .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-djnu4MQwGFPpI9mR .dashed-line{stroke-dasharray:3}#mermaid-svg-djnu4MQwGFPpI9mR #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR .commit-id,#mermaid-svg-djnu4MQwGFPpI9mR .commit-msg,#mermaid-svg-djnu4MQwGFPpI9mR .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-djnu4MQwGFPpI9mR g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-djnu4MQwGFPpI9mR g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-djnu4MQwGFPpI9mR g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-djnu4MQwGFPpI9mR .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-djnu4MQwGFPpI9mR .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-djnu4MQwGFPpI9mR .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-djnu4MQwGFPpI9mR .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-djnu4MQwGFPpI9mR .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-djnu4MQwGFPpI9mR .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-djnu4MQwGFPpI9mR .edgeLabel text{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-djnu4MQwGFPpI9mR .node circle.state-start{fill:black;stroke:black}#mermaid-svg-djnu4MQwGFPpI9mR .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-djnu4MQwGFPpI9mR #statediagram-barbEnd{fill:#9370db}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-state .divider{stroke:#9370db}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-djnu4MQwGFPpI9mR .note-edge{stroke-dasharray:5}#mermaid-svg-djnu4MQwGFPpI9mR .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-djnu4MQwGFPpI9mR .error-icon{fill:#522}#mermaid-svg-djnu4MQwGFPpI9mR .error-text{fill:#522;stroke:#522}#mermaid-svg-djnu4MQwGFPpI9mR .edge-thickness-normal{stroke-width:2px}#mermaid-svg-djnu4MQwGFPpI9mR .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-djnu4MQwGFPpI9mR .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-djnu4MQwGFPpI9mR .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-djnu4MQwGFPpI9mR .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-djnu4MQwGFPpI9mR .marker{fill:#333}#mermaid-svg-djnu4MQwGFPpI9mR .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-djnu4MQwGFPpI9mR {color: rgba(0, 0, 0, 0.75);font: ;}

HTML

基础语法

标签HTML语言的整体形式

整体性结构

常用标签

标题,水平线,段落换行,列表

图片,列表,表格,a链接,表单

例子 hello world

这里使用的编辑器是HbuildX
基于默认的模板，创建HTML文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>hello wo。rld</body>
</html>

实现功能

基础语法

HTML 一个超文本标记语言,全是标签

#mermaid-svg-58ORjz0ezXZ92aM6 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .label text{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .node rect,#mermaid-svg-58ORjz0ezXZ92aM6 .node circle,#mermaid-svg-58ORjz0ezXZ92aM6 .node ellipse,#mermaid-svg-58ORjz0ezXZ92aM6 .node polygon,#mermaid-svg-58ORjz0ezXZ92aM6 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-58ORjz0ezXZ92aM6 .node .label{text-align:center;fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .node.clickable{cursor:pointer}#mermaid-svg-58ORjz0ezXZ92aM6 .arrowheadPath{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-58ORjz0ezXZ92aM6 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-58ORjz0ezXZ92aM6 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-58ORjz0ezXZ92aM6 .edgeLabel rect{opacity:0.9}#mermaid-svg-58ORjz0ezXZ92aM6 .edgeLabel span{color:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-58ORjz0ezXZ92aM6 .cluster text{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-58ORjz0ezXZ92aM6 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-58ORjz0ezXZ92aM6 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-58ORjz0ezXZ92aM6 .actor-line{stroke:grey}#mermaid-svg-58ORjz0ezXZ92aM6 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-58ORjz0ezXZ92aM6 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .sequenceNumber{fill:#fff}#mermaid-svg-58ORjz0ezXZ92aM6 #sequencenumber{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .messageText{fill:#333;stroke:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-58ORjz0ezXZ92aM6 .labelText,#mermaid-svg-58ORjz0ezXZ92aM6 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-58ORjz0ezXZ92aM6 .loopText,#mermaid-svg-58ORjz0ezXZ92aM6 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-58ORjz0ezXZ92aM6 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-58ORjz0ezXZ92aM6 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-58ORjz0ezXZ92aM6 .noteText,#mermaid-svg-58ORjz0ezXZ92aM6 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-58ORjz0ezXZ92aM6 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-58ORjz0ezXZ92aM6 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-58ORjz0ezXZ92aM6 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-58ORjz0ezXZ92aM6 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .section{stroke:none;opacity:0.2}#mermaid-svg-58ORjz0ezXZ92aM6 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-58ORjz0ezXZ92aM6 .section2{fill:#fff400}#mermaid-svg-58ORjz0ezXZ92aM6 .section1,#mermaid-svg-58ORjz0ezXZ92aM6 .section3{fill:#fff;opacity:0.2}#mermaid-svg-58ORjz0ezXZ92aM6 .sectionTitle0{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .sectionTitle1{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .sectionTitle2{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .sectionTitle3{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-58ORjz0ezXZ92aM6 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .grid path{stroke-width:0}#mermaid-svg-58ORjz0ezXZ92aM6 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-58ORjz0ezXZ92aM6 .task{stroke-width:2}#mermaid-svg-58ORjz0ezXZ92aM6 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .taskText:not([font-size]){font-size:11px}#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-58ORjz0ezXZ92aM6 .task.clickable{cursor:pointer}#mermaid-svg-58ORjz0ezXZ92aM6 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-58ORjz0ezXZ92aM6 .taskText0,#mermaid-svg-58ORjz0ezXZ92aM6 .taskText1,#mermaid-svg-58ORjz0ezXZ92aM6 .taskText2,#mermaid-svg-58ORjz0ezXZ92aM6 .taskText3{fill:#fff}#mermaid-svg-58ORjz0ezXZ92aM6 .task0,#mermaid-svg-58ORjz0ezXZ92aM6 .task1,#mermaid-svg-58ORjz0ezXZ92aM6 .task2,#mermaid-svg-58ORjz0ezXZ92aM6 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutside0,#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutside2{fill:#000}#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutside1,#mermaid-svg-58ORjz0ezXZ92aM6 .taskTextOutside3{fill:#000}#mermaid-svg-58ORjz0ezXZ92aM6 .active0,#mermaid-svg-58ORjz0ezXZ92aM6 .active1,#mermaid-svg-58ORjz0ezXZ92aM6 .active2,#mermaid-svg-58ORjz0ezXZ92aM6 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-58ORjz0ezXZ92aM6 .activeText0,#mermaid-svg-58ORjz0ezXZ92aM6 .activeText1,#mermaid-svg-58ORjz0ezXZ92aM6 .activeText2,#mermaid-svg-58ORjz0ezXZ92aM6 .activeText3{fill:#000 !important}#mermaid-svg-58ORjz0ezXZ92aM6 .done0,#mermaid-svg-58ORjz0ezXZ92aM6 .done1,#mermaid-svg-58ORjz0ezXZ92aM6 .done2,#mermaid-svg-58ORjz0ezXZ92aM6 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-58ORjz0ezXZ92aM6 .doneText0,#mermaid-svg-58ORjz0ezXZ92aM6 .doneText1,#mermaid-svg-58ORjz0ezXZ92aM6 .doneText2,#mermaid-svg-58ORjz0ezXZ92aM6 .doneText3{fill:#000 !important}#mermaid-svg-58ORjz0ezXZ92aM6 .crit0,#mermaid-svg-58ORjz0ezXZ92aM6 .crit1,#mermaid-svg-58ORjz0ezXZ92aM6 .crit2,#mermaid-svg-58ORjz0ezXZ92aM6 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-58ORjz0ezXZ92aM6 .activeCrit0,#mermaid-svg-58ORjz0ezXZ92aM6 .activeCrit1,#mermaid-svg-58ORjz0ezXZ92aM6 .activeCrit2,#mermaid-svg-58ORjz0ezXZ92aM6 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-58ORjz0ezXZ92aM6 .doneCrit0,#mermaid-svg-58ORjz0ezXZ92aM6 .doneCrit1,#mermaid-svg-58ORjz0ezXZ92aM6 .doneCrit2,#mermaid-svg-58ORjz0ezXZ92aM6 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-58ORjz0ezXZ92aM6 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-58ORjz0ezXZ92aM6 .milestoneText{font-style:italic}#mermaid-svg-58ORjz0ezXZ92aM6 .doneCritText0,#mermaid-svg-58ORjz0ezXZ92aM6 .doneCritText1,#mermaid-svg-58ORjz0ezXZ92aM6 .doneCritText2,#mermaid-svg-58ORjz0ezXZ92aM6 .doneCritText3{fill:#000 !important}#mermaid-svg-58ORjz0ezXZ92aM6 .activeCritText0,#mermaid-svg-58ORjz0ezXZ92aM6 .activeCritText1,#mermaid-svg-58ORjz0ezXZ92aM6 .activeCritText2,#mermaid-svg-58ORjz0ezXZ92aM6 .activeCritText3{fill:#000 !important}#mermaid-svg-58ORjz0ezXZ92aM6 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-58ORjz0ezXZ92aM6 g.classGroup text .title{font-weight:bolder}#mermaid-svg-58ORjz0ezXZ92aM6 g.clickable{cursor:pointer}#mermaid-svg-58ORjz0ezXZ92aM6 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-58ORjz0ezXZ92aM6 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-58ORjz0ezXZ92aM6 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-58ORjz0ezXZ92aM6 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-58ORjz0ezXZ92aM6 .dashed-line{stroke-dasharray:3}#mermaid-svg-58ORjz0ezXZ92aM6 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 .commit-id,#mermaid-svg-58ORjz0ezXZ92aM6 .commit-msg,#mermaid-svg-58ORjz0ezXZ92aM6 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-58ORjz0ezXZ92aM6 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-58ORjz0ezXZ92aM6 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-58ORjz0ezXZ92aM6 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-58ORjz0ezXZ92aM6 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-58ORjz0ezXZ92aM6 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-58ORjz0ezXZ92aM6 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-58ORjz0ezXZ92aM6 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-58ORjz0ezXZ92aM6 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-58ORjz0ezXZ92aM6 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-58ORjz0ezXZ92aM6 .edgeLabel text{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-58ORjz0ezXZ92aM6 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-58ORjz0ezXZ92aM6 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-58ORjz0ezXZ92aM6 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-58ORjz0ezXZ92aM6 .note-edge{stroke-dasharray:5}#mermaid-svg-58ORjz0ezXZ92aM6 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-58ORjz0ezXZ92aM6 .error-icon{fill:#522}#mermaid-svg-58ORjz0ezXZ92aM6 .error-text{fill:#522;stroke:#522}#mermaid-svg-58ORjz0ezXZ92aM6 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-58ORjz0ezXZ92aM6 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-58ORjz0ezXZ92aM6 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-58ORjz0ezXZ92aM6 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-58ORjz0ezXZ92aM6 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-58ORjz0ezXZ92aM6 .marker{fill:#333}#mermaid-svg-58ORjz0ezXZ92aM6 .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-58ORjz0ezXZ92aM6 {color: rgba(0, 0, 0, 0.75);font: ;}

语法

标签

单标签

无属性 <标签名 />

有属性 <标签名属性值/>

双标签

无属性 <标签名></label>

有属性 <标签名属性值/></label>

整体结构

<html></html>表示当前是一个网页结构

<head></head>头部信息,表示网页的基本属性

<body></body>中间是网页区域

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--页面的标题，收藏页面默认的标题--><title></title> <link rel="stylesheet"href="引入的路径" /></head><body>hello world</body>
</html>

doctype 表示对html版本的声明，需要卸载文档第一行（就好像python一样）

常用标签

标签和水平线

标题<h1></h1>..只有6个，不要在里面写h1标签，而h1标签可以被搜索到，而h1太多会进入搜搜引擎黑名单
水平线<hr> 属性width 宽度align 对齐方式size  粗细

换行

换行<p></p> 段落自动换行常用属性align 对其方式left 居左对齐（默认）right justify两端，center<br> 换行操作html里面空格是不识别的区别： 换行的话两者之间间隙会比较小，而br的话两者区别会比较大

列表

列表无序列表<ul><li></li></ul>属性type 列表的图标square 实心方块circl  空心圆disc   实心圆有序列表格式<ol><li></li></ol>常用属性type 列表的图标1 数字序号a 小写字母A 大写字母i 小写罗马字母I 大写罗马字母

 列表<br><ul type="circle"><li>自传</li><li>后青春期的诗</li><li>第二人生</li></ul><ol type="I"><li>自传</li><li>后青春期的诗</li><li>第二人生</li></ol>

实现效果如下

从零开始搭建个人网页II-前端部分相关推荐

从零开始搭建vue+element-ui的前端开发框架
最近需要进行下前端开发,特此记录下前端开发框架搭建过程 1 安装node.js 官网下载安装即可官网地址:http://nodejs.cn/download/ 2 安装webpack 在命令行里面输 ...
从零开始搭建一个自己的前端脚手架(一)：基础篇
文章目录前言 1.1 脚手架本质 1.2 脚手架工作流程 1.3 依赖工具库 1.4 脚手架目录结构一.功能拆分 1.1 创建bin目录全局调试 1.2 引入commander简化命令解析 1.3 ...
使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中,我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目,该项目将包含三个不同的子应用.我们将使用Webpack包管理工具和yarn来管理依赖关系,并使用Single- ...
带api的php探针,从零开始搭建前端监控系统（一）——web探针sdk
前言本系列文章旨在讲解如何从零开始搭建前端监控系统. 项目已经开源项目地址: 您的支持是我们不断前进的动力. 喜欢请start!!! 喜欢请start!!! 喜欢请start!!! 本文是该系列第 ...
jeecgboot 前端环境搭建_如何从零开始搭建前端监控平台？
前端监控与优化,一直是前端领域的重要研究方向.尤其在当下页面功能繁杂.页面延迟容忍度降低的时代,一套符合自身业务需要的监控平台,往往能让页面性能优化事半功倍. 现在市面上的大多数监控平台都是对性能.网 ...
教你从零开始搭建一款前端脚手架工具
本文系原创,转载请附带作者信息:Jrain Lau 项目地址:https://github.com/jrainlau/s... 前言在实际的开发过程中,从零开始建立项目的结构是一件让人头疼的事情,所 ...
从零开始搭建Node.js, Express, Ejs, Mongodb服务器
http://www.toolmao.com/nodejs-express-ejs-mongodb-server 本文改自非鱼的<[翻译]前端开发人员入门指南,从零开始搭建Node.js, Ex ...
如何从零开始搭建智能外呼系统
前言:本文作者是咱们"AI产品经理大本营"团员@何静 ,她用非常接地气的文字介绍了智能外呼系统的必备入门信息,对于不是这个细分领域的AI从业者来说,非常值得一看. 1 序言随着人 ...
从零开始搭建智能Ai外呼系统？
前言:本文作者是咱们"AI产品经理大本营"团员@何静 ,她用非常接地气的文字介绍了智能外呼系统的必备入门信息,对于不是这个细分领域的AI从业者来说,非常值得一看. 1--序言随着 ...

从零开始搭建个人网页II-前端部分

HTML部分(1)

HTML 的基础理论

基础语法

常用标签

标签和水平线

换行

列表

从零开始搭建个人网页II-前端部分相关推荐

最新文章

热门文章