web基础知识
一.用vscode，创建个AI助手方便编写。
AI助手账号注册：https://account.aliyun.com/register/qr_register.htmspm=5176.29741907.J_4VYgf18xNlTAyFFbOuOQe.d_register_1.e939154ab73d0j&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2F
AI助手账号注册：https://www.marscode.cn/home?utm_source=mkt&utm_medium=cpaitcast&utm_campaign=hmcxy
这个字体很好看样式，在打开的settings.json中增加如下配置信息：
{
"workbench.colorTheme": "Default Light+",
"workbench.statusBar.visible": false,
"editor.fontFamily": "'Courier New',
Consolas, monospace",
"editor.fontSize": 15,
"editor.lineHeight": 1.8,
"editor.tabSize": 2,
"editor.codeActionsOnSave": { "source.fixAll": "explicit" }, "editor.minimap.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"git.confirmSync": false,
"terminal.integrated.defaultProfile.windows": "Command Prompt"
}二.html知识点
1.a标签的应用
・href 属性：用于指定链接的目标地址，对应的值是具体的 url 地址（如网页链接、本地页面路径等）・target 属性：用于指定链接的打开方式，常用取值有 2 个：
・_blank：点击链接后，在新窗口中打开目标内容
・_self：点击链接后，在当前窗口中打开目标内容（默认打开方式）
2.video标签属性
src：必填属性，用于指定视频文件的 URL 地址，controls：无需赋值，直接书写属性名即可，作用是显示视频的播放、暂停、音量等控制栏autoplay：无需赋值，页面加载完成后自动播放视频，注意部分浏览器需配合muted静音属性才能生效muted：无需赋值，设置视频默认以静音状态播放loop：无需赋值，设置视频播放结束后自动循环播放，重复不间断poster：指定视频加载完成前、未开始播放时显示的封面图 URL，width/height：用于设置视频的显示宽度和高度，单位通常为像素pxpreload：用于设置视频的预加载策略，有三个可选值 ：auto（自动预加载视频内容）metadata（仅预加载视频元数据，如时长、分辨率）none（不进行任何预加载）
3.加粗表示标签
・<strong>：语义化加粗标签（推荐）
・<b>：纯视觉化加粗标签
・<br>换行
・<p>段落
4.form表单标签
1.input是表单中最常用的输入项，通过type属性可实现多种输入形式。
注：id是唯一性，和label中for属性关联。
name：实现 “互斥选择”，要让一组单选按钮互斥，必须给它们设置相同的 name 值，这样浏览器才会知道它们是同一组，只能选一个。
<div>
<input type="radio" name="gender" value="male" />
<label for="male">男</label>
</div>
<div>
<input type="radio" name="gender" value="female" />
<label for="female">女</label>
</div>
多个同类型控件（如单选按钮radio）需设置相同的name，作为同一组数据接收。
<div>
<input type="checkbox" name="hobby" value="reading" />
<label for="reading">阅读</label>
</div>
<div>
<input type="checkbox" name="hobby" value="music" />
<label for="music">音乐</label>
</div>
<div>
<input type="checkbox" name="hobby" value="travel" />
<label for="travel">旅行</label>
若<input>没有name，表单提交时，该控件的数据不会被传递到后端。
value不同type的<input>中，value的作用略有差异
选择类控件（radio/checkbox）value是提交时传递给后端的值
<label for="education">学历：</label>
<select name="education">
<option>请选择学历</option>
<option value="primary">小学</option>
<option value="middle">中学</option>
<option value="high">高中</option>
<option value="college">大专</option>
<option value="university">本科</option>
<option value="master">硕士</option>
<option value="doctor">博士</option>
按钮类控件（submit/reset/button）value是按钮上显示的文字。
<input type="submit" value="提交表单">
2.select用于创建下拉选择列表，<select>是列表容器，<option>是具体的选项项。
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
</select>
3.<textarea>标签
用于创建多行文本输入区域（文本域），支持用户输入长文本内容，可通过rows(行)和cols(列)属性控制初始尺寸。
<textarea id="desc" name="desc" placeholder="请输入个人描述信息..." ></textarea>
4.按钮button
<input type="button" value="普通按钮" />
<input type="reset" value="重置表单" />
<input type="submit" value="提交表单" />
5.label标签
作用：将label的for属性值设置为目标表单控件的id，即可实现 “点击 label 时，聚焦 / 激活对应的表单控件”。
<label for="pwd">密码：</label>
<input type="password" name="pwd" placeholder="请输入密码" />
点击 “密码：” 文字，会自动聚焦到对应的输入框。
五.表格标签table
<div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作日期</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td><img src="././img/avatar.jpg" alt="张三" /></td>
<td>教师</td>
<td>2023-01-01</td>
<td>2023-12-31</td>
<td>
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
</table>
</div>
三.css样式
1.span元素选择器：
・ 行内样式：写在 HTML 标签的style属性中（例： <span>2024 年 05 月 15 日 20:07</span>仅作用当前标签，优先级最高，适合临时单独样式，但复用性差。
・内部样式：写在页面<style>标签内（通常在<head>里，例：
<style>
span {
color: g#e4e3e5;//这里颜色提取可以用QQ截图可以复制颜色，颜色更偏爱十六进制的
}
</style>
），作用当前整个页面，复用性优于行内，适合单页面样式统一。
・外部样式：通过 <link rel="stylesheet" href="d1.css" />引入外部 CSS 文件，创建一个d1.css文件，可作用多个页面，结构与样式分离，复用、维护性最优，是开发常用方式。
2. 加样式更喜欢用类选择器，给标签添加 class 属性
<a href="https://www.cctv.com/" target="_blank">央视网</a>
.cctv-link {//在style中填写
text-decoration: none; /* 去除默认下划线 */
font-size: 16px;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px; /* 圆角边框，更柔和 */
margin-left: 25px;
}
3. ID选择器
id 选择器是 CSS 中的一种基础选择器，其语法格式为以#开头后紧跟具体的 id 属性值（如#count），核心作用是精准选中 HTML 页面中唯一对应的id属性值匹配的标签，同时 id 选择器在 CSS 选择器优先级中高于类选择器和元素选择器，第二是类选择器
<span>888</span>
#count {
color: red;
}
4.选择器混合使用
1..form-item .useName选中class="form-item"容器内、class="useName"的元素
注意这里加点，是因为是class类型
.form-item .useForm {
display: flex;
margin-right: 50px;
align-items: center;
}
2.form-item button[type="submit"]→ 选中class="form-item"容器内type="submit"的按钮。
.form-item button[type="submit"] {
display: flex;
margin-left: 40px;
}
3.选中第一个元素
table td button:first-child {
background-color: #f5f5f5;
color: #666;
border: 1px solid #ccc;
}
4.选中最后一个元素
table td button:last-child {
background-color: #dc3545;
color: #fff;
}
5.常用样式
1.文本样式相关（控制文字显示效果）text-indent: 2em;//首行缩进两个字符（适配当前字体大小）line-height: 1.8;//行高为当前字体大小的1.8倍，提升文本可读性text-align: center;//内容水平居中（针对行内/行内块子元素）color: #fff;//文字颜色：白色font-weight: bold;//字体加粗（等价于font-weight: 700;）font-size: 12px;//字体大小：12像素text-decoration: none;//去除文字装饰（常用于清除a标签下划线）text-overflow: ellipsis;//文字溢出时显示省略号（需配合另外两个属性生效）white-space: nowrap;//强制文本不换行（配合text-overflow实现单行省略）font-family:"楷体";//设置字体position:static relative absolute sticky fixed//固定位置2. 盒子模型相关（控制元素布局与尺寸）box-sizing: border-box;//盒模型计算：宽高包含内容、内边距、边框，尺寸不变margin: 20px auto;//上下外边距20px，左右自动居中（块级元素水平居中）border: 1px solid #eee;//边框：1像素实线、浅灰色border-radius: 8px;//元素圆角（配合overflow:hidden生效，裁剪溢出内容）overflow: hidden;//隐藏超出元素自身宽高的内容，实现圆角裁剪background-color: #b69395;//元素背景颜色：浅棕红色（主题色）padding: 10px 16px;//内边距：上下10px、左右16px（控制内容与边框的间距）width: 100%;//元素宽度：占满父元素宽度（自适应布局常用）height: 44px;//元素高度：固定44px（按钮、输入框常用高度）opacity: 0.8;//元素整体透明度：0~1之间，1为完全不透明，0为完全透明3. 弹性布局相关（控制子元素排列）display: flex;//开启弹性布局，当前元素为弹性容器，子元素为弹性项目flex-wrap: nowrap;//弹性项目不换行（默认值），超出容器则挤压排列justify-content: center;//弹性项目沿主轴水平居中（space-between两端对齐）align-items: center;//弹性项目沿侧轴垂直居中（单行子元素垂直居中必备）flex: 1;//弹性项目占满容器剩余空间（自适应分配宽度，高频使用）4.交互样式相关（控制鼠标与元素的交互效果）cursor: pointer;//鼠标悬浮时显示手型，提示元素可点击cursor: default;//鼠标悬浮时显示默认箭头，还原非可点击状态5. 视觉美化相关（提升元素视觉层次感）box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);//添加轻微外部阴影，提升元素立体感outline: none;//去除元素聚焦时的默认外边框（常用于输入框、按钮优化）border: none;//去除元素默认边框（常用于重置按钮、输入框样式）transition: all 0.3s ease;//过渡动画：所有属性变化耗时0.3秒，缓动效果（提升交互流畅度）
5.hover专门用于匹配 “鼠标指针悬浮在元素之上” 的状态
格式为选择器:hover { 要生效的CSS样式 }
/* 5. 表格行交互：鼠标悬停高亮，提升用户体验 */
table tbody tr:hover {
background-color: #f9f5f5; /* 浅粉色背景，和主题色呼应 */
cursor: default; /* 鼠标样式还原，避免出现手型误导 */
}
四.盒子模型
1.两个布局标签可以看着一个盒子
1.<div>标签特点
- 显示方式：独占一行（块级元素）
- 尺寸默认规则：宽度默认继承父元素宽度，高度由内容撑开
- 尺寸控制：可以直接设置
width、height
2. <span>标签特点
- 显示方式：一行可显示多个（行内元素）
- 尺寸默认规则：宽度、高度均由内容撑开
- 尺寸控制：不能直接设置
width、height
2.常见属性同图
・padding: 5px 10px 15px 20px上→右→下→左（顺时针）
・padding: 5px 10px 上下->左右
・margin: 10px 10px 0； 顶部外边距 左右两侧外边距 底部外边距;
・border-radius：10px 10px 0 0;左上角 → 右上角 → 右下角 → 左下角（顺时针）
3.弹性布局
1.flex布局
flex是一种一维布局模型，通过给父容器设置 flex 相关属性，来控制子元素的空间分布与对齐方式，能高效实现元素的排列、均分、对齐等布局需求。
试做：
