一、HTML入门
1.1 A_1_常用文本标签.html
1.1.1 代码
<!DOCTYPE html>
<!-- 文档声明：告诉浏览器当前页面是HTML5文档 -->
<html lang="en">
<!-- html根标签，lang="en"代表页面语言为英文 -->
<head>
<!-- 头部区域：存放页面配置信息，内容不会直接显示在页面上 -->
<meta charset="UTF-8">
<!-- 设置字符编码为UTF-8，支持中文、英文等全球文字，防止乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 视口适配：移动端自适应，页面宽度等于设备宽度，初始缩放1倍 -->
<title>常见文本标签</title>
<!-- 浏览器标签页标题 -->
</head>
<body>
<!-- 主体区域：所有页面可见内容全部写在body内 -->
<!-- h1~h6 标题标签，h1一级标题字号最大，h6最小，一个页面仅推荐1个h1 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- p 段落标签，自带上下默认外边距，自动换行 -->
<p>段落标签</p>
<p>更改文本样式：
<!-- b 纯视觉加粗，无语义 -->
<b>字体加粗</b>、
<!-- i 纯视觉斜体，无语义 -->
<i>斜体</i>、
<!-- u 文本下划线 -->
<u>下划线</u>、
<!-- s 删除线，文字中间划横线 -->
<s>删除线</s>
</p>
<!-- ul 无序列表，默认圆点符号，搭配li列表项使用 -->
<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
<!-- ol 有序列表，默认数字序号，搭配li列表项使用 -->
<ol>
<li>有序列表元素</li>
<li>有序列表元素</li>
<li>有序列表元素</li>
</ol>
<h1>table row 行标签 tr</h1>
<h1>table data 单元格/列数据 td</h1>
<h1>table header 表头单元格 th</h1>
<!-- table 表格标签，border="1" 设置表格边框宽度为1像素 -->
<table border="1">
<!-- tr table row：表格一行 -->
<tr>
<!-- th table header：表头单元格，默认文字加粗、居中 -->
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<!-- 第二行数据 -->
<tr>
<!-- td table data：普通数据单元格 -->
<td>表格数据1</td>
<td>表格数据2</td>
<td>表格数据3</td>
</tr>
<!-- 第三行数据 -->
<tr>
<td>表格数据4</td>
<td>表格数据5</td>
<td>表格数据6</td>
</tr>
</table>
</body>
</html>
1.1.2 结果
1.2 A_2_HTML的属性.html
1.2.1代码
<!DOCTYPE html>
<!-- HTML5文档声明，告知浏览器文档使用HTML5规范解析 -->
<html lang="en">
<!-- html是页面根标签，lang="en" 设置页面默认语言为英文 -->
<head>
<!-- head头部：存放页面元信息，不会在页面可视化区域展示 -->
<meta charset="UTF-8">
<!-- 设置网页字符编码为UTF-8，兼容中英文，解决中文乱码问题 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 移动端适配：页面宽度等于设备屏幕宽度，初始缩放比例1倍 -->
<title>HTML的属性</title>
<!-- 浏览器顶部标签栏显示的标题文字 -->
</head>
<body>
<!-- body主体标签：所有页面可见内容都写在这里 -->
<!-- a标签：超链接标签，href是核心属性，指定跳转目标地址 -->
<a href="https://www.baidu.com">这是一个超链接</a>
<!-- br 换行标签，单标签，实现文字/元素强制换行 -->
<br>
<!-- target="_blank" 属性：点击链接后在新标签页打开页面 -->
<a href = "https://www.baidu.com" target="_blank">这是第二个超链接</a>
<!-- hr 水平线标签，页面生成一条分割横线 -->
<hr>
<!-- img图片标签，单标签；src属性填写图片路径，用于加载图片 -->
<img src="img/image.png" alt ="" >
<hr>
<!-- alt属性：图片加载失败时显示的替代提示文字，提升无障碍访问 -->
<img src="img/imag.png" alt ="该图片无法显示" >
<hr>
<!-- src支持网络图片地址；width宽度、height高度属性控制图片尺寸 -->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="" width="100" height = "70">
</body>
</html>
1.2.2 结果
1.3 A_3_HTML区块.html
1.3.1代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<!-- 头部区域，存放页面的元数据 -->
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8，确保正确显示中文等字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>HTML区块</title>
<!-- 页面标题，显示在浏览器标签页上 -->
</head>
<body>
<!-- 页面主体，包含所有可见内容 -->
<!-- ================= div 区块区域 ================= -->
<!-- div 是块级元素（block-level），独占一行，常用于页面布局 -->
<!-- class 属性用于给元素指定类名，方便 CSS 样式选择 -->
<div class="nav">
<!-- 导航链接区域，class="nav" 通常用于表示导航栏 -->
<a href="#">链接1</a>
<a href="#">链接1</a>
<a href="#">链接1</a>
<a href="#">链接1</a>
<a href="#">链接1</a>
<a href="#">链接1</a>
<a href="#">链接1</a>
<a href="#">链接1</a>
<!-- href="#" 表示空链接，点击后不会跳转 -->
</div>
<!-- 水平分割线，用于视觉上分隔不同区块 -->
<hr>
<!-- 内容区块，class="content" 通常用于表示主要内容区域 -->
<div class="content">
<h1>文章标题</h1>
<!-- h1 是一级标题，通常用于文章主标题 -->
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<!-- p 是段落标签（paragraph），每个 p 独占一行，前后有默认间距 -->
</div>
<hr>
<!-- 通用 div 区块 -->
<div class="div">
<!-- span 是行内元素（inline），不会独占一行，多个 span 会在同一行内依次排列 -->
<!-- 常用于对文本中的某一部分单独设置样式 -->
<span> 这是第一个span标签</span>
<span> 这是第一个span标签</span>
<span> 这是第一个span标签</span>
</div>
</body>
</html>
1.3.2结果
1.4 A_4_HTML表单.html
1.4.1 代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<!-- 头部区域，存放页面的元数据 -->
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8，确保正确显示中文等字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>表单</title>
<!-- 页面标题，显示在浏览器标签页上 -->
</head>
<body>
<!-- 页面主体 -->
<!-- form 表单标签 -->
<!-- action 属性：指定表单提交的目标地址，# 表示提交到当前页面 -->
<form action="#">
<!-- label 标签：为表单元素定义标注（标签），提升可访问性 -->
<!-- for 属性的值应与对应 input 的 id 值一致，点击 label 时会自动聚焦到对应的输入框 -->
<label for="username">用户名：</label>
<!-- input 输入框 -->
<!-- type="text"：单行文本输入框 -->
<!-- id="username"：元素的唯一标识，与 label 的 for 属性关联 -->
<input type="text" id="username">
<br>
<!-- 这里使用了 span 而非 label，span 是普通行内元素，没有 label 的关联功能 -->
<!-- 注意：for 属性对 span 无效，且 id=" pwd" 前多了一个空格，属于书写错误 -->
<span for="pdw"> 密码：</span>
<!-- type="password"：密码输入框，输入内容会被隐藏（显示为圆点或星号） -->
<!-- placeholder 属性：输入框的占位提示文本，获得焦点或输入内容后会消失 -->
<input type="password" id="pwd" placeholder="请输入内容">
<br>
<span>确认密码：</span>
<!-- type="text"：普通文本框 -->
<!-- value 属性：设置输入框的默认值（会直接显示在框内） -->
<!-- 注意：这里用 value 而非 placeholder，所以"请输入内容"会作为默认文本显示 -->
<input type="text" value="请输入内容">
<hr>
<!-- 单选框区域 -->
<label>性别 </label>
<!-- type="radio"：单选按钮，同一组单选框应使用相同的 name 属性值 -->
<!-- name="gender"：将两个单选框归为一组，用户只能选中其中一个 -->
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<hr>
<!-- 复选框区域 -->
<label>爱好： </label>
<!-- type="checkbox"：复选框，用户可以选中多个选项 -->
<!-- 注意：这里的 name 属性值相同，实际开发中通常会给每个复选框不同的 value 值来区分 -->
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">RAP
<input type="checkbox" name="hobby">篮球
<hr>
<!-- type="submit"：提交按钮，点击后会将表单数据提交到 action 指定的地址 -->
<!-- value 属性：设置按钮上显示的文本 -->
<input type="submit" value="上传">
</form>
</body>
</html>
1.4.2 结果
1.5 A_5_CSS三种导入方式.html
1.5.1代码
<!DOCTYPE html>
<!-- HTML5文档声明，告诉浏览器以HTML5标准解析页面 -->
<html lang="en">
<!-- html根标签，lang="en" 设置页面语言为英文 -->
<head>
<!-- 头部区域，存放页面元信息、外部资源、内部CSS样式等，不在页面直接展示 -->
<meta charset="UTF-8">
<!-- 设置网页字符编码为UTF-8，避免中文乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 移动端适配：页面宽度等于设备屏幕宽度，初始缩放1倍 -->
<title>CSS三种导入方式</title>
<!-- 浏览器标签页标题 -->
<!-- link标签：引入外部CSS样式表，属于外部样式 -->
<!-- rel="stylesheet" 声明当前引入文件是样式表；href填写css文件相对路径 -->
<link rel="stylesheet" href="./css/style.css">
<!-- style标签：内部样式表，写在head中，作用于当前整个页面 -->
<style>
/* CSS单行/多行注释，用于解释样式代码，浏览器不会执行 */
/* 样式优先级规则：内联样式 > 内部样式表 > 外部样式表 */
p{
/* 内部样式表：给所有p标签设置样式 */
color: blue; /* 文字颜色蓝色 */
font-size:26px; /* 字体大小26像素 */
}
h2{
color:aqua; /* 所有h2文字颜色青色 */
}
/* 注释掉的代码，不会生效，相当于暂时删除该样式
h3{
color:black
}
*/
</style>
</head>
<body>
<!-- 页面可视内容区域 -->
<p>这是一个应用了CSS样式的文本</p>
<!-- 内联样式：直接在标签内添加style属性，仅作用于当前这一个标签，优先级最高 -->
<h1 style="color:red">这是一个一级标题标签，使用内联样式</h1>
<!-- 受head内style内部样式控制，文字青色 -->
<h2>这是一个二级标题，应用内部样式</h2>
<!-- 受link引入的外部css文件样式控制 -->
<h3>这是一个三级标题，应用外部样式</h3>
</body>
</html>
1.5.2 结果
1.6 A_6_CSS选择器.html
1.6.1代码
<!DOCTYPE html>
<!-- HTML5文档声明，告知浏览器使用HTML5标准解析页面 -->
<html lang="en">
<!-- html根标签，lang="en" 设置页面语言为英文 -->
<head>
<!-- 头部区域，存放页面配置、样式等非可视化内容 -->
<meta charset="UTF-8">
<!-- 设置字符编码为UTF-8，防止中文乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 移动端自适应，页面宽度等于设备屏幕，初始缩放1倍 -->
<title>CSS选择器</title>
<!-- 浏览器标签标题 -->
<style>
/* CSS内部样式表，书写各类选择器样式 */
/* 通用/通配符选择器 * 匹配页面所有标签 */
*{
font-family:'楷体' /* 全局所有文字字体改为楷体 */
}
/* 标签(元素)选择器：直接写标签名，匹配页面全部该标签 */
h2{
color:aqua; /* 所有h2文字青色 */
}
/* 类选择器：以.开头，匹配class等于该名称的元素，可多个元素共用 */
.hightlight{
background-color:yellow /* 背景黄色 */
}
/* id选择器：以#开头，匹配id等于该名称的元素，页面id唯一不可重复 */
#header{
font-size:35px; /* 字体35像素 */
}
/* 子元素选择器 > 只匹配父级下直接一级子元素，隔代不生效 */
.father > .son{
color:yellowgreen;
}
/* 后代选择器 空格分隔：匹配父元素内部所有后代（儿子、孙子、重孙全部生效） */
.father p{
color:brown;
font-size:20px;
}
/* CSS选择器基础优先级： id选择器 > 类选择器 > 标签选择器 > 通配符选择器 */
/* 相邻兄弟选择器 + 匹配紧挨着当前元素后面的第一个同级元素 */
h3 + p{
background-color:red;
}
/* 伪类选择器 :hover 鼠标悬浮在元素上时触发样式 */
#element:hover{
background-color:rgb(38, 0, 255); /* 悬浮背景蓝色 */
}
</style>
</head>
<body>
<!-- 页面可视区域 -->
<h1>不同类型的CSS选择器</h1>
<!-- h2标签，匹配上方标签选择器h2样式 -->
<h2>这是一个元素选择器示例</h2>
<!-- class="hightlight" 匹配类选择器 .hightlight -->
<h3 class="hightlight">这是一个类选择器示例</h3>
<!-- 无对应class，不触发黄色背景样式 -->
<h3 >这是另一个类选择器示例</h3>
<!-- id="header" 匹配id选择器 #header -->
<h4 id="header">这是一个id选择器示例</h4>
<hr>
<!-- 父容器 class="father" -->
<div class="father">
<!-- father直接子元素 class="son"，匹配子选择器 .father > .son -->
<p class = "son">这是一个子元素选择器示例</p>
<div>
<!-- father的孙子p标签，匹配后代选择器 .father p -->
<p class="grandson">这是一个后代选择器示例</p>
</div>
</div>
<hr>
<p>这是普通的p标签</p>
<!-- h3紧跟在p后面，下方第一个p会被相邻兄弟选择器 h3 + p 选中 -->
<h3>这是一个相邻兄弟选择器示例</h3>
<P>这是另一个p标签 </P>
<hr>
<!-- id="element"，鼠标悬浮触发:hover伪类样式 -->
<h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>
1.6.2结果
1.7 A_7_CSS常用属性.html
1.7.1 代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>CSS常用属性</title>
<!-- 页面标题 -->
<style>
/* ================= 类选择器样式定义 ================= */
/* 定义一个名为 block 的类样式 */
.block {
background-color: aqua; /* 背景颜色设为青色 */
width: 150px; /* 宽度设为 150 像素 */
height: 100px; /* 高度设为 100 像素 */
/* div 默认就是块级元素，天然支持设置宽高 */
}
/* 定义一个名为 inline 的类样式 */
.inline {
background-color: brown; /* 背景颜色设为棕色 */
/* span 是行内元素，设置宽高无效，背景只包裹内容 */
}
/* 定义一个名为 inline-block 的类样式 */
.inline-block {
width: 100px; /* 宽度设为 100 像素 */
height: 100px; /* 高度设为 100 像素 */
/* img 默认是行内块元素，天然支持设置宽高 */
}
/* 定义一个名为 div_inline 的类样式 */
.div_inline {
display: inline; /* 将元素显示模式改为行内元素 */
background-color: aquamarine; /* 背景颜色设为碧绿色 */
/* 改为行内后，宽高设置将失效 */
}
/* 定义一个名为 span-inline-block 的类样式 */
.span-inline-block {
display: inline-block; /* 将元素显示模式改为行内块元素 */
background-color: blueviolet; /* 背景颜色设为蓝紫色 */
width: 300px; /* 宽度设为 300 像素 */
/* 改为行内块后，可以设置宽高，且不会独占一行 */
}
</style>
</head>
<body>
<!-- 页面主体 -->
<!--
font 复合属性：可以一次性设置多个字体相关属性
语法顺序：font-style font-weight font-size font-family
这里设置了：加粗(bolder)、50像素大小、楷体('kaiti')
-->
<h1 style="font: bolder 50px 'kaiti';">这是一个font复合属性示例</h1>
<!--
line-height 属性：设置行高（行与行之间的垂直距离）
这里设置为 40px，使文本行间距变大，提升可读性
-->
<p style="line-height: 40px">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
<hr>
<!-- 块级元素演示 -->
<!-- div 是块级元素，独占一行，可以设置宽高和背景色 -->
<div class="block">这是一个块级元素</div>
<!-- 行内元素演示 -->
<!-- span 是行内元素，不独占一行，宽高设置无效，背景只包裹文字 -->
<span class="inline">这是一个行内元素</span>
<!-- img 是行内块元素（inline-block），可以设置宽高，且与其他行内元素在同一行 -->
<img src="img/image.png" alt="" class="inline-block">
<hr>
<!-- display 属性演示 -->
<h2>display</h2>
<!--
将 div（原本是块级元素）通过 display: inline 转换为行内元素
转换后：不独占一行，宽高设置失效，背景只包裹内容
-->
<div class="div_inline">这是一个转换成行内元素的div标签</div>
<!--
将 span（原本是行内元素）通过 display: inline-block 转换为行内块元素
转换后：不独占一行，但可以设置宽高，背景覆盖整个宽高区域
-->
<span class="span-inline-block">这是一个转换成行内块元素的span标签</span>
</body>
</html>
1.7.2 结果
1.8 A_8_CSS盒子模型.html
1.8.1 代码
<!DOCTYPE html>
<!-- HTML5文档声明，告诉浏览器按照HTML5标准解析页面 -->
<html lang="en">
<!-- 页面根标签，lang="en" 定义页面语言为英文 -->
<head>
<!-- 头部区域，存放页面配置、CSS样式等，内容不会直接展示在页面 -->
<meta charset="UTF-8">
<!-- 设置网页字符编码为UTF-8，防止中文乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 移动端适配，页面宽度等于设备屏幕宽度，初始缩放比例1倍 -->
<title>CSS盒子模型</title>
<!-- 浏览器标签页标题 -->
<style>
/* 类选择器，盒子模型完整演示 */
.demo{
background-color:red; /* 盒子内容区域背景红色 */
display:inline-block; /* 转为行内块元素，多个盒子横向排列，同时支持宽高、内外边距 */
border:5px solid yellowgreen; /* 简写边框：宽度5px、实线、黄绿色 */
padding:50px; /* 内边距：内容与边框之间距离，四周均50px，会撑大盒子整体尺寸 */
margin:40px; /* 外边距：盒子与其他盒子之间的距离，四周均40px，盒子外部留白 */
}
/* 单独拆分边框四边样式演示 */
.border-demo{
background-color:rgb(68, 255, 0); /* 内容区域绿色背景 */
width:300px; /* 盒子内容宽度300px */
height:300px; /* 盒子内容高度300px */
/* border-style 依次设置 上、右、下、左 四条边框样式（顺时针） */
border-style: solid dashed dotted double;
/* border-width 顺时针：上10px、右5px、下30px、左50px */
border-width:10px 5px 30px 50px;
border-color:rgb(255, 183, 0); /* 四条边框统一橙色 */
}
</style>
</head>
<body>
<!-- 盒子模型完整示例div：包含内容、内边距、边框、外边距 -->
<div class="demo"> B站学习</div>
<!-- 四边边框样式、宽度分开设置的演示盒子 -->
<div class="border-demo">这是一个边框示例</div>
</body>
</html>
1.8.2 结果
1.9 A_9_CSS浮动布局.html
1.9.1 代码
<!DOCTYPE html>
<!-- HTML5文档声明，告知浏览器使用HTML5标准解析页面 -->
<html lang="en">
<!-- html根标签，lang="en" 设置页面语言为英文 -->
<head>
<!-- 头部区域，存放页面元信息与CSS样式，不会直接展示在页面 -->
<meta charset="UTF-8">
<!-- 设置网页字符编码为UTF-8，避免中文乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 移动端适配：页面宽度等于设备屏幕宽度，初始缩放1倍 -->
<title>CSS浮动布局</title>
<!-- 浏览器标签栏标题 -->
<style>
/* 父容器盒子 */
.father{
background-color:aquamarine; /* 父盒子背景海绿色 */
/* height:150px; 固定高度方案，写死高度无法自适应子元素高度 */
border:3px solid brown; /* 3px棕色实线边框 */
/* 清除浮动方案1：overflow:hidden，触发BFC，解决父元素高度塌陷 */
overflow:hidden;
}
/* 清除浮动方案2：伪元素清除法（经典万能方案，注释状态未启用） */
/* .father::after{
content:""; // 生成空文本内容
display:block; // 转为块级元素
clear:both; // 清除左右浮动
} */
/* 左浮动子盒子 */
.left-son{
width: 100px;
height:100px;
background-color:rgb(0, 255, 17); /* 绿色背景 */
float:left; /* 设置元素向左浮动，脱离标准文档流，横向靠左排列 */
}
/* 右浮动子盒子 */
.right-son{
width: 100px;
height:100px;
background-color:rgb(255, 217, 0); /* 黄色背景 */
float:right; /* 设置元素向右浮动，脱离标准文档流，横向靠右排列 */
}
</style>
</head>
<body>
<!-- 父容器，包含两个浮动子元素 -->
<div class="father">
<!-- 左浮动方块 -->
<div class = "left-son">左浮动</div>
<!-- 右浮动方块 -->
<div class = "right-son">右浮动</div>
</div>
</body>
</html>
1.9.2 结果
1.10 A_10_CSS定位.html
1.10.1 代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>CSS定位</title>
<!-- 页面标题 -->
<style>
/* ================= 第一组：相对定位演示 ================= */
/* 父容器 box */
.box {
height: 350px; /* 高度 350 像素 */
background-color: aqua; /* 背景颜色设为青色 */
/* 注意：没有设置 position，默认为 static（静态定位） */
}
/* 普通盒子（无定位） */
.box-normal {
width: 100px; /* 宽度 100 像素 */
height: 100px; /* 高度 100 像素 */
background-color: rgb(0, 255, 200); /* 背景颜色设为青绿色 */
/* 默认 position: static，按正常文档流排列 */
}
/* 相对定位盒子 */
.box-relative {
width: 100px; /* 宽度 100 像素 */
height: 100px; /* 高度 100 像素 */
background-color: rgb(255, 94, 0); /* 背景颜色设为橙色 */
position: relative; /* 设置为相对定位 */
/*
相对定位的特点：
-
相对于元素"原本在文档流中的位置"进行偏移
-
偏移后，原来的位置仍然被保留（不会塌陷）
-
不会脱离文档流，其他元素仍按它未偏移时的位置布局
*/
left: 120px; /* 相对于原位置向右偏移 120 像素 */
top: 40px; /* 相对于原位置向下偏移 40 像素 */
}
/* ================= 第二组：绝对定位演示 ================= */
/* 父容器 box2 */
.box2 {
height: 350px; /* 高度 350 像素 */
background-color: rgb(0, 255, 106); /* 背景颜色设为绿色 */
margin-bottom: 300px; /* 下外边距 300 像素，与下方内容拉开距离 */
/* 注意：没有设置 position，默认为 static */
}
/* 绝对定位盒子 */
.box-absolute {
width: 100px; /* 宽度 100 像素 */
height: 100px; /* 高度 100 像素 */
background-color: rgb(255, 94, 0); /* 背景颜色设为橙色 */
position: absolute; /* 设置为绝对定位 */
/*
绝对定位的特点：
-
相对于"最近的已定位（非 static）祖先元素"进行定位
-
如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器视口/文档左上角）
-
完全脱离文档流，不占据空间，其他元素会忽略它的存在
*/
left: 120px; /* 相对于定位参考点向右偏移 120 像素 */
/* 未设置 top，默认为 auto，保持在文档流中的垂直位置 */
}
/* ================= 第三组：固定定位演示 ================= */
/* 固定定位盒子 */
.box-fixed {
width: 100px; /* 宽度 100 像素 */
height: 100px; /* 高度 100 像素 */
background-color: rgb(195, 0, 255); /* 背景颜色设为紫色 */
position: fixed; /* 设置为固定定位 */
/*
固定定位的特点：
-
相对于浏览器视口（viewport）进行定位
-
完全脱离文档流，不占据空间
-
页面滚动时，元素位置固定不变（常用于回到顶部按钮、固定导航栏等）
*/
right: 0; /* 距离视口右边缘 0 像素（贴靠右侧） */
top: 300px; /* 距离视口顶部 300 像素 */
}
</style>
</head>
<body>
<!-- 页面主体 -->
<!-- ================= 相对定位演示区域 ================= -->
<h1>相对定位</h1>
<div class="box">
<!-- 普通盒子1：按正常文档流排列 -->
<div class="box-normal"></div>
<!-- 相对定位盒子：相对于自己原本的位置向右120px、向下40px偏移 -->
<!-- 原本的位置仍然被保留，不会影响其他元素的布局 -->
<div class="box-relative"></div>
<!-- 普通盒子2：仍然按照 box-relative 未偏移时的位置来排列 -->
<div class="box-normal"></div>
</div>
<hr>
<!-- ================= 绝对定位演示区域 ================= -->
<h1>绝对定位</h1>
<div class="box2">
<!-- 普通盒子1：按正常文档流排列 -->
<div class="box-normal"></div>
<!-- 绝对定位盒子：由于父元素 .box2 没有设置定位（position: static），
所以它会继续向上寻找已定位的祖先元素。如果没有，则相对于文档左上角定位。
该元素脱离文档流，不占据空间，后面的普通盒子会"顶上来" -->
<div class="box-absolute"></div>
<!-- 普通盒子2：由于 box-absolute 脱离了文档流，这个盒子会紧挨着第一个 box-normal 排列 -->
<div class="box-normal"></div>
</div>
<hr>
<!-- ================= 固定定位演示区域 ================= -->
<h1>固定定位</h1>
<!-- 固定定位盒子：始终固定在视口右侧、距离顶部300px的位置 -->
<!-- 即使页面滚动，该盒子也会保持在同一位置不动 -->
<div class="box-fixed"></div>
</body>
</html>
1.10.2 结果
1.11A_11_js入门.html
1.11.1 代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>Document</title>
<!-- 页面标题 -->
<!-- ================= 方式一：内联脚本（写在 head 中） ================= -->
<!--
script 标签用于嵌入或引用 JavaScript 代码
没有 src 属性时，标签内部的内容会被当作 JS 代码直接执行
放在 head 中的脚本会在页面内容加载之前执行
-->
<script>
// console.log()：在浏览器控制台输出一条信息
console.log("hello world, head标签的内联样式");
</script>
<!-- ================= 方式二：外部脚本 ================= -->
<!--
通过 src 属性引入外部 JS 文件
浏览器会向指定路径发起请求，下载并执行该文件中的代码
外部脚本的优势：代码分离、便于维护、可被浏览器缓存
注意：script 标签是双标签，即使引入外部文件也不能写成自闭合形式
-->
<script src="./js/myscript.js"></script>
</head>
<body>
<!-- 页面主体 -->
<h1>JavaScript的导入</h1>
<!-- ================= 方式三：内联脚本（写在 body 中） ================= -->
<!--
放在 body 底部的脚本会在页面内容加载完成之后执行
这是推荐的做法，可以避免脚本阻塞页面渲染
-->
<script>
// 在浏览器控制台输出信息
console.log("hello world,body标签的内联样式");
// alert()：弹出一个警告对话框，显示指定内容
// 代码执行到此处会暂停，直到用户点击"确定"按钮
alert("hello world,body标签的内联样式");
</script>
</body>
</html>
1.11.1.2 导入外链接样式：./js/myscript.js"
console.log("hello 外联样式");
1.11.2 结果
1.12A_12_变量和数据类型.html
1.12.1代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>变量和数据类型</title>
<!-- 页面标题 -->
</head>
<body>
<!-- 页面主体 -->
<h1>JavaScript的导入</h1>
<script>
/* ================= 变量声明 ================= */
// var：ES5 及之前的变量声明方式
// 特点：存在变量提升（hoisting），函数作用域，可以重复声明
// 只声明未赋值时，默认值为 undefined
var x;
// let：ES6 引入的变量声明方式（推荐）
// 特点：块级作用域，不存在变量提升，不能重复声明，可以修改值
// 这里声明 y 并赋值为数字 5
let y = 5;
// const：ES6 引入的常量声明方式（推荐）
// 特点：块级作用域，声明时必须赋值，之后不可重新赋值
// 通常用于声明不会改变的值（如数学常数、配置项等）
// 按惯例，常量名使用大写字母，多个单词用下划线分隔
const PI = 3.14;
// console.log()：在浏览器控制台输出一个或多个值，用空格分隔
// 输出结果：undefined 5 3.14
console.log(x, y, PI);
/* ================= 数据类型演示 ================= */
// 字符串（String）：用单引号、双引号或反引号包裹的文本
// JavaScript 中字符串可以包含中文、英文、符号等任意字符
let name = "如花";
// 输出结果：如花
console.log(name);
// null：表示"空值"或"无对象"
// 它是一个特殊的原始值，表示有意的"什么都没有"
// 注意：typeof null 的结果是 "object"（这是 JS 的历史遗留 bug）
let empty_value = null;
// 输出结果：null
console.log(empty_value);
</script>
</body>
</html>
1.12.2结果
1.13 A_13_控制语句.html
1.13.1代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>控制语句</title>
<!-- 页面标题 -->
</head>
<body>
<!-- 页面主体 -->
<script>
/* ================= 条件语句（if-else） ================= */
// 声明变量 age 并赋值为 12
let age = 12;
// if-else 语句：根据条件执行不同的代码块
// 如果 age > 18 为 true，执行 if 块；否则执行 else 块
if (age > 18) {
console.log("已经成年");
} else {
console.log("还未成年"); // age=12，条件不成立，执行此分支
}
// 声明变量 time 并赋值为 6
let time = 6;
// if-else if-else 多分支结构：从上到下依次判断条件，遇到第一个为 true 的条件就执行对应代码块，然后跳出整个结构
if (time < 12) {
alert('上午好'); // time=6，条件成立，弹出"上午好"
} else if (time < 18) {
alert("下午好"); // 上面的条件不成立时才会判断这里
} else {
alert("晚上好"); // 以上条件都不成立时执行这里
}
/* ================= 循环语句 ================= */
// 在控制台输出提示信息
console.log("for循环");
// for 循环：适合已知循环次数的场景
// 结构：for (初始化; 条件判断; 迭代操作) { 循环体 }
// 执行流程：初始化 → 判断条件 → 执行循环体 → 迭代操作 → 再次判断条件 → ...
for (let i = 0; i < 10; i++) {
// console.log(i); // 输出 0 到 9，当前被注释掉了
}
// 在控制台输出提示信息
console.log("while循环");
// 声明计数器变量
let count = 1;
// while 循环：适合循环次数不确定的场景
// 结构：while (条件) { 循环体 }
// 执行流程：先判断条件，为 true 则执行循环体，然后再次判断条件，直到条件为 false
while (count < 10) {
// console.log(count); // 输出 1 到 9，当前被注释掉了
count++; // 计数器自增，防止死循环
}
/* ================= 循环控制语句（continue 和 break） ================= */
// 使用 var 声明循环变量 i（注意：var 是函数作用域，let 是块级作用域）
for (var i = 0; i < 5; i++) {
// continue：跳过本次循环的剩余代码，直接进入下一次循环
if (i == 2) {
continue; // 当 i=2 时，跳过 console.log(i)，直接进入下一次循环（i 变为 3）
}
// break：立即终止整个循环，跳出循环体
if (i == 4) {
break; // 当 i=4 时，直接跳出整个 for 循环，不再继续执行
}
// 输出 i 的值
// 实际输出结果：0, 1, 3
// 解释：i=0 → 输出 0；i=1 → 输出 1；i=2 → continue 跳过；i=3 → 输出 3；i=4 → break 跳出循环
console.log(i);
}
</script>
</body>
</html>
1.13.2 结果
1.14A_14_函数.html
1.14.1代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>函数</title>
<!-- 页面标题 -->
</head>
<body>
<!-- 页面主体 -->
<script>
/* ================= 函数的定义与调用 ================= */
// 定义一个无参数、无返回值的函数
// function 是声明函数的关键字，hello 是函数名，() 中是参数列表（此处为空），{} 中是函数体
function hello() {
console.log("hello word"); // 注意：这里拼写有误，应该是 "hello world"
}
// 调用函数：使用函数名加括号的方式执行函数体内的代码
hello(); // 控制台输出：hello word
/* ================= 带返回值的函数 ================= */
// 定义一个有返回值的函数
// return 语句用于从函数中返回一个值，函数执行到 return 时会立即结束
function hello_with_return() {
return "helloword"; // 返回字符串 "helloword"
}
// 调用函数并将返回值赋值给变量 a
let a = hello_with_return();
console.log(a); // 控制台输出：helloword
// 也可以直接在 console.log 中调用函数，输出其返回值
console.log(hello_with_return()); // 控制台输出：helloword
/* ================= 带参数的函数 ================= */
// 定义一个带参数的函数
// name 是形参（形式参数），在函数被调用时接收传入的值
function hello_with_param(name) {
// 使用 + 进行字符串拼接
console.log("hello" + name);
}
// 调用函数并传入实参（实际参数）"小王"
// 执行时，name 的值变为 "小王"，输出：hello小王
hello_with_param("小王");
/* ================= 作用域（Scope） ================= */
// 全局变量：在函数外部声明的变量，在整个脚本的任何位置都可以访问
let global_var = "全局变量";
// 定义一个用于演示作用域的函数
function local_func() {
// 局部变量：在函数内部声明的变量，只能在该函数内部访问
let local_var = "局部变量";
// 函数内部可以访问全局变量
console.log("函数内打印全局变量：" + global_var); // 输出：函数内打印全局变量：全局变量
// 函数内部可以访问局部变量
console.log("函数内部打印局部变量：" + local_var); // 输出：函数内部打印局部变量：局部变量
}
// 调用函数
local_func();
// 在全局作用域中访问全局变量------✅ 可以正常访问
console.log("全局打印全局变量：" + global_var); // 输出：全局打印全局变量：全局变量
// 在全局作用域中访问局部变量------❌ 报错！
// ReferenceError: local_var is not defined
// 因为 local_var 是在 local_func 函数内部用 let 声明的，它的作用域仅限于该函数内部
console.log("全局打印局部变量：" + local_var);
</script>
</body>
</html>
1.14.2 结果
1.15A_15_事件处理.html
1.15.1 代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>Document</title>
<!-- 页面标题 -->
</head>
<body>
<!-- 页面主体 -->
<!--
onclick 事件：当用户点击该元素时触发
点击按钮后，会调用 click_event() 函数
-->
<button onclick="click_event()">这是一个点击事件按钮</button>
<!--
onfocus 事件：当元素获得焦点时触发（如用户点击输入框或用 Tab 键切换到该输入框）
onblur 事件：当元素失去焦点时触发（如用户点击页面其他地方或 Tab 键切换到其他元素）
-->
<input type="text" onfocus="focus_event()" onblur="blur_event()">
<script>
/* ================= 事件处理函数 ================= */
// 点击事件处理函数
// 当按钮被点击时，执行此函数，弹出一个警告框
function click_event() {
alert("点击事件");
}
// 获取焦点事件处理函数
// 当输入框获得焦点时，在控制台输出一条信息
function focus_event() {
console.log("获取焦点");
}
// 失去焦点事件处理函数
// 当输入框失去焦点时，在控制台输出一条信息
function blur_event() {
console.log("失去焦点");
}
</script>
</body>
</html>
1.15.2 结果
1.16 A_16_Dom.html
1.16.1 代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>Dom</title>
<!-- 页面标题 -->
</head>
<body>
<!-- 页面主体 -->
<!-- 带 id 属性的 div，id 在页面中必须唯一 -->
<div id="box1">这是一个ID选择器标签</div>
<!-- 带 class 属性的 div，class 可以被多个元素共用 -->
<div class="box2"> 这是一个类选择器标签</div>
<!-- 普通的 div，没有 id 和 class -->
<div>这是普通的div标签</div>
<!-- 普通按钮 -->
<button>点击按钮</button>
<script>
/* ================= DOM 元素获取 ================= */
// 通过 id 获取元素：返回单个元素对象（因为 id 是唯一的）
var element_id = document.getElementById("box1");
console.log(element_id); // 输出：<div id="box1">这是一个ID选择器标签</div>
// 通过 class 获取元素：返回 HTMLCollection（类数组），需要用索引 0 取第一个
var element_class = document.getElementsByClassName("box2")0;
console.log(element_class); // 输出：<div class="box2"> 这是一个类选择器标签</div>
// 通过标签名获取元素：返回 HTMLCollection，用索引 2 取第三个 div（索引从 0 开始）
var element_tag = document.getElementsByTagName("div")2;
console.log(element_tag); // 输出：<div>这是普通的div标签</div>
/* ================= 修改元素内容 ================= */
// innerHTML：可以修改元素的 HTML 内容（支持 HTML 标签解析）
element_id.innerHTML = "修改id选择器标签文本内容";
// 修改后：<div id="box1">修改id选择器标签文本内容</div>
// innerText：只能修改纯文本内容（HTML 标签会被当作普通文本）
element_class.innerText = "修改class选择器标签文本内容";
// 修改后：<div class="box2"> 修改class选择器标签文本内容</div>
/* ================= 修改元素样式 ================= */
// 通过 style 属性直接修改行内样式
// 注意：CSS 中的连字符属性（如 background-color）在 JS 中要改为驼峰命名（backgroundColor）
element_tag.style.backgroundColor = "red"; // 设置背景色为红色
element_tag.style.color = "white"; // 设置文字颜色为白色
/* ================= 事件绑定 ================= */
// 获取第一个 button 元素
var button_element = document.getElementsByTagName("button")0;
console.log(button_element);
// 方式一：通过 onclick 属性绑定事件（一个元素同一事件只能绑定一个处理函数）
// button_element.onclick = function() {
// alert("点击了按钮");
// }
// 方式二：通过 addEventListener 绑定事件（推荐，支持绑定多个处理函数）
// button_element.addEventListener("click", function() {
// alert('通过addEventListener点击了按钮');
// })
// ⚠️ 注意：这里有一个常见错误！
// click_event() 加了括号表示立即执行函数，而不是在点击时执行
// 正确写法应该是：button_element.addEventListener("click", click_event)
// 当前写法会导致页面加载时就弹出 alert，而不是点击时才弹出
button_element.addEventListener("click", click_event())
// 定义点击事件处理函数
function click_event() {
alert('通过addEventListener点击了按钮');
}
</script>
</body>
</html>
1.16.2 结果
1.17 A_17_数据增删改查.html
1.17.1代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="en">
<!-- 根元素，lang="en" 表示页面语言为英语 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度 -->
<title>表格的增删改查</title>
<!-- 页面标题 -->
<!-- 内部样式表 -->
<style>
/* 表格整体样式 */
table {
width: 100%; /* 表格宽度占满父容器 */
border-collapse: collapse; /* 合并相邻单元格的边框，消除双线效果 */
margin-top: 20px; /* 表格距离上方元素 20px 的外边距 */
}
/* 表头单元格和普通单元格的公共样式 */
th, td {
border: 1px solid rgba(0, 0, 0, 0.911); /* 1px 实线边框，颜色为接近黑色的半透明 */
text-align: center; /* 文本水平居中 */
padding: 20px; /* 内边距 20px，让单元格内容不紧贴边框 */
}
/* 按钮样式 */
button {
margin-left: 20px; /* 按钮左侧外边距 20px，使按钮之间有间距 */
}
</style>
</head>
<body>
<!-- 页面主体 -->
<!-- 页面主标题，使用行内样式居中对齐 -->
<h1 style="text-align:center">表格的增删改查</h1>
<!-- 新增数据按钮，点击时调用 addrow() 函数 -->
<button onclick="addrow()">新增数据</button>
<!-- 数据表格，id="table" 便于 JS 通过 DOM 获取 -->
<table id="table">
<!-- 表头行 -->
<tr>
<th>姓名</th>
<th>联系方式</th>
<th>操作</th>
</tr>
<!-- 数据行（初始数据） -->
<tr>
<td>李明</td>
<td>11315694891</td>
<td>
<!-- 修改按钮：点击时调用 editRow(this)，this 指向当前按钮元素 -->
<!-- ⚠️ 注意：这里有一个语法错误，应该是 </button>，多写了 onclick=editRow -->
<button onclick="editRow(this)">修改</button>
<!-- 删除按钮：点击时调用 deleteRow(this)，this 指向当前按钮元素 -->
<button onclick="deleteRow(this)">删除</button>
</td>
</tr>
</table>
<!-- 引入外部 JavaScript 文件，表格的增删改查逻辑定义在该文件中 -->
<script src="./js/tab.js"></script>
</body>
</html>
./js/tab.js
// alert("你好啊！") // 弹窗提示，当前被注释掉了
/* ================= 新增数据 ================= */
function addrow() {
// 通过 id 获取表格元素
var table = document.getElementById("table");
// 获取表格当前的行数（包括表头行）
var length = table.rows.length;
// 在表格末尾插入一个新行（insertRow 的参数是插入位置的索引）
// 因为索引从 0 开始，所以 length 表示在最后一行之后插入
var newRow = table.insertRow(length);
console.log(newRow); // 在控制台输出新创建的行元素
// 在新行中插入单元格（列），参数是单元格的索引位置
var nameCol = newRow.insertCell(0); // 第 1 列：姓名
var phoneCol = b = newRow.insertCell(1); // 第 2 列：联系方式（⚠️ 这里多写了一个 b=，属于冗余代码）
var actionCol = newRow.insertCell(2); // 第 3 列：操作按钮
// 为每个单元格设置初始内容
nameCol.innerHTML = "未命名"; // 姓名列默认显示"未命名"
phoneCol.innerHTML = "无联系方式"; // 联系方式列默认显示"无联系方式"
// 操作列插入两个按钮：修改和删除
// 注意这里使用单引号包裹整个字符串，内部属性用双引号
// this 指向当前按钮元素，传递给函数用于定位所在行
actionCol.innerHTML = '<button onclick="editRow(this)">修改</button> <button onclick="deleteRow(this)">删除</button>';
}
/* ================= 删除数据 ================= */
function deleteRow(button) {
// button: 被点击的"删除"按钮元素
// button.parentNode: 按钮的父元素 <td>
// button.parentNode.parentNode: 单元格的父元素 <tr>（即整行）
var row = button.parentNode.parentNode;
console.log(row); // 在控制台输出要删除的行元素
// row.parentNode: 行的父元素 <tbody> 或 <table>
// removeChild(row): 从父元素中移除该行，实现删除效果
row.parentNode.removeChild(row);
}
/* ================= 编辑数据 ================= */
function editRow(button) {
// button: 被点击的"修改"按钮元素
// 同样通过两次 parentNode 找到所在的行 <tr>
var row = button.parentNode.parentNode;
// row.cells 是一个类数组，包含该行所有的单元格（<td>）
var nameCol = row.cells0; // 第 1 列：姓名单元格
var phone = row.cells1; // 第 2 列：联系方式单元格
// prompt 弹出一个输入框，用户输入后返回输入的字符串
var inputName = prompt("请输入姓名"); // 弹出输入框让用户输入姓名
var inputPhone = prompt("请输入手机号"); // 弹出输入框让用户输入手机号
// 将用户输入的内容更新到对应的单元格中
// ⚠️ 注意：如果用户点击"取消"，prompt 返回 null，单元格内容会变成 "null"
nameCol.innerHTML = inputName;
phone.innerHTML = inputPhone;
}
1.17.2 结果
1.18A_18_js数据渲染.html
1.18.1代码
<!DOCTYPE html>
<!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN">
<!-- 根元素，lang="zh-CN" 表示页面语言为简体中文 -->
<head>
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8，支持中文等多语言字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置视口，使页面在移动设备上自适应屏幕宽度，initial-scale=1.0 表示初始缩放比例为1 -->
<title>剧集信息展示</title>
<!-- 页面标题，显示在浏览器标签页上 -->
<!-- 内部样式表 -->
<style>
/* 表格整体样式 */
table {
width: 100%; /* 表格宽度占满父容器 */
border-collapse: collapse; /* 合并相邻单元格的边框，消除双线效果 */
margin-top: 20px; /* 表格距离上方元素 20px 的外边距 */
}
/* 表头单元格和普通单元格的公共样式 */
th, td {
border: 1px solid rgba(0, 0, 0, 0.911); /* 1px 实线边框，颜色为接近黑色的半透明 */
text-align: center; /* 文本水平居中 */
padding: 20px; /* 内边距 20px，让单元格内容不紧贴边框 */
}
/* 按钮样式 */
button {
margin-left: 20px; /* 按钮左侧外边距 20px，使按钮之间有间距 */
}
</style>
</head>
<body>
<!-- 页面主体 -->
<!-- 应用根容器，id="app" 便于整体控制 -->
<div id="app">
<!-- 页面主标题，使用行内样式居中对齐 -->
<h1 style="text-align:center">剧集信息展示</h1>
<!-- 新增数据按钮，点击时调用 addrow() 函数（该函数在后续代码中未定义） -->
<button onclick="addrow()">新增数据</button>
<!-- 数据表格，id="table" 便于 JS 通过 DOM 获取 -->
<table id="table">
<!-- 表头行 -->
<tr>
<th>剧情id:</th>
<th>剧情名称title</th>
<th>操作</th>
</tr>
<!--
模板行：用于作为数据行的模板，通过 JS 克隆后填充数据
id="row-template" 便于获取该模板行
注意：该行初始是可见的，会在数据渲染完成后被删除
-->
<tr id="row-template">
<!-- 剧情id列，class 便于后续通过 querySelector 定位 -->
<td class="id_name"></td>
<!-- 剧情名称列 -->
<td class="text_introduction"></td>
<!-- 操作列：包含修改和删除按钮 -->
<td>
<!--
⚠️ 注意：这里有一个语法错误，</buttononclick=editRow> 是无效的
正确写法应该是 </button>
-->
<button onclick="editRow(this)">修改</button>
<button onclick="deleteRow(this)">删除</button>
</td>
</tr>
</table>
</div>
<!-- 内部脚本 -->
<script>
/* ================= 读取 JSON 文件并渲染数据 ================= */
// fetch API：用于发起网络请求，读取本地或远程的 JSON 文件
fetch('./json/drama_data.json')
// 第一个 then：处理响应对象
.then(response => {
// 检查响应是否成功（状态码 200-299）
if (!response.ok) {
throw new Error("文件读取失败"); // 如果响应不成功，抛出错误
}
// response.json()：将响应体解析为 JSON 格式，返回一个 Promise
return response.json();
})
// 第二个 then：处理解析后的 JSON 数据
.then(data1_1 => {
// 从 JSON 数据中提取 characters 数组
// 假设 JSON 结构为 { "data": { "characters": ... } }
const data1 = data1_1.data.characters;
console.log("读取成功");
console.log(data1_1); // 在控制台输出完整的 JSON 数据
// 获取表格元素
const table = document.getElementById("table");
// 获取模板行元素
const templateRow = document.getElementById("row-template");
// 遍历 characters 数组中的每一项数据
data1.forEach(item => {
// cloneNode(true)：深拷贝模板行，true 表示连同子节点一起复制
// 这样新行会保留模板行中的 class 和按钮结构
const newRow = templateRow.cloneNode(true);
// 在控制台输出当前项的 drama_id 和 name
console.log("id:", item.drama_id);
console.log("标题:", item.name);
// 使用 querySelector 定位到新行中的对应单元格，并填入数据
// textContent：设置纯文本内容（不会解析 HTML 标签）
newRow.querySelector(".id_name").textContent = item.drama_id;
newRow.querySelector(".text_introduction").textContent = item.name;
// 将填充好数据的新行追加到表格末尾
table.appendChild(newRow);
});
// 所有数据行渲染完成后，删除原始的模板行
// 因为模板行本身不包含有效数据，只是用来克隆的
templateRow.remove();
})
// catch：捕获前面任意步骤中抛出的错误
.catch(err => {
// ⚠️ 注意：这里有一个 bug，应该输出 err 而不是 error（变量名不一致）
console.log("出错了：", error);
});
/* ================= 修改功能 ================= */
function editRow(btn) {
// btn: 被点击的"修改"按钮元素
// parentElement.parentElement: 按钮 → td → tr，找到所在的行
const row = btn.parentElement.parentElement;
// 弹出提示框，显示该行第二列（索引为1）的文本内容
alert("修改：" + row.cells1.textContent);
}
/* ================= 删除功能 ================= */
function deleteRow(btn) {
// btn: 被点击的"删除"按钮元素
// parentElement.parentElement: 按钮 → td → tr，找到所在的行
// remove(): 直接从 DOM 中移除该元素
btn.parentElement.parentElement.remove();
}
// 获取具体数据（占位注释）
// 渲染数据（占位注释）
</script>
</body>
</html>
1.18.2 结果
1.19A_19_js数据渲染vue.html
1.19.1代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剧集信息展示</title>
<!-- 引入 Vue 2 框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- <script src="./js/vue.js"></script> -->
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid rgba(0, 0, 0, 0.911);
text-align: center;
padding: 20px;
}
button {
margin-left: 20px;
}
</style>
</head>
<body>
<!-- Vue 挂载点 -->
<div id="app">
<h1 style="text-align:center">剧集信息展示</h1>
<!-- 新增数据按钮，点击触发 addrow 方法 -->
<button @click="addrow">新增数据</button>
<table id="table">
<tr>
<th>剧情id:</th>
<th>剧情名称title</th>
<th>操作</th>
</tr>
<!-- 使用 v-for 指令循环渲染数据 -->
<!-- :key 是 Vue 用于追踪节点身份的唯一标识，推荐使用数据的唯一ID -->
<tr v-for="item in characters" :key="item.id">
<!-- 使用 {{ }} 插值表达式显示数据 -->
<td class="id_name">{{ item.drama_id }}</td>
<td class="text_introduction">{{ item.name }}</td>
<td>
<!-- 按钮绑定点击事件，传入当前项的数据 item 或 id -->
<button @click="editRow(item)">修改</button>
<button @click="deleteRow(item.id)">删除</button>
</td>
</tr>
</table>
</div>
<script>
// 初始化 Vue 实例
new Vue({
el: '#app', // 绑定挂载点
data: {
characters: \[\] // 定义数据属性，用于存储剧集数据
},
mounted() {
// Vue 生命周期钩子：实例挂载完成后调用，用于发起数据请求
this.loadJsonData();
},
methods: {
// 读取 JSON 数据
loadJsonData() {
fetch('./json/drama_data.json')
.then(response => {
if (!response.ok) {
throw new Error("文件读取失败");
}
return response.json();
})
.then(data => {
console.log(`json数据：`, data);
// 将获取到的数据赋值给 Vue 的 data 属性
this.characters = data.data.characters;
})
.catch(err => console.log('读取失败', err));
},
// 修改数据
editRow(item) {
// 这里直接操作数据，视图会自动更新
// 例如：弹窗修改 item.name，或者跳转路由
alert('修改：' + item.name);
},
// 删除数据
deleteRow(id) {
// filter 方法会创建一个新数组，不包含被删除的项
// Vue 会监听数据变化并自动更新视图
this.characters = this.characters.filter(item => item.id !== id);
},
// 新增数据
addrow() {
// 这里可以弹出表单或模态框来收集新数据
alert('执行新增操作');
// 示例：假设获取到新数据后，使用 push 方法添加到数组
// this.characters.push({ id: 新ID, drama_id: "新ID值", name: "新剧集名" });
}
}
});
</script>
</body>
</html>
1.19.2 结果
1.20 A_20_反转computed与mothods.html
1.20.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 页面标题 -->
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<!-- 引入 Vue 2.2.2 版本库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- Vue 实例挂载的根容器 -->
<div id="app">
<!-- 1. 原始数据插值 -->
<!-- 直接输出 data 中 message 的原始值 -->
<p>原始字符串: {{ message }}</p>
<!-- 2. 计算属性插值 -->
<!-- 调用 computed 中定义的 reversedMessage -->
<!-- 注意：这里 reversedMessage 是一个属性，不是方法，所以没有括号 () -->
<p>计算后反转字符串: {{ reversedMessage }}</p>
<!-- 3. 方法调用插值 -->
<!-- 调用 methods 中定义的 reversedMessage2 方法 -->
<!-- 这里必须写括号 ()，因为它是一个函数 -->
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
<!-- JavaScript 逻辑部分 -->
<script>
// 创建一个新的 Vue 实例，挂载到 #app 元素上
var vm = new Vue({
el: '#app', // 指定挂载点
data: {
message: 'Runoob!' // 原始数据
},
computed: {
// 计算属性：用于声明式地描述依赖响应式数据的复杂逻辑
// reversedMessage 依赖于 this.message
// 只有当 this.message 发生变化时，reversedMessage 才会重新求值
// 具有缓存机制，只要 message 不变，多次访问不会重复执行函数
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
methods: {
// 方法：定义在对象上的函数
// reversedMessage2 是一个普通方法
// 每次重新渲染（无论 message 是否变化），该函数都会被执行一次
// 没有缓存，适合执行不依赖响应式数据或逻辑复杂的操作（如 API 调用）
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
1.20.2 结果
1.21A_21_VueRouter.html
1.21.1代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<!-- 引入 Vue 2 框架核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<!-- 引入 Vue Router 2 路由插件 -->
<!-- Vue Router 依赖于 Vue，所以必须在 Vue 之后引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<!-- Vue 根实例挂载点 -->
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 导航链接组件 -->
<!-- router-link 会被渲染为 <a> 标签，但点击时会阻止默认的页面跳转行为 -->
<!-- to 属性指定目标路由路径 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<hr>
<!-- 路由视图出口 -->
<!-- 当路由匹配时，对应的组件（如 Foo 或 Bar）将被渲染在这里 -->
<router-view></router-view>
<hr>
</div>
<script>
// 1. 定义路由组件
// 这些组件可以是简单的模板字符串，也可以是复杂的 Vue 组件对象
// 通常在大型项目中，这些组件会从单独的 .vue 文件中 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由映射
// routes 是一个数组，每个对象定义了一个路径（path）和组件（component）的映射关系
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例
// 将上面定义的 routes 配置传入 VueRouter 构造函数
// 这里使用了 ES6 的对象简写语法：routes: routes 简写为 routes
const router = new VueRouter({
routes
})
// 4. 创建 Vue 根实例
// 将 router 实例注入到 Vue 根实例中
// 这一步非常重要，它使得整个 Vue 应用都能访问到路由功能（router 和 route）
const app = new Vue({
el: '#app',
router // 注入路由配置
})
// 应用启动后，访问 /foo 会显示 Foo 组件，访问 /bar 会显示 Bar 组件
</script>
</body>
</html>
1.21.2 结果
1.22A_22_vue_GET请求.html
1.22.1 代码
<!DOCTYPE html>
<!-- HTML5标准文档声明 -->
<html lang="zh-CN">
<!-- html根标签，lang="zh-CN" 指定页面语言为简体中文 -->
<head>
<meta charset="UTF-8">
<!-- 设置网页字符编码，解决中文乱码问题 -->
<title>Vue GET 请求测试</title>
<!-- 浏览器标签标题 -->
</head>
<body>
<!-- Vue挂载根容器，所有Vue插值、指令必须写在id="app"内部 -->
<div id="app">
<h3>请求结果：</h3>
<!-- pre标签：保留JSON原始换行、空格格式，方便展示接口返回数据 -->
<pre>{{ info }}</pre>
</div>
<!-- CDN方式引入Vue2框架，提供Vue响应式语法支持 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- CDN引入axios网络请求库，专门用于发送前端ajax请求 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 创建Vue根实例
new Vue({
el: "#app", // 挂载到页面id为app的div
data: {
info: null // 响应式变量，用来存储接口返回的数据，初始为空
},
// mounted生命周期钩子：页面DOM渲染完成后自动执行，适合初始化请求接口
mounted() {
// axios.get(接口地址) 发送GET网络请求
axios.get("https://jsonplaceholder.typicode.com/posts/1")
// 请求成功回调，res是完整响应对象，res.data为后端返回的真实数据
.then(res => {
console.log("请求成功", res.data);
// 将接口数据赋值给响应式变量info，页面自动渲染数据
this.info = res.data;
})
// 请求失败捕获，网络错误、接口404/500都会进入这里
.catch(err => {
console.error("请求失败", err);
});
}
});
</script>
</body>
</html>
1.22.2 结果
1.23 A_23_vue_POST请求
1.23.1 代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue POST 请求测试</title>
</head>
<body>
<!-- Vue 根实例挂载点 -->
<div id="app">
<h3>POST 请求结果：</h3>
<!-- 使用 <pre> 标签保留 JSON 数据的格式 -->
<pre>{{ info }}</pre>
<h3>提交新数据：</h3>
<!-- 表单输入，使用 v-model 实现双向数据绑定 -->
<label>
标题：
<input type="text" v-model="newPost.title" placeholder="请输入标题">
</label>
<br><br>
<label>
内容：
<textarea v-model="newPost.body" placeholder="请输入内容"></textarea>
</label>
<br><br>
<!-- 点击按钮触发 submitPost 方法 -->
<button @click="submitPost">提交 POST 请求</button>
</div>
<!-- 引入 Vue 2 框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入 Axios 库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: null, // 存储请求返回的结果
newPost: { // 存储表单输入的新数据
title: '',
body: ''
}
},
methods: {
// 提交 POST 请求的方法
submitPost() {
// 构造要发送的数据
const postData = {
title: this.newPost.title,
body: this.newPost.body,
userId: 1
};
// 发送 POST 请求
axios.post("https://jsonplaceholder.typicode.com/posts", postData)
.then(res => {
// 请求成功时的回调
// res.data 包含服务器返回的数据
console.log("POST 请求成功", res.data);
this.info = res.data;
// 提交成功后清空表单
this.newPost.title = '';
this.newPost.body = '';
})
.catch(err => {
// 请求失败时的回调
console.error("POST 请求失败", err);
this.info = { error: '请求失败', message: err.message };
});
}
}
});
</script>
</body>
</html>
1.23.2 结果
