Web 前端基础知识点汇总
一、HTML 基础
1.1 浏览器内核
浏览器内核核心包含渲染引擎（解析 HTML/CSS，渲染页面）和JS 引擎（解析执行 JavaScript），不同浏览器内核差异如下：
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | 适配 IE、早期 Edge |
| Firefox | Gecko | 近年市场份额下降，存在打开速度慢、升级频繁问题 |
| Safari | WebKit | 常被误称为 Chrome 内核（Chrome 现已改用 Blink） |
| Chrome | Chromium/Blink | Blink 是 WebKit 分支，多数国产浏览器最新版基于 Blink 二次开发 |
| Opera | Presto/Blink | 早期用 Presto，现跟随 Chrome 使用 Blink |
| Edge | EdgeHTML/Blink | 新版 Edge 已切换为 Blink 内核 |
1.2 Web 标准（核心）
Web 标准是 W3C 等标准化组织制定的一系列规范集合，目的是解决不同浏览器渲染差异问题，核心分为三部分：
| 标准类型 | 核心技术 | 作用描述 | 形象比喻 |
|---|---|---|---|
| 结构标准 | HTML | 对网页元素整理、分类 | 天然身体 |
| 表现标准 | CSS | 设置元素版式、颜色、大小等外观 | 美丽外观 |
| 行为标准 | JavaScript | 定义网页交互逻辑、动态效果 | 吸引人的行为 |
1.3 HTML 文档结构（必掌握）
HTML 文档是后缀为.html的文本文件，基础结构为：
html
预览
<!DOCTYPE html> <!-- 声明文档类型为HTML5 --> <html lang="en"> <!-- 根标签，lang指定页面语言（en=英文，zh-CN=中文） --> <head> <!-- 头部：存放页面元信息，用户不可见 --> <meta charset="UTF-8"> <!-- 字符编码，UTF-8适配多语言 --> <title>我的主页</title> <!-- 页面标题，显示在浏览器标签栏 --> <!-- 可选：添加网页小图标 --> <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"> </head> <body> <!-- 主体：用户可见的页面内容 --> 页面核心内容 </body> </html> 1.4 HTML 标签基础
1.4.1 标签分类
| 类型 | 语法格式 | 示例 |
|---|---|---|
| 双标签 | <标签名>内容</标签名> | <body>内容</body> |
| 单标签 | <标签名 /> | <br />、<hr /> |
1.4.2 标签关系
| 关系 | 语法示例 | 格式规范 |
|---|---|---|
| 嵌套关系 | <head><title></title></head> | 子元素缩进 1 个 Tab 键 |
| 并列关系 | <head></head><body></body> | 上下对齐，无缩进 |
1.5 HTML 常用标签
1.5.1 排版标签（核心）
| 标签 | 语法 | 作用说明 |
|---|---|---|
| 标题标签 | <h1>~<h6> | 标题层级从 h1（最大）到 h6（最小），独占一行 |
| 段落标签 | <p>文本</p> | 定义文本段落，上下有默认间距 |
| 水平线标签 | <hr /> | 显示水平线，单标签 |
| 换行标签 | <br /> | 强制换行，单标签（替代回车键） |
| div 标签 | <div>内容</div> | 块级布局容器，一行仅能放一个 |
| span 标签 | <span>内容</span> | 行内布局容器，一行可放多个 |
1.5.2 文本格式化标签
| 效果 | 基础标签 | 语义化标签 | 推荐使用 |
|---|---|---|---|
| 粗体 | <b> | <strong> | strong |
| 斜体 | <i> | <em> | em |
| 删除线 | <s> | <del> | del |
| 下划线 | <u> | <ins> | ins |
1.5.3 图像标签（img，重点）
html
预览
<img src="图像URL" <!-- 必选：图片路径（相对/绝对） --> alt="图片加载失败提示" <!-- 必选：图片无法加载时的替代文本 --> title="鼠标悬浮提示" <!-- 可选：鼠标悬浮时显示的文本 --> <!-- 可选：宽度（仅设宽/高会等比缩放） --> <!-- 可选：高度 --> /> 1.5.4 链接标签（a，重点）
html
预览
<a href="跳转目标" <!-- 必选：链接地址（外部/内部/空链接#） --> target="_self/_blank" <!-- 可选：_self（当前窗口）/_blank（新窗口） --> >文本/图片</a> <!-- 示例 --> <a href="http://www.baidu.com" target="_blank">百度</a> <!-- 外部链接 --> <a href="index.html">首页</a> <!-- 内部链接 --> <a href="#">空链接</a> <!-- 临时空链接 --> 1.5.5 锚点定位（难点）
html
预览
<!-- 步骤1：定义锚点（给目标元素加id） --> <p>目标位置</p> <!-- 步骤2：创建锚点链接 --> <a href="#target">跳转到目标位置</a> 1.5.6 特殊字符（常用）
| 显示效果 | 实体名称 | 实体编号 | 适用场景 |
|---|---|---|---|
| 空格 | |   | 文本中添加空格 |
| < | < | < | 显示小于号 |
| > | > | > | 显示大于号 |
| & | & | & | 显示和号 |
| ¥ | ¥ | ¥ | 显示人民币符号 |
| © | © | © | 显示版权符号 |
1.5.7 注释标签
html
预览
<!-- 注释内容 --> <!-- 快捷键：Ctrl+/ --> 注释仅在源代码中可见，浏览器不渲染，用于标注代码含义。
1.5.8 路径（重点 + 难点）
| 路径类型 | 定义 | 示例 |
|---|---|---|
| 相对路径 | 以当前文件为参考基准 | 同目录：img/logo.png |
上一级：../img/logo.png | ||
| 绝对路径 | 以根目录 / 完整 URL 为基准 | 本地：D:\web\img\logo.png |
网络：http://xxx.com/logo.png |
1.6 列表与表单
1.6.1 列表
| 列表类型 | 核心标签 | 语法示例 | 适用场景 |
|---|---|---|---|
| 无序列表 | <ul>+<li> | <ul><li>列表项1</li><li>列表项2</li></ul> | 导航、菜单等 |
| 有序列表 | <ol>+<li> | <ol><li>步骤1</li><li>步骤2</li></ol> | 步骤、排名等 |
| 自定义列表 | <dl>+<dt>+<dd> | <dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl> | 说明、解释等 |
1.6.2 表格
html
预览
<table <!-- 边框宽度（px） --> <!-- 单元格间距（默认2px） --> <!-- 单元格内边距（默认2px） --> <!-- 表格水平对齐（left/center/right） --> <!-- 表格宽度 --> > <caption>表格标题</caption> <!-- 表格标题 --> <tr> <!-- 行 --> <th>表头单元格</th> <!-- 表头（加粗居中） --> <td>普通单元格</td> <!-- 普通单元格 --> </tr> <!-- 合并单元格：rowspan（跨行）/colspan（跨列） --> <tr> <td rowspan="2">跨行合并</td> <!-- 跨2行 --> <td colspan="2">跨列合并</td> <!-- 跨2列 --> </tr> </table> 1.6.3 表单（核心）
（1）input 控件（单标签）
| type 值 | 语法示例 | 作用 |
|---|---|---|
| text | <input type="text" placeholder="请输入用户名"> | 单行文本输入 |
| password | <input type="password"> | 密码输入（隐藏） |
| checkbox | <input type="checkbox" name="hobby" value="game"> | 复选框（name 相同为一组） |
| radio | <input type="radio" name="sex" value="male"> | 单选框（name 相同为一组） |
| button | <input type="button" value="普通按钮"> | 普通按钮 |
| submit | <input type="submit"> | 提交表单 |
| reset | <input type="reset"> | 重置表单 |
| file | <input type="file"> | 文件上传 |
<input type="email" required> | 邮箱格式校验（HTML5） | |
| number | <input type="number"> | 数字输入（HTML5） |
（2）label 标签（关联控件）
html
预览
<label for="username">账号：</label> <input type="text"> <!-- for与id一致，点击label聚焦输入框 --> （3）textarea 文本域
html
预览
<textarea rows="5" <!-- 可见行数 --> cols="30" <!-- 可见列数 --> maxlength="100" <!-- 最大输入长度 --> >默认文本</textarea> （4）select 下拉框
html
预览
<select> <option value="1">选项1</option> <option value="2" selected>默认选中</option> <!-- selected默认选中 --> </select> （5）form 表单容器
html
预览
<form action="提交地址" <!-- 表单提交的后台地址 --> method="get/post" <!-- 提交方式：get（明文）/post（暗文，推荐） --> > <!-- 表单控件放在form内 --> <input type="text" name="username"> <!-- name为提交参数名 --> <input type="submit" value="提交"> </form> 1.7 HTML5 新特性
1.7.1 新增 input 类型（重点）
| type 值 | 语法示例 | 功能说明 |
|---|---|---|
<input type="email"> | 校验邮箱格式 | |
| tel | <input type="tel"> | 手机号码输入（仅语义） |
| url | <input type="url"> | 校验 URL 格式 |
| search | <input type="search"> | 搜索框（语义化） |
| range | <input type="range"> | 拖动滑块（数值选择） |
| date | <input type="date"> | 日期选择器 |
1.7.2 新增属性
| 属性名 | 语法示例 | 作用 |
|---|---|---|
| placeholder | <input type="text" placeholder="请输入"> | 输入框占位提示 |
| required | <input type="text" required> | 必填项（提交校验） |
1.7.3 多媒体标签
（1）音频（audio）
html
预览
<audio src="music.mp3" <!-- 音频路径 --> controls <!-- 显示播放控件 --> loop <!-- 循环播放 --> muted <!-- 静音播放（解决自动播放限制） --> >您的浏览器不支持音频播放</audio> （2）视频（video）
html
预览
<video src="video.mp4" <!-- 视频路径 --> controls <!-- 显示播放控件 --> <!-- 播放器宽度 --> loop <!-- 循环播放 --> muted <!-- 静音播放 --> >您的浏览器不支持视频播放</video> 二、CSS 基础
2.1 CSS 概述
CSS（层叠样式表）用于控制网页元素的外观样式，核心是 “选择器 + 样式声明”。
2.2 CSS 使用方式（3 种）
| 使用方式 | 语法示例 | 适用场景 | 推荐度 |
|---|---|---|---|
| 行内样式 | <div> | 临时样式 | 不推荐 |
| 内部样式 | <style>div { color: red; }</style> | 单页面样式 | 临时使用 |
| 外部样式 | <link rel="stylesheet" href="style.css"> | 多页面复用 | 强烈推荐 |
外部样式补充：CSS 文件中可引入公共样式
css
@import url("global.css"); /* 引入公共样式文件 */ 2.3 CSS 字体样式属性
2.3.1 基础属性
| 属性名 | 取值示例 | 说明 |
|---|---|---|
| font-size | 16px / 1.2em | 字号（1em=16px，默认 16px） |
| font-family | "微软雅黑", "宋体", sans-serif | 字体（多个字体逗号分隔） |
| font-weight | normal(400) / bold(700) / 100-900 | 字体粗细（900 最粗） |
| font-style | normal / italic / oblique | 字体风格（italic 斜体） |
2.3.2 复合属性（font）
css
/* 语法：font-style font-weight font-size font-family（顺序不可换） */ div { font: italic bold 16px "微软雅黑"; } /* 必须保留font-size和font-family，其他可选 */ div { font: 16px "微软雅黑"; } 2.4 CSS 注释
css
/* CSS注释内容 */ /* 快捷键：Ctrl+/ */ 三、CSS 选择器
3.1 基本选择器（重点）
| 选择器类型 | 语法 | 示例 | 优先级 | 说明 |
|---|---|---|---|---|
| 通配符选择器 | * | * { margin: 0; } | 最低 | 匹配所有元素 |
| 标签选择器 | 标签名 | div { color: red; } | 低 | 匹配所有该标签元素 |
| 类选择器 | . 类名 | .box { width: 100px; } | 中 | 匹配 class 为 box 的元素（可重复） |
| ID 选择器 | #ID 名 | #header { height: 50px; } | 高 | 匹配 id 为 header 的元素（唯一） |
| 行内样式 | style 属性 | - | 最高 | 行内样式优先级最高 |
优先级规则：行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 通配符选择器；同级选择器遵循 “就近原则”。
3.2 复合选择器（重点）
| 选择器类型 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 并集选择器 | 选择器 1, 选择器 2 | .box, #nav { color: red; } | 同时匹配多个选择器 |
| 后代选择器 | 父选择器 子选择器 | .nav li { padding: 5px; } | 匹配父元素下所有后代元素 |
| 子选择器 | 父选择器 > 子选择器 | .nav>li { margin: 0; } | 仅匹配父元素的直接子元素（亲儿子） |
3.3 伪类选择器（重点）
（1）链接伪类
css
/* 顺序：link → visited → hover → active（LVHA） */ a:link { color: gray; } /* 未访问的链接 */ a:visited { color: blue; } /* 已访问的链接 */ a:hover { color: red; } /* 鼠标悬浮（核心） */ a:active { color: green; } /* 鼠标按下 */ 四、CSS 外观属性
4.1 文本颜色（color）
css
/* 三种写法 */ div { color: red; /* 预定义颜色名 */ color: #ff0000; /* 16进制（推荐） */ color: rgba(255, 0, 0, 0.5); /* RGB+透明度（0-1） */ } 4.2 行间距（line-height）
css
div { line-height: 24px; } /* 行高，可用于单行文本垂直居中 */ 4.3 水平对齐（text-align）
css
div { text-align: center; } /* left/center/right，控制文本/行内元素水平对齐 */ 4.4 首行缩进（text-indent）
css
p { text-indent: 2em; } /* 首行缩进2个字符（1em=1个字符） */ 4.5 文本修饰（text-decoration）
css
a { text-decoration: none; } /* 去除链接下划线（核心） */ div { text-decoration: underline; } /* 下划线 */ div { text-decoration: line-through; } /* 删除线 */ 4.6 字符间距（letter-spacing）
css
div { letter-spacing: 2px; } /* 字符之间的间距 */ 4.7 文字阴影（text-shadow）
css
/* 语法：水平偏移 垂直偏移 模糊距离 颜色 */ div { text-shadow: 2px 2px 3px #666; } /* 多重阴影 */ div { text-shadow: -5px 0 cyan, 5px 0 red; } 五、标签显示模式与背景样式
5.1 标签显示模式（核心）
| 模式 | 核心特征 | 代表标签 |
|---|---|---|
| 块级元素（block） | 独占一行；宽高可设置；默认宽度 100%；可嵌套任意元素 | div、p、h1-h6、ul/li、table |
| 行内元素（inline） | 不独占一行；宽高不可设置；大小由内容决定；仅可嵌套行内元素 | a、span、b、em |
| 行内块元素（inline-block） | 不独占一行；宽高可设置 | img、input、select |
模式转换（display）
css
div { display: inline; } /* 块级转行内 */ a { display: block; } /* 行内转块级 */ span { display: inline-block; } /* 行内转行内块 */ 5.2 背景样式（重点）
5.2.1 基础属性
| 属性名 | 取值示例 | 说明 |
|---|---|---|
| background-color | #fff / rgba(0,0,0,0.5) | 背景颜色（支持透明） |
| background-image | url("img/bg.jpg") | 背景图片 |
| background-repeat | no-repeat / repeat-x / repeat-y | 图片重复方式（no-repeat 常用） |
| background-position | center / 50px 50px / 20% 20% | 图片位置（水平 垂直） |
| background-attachment | fixed / scroll | 图片是否固定（fixed 固定） |
| background-size | cover / contain / 100px 100px | 图片缩放（cover 铺满，contain 完整显示） |
5.2.2 复合属性（background）
css
/* 语法：color image repeat attachment position */ div { background: #fff url("bg.jpg") no-repeat fixed center; background-size: cover; /* CSS3属性，需单独写 */ } 5.2.3 精灵图（Sprite）
核心原理：将多张小图合并为一张大图，通过background-position定位显示指定区域，减少 HTTP 请求。
css
.icon { width: 50px; height: 50px; background: url("sprite.png") no-repeat; background-position: -20px -30px; /* 向左向上偏移，显示目标小图 */ background-size: 200px 150px; /* 缩放精灵图适配容器 */ } 六、盒子模型（CSS 核心）
盒子模型是 CSS 布局的基础，每个元素都可视为一个 “盒子”，由四部分组成：内容（content）+ 内边距（padding）+ 边框（border）+ 外边距（margin）
6.1 边框（border）
css
/* 复合写法：宽度 样式 颜色（顺序不限） */ div { border: 1px solid #ccc; } /* 单方向边框 */ div { border-top: 2px red; } /* 仅上边框 */ /* 边框样式（border-style） */ div { border-style: solid; } /* 实线（常用）/ dashed（虚线）/ dotted（点线）/ double（双实线） */ /* 圆角边框（CSS3） */ div { border-radius: 5px; } /* 圆角半径 */ div { border-radius: 50%; } /* 圆形（正方形容器） */ 6.2 内边距（padding）
css
/* 单方向 */ div { padding-left: 10px; } /* 左内边距 */ /* 复合写法 */ div { padding: 10px; /* 上下左右均10px */ padding: 10px 20px; /* 上下10px，左右20px */ padding: 10px 20px 30px; /* 上10px，左右20px，下30px */ padding: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */ } 6.3 外边距（margin）
css
/* 语法同padding，用于控制元素之间的间距 */ div { margin: 0 auto; } /* 块级元素水平居中（需设置宽度） */ /* 外边距合并问题 */ /* 1. 上下相邻块元素：外边距取最大值 */ /* 2. 父子嵌套元素：父元素上外边距与子元素上外边距合并 */ /* 解决方案：给父元素加1px边框/内边距，或触发BFC */ 6.4 溢出处理（overflow）
css
div { width: 100px; height: 100px; overflow: hidden; /* 隐藏溢出内容 */ /* overflow: auto; 溢出时显示滚动条；scroll：始终显示滚动条 */ } 七、浮动（float）
7.1 浮动作用
解决块级元素默认独占一行的问题，实现多列布局（如导航、图文混排）。
7.2 语法
css
div { float: left; } /* 左浮动 */ div { float: right; } /* 右浮动 */ div { float: none; } /* 取消浮动（默认） */ 7.3 浮动特性
- 浮动元素脱离标准流，不占位置；
- 浮动元素会向左 / 右移动，直到碰到父元素或其他浮动元素；
- 浮动元素会影响后续标准流元素（需清除浮动）。
7.4 清除浮动
css
/* 方法1：给父元素加overflow: hidden */ .parent { overflow: hidden; } /* 方法2：伪元素清除法（推荐） */ .clearfix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { *zoom: 1; } /* 兼容IE6/7 */ 八、定位（position）
8.1 定位模式
| 定位类型 | 语法 | 参考基准 | 特性 | 应用场景 |
|---|---|---|---|---|
| 相对定位 | position: relative; | 自身原位置 | 保留标准流位置（不脱标） | 微调位置、作为绝对定位父容器 |
| 绝对定位 | position: absolute; | 最近的已定位祖先元素 | 脱离标准流（不占位置） | 精准定位（子绝父相） |
| 固定定位 | position: fixed; | 浏览器窗口 | 脱离标准流，固定位置 | 回到顶部、导航栏 |
8.2 边偏移（配合定位使用）
css
div { position: absolute; top: 10px; /* 距离顶部10px */ left: 20px; /* 距离左侧20px */ /* bottom/right：距离底部/右侧 */ } 8.3 叠放次序（z-index）
css
div { position: relative; z-index: 999; /* 数值越大，越在上层（默认0，可设负数） */ } 九、JavaScript 基础
9.1 JavaScript 使用方式
9.1.1 外部 JS 文件（推荐）
html
预览
<!-- 放在body末尾，避免阻塞渲染 --> <script src="script.js"></script> 9.1.2 内嵌 JS 代码
html
预览
<script> // JS代码写在这里 console.log("Hello JavaScript"); // 控制台输出 </script> 9.2 核心操作：获取 / 修改元素
9.2.1 获取元素
javascript
运行
// 根据class获取（返回伪数组） var nav = document.getElementsByClassName("nav")[0]; // 根据标签名获取（返回伪数组） var divs = document.getElementsByTagName("div")[0]; // 根据id获取（返回单个元素） var box = document.getElementById("box"); 9.2.2 修改元素内容
9.2.1 获取元素
javascript
运行
// 根据class获取（返回伪数组） var nav = document.getElementsByClassName("nav")[0]; // 根据标签名获取（返回伪数组） var divs = document.getElementsByTagName("div")[0]; // 根据id获取（返回单个元素） var box = document.getElementById("box"); 9.2.2 修改元素内容
javascript
运行
// innerText：仅识别文本（不解析标签） nav.innerText = "<i>文本内容</i>"; // 输出：<i>文本内容</i> // innerHTML：解析HTML标签（常用） nav.innerHTML = "<i>文本内容</i>"; // 输出：斜体的文本内容 9.2.3 修改元素样式
javascript
运行
// 语法：元素.style.样式名 = 样式值（驼峰命名） nav.style.width = "200px"; nav.style.backgroundColor = "blue"; // background-color → backgroundColor nav.style.fontSize = "16px"; 9.2.4 修改元素属性
javascript
运行
// 获取属性 var src = img.getAttribute("src"); // 设置属性 img.setAttribute("src", "new.jpg"); 9.3 JavaScript 事件（核心）
9.3.1 鼠标事件
javascript
运行
var box = document.getElementsByClassName("box")[0]; // 鼠标移入 box.onmouseover = function() { box.style.backgroundColor = "yellow"; }; // 鼠标移出 box.onmouseout = function() { box.style.backgroundColor = "green"; }; // 鼠标按下 box.onmousedown = function() { box.style.width = "150px"; }; // 鼠标抬起 box.onmouseup = function() { box.style.width = "100px"; }; // 鼠标移动（获取坐标） box.onmousemove = function(e) { console.log("X：" + e.clientX, "Y：" + e.clientY); // 鼠标相对于窗口的坐标 }; 9.3.2 键盘事件
javascript
运行
// 键盘按下 document.onkeydown = function(e) { console.log(e.keyCode); // 按键编码（37=左，38=上，39=右，40=下） // 上下左右键控制元素移动 var oLeft = parseInt(box.style.left) || 0; var oTop = parseInt(box.style.top) || 0; if (e.keyCode === 37) { // 左 box.style.left = oLeft - 2 + "px"; } else if (e.keyCode === 39) { // 右 box.style.left = oLeft + 2 + "px"; } }; 9.4 定时器（setInterval）
javascript
运行
// 语法：setInterval(函数, 时间间隔ms) var oLeft = 0; var timer = setInterval(function() { oLeft += 10; box.style.left = oLeft + "px"; // 元素向右移动 // 停止定时器：clearInterval(timer) }, 100); // 每100ms执行一次 9.5 旗帜法则（状态切换）
javascript
运行
var flag = true; // 状态标记 box.onclick = function() { if (flag) { // 状态1 box.style.width = "200px"; flag = false; } else { // 状态2 box.style.width = "100px"; flag = true; } }; 总结
HTML 核心要点
- HTML 是网页的结构基础，核心是标签的语义化和正确嵌套；
- 表单、列表、链接是交互类页面的核心组件，需掌握其语法和属性；
- HTML5 新增的 input 类型、多媒体标签提升了页面原生能力。
CSS 核心要点
- 盒子模型是布局的基础，需理解 margin/padding/border 的作用和计算方式；
- 浮动和定位是实现复杂布局的核心，需掌握清除浮动和 “子绝父相” 的应用；
- 选择器优先级和显示模式转换是样式控制的关键。
JavaScript 核心要点
- JS 主要用于页面交互，核心是 “获取元素→修改元素 / 绑定事件”；
- 事件（鼠标 / 键盘）和定时器是实现动态效果的基础；
- innerHTML/innerText 的区别、样式修改的驼峰命名是高频易错点。
