web复习
大约 14 分钟
web复习
静态网页：用户随时随地访问都是一样的页面，不会改变，除非开发者修改代码
动态网页：随着用户的操作页面发生变化，因为动态网页可以和数据库进行了交互
html格式
<!-- 声明文档类型为HTML5，告诉浏览器使用HTML5标准解析当前页面 -->
<!DOCTYPE html>
<!-- HTML根标签：整个页面的最外层容器，lang属性指定页面语言为英文（中文可改为zh-CN） -->
<html lang="en">
<!-- head头部标签：存放页面的元信息（如编码、标题），内容不会直接显示在页面可视区域 -->
<head>
<!-- meta元标签：设置页面字符编码为UTF-8，避免中文等字符出现乱码问题 -->
<meta charset="UTF-8">
<!-- title标题标签：设置浏览器标签页显示的标题文字，是页面重要的SEO元素 -->
<title>Title</title>
<!-- 闭合head标签，结束头部元信息区域 -->
</head>
<!-- body主体标签：页面所有可视内容（文本、图片、按钮、表单等）都写在这个标签内 -->
<body>
<!-- 闭合body标签，结束页面主体内容区域 -->
</body>
<!-- 闭合html根标签，结束整个HTML文档 -->
</html>引入css样式表（格式+优缺点）
1、行内式
<标签 style="属性1:属性值;属性2:属性值;">内容</标签>
2、内联式
<style type="text/css">
选择器{
属性1:属性值;
属性2:属性值;
}
</style>
3、外联式
<link href="css文件地址" type="text/css" rel="stylesheet" />
4、导入式
<style type="text/css">
@import url("css文件地址") 或者@import "css文件地址"
</style>
优缺点
1. 行内式
✅ 核心优点：优先级最高、单标签样式修改最快
❌ 核心缺点：复用性极差、代码结构混乱
2. 内联式
✅ 核心优点：单页面样式可复用、无额外文件请求
❌ 核心缺点：跨页面无法复用、HTML 文件臃肿
3. 外联式
✅ 核心优点：多页面复用、易维护、浏览器可缓存
❌ 核心缺点：多一次 CSS 文件请求、优先级低
4. 导入式
✅ 核心优点：写法灵活，可混写内部 / 外部样式
❌ 核心缺点：加载慢（易闪白）、优先级最低css字体样式属性（列举）
font-size:字号大小
font-family:字体
font-weight:字体粗细
font-style:字体样式css文本外观属性（列举+用法）
color:文本颜色
取值 red #ffffff rgb(2,2,2)/rgb(20%,50%,100%)
letter-spacing:字间距
取值 20px 或者 -0.5em 默认值 normal
word-spacing:单词间距（对中文无效）
取值 20px 或者 -0.5em 默认值 normal
line-height:行间距
取值 20px， 2em， 150%
text-decoration:文本装饰
取值 none（默认值）,underline,overline,line-through
text-align:水平对齐方式
取值 left（默认值）,right,center
text-indent:首行缩进
取值 2emcss复合选择器（分析题）
p.special{color:red;} 标签指定式选择器
p strongP{color:red;} 后代选择器
p > strong{color:red;} 父子选择器
h3,.special,#one{text-decoration:underline;} 并集选择器CSS优先级
id > class > 标签
认识盒子模型
- margin 外边距
- padding 内边距
- border 边框
内边距属性
padding-top: 上内边距
padding-left: 左内边距
padding-right: 右内边距
padding-bottom: 下内边距
padding:上 右 下 左外边距属性
margin-top: 上外边距
margin-left: 左外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin:上 右 下 左
水平居中 margin: 0 auto;.box{
width:200px;
height:80px;
background:#ccc; 背景
border:1px solid #ccc; 边框
padding:8px; 内边距
margin:20px; 外边距
}重要
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
设置背景颜色
background-color:#ccc;设置背景图像
background-image:url(bg.jpg);设置背景图像平铺
默认情况下背景图像会自动向水平和竖直两个方向平铺
background-repeat:
repeat:沿水平和竖直两个方向平铺（默认值）
no-repeat:不平铺 （图像位于元素的左上角，只显示一次）
repeat-x:只沿水平方向平铺
repeat-y:只沿竖直方向平铺设置背景图像的位置
background-position:right bottom;块内元素（列举）
<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>行内元素（列举）
<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>块内元素和行内元素区别
块元素：独占一行，可以设置宽度、高度、对齐属性
行内元素：不独占一行，不可以设置宽度、高度、对齐属性
行内元素可以嵌套在块元素 而 块元素不能嵌套在行内元素
无序列表
<ul>
<li type="circle"></li>
<li></li>
</ul>有序列表
<ol>
<li></li>
<li></li>
</ol>定义列表
<dl> // 指定定义列表
<dt></dt> // 指定术语名词
<dd></dd> // 对名词进行解释说明
<dt></dt>
<dd></dd>
</dl>链接伪类控制超链接
是用户在点击链接前后或悬停时的样式不同
| 超链接标签a的伪类 | 描述 |
|---|---|
| a:link | 超链接的默认样式 |
| a:visited | 超链接被访问过后的样式 |
| a:hover | 鼠标指针经过，悬停时的超链接样式 |
| a:active | 鼠标单击不放手时超链接的样式 |
填空
a:link,a:visited{ //设置默认和访问之后的样式
color:#000;
text-decoration:none;
}
a:hover{
color:#093;
text-decoration:underline;
}
a:active{
color:#FC0;
}创建表格
<table>
<tr>
<td></td>
</tr>
</table>| 属性 | 描述 | 常用属性值或单位 |
|---|---|---|
| border | 设置表格的边框（默认border="0"为无边框） | 像素 |
| cellspacing | 设置单元格与单元格之间的间距 | 默认为2像素 |
| cellpadding | 设置单元格内容与单元格边缘之间的间距 | 默认为2像素 |
| width | 设置表格的宽度 | 像素 |
| height | 设置表格的高度 | 像素 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
| bgcolor | 设置表格的背景颜色 | |
| background | 设置表格的背景图片 | |
| border-collapse | 合并单元格边框 | separate（默认值）分离模式、collapse合并模式 |
td标签的属性（用法）
| 属性 | 描述 | 常用属性值或单位 |
|---|---|---|
| colspan | 设置单元格横跨的列数（合并水平方向） | 正整数 |
| rowspan | 设置单元格竖跨的行数（合并竖直方向） | 正整数 |
表单
作用
表单核心作用：收集用户输入（文本、选择、文件等），提交至服务器，支撑登录、报名等交互场景，是用户与系统的信息传递通道。
创建表单
<form action="url地址" method="提交方式" name="表单名">
</form> // 定义表单域表单控件
| 表单控件 | 描述 |
|---|---|
<input /> | 表单输入控件 |
<textarea></textarea> | 定义多行文本 |
<select></select> | 定义一个下拉列表 |
浮动
选择器{
float:属性值;
}| 属性值 | 描述 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 不浮动（默认值） |
清除浮动
选择器{
clear:属性值;
}| 属性值 | 描述 |
|---|---|
| left | 清除左浮动的影响 |
| right | 清楚右浮动的影响 |
| both | 清除左右两侧的浮动影响 |
方式一
使用空标签
在浮动元素后添加空标签，并为其设置clear:both；
方式二
使用overflow属性清楚浮动
对父标签设置 overflow:hidden;来消除子元素对父元素的影响（将该样式写在被影响的元素上）
方式三
使用after伪对象来清除浮动
.parent:after{
display:block;
clear:both;
content:'';
height:0;
}定位
包括定位模式和边偏移
选择器{
position:属性值;
}| 值 | 描述 |
|---|---|
| static | 自动定位 |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父标签进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
定位模式并不能确定标签的具体位置，通过边偏移进行定位
| 边偏移属性 | 描述 |
|---|---|
| top | 顶部偏移，定义标签相对于其父标签上边线的距离 |
| bottom | |
| left | |
| right |
定位类型
1. static（静态定位）—— 元素的默认状态
核心定义
static 是所有元素的默认定位方式，遵循普通文档流规则（从上到下、从左到右排列），无法通过 top/right/bottom/left 或 z-index 设置偏移 / 层级。
关键特点
- 定位参考点：无（完全遵循文档流）；
- 文档流表现：不脱离文档流，元素位置由文档流自动决定；
- 偏移属性：
top/left等无效。
代码示例
.box {
position: static; /* 默认值，可省略 */
top: 20px; /* 无效，不会偏移 */
width: 100px;
height: 100px;
background: red;
}2. relative（相对定位）—— 相对于自身原位置偏移
核心定义
relative 让元素相对于自身在文档流中的原始位置进行偏移，是 “原地挪位置” 的定位方式。
关键特点
- 定位参考点：元素自身的原始文档流位置；
- 文档流表现：不脱离文档流，原位置会被保留（不会被其他元素占据）；
- 偏移属性：
top/right/bottom/left有效（比如top: 10px表示向上偏移 10px）； - 层级：
z-index有效（可调整与其他元素的重叠层级）。
代码示
.box {
position: relative;
top: 20px; /* 相对于原位置向下移 20px */
left: 30px; /* 相对于原位置向右移 30px */
width: 100px;
height: 100px;
background: blue;
}典型场景
- 微调元素位置（比如按钮内图标、文字的对齐）；
- 作为
absolute定位的 “参考容器”（给父元素设relative，子元素设absolute）。
3. absolute（绝对定位）—— 相对于最近的已定位祖先偏移
核心定义
absolute 让元素脱离普通文档流，并相对于「最近的、非 static 定位的祖先元素」定位；若没有这样的祖先，就相对于浏览器的初始包含块（<html> 标签）定位。
关键特点
- 定位参考点：最近的
position: relative/absolute/fixed/sticky祖先元素；无则参考<html>； - 文档流表现：完全脱离文档流，原位置会被其他元素占据；
- 偏移属性：
top/right/bottom/left有效； - 层级：
z-index有效。
代码示例（父元素设 relative 作为参考）
<style>
.parent {
position: relative; /* 作为子元素的定位参考 */
width: 300px;
height: 300px;
background: #eee;
}
.child {
position: absolute;
top: 20px; /* 相对于父元素顶部偏移 20px */
right: 20px; /* 相对于父元素右侧偏移 20px */
width: 100px;
height: 100px;
background: orange;
}
</style>
<div class="parent">
<div class="child">绝对定位元素</div>
</div>典型场景
- 弹窗、下拉菜单、提示框（基于父容器精准定位）；
- 元素叠加效果（比如商品卡片的 “热销” 角标）。
4. fixed（固定定位）—— 相对于浏览器视口定位
核心定义
fixed 让元素脱离普通文档流，并相对于「浏览器视口（窗口）」定位，页面滚动时元素位置始终不变。
关键特点
- 定位参考点：浏览器视口（窗口）的四个边；
- 文档流表现：完全脱离文档流，原位置被占据；
- 偏移属性：
top/right/bottom/left有效； - 层级：
z-index有效； - 特殊：不受父元素定位影响，仅依赖视口。
代码示例
.fixed-btn {
position: fixed;
bottom: 30px; /* 距离视口底部 30px */
right: 30px; /* 距离视口右侧 30px */
width: 60px;
height: 60px;
background: green;
}典型场景
- 页面右下角的 “回到顶部” 按钮；
- 固定导航栏、悬浮客服窗口；
- 弹窗的遮罩层（全屏固定）。
CSS Transition（过渡）属性详解
1. transition-property
指定哪些 CSS 属性需要应用过渡效果（比如宽、高、颜色、透明度等）。
transition-property: none | all | [属性名1] [属性名2] ...;取值说明
| 取值 | 含义 |
|---|---|
| none | 无任何属性应用过渡 |
| all | 所有属性都获得过度（默认值） |
| property | 例如 width、height、background-color、opacity、transform 等 |
.box {
transition-property: background-color;
}2. transition-duration
指定过渡效果的持续时间（必须设置，否则默认 0，无动画）。
transition-duration: <时间值> [,<时间值> ...];取值说明
- 单位：
s（秒）或ms（毫秒），例如0.5s、300ms； - 可给多个属性分别设置时长（与
transition-property一一对应）； - 默认值：
0s（无过渡，样式立即变化）。
/* 宽度过渡持续1秒，背景色过渡持续0.5秒 */
.box {
transition-property: width, background-color;
transition-duration: 1s, 0.5s;
}3. transition-timing-function
定义过渡效果的速度曲线（即动画的快慢变化规律）。
transition-timing-function: ease|linear|ease-in;核心取值（常用）
| 取值 | 含义 |
|---|---|
| ease | 慢→快→慢（默认值） |
| linear | 匀速（恒定速度） |
| ease-in | 慢开始（渐快） |
| ease-out | 慢结束（渐慢） |
| ease-in-out | 慢开始 + 慢结束（比 ease 更平缓） |
| cubic-bezier(n,n,n,n) | 自定义贝塞尔曲线（取值范围 0~1，如 cubic-bezier(0.25, 0.1, 0.25, 1) |
/* 宽度匀速过渡，背景色慢开始慢结束 */
.box {
transition-property: width, background-color;
transition-duration: 1s, 0.5s;
transition-timing-function: linear, ease-in-out;
}4. transition-delay
指定过渡效果延迟多久开始（即触发样式变化后，等待一段时间再执行动画）。
transition-delay: <时间值> [,<时间值> ...];取值说明
- 单位：
s或ms，例如0.3s、200ms； - 可给多个属性分别设置延迟（与
transition-property一一对应）； - 默认值：
0s（立即开始）； - 支持负数：例如
-0.2s表示动画直接从第 0.2 秒的位置开始。
/* 宽度立即开始，背景色延迟0.3秒开始 */
.box {
transition-property: width, background-color;
transition-duration: 1s, 0.5s;
transition-timing-function: linear, ease-in-out;
transition-delay: 0s, 0.3s;
}transition
将上述 4 个子属性合并为一个属性，简化代码
transition: [property] [duration] [timing-function] [delay];- 必须指定
duration（否则默认 0，无动画）； - 未指定的属性默认值：
property→alltiming-function→easedelay→0s；
- 多个属性的过渡用逗号分隔。
/* 等价于上面的拆分写法 */
.box {
transition: width 1s linear 0s, background-color 0.5s ease-in-out 0.3s;
}
/* 最简写法：所有属性、1秒时长、默认ease、无延迟 */
.box {
transition: 1s;
}
/* 常用写法：所有属性、0.3秒时长、ease-out、无延迟 */
.box {
transition: all 0.3s ease-out;
}js
- 网页特效
- 输入的内容验证
- 动态交互
- 文字特效
方法
- alert() 用于弹出一个警告框
prompt()是 JavaScript 内置的全局函数，用于在浏览器中弹出一个带「提示文本 + 输入框 + 确定 / 取消按钮」的对话框，向用户请求输入信息，是简单的用户交互方式之一。
prompt(message, defaultValue);| 参数 | 说明 |
|---|---|
message | 可选。显示在对话框中的提示文本（比如 “请输入你的姓名”），若省略则显示空。 |
defaultValue | 可选。输入框中默认显示的文本（比如预设的默认值），省略则输入框为空。 |
返回值（关键）
对话框关闭后返回值分 3 种情况，始终为字符串类型（或 null）：
- 👉 用户输入内容 → 点击「确定」→ 返回输入的字符串（即使输入数字，也是字符串类型）；
- 👉 用户未输入内容 → 点击「确定」→ 返回空字符串
""； - 👉 用户点击「取消」/ 关闭对话框 → 返回
null。
访问节点（列举 简答）
| 方法 | 语法 | 返回值 | 关键说明 |
|---|---|---|---|
| getElementById() | document.getElementById(id) | 匹配 ID 的单个元素节点（无则返回 null） | ID 唯一，效率最高 |
| getElementsByName() | document.getElementsByName(name) | 获取带有指定name属性名称的节点 | |
| getElementsByTagName() | document.getElementsByTagName(tag) | 匹配标签名 | 如div、p，返回类数组 |
| getElementsByClassName() | document.getElementsByClassName(class) | 匹配类名 | 类名可多个（空格分隔） |
| querySelector() | document.querySelector(selector) | 匹配 CSS 选择器的第一个元素（无则 null） | 支持任意 CSS 选择器（#id、.class、tag） |
| querySelectorAll() | document.querySelectorAll(selector) | 匹配 CSS 选择器的NodeList（静态集合） | 返回所有匹配元素，类数组 |
函数
// 语法：function 函数名(形参1, 形参2) { 代码块 }
function sum(a, b) {
return a + b;
}- 特点：存在函数提升（可在声明前调用）；
- 适用：全局 / 局部的通用函数。
函数中变量的作用域
全局变量：定义在所有函数外，作用于整个程序的变量
局部变量：定义在函数体内，作用于函数体的变量