【前端基础】HTML + CSS + JavaScript 基础（二）
第一部分：HTML进阶知识
`在第一篇中，我们学习了HTML的基础标签
html
h1-h6、p、a、img、div、span、ul/li`今天我们来学习更多实用的HTML标签。
1.1 表格标签
表格是网页中常见的元素，用来展示结构化的数据。
表格的基本结构
html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
</table>标签说明 ：
|-----------|-----------------------------|
| 标签 | 作用 |
| <table> | 定义表格 |
| <thead> | 表头部分 |
| <tbody> | 表格主体部分 |
| <tr> | 表格行（table row） |
| <th> | 表头单元格（table header），文字会加粗居中 |
| <td> | 表格数据单元格（table data） |
运行效果 ：
会显示一个三列两行的表格，第一行是表头（姓名、年龄、城市），下面两行是数据。
表格的边框和样式
默认情况下，表格是没有边框的。如果要添加边框，需要用CSS：
css
table {
border-collapse: collapse; /* 合并边框 */
width: 100%;
}
th, td {
border: 1px solid #ddd; /* 添加边框 */
padding: 8px; /* 内边距 */
text-align: left;
}
th {
background-color: #f2f2f2; /* 表头背景色 */
}跨行和跨列
有时候，一个单元格需要跨越多行或多列。
html
<table>
<tr>
<th colspan="2">姓名和年龄</th> <!-- 跨越2列 -->
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td rowspan="2">北京</td> <!-- 跨越2行 -->
</tr>
<tr>
<td>李四</td>
<td>30</td>
<!-- 这一行不需要第三个单元格，因为被上面的rowspan占据了 -->
</tr>
</table>属性说明 ：
• colspan="2"：跨越2列
• rowspan="2"：跨越2行
1.2 表单元素
表单是用来收集用户输入的，比如登录框、注册表单、搜索框等。
表单的基本结构
html
<form action="/submit" method="POST">
<!-- 表单内容 -->
</form>属性说明 ：
• action：表单提交的地址
• method：提交方式（GET或POST）
常用的输入类型
1. 文本输入框
html
<input type="text" placeholder="请输入用户名">2. 密码输入框
html
<input type="password" placeholder="请输入密码">3. 单选按钮
html
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女重要 ：单选按钮必须有相同的name属性，这样才能实现"只能选一个"的效果。
4. 复选框
html
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动5. 下拉选择框
html
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>6. 多行文本框
html
<textarea rows="4" cols="50" placeholder="请输入你的留言"></textarea>7. 提交按钮
html
<button type="submit">提交</button>
<!-- 或者 -->
<input type="submit" value="提交">完整的表单示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
form {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form>
<h2>用户注册</h2>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</div>
<div class="form-group">
<label>爱好：</label>
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
</div>
<div class="form-group">
<label for="city">城市：</label>
<select id="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</div>
<div class="form-group">
<label for="message">留言：</label>
<textarea id="message" rows="4" placeholder="请输入你的留言"></textarea>
</div>
<button type="submit">注册</button>
</form>
</body>
</html>运行效果 ：
一个完整的注册表单，包含用户名、密码、性别、爱好、城市、留言等字段。
1.3 HTML属性详解
在第一篇中，我们用到了一些HTML属性，比如href、src、class、id。
今天我们来详细讲解HTML属性。
什么是属性？
属性是HTML标签的额外信息，用来给标签添加更多的特性。
html
<a href="https://www.csdn.net" target="_blank" title="访问CSDN">
点击这里
</a>在这个例子中：
• <a>是标签名
• href、target、title是属性
• https://www.csdn.net、_blank、访问CSDN是属性值
常用的HTML属性
1. id属性
html
<div id="header">网页头部</div>
<div id="content">网页内容</div>
<div id="footer">网页页脚</div>• 作用：给元素一个唯一的标识符
• 特点：每个页面的id必须是唯一的
• 用途：JavaScript通过id选择元素，CSS通过id设置样式
2. class属性
html
<p class="highlight">这是一段需要强调的文字</p>
<p class="highlight">这也是需要强调的文字</p>• 作用：给元素一个或多个类名
• 特点：多个元素可以有相同的class
• 用途：CSS通过class设置样式
3. style属性（不推荐）
html
<p style="color: red; font-size: 16px;">红色文字</p>• 作用：直接在HTML中设置CSS样式
• 缺点：HTML和CSS混在一起，难以维护
• 建议：使用外部CSS文件
4. title属性
html
<a href="https://www.csdn.net" title="访问CSDN官网">
点击这里
</a>• 作用：鼠标悬停时显示的提示信息
5. alt属性
html
<img src="photo.jpg" alt="这是一张照片">• 作用：图片的替代文本
• 用途：当图片无法加载时，显示这段文字；对搜索引擎友好
6. target属性
html
<a href="https://www.csdn.net" target="_blank">
在新窗口打开
</a>• 作用：指定链接打开的方式
• 常用值：
◦ _self：在当前窗口打开（默认）
◦ _blank：在新窗口打开
7. readonly和disabled属性
html
<input type="text" value="只读文本" readonly>
<input type="text" value="禁用文本" disabled>• readonly：只读，用户不能修改，但可以提交
• disabled：禁用，用户不能修改，也不会提交
1.4 语义化标签
HTML5引入了很多语义化标签，让页面结构更清晰，搜索引擎更容易理解。
什么是语义化标签？
语义化标签就是"有意义的标签"，让标签名就能说明它的作用。
html
<!-- 不使用语义化标签 -->
<div class="header">网页头部</div>
<div class="nav">导航栏</div>
<div class="content">文章内容</div>
<div class="footer">页脚</div>
<!-- 使用语义化标签 -->
<header>网页头部</header>
<nav>导航栏</nav>
<main>文章内容</main>
<footer>页脚</footer>常用的语义化标签
|----------------|------------------|
| 标签 | 作用 |
| <header> | 网页或区块的头部 |
| <nav> | 导航链接 |
| <main> | 页面的主要内容 |
| <article> | 独立的文章内容 |
| <section> | 文档的独立章节 |
| <aside> | 侧边栏，与主内容相关但独立的内容 |
| <footer> | 网页或区块的底部 |
| <figure> | 图片、图表等独立内容 |
| <figcaption> | <figure>的标题 |
语义化标签示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>语义化标签示例</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">关于</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 我的博客. All rights reserved.</p>
</footer>
</body>
</html>为什么使用语义化标签？
-
代码可读性更好 ：一看就知道每个部分的作用
-
SEO友好 ：搜索引擎更容易理解页面结构
-
无障碍访问 ：屏幕阅读器能更好地理解页面
-
维护更方便 ：团队协作时更容易理解代码
第二部分：CSS进阶知识
在第一篇中，我们学习了CSS的基础知识：选择器、基本属性、常用样式。
今天我们来学习CSS的进阶知识：盒模型、Flexbox布局、响应式设计。
2.1 CSS盒模型详解
盒模型是CSS中最核心的概念之一，理解了盒模型，你就理解了CSS布局的基础。
什么是盒模型？
在CSS中，每个元素都被表示为一个矩形的盒子。这个盒子由四个部分组成：
html
┌─────────────────────────────────────────┐
│ Margin（外边距） │ ← 元素与其他元素之间的距离
│ ┌───────────────────────────────────┐ │
│ │ Border（边框） │ │ ← 盒子的边框
│ │ ┌─────────────────────────────┐ │ │
│ │ │ Padding（内边距） │ │ │ ← 内容与边框之间的距离
│ │ │ ┌───────────────────────┐ │ │ │
│ │ │ │ Content（内容） │ │ │ │ ← 实际显示的内容（文字、图片等）
│ │ │ └───────────────────────┘ │ │ │
│ │ └─────────────────────────────┘ │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘盒模型的四个部分
|------------------|-----------------|------------------------------------|
| 部分 | 说明 | CSS属性 |
| Content（内容） | 元素的实际内容（文字、图片等） | width、height |
| Padding（内边距） | 内容与边框之间的距离 | padding、padding-top、padding-right等 |
| Border（边框） | 盒子的边框 | border、border-top、border-width等 |
| Margin（外边距） | 元素与其他元素之间的距离 | margin、margin-top、margin-right等 |
盒模型示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型示例</title>
<style>
.box {
width: 200px; /* 内容宽度 */
height: 100px; /* 内容高度 */
padding: 20px; /* 内边距：上下左右都是20px */
border: 5px solid red; /* 边框：5px宽、实线、红色 */
margin: 30px; /* 外边距：上下左右都是30px */
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">这是一个盒子</div>
</body>
</html>实际占用的空间计算 ：
html
总宽度 = width + padding-left + padding-right + border-left + border-right
= 200px + 20px + 20px + 5px + 5px
= 250px
总高度 = height + padding-top + padding-bottom + border-top + border-bottom
= 100px + 20px + 20px + 5px + 5px
= 150px重要 ：盒模型的实际占用空间 = content + padding + border + margin
盒模型的简写属性
1. padding的简写
css
/* 四个方向相同 */
padding: 20px;
/* 上下 | 左右 */
padding: 10px 20px;
/* 上 | 左右 | 下 */
padding: 10px 20px 15px;
/* 上 | 右 | 下 | 左（顺时针） */
padding: 10px 20px 15px 25px;
/* 单独设置某个方向 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;2. margin的简写
css
/* 和padding的简写方式完全一样 */
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 15px;
margin: 10px 20px 15px 25px;3. border的简写
css
/* 边框：宽度 | 样式 | 颜色 */
border: 2px solid red;
/* 单独设置某个方向的边框 */
border-top: 2px solid red;
border-right: 2px solid blue;
border-bottom: 2px solid green;
border-left: 2px solid yellow;box-sizing属性
默认情况下，设置的width和height只包含content，不包含padding和border。
但有时候我们希望width和height包含padding和border。这时可以使用box-sizing属性。
css
/* 默认值（标准盒模型） */
box-sizing: content-box;
/* 推荐值（IE盒模型） */
box-sizing: border-box;示例对比 ：
css
/* 使用默认的content-box */
.box1 {
width: 200px;
padding: 20px;
border: 5px;
/* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px */
}
/* 使用border-box */
.box2 {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px;
/* 实际占用宽度 = 200px（padding和border包含在200px内） */
}建议 ：在项目开始时，统一设置box-sizing: border-box，这样布局更容易控制。
css
* {
box-sizing: border-box;
}2.2 Flexbox布局
Flexbox（弹性盒子）是CSS中最强大的布局方式之一，可以轻松实现各种布局效果。
为什么需要Flexbox？
传统的布局方式（使用float、position等）有很多缺点：
• 代码复杂
• 垂直居中困难
• 元素顺序难以改变
Flexbox解决了这些问题，让布局变得简单。
Flexbox的基本概念
使用Flexbox布局，需要两个步骤：
1. 父容器设置display: flex
css
.container {
display: flex;
}2. 子元素自动变成flex item
html
<div class="container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
</div>Flexbox的常用属性
父容器属性
1. flex-direction（主轴方向）
css
.container {
display: flex;
flex-direction: row; /* 默认值，主轴为水平方向，从左到右 */
flex-direction: row-reverse; /* 主轴为水平方向，从右到左 */
flex-direction: column; /* 主轴为垂直方向，从上到下 */
flex-direction: column-reverse; /* 主轴为垂直方向，从下到上 */
}2. justify-content（主轴对齐方式）
css
.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; /* 所有间隔相等 */
}3. align-items（交叉轴对齐方式）
css
.container {
display: flex;
align-items: flex-start; /* 靠上对齐 */
align-items: flex-end; /* 靠下对齐 */
align-items: center; /* 垂直居中 */
align-items: stretch; /* 默认值，拉伸填满 */
}子元素属性
1. flex（项目分配比例）
css
.item1 {
flex: 1; /* 占1份 */
}
.item2 {
flex: 2; /* 占2份 */
}
.item3 {
flex: 1; /* 占1份 */
}
/* 总共4份，item1占25%，item2占50%，item3占25% */Flexbox实战示例
示例1：水平居中
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
height: 100vh;
}
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="container">
<div class="box">水平居中</div>
</div>
</body>
</html>示例2：垂直居中
css
.container {
display: flex;
align-items: center; /* 垂直居中 */
height: 100vh;
}示例3：水平和垂直都居中
css
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh;
}示例4：三栏布局（两边固定，中间自适应）
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
height: 100vh;
}
.left {
width: 200px;
background-color: #ffcccc;
}
.main {
flex: 1; /* 占据剩余空间 */
background-color: #ccffcc;
}
.right {
width: 200px;
background-color: #ccccff;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧栏</div>
<div class="main">主要内容</div>
<div class="right">右侧栏</div>
</div>
</body>
</html>示例5：导航栏
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center;
padding: 0 20px;
background-color: #333;
color: white;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin-left: 20px;
}
.menu a {
color: white;
text-decoration: none;
}
.menu a:hover {
color: #4CAF50;
}
</style>
</head>
<body>
<nav>
<div class="logo">我的网站</div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</body>
</html>2.3 响应式设计基础
现在人们用各种设备访问网页：电脑、平板、手机。网页需要在不同设备上都能正常显示，这就是响应式设计。
什么是响应式设计？
响应式设计就是让网页能够根据设备的屏幕尺寸自动调整布局和样式。
媒体查询（Media Query）
响应式设计的核心是媒体查询。
css
/* 默认样式（针对大屏幕） */
.container {
width: 800px;
}
/* 当屏幕宽度小于768px时（手机） */
@media (max-width: 768px) {
.container {
width: 100%;
}
}
/* 当屏幕宽度在768px到1024px之间时（平板） */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
width: 90%;
}
}响应式设计示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式设计示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 20px;
}
.card {
flex: 0 0 calc(33.333% - 14px); /* 3列 */
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
text-align: center;
}
/* 平板：2列 */
@media (max-width: 768px) {
.card {
flex: 0 0 calc(50% - 10px);
}
}
/* 手机：1列 */
@media (max-width: 480px) {
.card {
flex: 0 0 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card-container">
<div class="card">
<h3>卡片1</h3>
<p>这是第一个卡片的内容。</p>
</div>
<div class="card">
<h3>卡片2</h3>
<p>这是第二个卡片的内容。</p>
</div>
<div class="card">
<h3>卡片3</h3>
<p>这是第三个卡片的内容。</p>
</div>
</div>
</div>
</body>
</html>运行效果 ：
• 在电脑上（宽度>768px）：3列显示
• 在平板上（宽度≤768px）：2列显示
• 在手机上（宽度≤480px）：1列显示
响应式设计的最佳实践
1. 添加viewport元标签
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">这行代码告诉浏览器：页面的宽度应该等于设备的宽度，初始缩放比例为1。
2. 移动优先（Mobile First）
先为移动设备设计样式，再为大屏幕添加样式。
css
/* 默认样式（针对手机） */
.container {
width: 100%;
padding: 10px;
}
/* 平板 */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* 电脑 */
@media (min-width: 1024px) {
.container {
width: 960px;
padding: 30px;
}
}3. 使用相对单位
css
/* 不推荐：使用固定像素 */
width: 300px;
/* 推荐：使用百分比 */
width: 50%;
/* 推荐：使用vw（视口宽度） */
font-size: 5vw;第三部分：JavaScript进阶知识
在第一篇中，我们学习了JavaScript的基础知识：变量、数据类型、函数、DOM操作。
今天我们来学习JavaScript的进阶知识：运算符、条件语句、循环语句、数组和对象的常用操作。
3.1 JavaScript运算符
运算符是用来执行运算的符号。
算术运算符
javascript
let a = 10;
let b = 3;
console.log(a + b); // 13，加法
console.log(a - b); // 7，减法
console.log(a * b); // 30，乘法
console.log(a / b); // 3.333...，除法
console.log(a % b); // 1，取余（10除以3余1）
console.log(a ** b); // 1000，幂运算（10的3次方）自增和自减运算符
javascript
let x = 5;
x++; // x = 6，自增1
x--; // x = 5，自减1
++x; // x = 6，先自增再使用
--x; // x = 5，先自减再使用++x和x++的区别 ：
javascript
let a = 5;
let b = a++; // b = 5，a = 6（先赋值，再自增）
let c = 5;
let d = ++c; // d = 6，c = 6（先自增，再赋值）比较运算符
javascript
let a = 5;
let b = 10;
console.log(a == b); // false，等于（值相等）
console.log(a === b); // false，严格等于（值和类型都相等）
console.log(a != b); // true，不等于
console.log(a !== b); // true，严格不等于
console.log(a < b); // true，小于
console.log(a > b); // false，大于
console.log(a <= b); // true，小于等于
console.log(a >= b); // false，大于等于重点 ：
javascript
==和===的区别
- ==：只比较值，不比较类型（5 == "5"为true）
- ===：比较值和类型（5 === "5"为false）示例 ：
javascript
console.log(5 == "5"); // true，值相等
console.log(5 === "5"); // false，类型不同
console.log(null == undefined); // true
console.log(null === undefined); // false逻辑运算符
javascript
let a = true;
let b = false;
console.log(a && b); // false，逻辑与（两个都为true才返回true）
console.log(a || b); // true，逻辑或（有一个为true就返回true）
console.log(!a); // false，逻辑非（取反）短路运算 ：
javascript
// &&：如果第一个为false，直接返回第一个
let result = false && "hello"; // result = false
// ||：如果第一个为true，直接返回第一个
let result = true || "hello"; // result = true
// 实际应用
let name = username || "匿名"; // 如果username不存在，使用"匿名"字符串运算符
javascript
let str1 = "Hello";
let str2 = "World";
console.log(str1 + " " + str2); // "Hello World"，字符串连接
console.log(str1 + " " + 2026); // "Hello 2026"，数字会自动转为字符串3.2 条件语句
条件语句用来根据不同的条件执行不同的代码。
if语句
javascript
let score = 85;
if (score >= 90) {
console.log("优秀");
} else if (score >= 80) {
console.log("良好");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}执行逻辑 ：
-
检查第一个条件score >= 90，如果为true，执行对应代码
-
如果为false，检查第二个条件score >= 80
-
以此类推，直到找到一个为true的条件
-
如果所有条件都为false，执行else后面的代码
switch语句
switch语句适用于判断一个变量等于多个值中的哪一个。
javascript
let day = "星期一";
switch (day) {
case "星期一":
console.log("周一：努力工作");
break;
case "星期二":
console.log("周二：继续努力");
break;
case "星期三":
console.log("周三：坚持就是胜利");
break;
case "星期四":
console.log("周四：再坚持一下");
break;
case "星期五":
console.log("周五：快要放假了");
break;
default:
console.log("周末：好好休息");
}重要 ：不要忘记break语句！如果没有break，程序会继续执行下一个case的代码。
三元运算符
三元运算符是if语句的简写形式。
javascript
// if语句写法
let age = 20;
let message;
if (age >= 18) {
message = "已成年";
} else {
message = "未成年";
}
// 三元运算符写法
let message = age >= 18 ? "已成年" : "未成年";语法 ：
javascript
条件 ? 表达式1 : 表达式2如果条件为true，返回表达式1；如果条件为false，返回表达式2。
嵌套条件语句
条件语句可以嵌套使用。
javascript
let score = 85;
let isBonus = true;
if (score >= 60) {
if (isBonus) {
console.log("及格且有加分");
} else {
console.log("及格但没有加分");
}
} else {
if (isBonus) {
console.log("不及格但有加分");
} else {
console.log("不及格且没有加分");
}
}3.3 循环语句
循环语句用来重复执行相同的代码。
for循环
for循环是最常用的循环方式。
javascript
// 输出1到10
for (let i = 1; i <= 10; i++) {
console.log(i);
}语法 ：
javascript
for (初始条件; 循环条件; 迭代语句) {
// 循环体
}各部分说明 ：
• 初始条件：循环开始时执行一次
• 循环条件：每次循环前检查，如果为true继续执行，如果为false 结束循环
• 迭代语句：每次循环结束后执行
for循环示例
示例1：计算1到100的和
javascript
let sum = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log("1到100的和是：" + sum); // 5050示例2：遍历数组
javascript
let fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}示例3：九九乘法表
javascript
for (let i = 1; i <= 9; i++) {
let line = "";
for (let j = 1; j <= i; j++) {
line += j + "×" + i + "=" + (i * j) + " ";
}
console.log(line);
}输出 ：
javascript
1×1=1
1×2=2 2×2=4
1×3=3 2×3=6 3×3=9
...while循环
while循环在条件为true时持续执行。
javascript
let i = 1;
while (i <= 10) {
console.log(i);
i++;
}注意 ：确保循环条件最终会变为false，否则会陷入无限循环。
do...while循环
do...while循环至少执行一次，然后再检查条件。
javascript
let i = 1;
do {
console.log(i);
i++;
} while (i <= 10);for...in循环
for...in循环用于遍历对象的属性。
javascript
let person = {
name: "张三",
age: 25,
city: "北京"
};
for (let key in person) {
console.log(key + ": " + person[key]);
}输出 ：
javascript
name: 张三
age: 25
city: 北京for...of循环
for...of循环用于遍历数组（ES6新增）。
javascript
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
console.log(fruit);
}break和continue
break ：跳出整个循环
javascript
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break; // 当i等于5时，跳出循环
}
console.log(i); // 输出：1, 2, 3, 4
}continue ：跳过当前循环，继续下一次循环
javascript
for (let i = 1; i <= 10; i++) {
if (i === 5) {
continue; // 当i等于5时，跳过这次循环
}
console.log(i); // 输出：1, 2, 3, 4, 6, 7, 8, 9, 10
}3.4 数组的常用操作
数组的创建
javascript
// 方式1：使用字面量
let fruits = ["苹果", "香蕉", "橙子"];
// 方式2：使用Array构造函数
let numbers = new Array(1, 2, 3, 4, 5);
// 创建空数组
let emptyArray = [];获取和修改数组元素
javascript
let fruits = ["苹果", "香蕉", "橙子"];
// 获取元素（索引从0开始）
console.log(fruits[0]); // "苹果"
console.log(fruits[1]); // "香蕉"
// 修改元素
fruits[0] = "葡萄";
console.log(fruits); // ["葡萄", "香蕉", "橙子"]数组长度
javascript
let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits.length); // 3常用数组方法
1. push()：在数组末尾添加元素
javascript
let fruits = ["苹果", "香蕉"];
fruits.push("橙子");
console.log(fruits); // ["苹果", "香蕉", "橙子"]2. pop()：删除数组末尾的元素
javascript
let fruits = ["苹果", "香蕉", "橙子"];
let last = fruits.pop();
console.log(last); // "橙子"
console.log(fruits); // ["苹果", "香蕉"]3. shift()：删除数组第一个元素
javascript
let fruits = ["苹果", "香蕉", "橙子"];
let first = fruits.shift();
console.log(first); // "苹果"
console.log(fruits); // ["香蕉", "橙子"]4. unshift()：在数组开头添加元素
javascript
let fruits = ["香蕉", "橙子"];
fruits.unshift("苹果");
console.log(fruits); // ["苹果", "香蕉", "橙子"]5. indexOf()：查找元素的索引
javascript
let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits.indexOf("香蕉")); // 1
console.log(fruits.indexOf("葡萄")); // -1（不存在返回-1）6. slice()：截取数组的一部分
javascript
let fruits = ["苹果", "香蕉", "橙子", "葡萄", "西瓜"];
let subset = fruits.slice(1, 3); // 从索引1到索引3（不包括3）
console.log(subset); // ["香蕉", "橙子"]7. splice()：删除或插入元素
javascript
let fruits = ["苹果", "香蕉", "橙子", "葡萄"];
// 删除元素（从索引1开始，删除2个元素）
fruits.splice(1, 2);
console.log(fruits); // ["苹果", "葡萄"]
// 插入元素（在索引1的位置插入"香蕉"和"橙子"）
fruits.splice(1, 0, "香蕉", "橙子");
console.log(fruits); // ["苹果", "香蕉", "橙子", "葡萄"]8. join()：将数组转换为字符串
javascript
let fruits = ["苹果", "香蕉", "橙子"];
let str = fruits.join(", ");
console.log(str); // "苹果, 香蕉, 橙子"9. sort()：对数组排序
javascript
let numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort();
console.log(numbers); // [1, 1, 2, 3, 4, 5, 6, 9]
let fruits = ["香蕉", "苹果", "橙子"];
fruits.sort();
console.log(fruits); // ["苹果", "香蕉", "橙子"]10. reverse()：反转数组
javascript
let fruits = ["苹果", "香蕉", "橙子"];
fruits.reverse();
console.log(fruits); // ["橙子", "香蕉", "苹果"]遍历数组
方法1：使用for循环
javascript
let fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}方法2：使用for...of（推荐）
javascript
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
console.log(fruit);
}方法3：使用forEach
javascript
let fruits = ["苹果", "香蕉", "橙子"];
fruits.forEach(function(fruit, index) {
console.log(index + ": " + fruit);
});3.5 对象的常用操作
对象的创建
javascript
// 方式1：使用字面量
let person = {
name: "张三",
age: 25,
city: "北京"
};
// 方式2：使用Object构造函数
let person2 = new Object();
person2.name = "李四";
person2.age = 30;获取和修改对象属性
javascript
let person = {
name: "张三",
age: 25
};
// 方式1：点语法
console.log(person.name); // "张三"
person.age = 26; // 修改属性
// 方式2：方括号语法
console.log(person["name"]); // "张三"
person["age"] = 27; // 修改属性什么时候使用方括号语法？
• 属性名包含特殊字符或空格
• 属性名是变量
javascript
let propName = "name";
console.log(person[propName]); // "张三"添加和删除属性
javascript
let person = {
name: "张三",
age: 25
};
// 添加属性
person.city = "北京";
person["job"] = "程序员";
// 删除属性
delete person.age;
console.log(person);
// {name: "张三", city: "北京", job: "程序员"}遍历对象
方法1：for...in
javascript
let person = {
name: "张三",
age: 25,
city: "北京"
};
for (let key in person) {
console.log(key + ": " + person[key]);
}方法2：Object.keys()
javascript
let person = {
name: "张三",
age: 25,
city: "北京"
};
let keys = Object.keys(person);
console.log(keys); // ["name", "age", "city"]
keys.forEach(function(key) {
console.log(key + ": " + person[key]);
});对象的常用方法
1. Object.keys()：获取所有键
javascript
let person = {
name: "张三",
age: 25
};
let keys = Object.keys(person);
console.log(keys); // ["name", "age"]2. Object.values()：获取所有值
javascript
let person = {
name: "张三",
age: 25
};
let values = Object.values(person);
console.log(values); // ["张三", 25]3. Object.entries()：获取所有键值对
javascript
let person = {
name: "张三",
age: 25
};
let entries = Object.entries(person);
console.log(entries);
// [["name", "张三"], ["age", 25]]第四部分：综合实战案例
让我们把今天学到的知识综合起来，做一个实用的案例。
实战案例：学生成绩管理系统
功能需求：
-
显示学生信息表格
-
可以添加新学生
-
可以计算平均分
-
可以删除学生
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生成绩管理系统</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
/* 表单样式 */
.form-container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
margin-bottom: 30px;
}
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.form-group {
flex: 1;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.delete-btn {
background-color: #f44336;
padding: 5px 10px;
font-size: 14px;
}
.delete-btn:hover {
background-color: #da190b;
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #2c3e50;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f0f0f0;
}
/* 统计信息 */
.stats {
background-color: #e8f4f8;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
}
.stats h3 {
color: #2c3e50;
margin-bottom: 10px;
}
.stats p {
margin: 5px 0;
color: #333;
}
/* 响应式设计 */
@media (max-width: 768px) {
.form-row {
flex-direction: column;
}
table {
font-size: 14px;
}
th, td {
padding: 8px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>学生成绩管理系统</h1>
<!-- 添加学生表单 -->
<div class="form-container">
<h3>添加新学生</h3>
<form id="studentForm">
<div class="form-row">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="chinese">语文：</label>
<input type="number" id="chinese" min="0" max="100" required>
</div>
<div class="form-group">
<label for="math">数学：</label>
<input type="number" id="math" min="0" max="100" required>
</div>
<div class="form-group">
<label for="english">英语：</label>
<input type="number" id="english" min="0" max="100" required>
</div>
</div>
<button type="submit">添加学生</button>
</form>
</div>
<!-- 学生成绩表格 -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
<th>平均分</th>
<th>操作</th>
</tr>
</thead>
<tbody id="studentTableBody">
<!-- 学生数据会在这里动态显示 -->
</tbody>
</table>
<!-- 统计信息 -->
<div class="stats">
<h3>统计信息</h3>
<p id="studentCount">学生人数：0</p>
<p id="classAverage">班级平均分：0</p>
</div>
</div>
<script>
// 存储学生数据的数组
let students = [];
// 添加学生的函数
function addStudent(event) {
event.preventDefault(); // 阻止表单默认提交
// 获取表单数据
let name = document.getElementById("name").value;
let chinese = parseFloat(document.getElementById("chinese").value);
let math = parseFloat(document.getElementById("math").value);
let english = parseFloat(document.getElementById("english").value);
// 计算总分和平均分
let total = chinese + math + english;
let average = total / 3;
// 创建学生对象
let student = {
name: name,
chinese: chinese,
math: math,
english: english,
total: total,
average: average
};
// 添加到数组
students.push(student);
// 清空表单
document.getElementById("studentForm").reset();
// 更新显示
updateDisplay();
}
// 删除学生的函数
function deleteStudent(index) {
if (confirm("确定要删除这个学生吗？")) {
students.splice(index, 1); // 从数组中删除
updateDisplay(); // 更新显示
}
}
// 更新显示的函数
function updateDisplay() {
let tbody = document.getElementById("studentTableBody");
tbody.innerHTML = ""; // 清空表格
// 遍历学生数组，生成表格行
for (let i = 0; i < students.length; i++) {
let student = students[i];
let row = document.createElement("tr");
row.innerHTML = `
<td>${student.name}</td>
<td>${student.chinese}</td>
<td>${student.math}</td>
<td>${student.english}</td>
<td>${student.total}</td>
<td>${student.average.toFixed(2)}</td>
<td><button class="delete-btn" onclick="deleteStudent(${i})">删除</button></td>
`;
tbody.appendChild(row);
}
// 更新统计信息
updateStats();
}
// 更新统计信息的函数
function updateStats() {
let studentCount = students.length;
let classTotal = 0;
// 计算班级总分
for (let student of students) {
classTotal += student.average;
}
// 计算班级平均分
let classAverage = studentCount > 0 ? (classTotal / studentCount).toFixed(2) : 0;
// 更新显示
document.getElementById("studentCount").textContent = "学生人数：" + studentCount;
document.getElementById("classAverage").textContent = "班级平均分：" + classAverage;
}
// 添加一些初始数据
students = [
{ name: "张三", chinese: 85, math: 90, english: 88, total: 263, average: 87.67 },
{ name: "李四", chinese: 92, math: 85, english: 90, total: 267, average: 89.00 }
];
// 页面加载完成后，更新显示
updateDisplay();
// 监听表单提交
document.getElementById("studentForm").addEventListener("submit", addStudent);
</script>
</body>
</html>功能说明 ：
-
添加学生 ：填写表单，点击"添加学生"按钮，学生信息会添加到表格中
-
自动计算 ：系统会自动计算每个学生的总分和平均分
-
删除学生 ：点击"删除"按钮，可以删除对应的学生
-
统计信息 ：系统会实时显示学生人数和班级平均分
-
响应式设计 ：在手机和平板上也能正常显示
代码解析 ：
|---------------------------|-------------|
| 代码部分 | 作用 |
| let students = [] | 创建数组，存储学生数据 |
| function addStudent() | 添加学生的函数 |
| event.preventDefault() | 阻止表单默认提交 |
| students.push(student) | 将学生对象添加到数组 |
| students.splice(index, 1) | 从数组中删除学生 |
| function updateDisplay() | 更新表格显示 |
| function updateStats() | 更新统计信息 |
| toFixed(2) | 保留两位小数 |
本篇知识总结
这篇作为系列教程的第二篇，我们深入讲解了更多实用的知识点。
HTML部分
|---------|---------------------------------------------------|
| 知识点 | 内容 |
| 表格标签 | table、tr、td、th、thead、tbody |
| 跨行跨列 | colspan、rowspan |
| 表单元素 | form、input、select、textarea、button |
| HTML属性 | id、class、style、title、alt、target、readonly、disabled |
| 语义化标签 | header、nav、main、article、section、aside、footer |
CSS部分
|------------|---------------------------------------------------------------|
| 知识点 | 内容 |
| 盒模型 | content、padding、border、margin |
| 盒模型计算 | 实际占用空间 = content + padding + border + margin |
| box-sizing | content-box（默认）、border-box（推荐） |
| Flexbox布局 | display: flex、flex-direction、justify-content、align-items、flex |
| 响应式设计 | @media查询、viewport元标签、相对单位 |
JavaScript部分
|---------|---------------------------------------------------------------|
| 知识点 | 内容 |
| 算术运算符 | +、-、*、/、%、**、++、-- |
| 比较运算符 | ==、===、!=、!==、<、>、<=、>= |
| 逻辑运算符 | &&、`\ |
| 条件语句 | if-else、switch、三元运算符 |
| 循环语句 | for、while、do...while、for...in、for...of |
| 数组方法 | push、pop、shift、unshift、indexOf、slice、splice、join、sort、reverse |
| 对象方法 | Object.keys()、Object.values()、Object.entries() |
下篇预告
在下一篇《【前端基础】HTML + CSS + JavaScript 基础（三）》中，我们会讲解：
HTML部分
• HTML5新特性详解
• 表单验证
• 多媒体标签（audio、video）
CSS部分
• Grid布局
• CSS动画和过渡
• CSS变量
JavaScript部分
• ES6新特性（let、const、箭头函数、模板字符串、解构赋值）
• DOM事件详解
• 异步编程基础
实战项目
• 一个完整的Web应用（待办事项列表的增强版）
学习建议
1. 理解盒模型
盒模型是CSS的基础，一定要理解透彻。
建议 ：
• 画图理解content、padding、border、margin的关系
• 自己写代码测试，观察实际效果
• 记住实际占用空间的计算公式
2. 掌握Flexbox
Flexbox是最常用的布局方式，一定要熟练掌握。
建议 ：
• 多做布局练习（居中、导航栏、卡片布局）
• 记住常用的属性和值
• 理解主轴和交叉轴的概念
3. 练习JavaScript
JavaScript的核心是逻辑，要多写代码练习。
建议 ：
• 把每个知识点都写成小程序测试
• 做一些小项目（计算器、猜数字游戏）
• 遇到问题多思考，多查资料
4. 综合运用
不要把HTML、CSS、JavaScript分开学，要综合运用。
建议 ：
• 做完整的网页项目
• 先用HTML搭建结构
• 再用CSS美化
• 最后用JavaScript添加交互
课后练习
练习1：制作成绩表格
用HTML制作一个学生成绩表格，包含：姓名、语文、数学、英语、总分、平均 分。
要求 ：
• 使用表格标签
• 表头有背景色
• 数据行有斑马纹效果
• 总分和平均分用JavaScript自动计算
练习2：制作注册表单
用HTML制作一个用户注册表单。
要求 ：
• 包含用户名、密码、确认密码、邮箱、性别、爱好、城市
• 使用语义化标签
• 用CSS美化表单
• 提交时验证密码是否一致
练习3：Flexbox布局练习
用Flexbox实现以下布局：
要求 ：
• 三栏布局（左边栏200px，中间自适应，右边栏200px）
• 水平居中
• 垂直居中
• 导航栏（logo在左，菜单在右）
练习4：响应式设计
让练习1的成绩表格支持响应式设计。
要求 ：
• 电脑上：显示完整表格
• 平板上：隐藏不必要的列
• 手机上：卡片式布局，每张卡片显示一个学生的信息
练习5：JavaScript循环练习
编写JavaScript代码：
要求 ：
• 计算1到1000中所有偶数的和
• 输出斐波那契数列的前20项
• 找出数组中的最大值和最小值
常见问题解答
Q1: box-sizing应该用content-box还是border-box？
A : 推荐使用border-box。
因为border-box的width和height已经包含了padding和border，这样更容易控制元素的尺寸。
建议在项目开始时统一设置：
css
* {
box-sizing: border-box;
}Q2: Flexbox和Grid有什么区别？
A :
|--------|---------------|----------------|
| 特性 | Flexbox | Grid |
| 维度 | 一维布局（行或列） | 二维布局（行和列） |
| 适用场景 | 导航栏、卡片列表、居中布局 | 复杂的二维布局、网页整体布局 |
| 浏览器支持 | IE10+ | IE11+ |
Q3: for...in和for...of有什么区别？
A :
• for...in：用于遍历对象的属性，返回的是键
• for...of：用于遍历数组，返回的是值
javascript
// 遍历对象
for (let key in object) {
console.log(key); // 属性名
}
// 遍历数组
for (let item of array) {
console.log(item); // 数组元素
}Q4: ==和===有什么区别？
A :
• ==：只比较值，不比较类型（会进行类型转换）
• ===：比较值和类型（不会进行类型转换）
javascript
5 == "5" // true，值相等
5 === "5" // false，类型不同建议 ：永远使用===，避免类型转换带来的问题。
Q5: 响应式设计应该怎么做？
A :
- 添加viewport元标签
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 使用媒体查询
css
@media (max-width: 768px) {
/* 平板和手机的样式 */
}- 使用相对单位
css
width: 50%; /* 使用百分比 */
font-size: 5vw; /* 使用vw */结语
这篇我们学习了很多实用的知识点：表格、表单、盒模型、Flexbox、响应式设计、JavaScript运算符、条件语句、循环语句、数组和对象。
这些知识在实际开发中经常用到，一定要熟练掌握。
记住，编程是一门实践的艺术 。看懂了不代表学会了，动手写代码才是关键。
下一篇我们会学习更多高级知识，敬请期待！
如果你在学习过程中遇到问题，欢迎在评论区留言。我会尽力解答。