全栈系列——【前端篇01】

前端面试笔记整理

一、W3C 万维网联盟

定义：World Wide Web Consortium，对 Web 进行标准化的国际组织。

作用：制定 HTML、CSS、JavaScript 等技术标准，确保不同浏览器的一致性。

二、浏览器内核对照表

> 💡 补充：国内常见浏览器（360、搜狗、UC）多为 Blink 或 WebKit 双核。

三、Form 表单基础

1. action & method 属性

<!– GET 方式：数据会显示在 URL 中（适合搜索） –>
<form action="/search" method="GET">
<input name="keyword" value="前端">
<!– 提交后跳转：/search?keyword=前端 –>
</form>

<!– POST 方式：数据在请求体中（适合登录、提交数据） –>
<form action="/login" method="POST">
<input name="username">
<input type="password" name="pwd">
</form>

四、Input 输入框详解

1. 常用属性

<!– 完整示例：登录表单 –>
<input
type="text"
name="username"
placeholder="请输入用户名"
maxlength="20"
required
autofocus
>
<input
type="password"
name="pwd"
placeholder="密码"
required
>

2. type 属性值

<!– 单选组：name 相同才能互斥 –>
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<!– 多选组 –>
<label><input type="checkbox" name="hobby" value="read"> 读书</label>
<label><input type="checkbox" name="hobby" value="code" checked> 编程</label>

📌 补充常用 type：email、tel、number、date、color、search、submit、reset、button、hidden

五、HTML 标签分类

1. 块级标签（Block）

特点：独占一行，可设宽高，默认宽度 100%

<!– 标题 –>
<h1>一级标题</h1> <h2>二级标题</h2> … <h6>六级标题</h6>

<!– 段落与容器 –>
<p>段落</p>
<div>通用容器</div>

<!– 列表 –>
<ul>无序列表
<li>列表项</li>
</ul>
<ol>有序列表
<li>列表项</li>
</ol>
<dl>定义列表
<dt>术语</dt>
<dd>解释</dd>
</dl>

<!– 表格 –>
<table>
<thead><tr><th>表头</th></tr></thead>
<tbody><tr><td>数据</td></tr></tbody>
</table>

<!– 其他 –>
<hr> <!– 水平线 –>
<address> <!– 地址信息 –>
<pre> <!– 预格式化文本 –>
<form> <!– 表单 –>

2. 行内标签（Inline）

特点：不独占一行，不可设宽高（img 等特殊除外）

<!– 文本修饰 –>
<span>无语义容器</span>
<strong>加粗（强调）</strong> <b>加粗</b>
<em>斜体（强调）</em> <i>斜体</i>
<ins>下划线</ins> <u>下划线</u>
<del>删除线</del> <s>删除线</s>
<big>大号字</big> <small>小号字</small>
^上标 _下标

<!– 功能标签 –>
<img src="photo.jpg" alt="描述"> <!– 图片 –>
<a href="https://example.com">链接</a>
<td>表格单元格</td> <th>表头单元格</th>
<input> <select> <textarea> <label> <button> <iframe>

六、前端三层架构

<!– HTML：结构 –>
<nav class="menu">
<button id="btn">点击我</button>
</nav>

<!– CSS：表现 –>
<style>
.menu { background: #333; padding: 20px; }
#btn { color: white; background: #007bff; }
</style>

<!– JavaScript：行为 –>
<script>
document.getElementById('btn').addEventListener('click', () => {
alert('Hello World!');
});
</script>

七、CSS 选择器优先级

权重计算（非官方但便于理解）：

/* 权重计算示例 */
#app .item p { } /* 100 + 10 + 1 = 111 */
.container a:hover { } /* 10 + 1 + 10 = 21 */
.nav ul li { } /* 10 + 1 + 1 = 12 */

/* !important 覆盖一切 */
p { color: blue !important; } /* 权重 ∞ */

⚠️ 注意：!important 应慎用，会破坏层叠规则，难以维护。

八、常用 CSS 样式

1. 文本域禁止拉伸

textarea {
resize: none; /* 禁止拖动改变大小 */
/* resize: horizontal; */ /* 只允许水平拉伸 */
/* resize: vertical; */ /* 只允许垂直拉伸 */
}

2. 文本超出显示省略号（单行）

.ellipsis {
width: 200px; /* 必须设置宽度 */
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出 */
text-overflow: ellipsis; /* 显示省略号 */
}

多行省略（webkit 内核）：

.ellipsis-2 {
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制 2 行 */
-webkit-box-orient: vertical;
overflow: hidden;
}

九、HTML 属性与图片标签

1. 什么是 HTML 属性？

给 HTML 元素提供的附加信息，写在开始标签中，格式为 name="value"。

<a href="url" target="_blank" title="提示文字">链接</a>
<!– href、target、title 都是属性 –>

2. 图片标签属性

<img
src="images/logo.png" <!– 图片路径（必须） —>
alt="公司 Logo" <!– 替代文本（SEO、无障碍阅读） –>
width="200" <!– 宽度（px） –>
height="100" <!– 高度（px，通常只设一个保持比例） –>
title="鼠标悬停提示" <!– 标题提示 –>
>

📌 alt 与 title 区别：alt 是图片加载失败时显示，也是屏幕阅读器读取的内容；title 是鼠标悬停提示。

十、锚链接实现

两步实现页内跳转：

<!– 1. 设置锚点（目标位置） –>
<h2 id="section1">第一章</h2>
<p>内容…</p>
<h2 id="section2">第二章</h2>

<!– 2. 创建跳转链接 –>
<a href="#section1">跳到第一章</a>
<a href="#section2">跳到第二章</a>

<!– 跨页面锚点 –>
<a href="article.html#section2">跳到另一页的第二章</a>

十一、表格 Table 属性

<table
border="1" <!– 边框宽度（已废弃，建议用 CSS） —>
align="center" <!– 表格对齐（left/center/right） –>
bgcolor="#f5f5f5" <!– 背景色 –>
width="600" <!– 宽度 –>
height="400" <!– 高度 –>
cellpadding="10" <!– 单元格内边距 –>
cellspacing="0" <!– 单元格间距（0 表示合并边框） –>
>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>

现代写法（推荐 CSS）：

table {
border-collapse: collapse; /* 合并边框 */
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}

十二、CSS 文本样式

/* 实用组合：文章正文样式 */
.article {
color: #333;
line-height: 1.8;
text-align: justify; /* 两端对齐 */
text-indent: 2em; /* 首行缩进 2 字符 */
letter-spacing: 0.5px; /* 轻微字间距 */
}

/* 超链接去下划线 */
a { text-decoration: none; }

/* 英文标题大写 */
h1 { text-transform: uppercase; }

十三、链接伪类（LVHA 顺序）

必须按此顺序书写，否则样式会被覆盖：

a:link { color: blue; } /* L – 未访问 */
a:visited { color: purple; } /* V – 已访问 */
a:hover { color: red; } /* H – 悬停（最常用） */
a:active { color: orange; } /* A – 点击瞬间 */

/* 记忆口诀：LoVe HAte（爱与恨） */

常用简写：

/* 正常状态 + 悬停状态 就足够 */
a { color: #666; text-decoration: none; }
a:hover { color: #007bff; text-decoration: underline; }

十四、CSS 字体样式

.font-demo {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif; /* 字体类型（多个备用） */
font-size: 16px; /* 字体大小（默认 16px） */
font-weight: 700; /* 粗细：normal(400)、bold(700)、100-900 */
font-style: italic; /* 斜体：normal、italic、oblique */
font-variant: small-caps; /* 小型大写字母 */

/* 简写（必须按顺序：style variant weight size/line-height family） */
font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
}

十五、CSS 背景属性

/* 全屏背景图（常用） */
.hero {
background: url("hero.jpg") no-repeat center/cover;
/* 等价于： */
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

/* 简写格式 */
background: [color] [image] [repeat] [attachment] [position]/[size];

十六、CSS 盒模型

1. 两种盒模型对比

/* 标准盒模型（默认） */
.box1 {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid #000;
/* 实际占用宽度：300 + 20*2 + 5*2 = 350px */
}

/* 怪异盒模型（强烈推荐全局使用） */
.box2 {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #000;
/* 实际占用宽度：300px（内容区自动压缩为 250px） */
}

全局重置（推荐在项目开头使用）：

/* 让所有元素使用 border-box，告别宽度计算烦恼 */
*, *::before, *::after {
box-sizing: border-box;
}

十七、CSS 初始化（Reset）

作用：消除浏览器默认样式差异，统一基准。

/* 最简版 */
* {
margin: 0;
padding: 0;
}

/* 推荐版（更完善） */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
color: #333;
}

ul, ol {
list-style: none; /* 去除列表默认点/数字 */
}

a {
text-decoration: none;
color: inherit;
}

img {
max-width: 100%; /* 图片不溢出容器 */
vertical-align: middle; /* 去除图片底部空隙 */
}

input, button {
outline: none; /* 去除聚焦蓝框 */
border: none;
}

十八、CSS 定位（Position）

/* 相对定位：微调元素位置 */
.item {
position: relative;
top: 10px; /* 向下移 10px（原位置仍保留） */
left: 20px; /* 向右移 20px */
}

/* 绝对定位：子绝父相 */
.parent {
position: relative; /* 建立定位上下文 */
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 完美居中 */
}

/* 固定定位：悬浮按钮 */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
}

十九、隐藏元素的三种方法

.hidden-fade { opacity: 0; transition: 0.3s; } /* 渐变隐藏 */
.hidden-layout { visibility: hidden; } /* 占位隐藏 */
.hidden-remove { display: none; } /* 彻底移除（SEO 不收录） */

二十、上边框塌陷（Margin Collapse）

现象：子元素 margin-top 传递给父元素，导致父元素一起下移。

三种解决方案：

/* 方法 1：触发 BFC（最佳） */
.parent {
overflow: hidden; /* 或 auto、scroll */
}

/* 方法 2：用 padding 替代 margin */
.parent {
padding-top: 20px; /* 代替子元素的 margin-top */
}

/* 方法 3：给父元素加边框 */
.parent {
border-top: 1px solid transparent; /* 透明边框 */
}

BFC（块级格式化上下文）触发方式：

• overflow: hidden/auto/scroll
• display: inline-block/table-cell
• position: absolute/fixed
• float: left/right

二十一、浮动（Float）

1. 作用

让块级元素在一行显示（早期用于多列布局，现多用 Flex/Grid）。

.item {
float: left; /* 左浮动，依次向右排列 */
/* float: right; */ /* 右浮动，依次向左排列 */
}

2. 弊端：高度塌陷

父元素无法包裹浮动子元素，高度变为 0。

3. 清除浮动的三种方法

/* 方法 1：给父元素设高（不推荐，不灵活） */
.parent { height: 200px; }

/* 方法 2：触发 BFC（推荐） */
.parent { overflow: hidden; }

/* 方法 3：伪元素清除（最优雅，兼容性最好） */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* HTML: <div class="parent clearfix">…</div> */

二十二、Flex 弹性布局

1. 主轴对齐（justify-content）

.container {
display: flex;
justify-content: flex-start; /* 左对齐（默认） */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐，中间等分 */
justify-content: space-around; /* 两侧间距为中间的一半 */
justify-content: space-evenly; /* 所有间距完全相等 */
}

示意图：

flex-start: [A][B][C]
flex-end: [A][B][C]
center: [A][B][C]
space-between: [A] [B] [C]
space-around: [ A ] [ B ] [ C ]
space-evenly: [ A ][ B ][ C ]

2. 弹性布局常用 5 属性

/* 完美居中（水平+垂直） */
.center-box {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

二十三、CSS 组合选择器

/* 后代：选中 nav 内所有 a */
.nav a { color: red; }

/* 子代：仅选中直接子级 a（孙级不选） */
.nav > a { font-weight: bold; }

/* 并集：统一设置标题样式 */
h1, h2, h3, .page-title {
font-family: "Microsoft YaHei";
color: #333;
}

其他实用选择器：

/* 相邻兄弟 + */
h2 + p { margin-top: 0; } /* 紧跟 h2 的 p */

/* 通用兄弟 ~ */
h2 ~ p { color: gray; } /* h2 后面所有兄弟 p */

/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"] { color: green; } /* 以 https 开头 */
a[href$=".pdf"] { color: red; } /* 以 .pdf 结尾 */

二十四、图片之间留白问题

原因：图片为行内元素，受 vertical-align 和 line-height 影响产生间隙。

四种解决方法：

/* 方法 1：父元素 flex 布局（推荐） */
.parent {
display: flex;
}

/* 方法 2：父元素 font-size 归零 */
.parent {
font-size: 0;
}
.parent img {
font-size: 16px; /* 图片内恢复字体大小 */
}

/* 方法 3：图片转块级 */
img {
display: block;
}

/* 方法 4：图片浮动 */
img {
float: left;
}

二十五、盒子绝对居中（四种方法）

<div class="parent">
<div class="child">居中盒子</div>
</div>

<style>
/* 方法 1：Flex 布局（最推荐，最简洁） */
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

/* 方法 2：绝对定位 + 计算（需知子元素宽高） */
.child {
position: absolute;
top: calc(50% – 150px); /* 50% – 高度一半 */
left: calc(50% – 200px); /* 50% – 宽度一半 */
width: 400px;
height: 300px;
}

/* 方法 3：绝对定位 + transform（无需知宽高，推荐） */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 自身宽高的 50% */
}

/* 方法 4：绝对定位 + margin auto（需设置宽高） */
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 400px;
height: 300px;
}
</style>

附：常用缩写