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 相关属性，来控制子元素的空间分布与对齐方式，能高效实现元素的排列、均分、对齐等布局需求。

试做：