web前端技术知识复习

1. Web 概述

1.1 网页概述

网页是承载网站应用和信息的核心容器，主要由以下元素组成：

文字：核心信息载体
图像：丰富视觉呈现
超链接：实现页面跳转
音频 / 视频：增强内容层次
动画：提升页面活力
表单：收集用户输入数据

1.2 网页分类

类型	特点	适用场景
静态网页	内容固定、加载快、无后台交互	企业宣传页、个人展示页
动态网页	内容动态更新、支持交互	电商网站、社交平台、管理系统

1.3 常见名词解析

Internet：全球计算机网络互联系统，网页运行基础
WWW：万维网，基于互联网的信息服务系统
URL：统一资源定位符（网页地址）
HTTP/HTTPS：超文本传输协议（HTTPS 更安全）
Web：核心包含 HTML（结构）、CSS（样式）、JavaScript（交互）
W3C：制定 Web 技术标准的组织

1.4 Web 标准

核心包含三大板块：

结构标准（HTML）：搭建网页骨架
表现标准（CSS）：美化网页外观
行为标准（JavaScript/DOM）：实现交互效果

1.5 浏览器

PC 端主流浏览器

Chrome（谷歌）：市场占有率最高、标准支持完善
Firefox（火狐）：开源、开发者友好
Edge（微软）：基于 Chromium 内核、兼容性好

移动端主流浏览器

Safari（苹果）：iOS 系统默认
UC 浏览器、QQ 浏览器、百度浏览器：国内主流

1.6 分辨率

屏幕像素密度（如 1920×1080、1366×768），开发需适配不同分辨率避免布局错乱。

2. HTML 概述

2.1 HTML 简介

HTML（HyperText Markup Language）：超文本标记语言，用于搭建网页结构，非编程语言，核心特点：

通用性：所有浏览器均可解析
简易性：标签语法简单
可扩展性：可结合 CSS/JS 扩展功能
语义化：HTML5 新增语义化标签，结构更清晰

2.2 HTML 发展历史

1991 年：HTML 雏形诞生
1999 年：HTML4.01 发布，完善表单 / 表格等功能
2000 年：XHTML1.0 发布，语法更严格
2013 年：HTML5 正式发布，成为当前主流

2.3 第一个 HTML 程序

复制代码

<!DOCTYPE html>  <!-- 声明HTML5文档类型 -->
<html lang="zh-CN">  <!-- 根标签，指定中文语言 -->
<head>  <!-- 头部：存放元信息 -->
    <meta charset="UTF-8">  <!-- 字符编码，解决中文乱码 -->
    <title>我的第一个页面</title>  <!-- 浏览器标签标题 -->
</head>
<body>  <!-- 主体：网页可见内容 -->
    Hello HTML!
</body>
</html>

3. HTML 标签详解

3.1 标签语法

3.1.1 基本格式

复制代码

<标签 属性="值">内容</标签>

3.1.2 标签分类

分类维度	类型	说明	示例
闭合方式	双标签	有开始 / 结束标签	`<p>内容</p>`、`<div>内容</div>`
	单标签	自闭和，无结束标签	`<br/>`、`<hr/>`、`<img/>`
显示特性	块级标签	独占一行，可设宽高	`<h1>`、`<p>`、`<div>`
	行内标签	不独占一行，不可设宽高	`<span>`、`<strong>`、`<a>`

3.2 文本标签

标签	说明	示例
`<h1>`~`<h6>`	标题标签（h1 级别最高）	`<h1>网页标题</h1>`
`<p>`	段落标签，自动换行	`<p>这是一个段落</p>`
`<br/>`	换行标签（单标签）	`第一行<br/>第二行`
`<hr/>`	水平线标签（单标签）	`<hr color="red" size="5px"/>`
`<strong>/<b>`	加粗（strong 强调语义）	`<strong>加粗文本</strong>`
`<em>/<i>`	斜体（em 强调语义）	`<em>斜体文本</em>`
`<del>/<s>`	删除线（del 强调语义）	`<del>已删除内容</del>`
`<sup>`	上标	`x<sup>2</sup>`（x²）
`<sub>`	下标	`H<sub>2</sub>O`（H₂O）
`<pre>`	预格式化，保留原始格式	`<pre>for i in range(5): print(i)</pre>`

示例代码：文本标签

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本标签示例</title>
</head>
<body>
    <h1 align="center">1级标题（居中）</h1>
    <p>这是一段普通文本，<strong>加粗部分</strong>，<em>斜体部分</em></p>
    <p>数学公式：x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
    <p>化学公式：H<sub>2</sub>SO<sub>4</sub></p>
    <hr color="blue" size="3px"/>
    <pre>
        预格式化文本：
        1. 保留空格
        2. 保留换行
    </pre>
</body>
</html>

3.3 列表标签

3.3.1 有序列表（`<ol>`）

用于有顺序关系的内容，自动生成序号。

属性：

type：序号类型（1/a/A/i/I）
start：序号起始值（数字）
reversed：反向排序（布尔属性）

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>有序列表示例</title>
</head>
<body>
    <ol type="a" start="2">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ol type="I" reversed>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
</body>
</html>

3.3.2 无序列表（`<ul>`）

用于无顺序关系的内容，显示项目符号。

属性：type（disc/ circle/ square）

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无序列表示例</title>
</head>
<body>
    <ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
</body>
</html>

3.3.3 定义列表（`<dl>`）

用于 "术语 - 解释" 类内容，由 <dt>（术语）和 <dd>（解释）组成。

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定义列表示例</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，搭建网页结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，美化网页外观</dd>
    </dl>
</body>
</html>

3.4 布局标签

3.4.1 行内标签（`<span>`）

无默认样式，包裹小块文本，用于局部样式修饰。

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>span标签示例</title>
    <style>
        .red { color: red; font-weight: bold; }
    </style>
</head>
<body>
    <p>这是普通文本，<span class="red">这是高亮文本</span>，普通文本继续</p>
</body>
</html>

3.4.2 块标签（`<div>`）

独占一行，用于页面布局，可设宽高 / 边距等样式。

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>div布局示例</title>
    <style>
        .header { width: 100%; height: 80px; background: #333; color: #fff; text-align: center; line-height: 80px; }
        .content { display: flex; height: 400px; margin: 10px 0; }
        .left { width: 200px; background: #f5f5f5; }
        .main { flex: 1; background: #fff; margin: 0 10px; }
        .right { width: 200px; background: #f5f5f5; }
        .footer { width: 100%; height: 60px; background: #333; color: #fff; text-align: center; line-height: 60px; }
    </style>
</head>
<body>
    <div class="header">网站头部</div>
    <div class="content">
        <div class="left">左侧导航</div>
        <div class="main">主体内容</div>
        <div class="right">右侧推荐</div>
    </div>
    <div class="footer">版权所有 © 2024</div>
</body>
</html>

3.5 多媒体标签

3.5.1 图片标签（`<img>`）

单标签，用于插入图片，核心属性如下：

属性	说明	示例
`src`	图片路径（必填）	`src="https://picsum.photos/500/300"`
`alt`	加载失败时的替代文本	`alt="风景图片"`
`width/height`	宽 / 高（px / 百分比）	`width="500px"`
`title`	鼠标悬停提示文本	`title="随机风景图"`

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片标签示例</title>
</head>
<body>
    <img src="https://picsum.photos/500/300" alt="风景图" title="随机风景" width="500px" height="300px">
</body>
</html>

3.6 链接标签（`<a>`）

复制代码

<a href="地址" target="_blank">链接文本</a>

href：跳转地址（可设锚点 #id）
target="_blank"：新窗口打开

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链接标签示例</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度（新窗口）</a>
    <a href="#footer">跳转到页脚</a>
    <div id="footer" style="margin-top: 1000px;">页脚区域</div>
</body>
</html>

3.7 表格标签

复制代码

<table>
  <tr> <!-- 行 -->
    <th>标题单元格</th> <!-- 表头 -->
    <td>内容单元格</td> <!-- 内容 -->
  </tr>
</table>

合并单元格：colspan（跨列）、rowspan（跨行）

示例代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格示例</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="8" width="800">
        <tr>
            <td rowspan="2">个人信息</td>
            <td>姓名</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>25</td>
        </tr>
        <tr>
            <td colspan="3" align="center">联系方式：13800138000</td>
        </tr>
    </table>
</body>
</html>

3.8 表单标签（`<form>`）

复制代码

<form action="提交地址" method="post">
  用户名：<input type="text" name="username"><br>
  密码：<input type="password" name="pwd"><br>
  性别：<input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女<br>
  爱好：<input type="checkbox" name="like" value="写作">写作
        <input type="checkbox" name="like" value="音乐">听音乐<br>
  省份：<select name="province">
          <option value="shaanxi">陕西</option>
          <option value="shanxi">山西</option>
        </select><br>
  简介：<textarea rows="5" cols="25"></textarea><br>
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

4. CSS 概述

4.1 CSS 基础语法

复制代码

选择器 {
  属性: 值;
}

4.2 盒子模型

所有元素 = 内容（content）+ 内边距（padding）+ 边框（border）+ 外边距（margin）

4.3 布局方式

浮动：float: left/right;
定位：position: static/relative/absolute/fixed;
弹性布局：display: flex;（现代主流）

5. JavaScript 概述

5.1 书写方式

行内：onclick="alert('Hello')"
内嵌：<script> // 代码 </script>
外联：<script src="xxx.js"></script>

5.2 核心语法

5.2.1 变量

复制代码

let name = "张三"; // 可变变量
const age = 18;    // 常量

5.2.2 数据类型

基本类型：number、string、boolean、undefined、null
引用类型：object、array、function

5.2.3 条件语句

复制代码

// if 语句
if (条件) {
  // 满足条件执行
} else {
  // 不满足执行
}

// switch 语句
switch (变量) {
  case 值1:
    // 执行代码
    break;
  default:
    // 默认执行
}

5.2.4 循环语句

复制代码

// for 循环
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// while 循环
let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

5.2.5 函数

复制代码

// 函数声明
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

5.2.6 数组操作

复制代码

let arr = [1, 2, 3];
arr.push(4); // 末尾添加
arr.pop();   // 末尾删除
arr.splice(0, 1); // 删除指定位置元素

5.2.7 DOM 操作 & 事件

复制代码

// 获取元素
const btn = document.getElementById("btn");

// 添加点击事件
btn.addEventListener('click', function() {
  alert("点击成功！");
});

6. 前端开发速查手册

6.1 HTML 速查

表格

类别	核心标签
文本	`<h1>`~`<h6>`、`<p>`、`<strong>`、`<em>`
列表	`<ol>`、`<ul>`、`<dl>`
布局	`<div>`、`<span>`
多媒体	`<img>`、`<audio>`、`<video>`
链接	`<a>`
表格	`<table>`、`<tr>`、`<td>`、`<th>`
表单	`<form>`、`<input>`、`<select>`、`<textarea>`

6.2 CSS 速查

表格

类别	核心属性
盒子模型	`width`、`height`、`padding`、`margin`、`border`
布局	`float`、`position`、`display: flex`
样式	`color`、`background`、`font-size`、`text-align`

6.3 JavaScript 速查

表格

类别	核心语法 / 方法
变量	`let`、`const`
循环	`for`、`while`
函数	`function`、箭头函数
数组	`push`、`pop`、`splice`
DOM	`getElementById`、`addEventListener`

7. HTML 作业练习

作业 1：用户注册表单（表格版）

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
</head>
<body>
<form method="post">
<table border="1" cellspacing="0" cellpadding="8" align="center">
<tr>
    <th colspan="2">用户注册</th>
</tr>
<tr>
    <th>用户名</th>
    <td><input type="text" name="username"></td>
</tr>
<tr>
    <th>密码</th>
    <td><input type="password" name="pwd"></td>
</tr>
<tr>
    <th>性别</th>
    <td>
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
    </td>
</tr>
<tr>
    <th>爱好</th>
    <td>
        <input type="checkbox" name="like">写作
        <input type="checkbox" name="like">听音乐
        <input type="checkbox" name="like">体育
    </td>
</tr>
<tr>
    <th>省份</th>
    <td>
        <select name="province">
            <option>陕西</option>
            <option>山西</option>
        </select>
    </td>
</tr>
<tr>
    <th>自我介绍</th>
    <td><textarea rows="5" cols="25"></textarea></td>
</tr>
<tr>
    <td colspan="2" align="center">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </td>
</tr>
</table>
</form>
</body>
</html>

作业 2：工商银行电子汇款单

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>汇款单</title>
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table border="1" width="800">
<tr>
    <td colspan="2">回单类型</td>
    <td>网上转账</td>
    <td colspan="2">指令序号</td>
    <td>HQH000000013878172</td>
</tr>
<tr>
    <td rowspan="4">收款人</td>
    <td>户名</td>
    <td>老牟</td>
    <td rowspan="4">付款人</td>
    <td>户名</td>
    <td>老刘</td>
</tr>
<tr>
    <td>卡号</td>
    <td>00000001</td>
    <td>卡号</td>
    <td>00000002</td>
</tr>
<tr>
    <td>地区</td>
    <td>南京</td>
    <td>地区</td>
    <td>杭州</td>
</tr>
<tr>
    <td>网点</td>
    <td>江苏南京业务处理中心</td>
    <td>网点</td>
    <td>江苏徐州业务中心</td>
</tr>
<tr>
    <td colspan="2">币种</td>
    <td>人民币</td>
    <td colspan="2">钞汇标志</td>
    <td>钞票</td>
</tr>
<tr>
    <td colspan="2">金额</td>
    <td>1.00元</td>
    <td colspan="2">手续费</td>
    <td>0.57元</td>
</tr>
<tr>
    <td colspan="2">合计</td>
    <td colspan="4">人民币（大写）：壹圆整</td>
</tr>
<tr>
    <td colspan="2">交易时间</td>
    <td>2017-06-01</td>
    <td colspan="2">时间戳</td>
    <td>2017-06-01 13:00:00</td>
</tr>
</table>
<br>
<p>打印时间：2017-06-01</p>
<p><del>打印单位：江苏徐州业务中心</del></p>
<p>操作员：大曾</p>
</body>
</html>

作业 3：李白《将进酒》诗词页面

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>将进酒</title>
</head>
<body>
<h1>将进酒</h1>
<img src="李白.png" width="400" style="float:left">
<p>君不见黄河之水天上来，奔流到海不复回。</p>
<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我侧耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</body>
</html>

作业 4：热门电影板块

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电影板块</title>
</head>
<body>
<h1>热门电影板块</h1><hr>
<strong>最近热门电影</strong>
<span>热门 最新 豆瓣高分 冷门佳片 华语 欧美 韩国 日本</span>
<span>更多>></span><hr>

<img src="功夫熊猫.jpg" width="200">
<img src="寒战.jpg" width="200">
<img src="教父.jpg" width="200">
<img src="扫毒2.jpg" width="200">

<p>功夫熊猫 8.1 &nbsp;&nbsp; 寒战 9.0 &nbsp;&nbsp; 教父 9.2 &nbsp;&nbsp; 扫毒2 8.8</p>

<img src="深海.jpg" width="200">
<img src="星际穿越.jpg" width="200">
<img src="影.jpg" width="200">
<img src="长津湖.jpg" width="200">

<p>深海 7.2 &nbsp;&nbsp; 星际穿越 9.8 &nbsp;&nbsp; 影 8.8 &nbsp;&nbsp; 长津湖 9.3</p>
</body>
</html>

作业 5：导航栏页面（CSS 浮动）

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        *{margin:0;padding:0}
        .nav{
            width:1000px;
            height:50px;
            background:black;
            margin:auto;
            border-radius:20px;
        }
        li{
            float:left;
            list-style:none;
        }
        a{
            color:white;
            text-decoration:none;
            line-height:50px;
            padding:0 20px;
            display:block;
        }
        a:hover{
            background:white;
            color:black;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#">游戏1</a></li>
        <li><a href="#">游戏2</a></li>
        <li><a href="#">游戏3</a></li>
        <li><a href="#">游戏4</a></li>
        <li><a href="#">游戏5</a></li>
        <li><a href="#">游戏6</a></li>
        <li><a href="#">游戏7</a></li>
        <li><a href="#">游戏8</a></li>
        <li><a href="#">游戏9</a></li>
    </ul>
</div>
</body>
</html>

作业 6：学校官网（首页 + 登录）

首页（index.html）

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学校官网</title>
    <style>
        header{background:#f4f4f4;text-align:center;padding:10px}
        nav li{display:inline;margin:0 15px}
        footer{background:#f4f4f4;text-align:center;padding:10px;position:fixed;bottom:0;width:100%}
    </style>
</head>
<body>
<header>
    <h1>欢迎来到我校官网</h1>
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="login.html">登录</a></li>
        </ul>
    </nav>
</header>
<main>
    <section><h2>最新动态</h2><p>新闻内容</p></section>
    <section><h2>课程介绍</h2><p>课程内容</p></section>
    <section><h2>校园生活</h2><p>生活内容</p></section>
</main>
<footer>版权所有 &copy; 2024</footer>
</body>
</html>

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<header><h1>登录</h1></header>
<form>
    用户名：<input type="text"><br>
    密码：<input type="password"><br>
    <button type="submit">登录</button>
</form>
</body>
</html>

作业 7：jQuery 点击切换图片与背景

复制代码

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="box" style="background:aqua">
    <img id="pic" src="金刚狼.png">
</div>
<script>
    $("#pic").click(function(){
        $("#box").css("background","green");
    })
</script>
</body>
</html>

web前端技术知识复习

目录

1. Web 概述

1.1 网页概述

1.2 网页分类

1.3 常见名词解析

1.4 Web 标准

1.5 浏览器

PC 端主流浏览器

移动端主流浏览器

1.6 分辨率

2. HTML 概述

2.1 HTML 简介

2.2 HTML 发展历史

2.3 第一个 HTML 程序

3. HTML 标签详解

3.1 标签语法

3.1.1 基本格式

3.1.2 标签分类

3.2 文本标签

示例代码：文本标签

3.3 列表标签

3.3.1 有序列表（<ol>）

3.3.2 无序列表（<ul>）

3.3.3 定义列表（<dl>）

3.4 布局标签

3.4.1 行内标签（<span>）

3.4.2 块标签（<div>）

3.5 多媒体标签

3.5.1 图片标签（<img>）

3.6 链接标签（<a>）

3.7 表格标签

3.8 表单标签（<form>）

4. CSS 概述

4.1 CSS 基础语法

4.2 盒子模型

4.3 布局方式

5. JavaScript 概述

5.1 书写方式

5.2 核心语法

5.2.1 变量

5.2.2 数据类型

5.2.3 条件语句

5.2.4 循环语句

5.2.5 函数

5.2.6 数组操作

5.2.7 DOM 操作 & 事件

6. 前端开发速查手册

6.1 HTML 速查

6.2 CSS 速查

6.3 JavaScript 速查

7. HTML 作业练习

作业 1：用户注册表单（表格版）

作业 2：工商银行电子汇款单

作业 3：李白《将进酒》诗词页面

作业 4：热门电影板块

作业 5：导航栏页面（CSS 浮动）

作业 6：学校官网（首页 + 登录）

首页（index.html）

登录页（login.html）

作业 7：jQuery 点击切换图片与背景

3.3.1 有序列表（`<ol>`）

3.3.2 无序列表（`<ul>`）

3.3.3 定义列表（`<dl>`）

3.4.1 行内标签（`<span>`）

3.4.2 块标签（`<div>`）

3.5.1 图片标签（`<img>`）

3.6 链接标签（`<a>`）

3.8 表单标签（`<form>`）