📖网页代码符号&标签小白学习手册

通俗比喻学习：HTML、CSS、JS三者关系，常用符号、标签含义，适合修改个人主页时查阅参考。
💡通俗比喻记忆：
一个完整网页 = 骨架(HTML) + 衣服化妆(CSS) + 大脑手脚(JS)

一、三大语言存放容器

语言 存放标签 生活化比喻 作用说明
HTML 直接写，不需要特殊包裹标签 🦴骨架 定义页面上有哪些内容：标题、图片、卡片、按钮
CSS <style> </style> 👗衣服化妆品 控制外观：颜色、发光、圆角、阴影、动画、布局排版
JS <script> </script> 🧠大脑手脚 控制行为：点击响应、计时器、粒子飘落、交互逻辑
⚠️踩坑提醒：CSS代码不能放进<script>标签里面，JS不能放进<style>，放错浏览器直接忽略，看不到任何效果！
<style> .title-box { color:red; } /* CSS写在这里 */ </style> <script> let a = 100; /* JS写在这里 */ </script>

二、高频符号速查表（修改主页经常遇到）

符号 名称 作用通俗解释 示例
< > 尖括号 包裹标签，告诉浏览器这是一个页面元素 <div>
</ 闭合标签斜杠 代表这个标签到此结束，绝大多数标签成对出现 </div>
= 等号 给标签属性赋值 class="snake"
" " 双引号 把属性的文字值包起来 src="./static/xxx.svg"
. 英文点 CSS里面选中class类，最常用！ .title-box
# 井号 CSS里面选中id唯一标识 #snake-img
{ } 大括号 CSS放一堆样式；JS放一段代码块 { color:#fff; }
: 冒号 CSS属性和值中间分隔；JS三元判断 position: relative;
; 分号 CSS每条样式结尾；JS每一句代码结尾 border‑radius:12px;
( ) 小括号 JS函数、判断条件包裹 Math.random()
// 双斜杠 JS单行注释，只给人看，浏览器不执行 // 这是注释说明
/* */ 斜杠星号 CSS注释，包裹多行说明文字 /* 标题特效 */
<!-- --> HTML注释标记 HTML代码注释，写备注，不会在网页显示 <!-- 板块标题 -->
${ } 美元+大括号 JS模板字符串，把变量嵌入文字 `${day}天`

三、HTML常用标签清单（你的个人主页全部在用）

标签 英文原意 通俗作用
<div> division分区 万能大盒子，用来分组布局，大块内容容器
<span> span跨度 小行内盒子，专门包裹一小段文字，比如标题文字
<h1~h6> heading标题 各级标题，h1最大，h6最小，卡片标题h3
<p> paragraph段落 普通正文段落文字
<a> anchor锚 超链接，点击跳转网页
<img> image图片 展示图片
<button> button按钮 可点击按钮
<canvas> canvas画布 JS绘图，下雨、字符雨特效都画在canvas上
<svg> ‑ 矢量图标，放大不会模糊，导航小图标
<style> style样式 存放CSS化妆代码
<script> script脚本 存放JS交互逻辑代码

四、CSS语法拆解示例

CSS固定格式：选择器 { 属性: 值; }
/* 选择器：选中class="title‑box"的元素 */ .title‑box { position: relative; /* 属性: 值; 设置定位 */ padding: 10px 22px; /* 内边距，撑开盒子大小 */ border‑radius:999px; /* 圆角，999px变成胶囊圆 */ color: transparent; /* 文字透明 */ transition: all 0.4s ease; /* 过渡动画，变化时平滑 */ animation: textShine 2.8s infinite; /* 循环动画 */ } /* :hover 伪类：鼠标悬浮的时候生效 */ .title‑box:hover { transform: scale(1.04); }

五、JS基础语法简单示例

// const：定义不变的常量 const COUNT = 55; // let：定义可以修改的变量 let drops = []; // 函数：封装一段可以重复执行的代码 function draw(){ // for循环：重复执行很多次 for(let i=0;i<COUNT;i++){ // if 判断：满足条件才执行里面代码 if(d.y > h){ d.y = ‑20; } } } draw(); //调用函数，执行代码
💡小白记忆小口诀：
1、HTML搭骨架，CSS穿衣服，JS会动脑
2、标签大部分成对出现，有开头就要有闭合结尾
3、.代表class，#代表id
4、CSS格式永远是 属性: 值; 分号不能少
5、注释只是给自己看，浏览器会直接忽略，不会显示到网页
← 返回技术折腾目录