Web 前端开发 — 期末复习指南（Html、Css、Js）

Xzh04232026-06-11 11:00

🌐 Web 前端开发 --- 期末复习指南

基于教材《网页设计与制作教程》（机械工业出版社）+ 课堂4章PPT + 12个实验

目录

  • [第1章 网页、网站制作基础](#第1章 网页、网站制作基础)

  • [第2章 HTML --- 网页制作基础语言](#第2章 HTML — 网页制作基础语言)

  • [第3章 CSS --- 高效定制网页样式](#第3章 CSS — 高效定制网页样式)

  • [第4章 JavaScript --- 网页特效](#第4章 JavaScript — 网页特效)

  • 附录：所有实验索引

第1章 网页、网站制作基础

1.1 WWW 的概念与工作方式

概念 说明
WWW（万维网） Internet 上基于 客户/服务器 体系结构的分布式超文本超媒体信息服务系统
工作方式 由 客户机 + 服务器 + HTTP 协议 三部分协同完成

  • 超文本（Hypertext）：非线性组织的文本，通过链接从一个独立单元跳转到另一个。一篇文章、一段话甚至一个词都可以成为一个链接点

  • 超媒体（Hypermedia）：超文本 + 多媒体

1.2 网页、网站、首页

概念 定义
网页 (Web Page) 按网页文档规范编写的文件，可在 WWW 上传输并被浏览器显示。是网站的基本信息单位
网站 (Web Site) 一组相关网页及文件、脚本、数据库的有机集合，通过 HTTP 服务器提供服务
首页 (Homepage) 网站的第一个页面，是整个网站的入口点和链接汇总点

1.3 URL 统一资源定位器

复制代码 
协议名称://主机名称[:端口地址/存放目录/文件名称]

示例：http://www.hunnu.edu.cn/hnsd/index.htm

URL 由 4 部分组成：协议 | 主机名 | 路径 | 文件名

1.4 Web 标准（W3C 制定）⭐

Web 标准是 W3C 和其他标准化组织共同制定的规范集合，目的是统一不同浏览器的行为。

层次 标准 关键内容
结构标准 XML, XHTML XML (2000.10) 弥补 HTML 不足，可扩展；XHTML 是 HTML→XML 的过渡
表现标准 CSS 层叠样式表，实现结构（HTML）与表现（CSS）分离，取代表格式布局
行为标准 DOM, ECMAScript DOM 解决 Netscape JS 和 Microsoft JScript 的冲突；ECMAScript 262 是 JS 标准

1.5 网页制作常用软件

类别 代表软件
网页编辑 Dreamweaver（所见即所得）、FrontPage、Visual Studio.NET、EditPlus
图形制作 Fireworks、Photoshop、CorelDRAW
动画制作 Flash、Ulead GIF Animator、Swish

1.6 网站建设流程

定域名 → 租用虚拟服务器空间 → 设计网页 → 网站推广

  • 每页网页约 20~50KB，10MB 空间可放约 200~500 页

  • 一般用户 50MB 虚拟主机空间即可

第2章 HTML --- 网页制作基础语言

2.1 HTML 简介

HTML（Hypertext Markup Language，超文本标记语言）是一种为文件中某些字句加上标识的语言，通过标记使内容达到预期效果。

2.2 HTML 文档基本结构 ⭐

复制代码 
<html>
  <head>
    <title>网页标题</title>          <!-- 显示在浏览器标题栏 -->
  </head>
  <body>
    网页内容                          <!-- 显示在浏览器窗口内 -->
  </body>
</html>

实验2 示例 --- 最简单的完整 HTML 页面（参见 1.html）

2.3 标记（Tag）及其属性 ⭐ 必考

标记分为两种：
类型 格式 示例
双标记 <标记> 内容 </标记> <title>湖南师大</title>
单标记 <标记> <br>（换行）、<hr>（水平线）
属性格式：
复制代码 
<标记 属性1="属性值1" 属性2="属性值2"...> 受影响的内容 </标记>

  • 属性间无先后次序

  • 属性可省略（取默认值）

  • 格式中的 | 表示"或者"（多选一）

2.4 网页的创建与预览

创建步骤 ：记事本编写 → 保存为 .html / .htm → 浏览器打开预览 → 记事本修改 → 浏览器刷新

首页通常命名为 index.html 或 index.htm，作为默认文档。

2.5 排版标记

注释：<!-- 注释内容 -->
  • 不限长度，可跨行
强制换行 <br> 与不换行 <nobr>、空格 &nbsp;
复制代码 
第一行<br>第二行                    <!-- 换行但无空行 -->
<nobr>这段文字不会自动换行</nobr>    <!-- 强制不换行 -->
文&nbsp;&nbsp;字                   <!-- 空格 -->
段落 <p>（换行 + 空行，相当于两个 <br>）
复制代码 
<p align="left|center|right"> 段落文字 </p>
定位 <div>（块级容器）
复制代码 
<div align="left|center|right"> 文本、图像或表格 </div>
水平线 <hr>
复制代码 
<hr align="center" size="3" width="75%" color="blue" noshade>

  • size 粗细（像素，默认2），width 长度（像素或百分比），color 色彩

  • noshade 无阴影（实线）

标题 <h1> ~ <h6>
复制代码 
<h1 align="center"> 一级标题（最大） </h1>    <!-- h1最大, h6最小 -->

  • <title> 是网页标题（浏览器标题栏），<h#> 是内容标题（页面内显示）

  • <h#> 行内无法混用不同大小的字体

2.6 文字标记

字体 <font>
复制代码 
<font size="4" face="隶书" color="green"> 文字 </font>

  • size 1~7（1最小，7最大）

  • face 字体名（黑体、宋体、楷体_GB2312、隶书、Times New Roman 等）

  • color 色彩名称或 #RRGGBB

物理风格标记（全部是双标记）
标记 效果 标记 效果
<b> 加粗 <i> 斜体
<u> ++下划线++ <tt> 等宽打印机字体
<strike> 删除线 <sub> 下标
<sup> 上标 <big> 大字体
<small> 小字体
特殊字符
字符 写法 字符 写法
< &lt; > &gt;
" &quot; & &amp;
空格 &nbsp;

实验2 - 唐诗《回乡偶书》布局：h2标题+h5作者，绿色隶书加粗前两句，红色幼圆斜体后两句，蓝色3号水平线分隔，解析段不换行。

对应代码见 实验2/1.html，使用了 行内样式 + class 选择符。

2.7 超链接 <a> ⭐ 重点

基本格式
复制代码 
<a href="目标URL" target="打开方式"> 热点文本/图片 </a>

  • target：_blank（新窗口）、_self（当前窗口，默认）、_top（顶层）、_parent（父框架）

  • 空链接：<a href="#">

链接路径规则
复制代码 
<!-- ① 同一目录 -->
<a href="目标.html">热点</a>
​
<!-- ② 下一级子目录 -->
<a href="子目录名/目标.html">热点</a>
​
<!-- ③ 上一级目录 -->
<a href="../目标.html">热点</a>
​
<!-- ④ 同级不同子目录 -->
<a href="../另一子目录/目标.html">热点</a>
页内书签链接
复制代码 
<!-- 定义书签（目标位置） -->
<a id="记号名">目标文本附近</a>
​
<!-- 跳转到本页书签 -->
<a href="#记号名">热点</a>
​
<!-- 跳转到其他页的书签 -->
<a href="页面.html#记号名">热点</a>
下载链接与邮件链接
复制代码 
<a href="文件.zip">下载文件</a>
<a href="mailto:email@example.com">发送邮件</a>

实验2 - 多页面导航系统：目录页 → 诗文页 → 简析页（含书签跳转），三层页面相互链接。

关键代码见 实验2/mulu.html、实验2/tangshi/jys.html、实验2/tangshi/hxos.html、实验2/jianxi/jianxi.html

2.8 图片 <img>

复制代码 
<img src="图片.jpg" alt="替换文本" width="200" height="150"
     border="1" hspace="10" vspace="5" align="left|right|top|middle|bottom">
网页背景
复制代码 
<body bgcolor="色彩值">              <!-- 纯色背景 -->
<body background="背景图.jpg">       <!-- 图片背景，自动重复铺满 -->
图片链接
复制代码 
<a href="目标.html"><img src="图.jpg" alt="描述"></a>
取消文本环绕
复制代码 
<br clear="left|right|all">

实验3 - 图片链接 ：点击汽车图片跳转到详情页（index.html → details.html）

2.9 列表 ⭐

无序列表 <ul>
复制代码 
<ul type="disc|circle|square">
  <li type="符号类型"> 列表项1 </li>
  <li> 列表项2 </li>
</ul>
  • <li> 是单标记，一个表项的开始 = 前一个表项的结束
有序列表 <ol>
复制代码 
<ol type="1|A|a|I|i">
  <li> 第一项 </li>
  <li> 第二项 </li>
</ol>
列表嵌套

有序列表和无序列表可以相互嵌套（自身或彼此）。

实验3 - 三级嵌套列表 ： 一级 <ul type="disc">（实心圆点）→ 二级 <ul type="circle">（空心圆点）→ 三级 <ol>（数字编号）

关键代码见 实验3/details.html

2.10 表格 <table> ⭐ 重点

复制代码 
<table border="n" width="x|x%" height="y|y%"
       cellspacing="i" cellpadding="j"
       bgcolor="色" align="left|center|right"
       bordercolor="色">
  <tr>  <!-- 行 -->
    <th> 表头1 </th>  <th> 表头2 </th>   <!-- 表头（加粗居中） -->
  </tr>
  <tr>
    <td align="center" valign="top"> 表项1 </td>
    <td> 表项2 </td>
  </tr>
</table>

表格属性作用域：

属性 作用于 <table> 作用于 <tr> 作用于 <th>/<td>
border 表格边框
width/height 表格宽高 单元格宽高
cellspacing 单元格间距
cellpadding 单元格内边距
align 表格在页面中的对齐 行内水平对齐 单元格水平对齐
valign 行内垂直对齐 单元格垂直对齐
bgcolor 表格背景色 行背景色 单元格背景色
background 表格背景图 单元格背景图
bordercolor 边框颜色
bordercolorlight 边框亮部颜色
rules 表内线 rows/cols/none

2.11 字幕 <marquee>

复制代码 
<marquee direction="left|right|up|down"
         behavior="scroll|slide|alternate"
         loop="infinite|-1" scrollamount="5" scrolldelay="100"
         bgcolor="色" width="80%" height="30">
  滚动文字或图片
</marquee>

技巧：

  • 属性尽量用默认值：<marquee>内容</marquee>

  • 多行字幕：在 marquee 内用 <br> 换行

  • 图片滚动：<marquee><img src="图.gif">文字</marquee>

2.12 音频和视频

复制代码 
<!-- 链接方式：单击打开播放器 -->
<a href="音乐.mid">播放</a>
​
<!-- 内嵌播放插件（显示控制面板） -->
<embed src="文件" autostart="true|false" loop="true|false|n"
       starttime="分:秒" volume="0~100"
       width="300" height="50" hidden="true"
       controls="console|smallconsole">
​
<!-- IE 背景音乐 -->
<bgsound src="文件" loop="-1|infinite">

支持格式：音频 MIDI/WAV/AU；视频 MOV/AVI

2.13 框架（多窗口页面）⭐ 重点

基本结构
复制代码 
<html>
<head>...</head>
<frameset rows="横向分割" cols="纵向分割"
          border="像素" bordercolor="色"
          frameborder="yes|no" framespacing="像素">
  <frame src="url1" name="框架名1">
  <frame src="url2" name="框架名2">
  ...
</frameset>
<noframes>
  <body>您的浏览器不支持框架</body>      <!-- 不支持框架时的提示 -->
</noframes>
</html>

  • 注意 ：<frameset> 替代了 <body>，不能同时存在

  • rows/cols 值可为像素、百分比（如 50%）、相对值（*）

  • <frame> 是单标记，个数应与框架数一致

<frame> 属性
属性 说明
src="url" 框架加载的页面
name="名" 框架名称（用于 target 跳转）
`scrolling="yes no
noresize 禁止用户调整框架大小
marginwidth/marginheight 框架内容边距
`frameborder="yes no"`
框架间的链接（核心考点）
复制代码 
<a href="目标.html" target="框架名"> 热点 </a>

4个特殊 target 值：

target 效果
_blank 在新窗口中打开
_self 在当前框架中打开（默认）
_top 在整个浏览器窗口打开（取消框架）
_parent 在父框架中打开

实验4 - 框架综合应用：用三层框架嵌套实现唐诗赏析系统。

复制代码 
┌────────── 目录区 (topFrame) ──────────┐  rows="20%,*"
├────────────┬──────────────────────────┤  cols="50%,50%"
│ 诗文区     │ 简析区                   │
│ (poemFrame)│ (analysisFrame)          │  rows="60%,40%"
│ 注释区     │                          │
│ (poemNote) │                          │
└────────────┴──────────────────────────┘

关键代码见 实验4/index.html、实验4/mulu.html、实验4/tangshi/jys.html、实验4/tangshi/hxos.html、实验4/tangshi/note-jys.html、实验4/tangshi/note-hxos.html、实验4/jianxi/jianxi.html

JS 框架间引用
复制代码 
// 父→子
window.frames["frameName"]    // 方式1
window.frames.frameName       // 方式2
window.frames[index]          // 方式3

// 子→父
self.parent

// 兄弟框架
self.parent.frames["frameName2"]

// 顶层框架
self.top

// 判断是否顶层
if (self == top) { /* ... */ }

// 改变框架导航
window.frames[0].location = "1.html";

2.14 表单 <form> ⭐ 重点

基本格式
复制代码 
<form name="表单名" action="URL" method="get|post">
  <!-- 表单项 -->
</form>
input 类型汇总
复制代码 
<!-- 文本框 -->
<input type="text" name="xm" value="默认值" size="20" maxlength="30">
​
<!-- 密码框 -->
<input type="password" name="pwd">
​
<!-- 单选钮（同一组 name 必须相同） -->
<input type="radio" name="sex" value="男" checked="checked"> 男
<input type="radio" name="sex" value="女"> 女
​
<!-- 复选框（同一组 name 相同） -->
<input type="checkbox" name="hobby" value="读书" checked> 读书
<input type="checkbox" name="hobby" value="运动"> 运动
​
<!-- 按钮 -->
<input type="submit" value="提交">       <!-- 提交表单 -->
<input type="reset" value="重置">        <!-- 清空表单 -->
<input type="button" value="普通按钮">   <!-- 普通按钮，需绑定事件 -->
​
<!-- 禁用和只读 -->
<input type="text" value="不可编辑" disabled>
<input type="text" value="只读" readonly>
选择栏 <select>
复制代码 
<select size="1" name="city" multiple>       <!-- multiple=可多选 -->
  <option value="bj" selected>北京</option>   <!-- selected=默认选中 -->
  <option value="sh">上海</option>
</select>

  • size="x"：一次可见的列表项数

  • 有 multiple 可多选，否则单选

多行文本 <textarea>
复制代码 
<textarea name="intro" rows="5" cols="40">默认文本</textarea>
  • rows 和 cols 是不用滚动条即可看到的部分

实验5 - 信息填写表单：姓名、年龄、电子邮件、身份证号、邮箱的输入表单，含提交和重置按钮。

关键代码见 实验5/form.html

2.15 图像映射 <map> <area>

复制代码 
<img src="map.jpg" usemap="#mapName">
<map name="mapName">
  <area shape="rect" coords="x1,y1,x2,y2" href="page1.html" alt="矩形区">
  <area shape="circle" coords="x,y,r" href="page2.html" alt="圆形区">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="page3.html" alt="多边形">
</map>

  • <area> 必须嵌套在 <map> 中

  • usemap 与 name 关联（usemap="#name"）

2.16 Meta 标记

复制代码 
<!-- 字符编码 -->
<meta charset="UTF-8">

<!-- SEO 相关 -->
<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="网站描述">
<meta name="author" content="作者名">
<meta name="generator" content="编辑工具">

<!-- 搜索引擎控制 -->
<meta name="robots" content="all|none|index|noindex|follow|nofollow">

<!-- 页面控制 -->
<meta http-equiv="refresh" content="5;url=http://xxx">     <!-- 定时跳转 -->
<meta http-equiv="expires" content="Mon,12 May 2025 00:20:00 GMT">  <!-- 过期时间 -->
<meta http-equiv="pragma" content="no-cache">               <!-- 禁止缓存 -->
<meta http-equiv="windows-target" content="_top">           <!-- 禁止被frame引用 -->

2.17 HTML 练习题回顾

PPT 唐诗练习题要求：

  1. "回乡偶书"用 <h2> 居中显示，"贺知章"用 <h5> 居中

  2. 前两句：绿色 4号 隶书 加粗；后两句：红色 4号 幼圆 斜体

  3. 标题和正文间：蓝色 3号 水平线分隔

  4. 解析部分：独立成段，中间不换行

PPT 超链接练习题：

  1. 目录页链接到 tangshi/ 下的诗文文件

  2. 诗文页"目录"链接回 mulu.html

  3. "简析"链接使用书签标记

第3章 CSS --- 高效定制网页样式

3.1 CSS 简介

CSS（Cascading Style Sheets，层叠样式表单）用于控制网页样式，实现 结构（HTML）与表现（CSS）分离。

  • 样式：文字大小、色彩、图片位置等显示设置

  • 层叠：多个样式文件冲突时，按层次顺序处理（优先级 + 继承）

3.2 CSS 四种引入方式 ⭐ 必考

① 行内样式（优先级最高，作用范围仅当前标记）
复制代码 
<标记 style="属性1:值1; 属性2:值2; ...">

适用范围：除 <basefont>、<param>、<script> 外的任意 body 内标记

② 内部样式表（在 <head> 中定义）
复制代码 
<head>
  <style type="text/css">
    <!--
      选择符1 { 属性: 值; 属性: 值; }
      选择符2 { 属性: 值; }
    -->
  </style>
</head>

<!-- --> 是为了兼容不支持 CSS 的老浏览器

③ 链入外部样式表（推荐方式）
复制代码 
<head>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

样式保存在独立的 .css 文件中，可被多个页面共用。

④ 导入外部样式表（在 <style> 内使用 @import）
复制代码 
<style type="text/css">
  @import url("style1.css");
  @import url("style2.css");
  /* 其他样式声明 */
</style>

与链入的区别：链入是先加载 HTML 再加载 CSS；导入是复制样式到 HTML 中。

优先级（从高到低）：行内样式 > 内部样式 > 链入样式 > 导入样式 > 浏览器默认

层叠规则：

  • 外部元素的样式会继承给内部元素

  • 冲突时以最后定义的为准

  • 例如：外部样式 h3{color:red; text-align:left} + 内部样式 h3{color:green} = 最终 h3{color:green; text-align:left}（color 被覆盖，text-align 保留）

实验7 - CSS 引入方式对比练习：

  • internal-styles.html → 内部样式表

  • linked-style.html → 链入 external-style.css

  • imported-style.html → 导入 import-style1.css + import-style2.css

  • class-id-style.html → class 和 id 选择符练习

3.3 选择符（Selector）⭐ 必考

标记选择符
复制代码 
h1 { color: red; }
p { font-size: 14px; }
class 选择符（可复用，用 . 前缀）
复制代码 
/* 方法1：限定标记 */
p.blue { color: blue; }          /* 只对 class="blue" 的 <p> 生效 */
h1.center { text-align: center; }
​
/* 方法2：不限标记（通用类） */
.blue-text { color: blue; }      /* 任何标记都可用 class="blue-text" */
*.red { color: red; }            /* * 可省略 */
id 选择符（唯一，用 # 前缀）
复制代码 
/* 方法1：不限标记 */
#main-title { font-size: 24px; }
​
/* 方法2：限定标记 */
h1#main-title { font-size: 24px; }  /* 只对 id="main-title" 的 <h1> 生效 */

class vs id：class 可多次使用（如"一类元素"），id 在页面中唯一。

实验7 class/id 练习 ：两句蓝色用 class，一句蓝色用 id。 代码见 实验7/class-id-style.html

伪类选择符（常用于链接）
复制代码 
a:link    { color: blue; }       /* 未访问的链接 */
a:visited { color: purple; }     /* 已访问的链接 */
a:hover   { color: red; }        /* 鼠标悬停 */
a:active  { color: orange; }     /* 点击瞬间（按下未释放） */
span 与 div 的区别

  • <span>：内联元素，不换行，无结构意义，纯粹应用样式。样式失效时无任何作用

  • <div>：块级元素，可包含段落、标题、表格等，适合做页面区域划分

3.4 CSS 属性单位

长度单位
类型 单位 说明
相对 em 相对于当前字体大小
ex 相对于 x-height
px 像素
% 百分比
绝对 in 英寸
cm/mm 厘米/毫米
pt 磅（1pt=1/72in）
pc 派卡（1pc=12pt）

  • 相对单位能更好适应不同媒体，是首选

  • 格式：可选 +/- + 数字 + 单位，数字与单位间不能有空格

百分比单位
复制代码 
p { line-height: 150%; }     /* 行高为标准行高的 1.5 倍 */
hr { width: 80%; }           /* 宽度为浏览器窗口的 80% */
色彩单位（三种方式）⭐
复制代码 
color: #ff0000;                    /* ① 十六进制 #RRGGBB（00~FF） */
color: rgb(255, 0, 0);            /* ② rgb函数（0~255 或 0%~100%） */
color: rgb(100%, 0%, 0%);
color: red;                        /* ③ 色彩名称（共16种） */

3.5 字体属性（Font Properties）

复制代码 
/* 字体族 */
font-family: "华文新魏", "楷体_GB2312", serif;  /* 从左到右依次尝试 */
​
/* 字号 */
font-size: 20px;              /* 绝对尺寸 */
font-size: 1.5em;             /* 相对父元素 */
font-size: 150%;              /* 百分比 */
font-size: medium;            /* 关键字: xx-small/x-small/small/medium/large/x-large/xx-large */
​
/* 字体风格 */
font-style: italic;           /* 斜体 */
font-style: oblique;          /* 倾斜（无斜体变量时用） */
font-style: normal;           /* 正常 */
​
/* 字重（粗细） */
font-weight: bold;            /* 粗体 = 700 */
font-weight: normal;          /* 正常 = 400 */
font-weight: 800;             /* 100~900 */
​
/* 文字变形 */
text-transform: uppercase;    /* 全大写 */
text-transform: lowercase;    /* 全小写 */
text-transform: capitalize;   /* 首字母大写 */
text-transform: none;         /* 正常 */
​
/* 文字修饰 */
text-decoration: underline;   /* 下划线 */
text-decoration: overline;    /* 上划线 */
text-decoration: line-through;/* 删除线 */
text-decoration: blink;       /* 闪烁 */
text-decoration: none;        /* 无修饰 */
​
/* font 复合属性（顺序固定！） */
font: font-style font-variant font-weight font-size/line-height font-family;
/* 必须包含 font-size 和 font-family */

3.6 文本属性（Text Properties）

复制代码 
word-spacing: 10px;           /* 单词间距，可为负值 */
letter-spacing: 6px;          /* 字母间距（最后一个字母除外） */
line-height: 2;               /* 行高：数字=倍数（2=2倍字号），也可用px/pt */
text-align: center;           /* 水平对齐：left/right/center/justify */
text-indent: 2em;             /* 首行缩进，可为负值 */
  • text-align 只用于整块内容（<p>、<h1>~<h6>、<blockquote>、<ul> 等）

3.7 盒子模型（Box Model）⭐ 必考

复制代码 
         margin（外延边距，始终透明）
      ┌─────────────────────────┐
      │  border（边框）          │
      │  ┌─────────────────┐    │
      │  │ padding（内补丁） │   │
      │  │  ┌─────────┐    │    │
      │  │  │ 内容     │    │    │
      │  │  └─────────┘    │    │
      │  └─────────────────┘    │
      └─────────────────────────┘
margin（外延边距）
复制代码 
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
​
/* 简写（顺时针：上 右 下 左） */
margin: 10px;                    /* 四边相同 */
margin: 10px 20px;               /* 上下=10 左右=20 */
margin: 10px 20px 30px;          /* 上=10 左右=20 下=30 */
margin: 10px 20px 30px 40px;     /* 上 右 下 左 */
​
margin: auto;                    /* 自动（居中） */

  • margin 始终透明

  • 百分数基于父对象的高度

  • 内联对象要先设 height/width 或 position:absolute 才能用

border（边框）
复制代码 
/* 宽度 */
border-width: thin | medium | thick | 2px;

/* 样式 */
border-style: none | hidden | dotted | dashed | solid |
              double | groove | ridge | inset | outset;
/* 4值: 上右下左 | 3值: 上 左右 下 | 2值: 上下 左右 | 1值: 四边 */

/* 颜色 */
border-color: red;

/* 单边简写（可同时设宽度、样式、颜色） */
border-top: 2px solid red;
border-right: 1px dashed blue;
border-bottom: 3px dotted green;
border-left: 1px solid black;
padding（内补丁 / 对象间隙）
复制代码 
padding-top: 10px;
padding: 10px;                   /* 简写格式同 margin */

  • 位于 border 和内容之间

  • 不允许负值

3.8 背景属性（Background）

复制代码 
background-color: #f0f0f0;              /* 背景色 */
background-color: transparent;          /* 透明 */

background-image: url("bg.jpg");        /* 背景图 */
background-image: none;                  /* 无背景图 */

background-repeat: repeat;             /* 默认：横纵平铺 */
background-repeat: no-repeat;          /* 不平铺 */
background-repeat: repeat-x;           /* 仅横向平铺 */
background-repeat: repeat-y;           /* 仅纵向平铺 */

background-attachment: scroll;         /* 随内容滚动 */
background-attachment: fixed;          /* 背景固定不动（仅对<body>有效） */

background-position: center top;       /* 定位：left/center/right + top/center/bottom */
background-position: 50% 0%;           /* 也可用百分比 */
background-position: 10px 20px;        /* 也可用像素 */

/* 复合属性 */
background: color image repeat attachment position;
/* 默认值：transparent none repeat scroll 0% 0% */

3.9 布局属性

float（浮动）
复制代码 
float: left | right | none;

让元素浮动，周围文字环绕。

clear（清除浮动）
复制代码 
clear: left | right | both | none;

不允许指定方向有浮动对象。

3.10 定位属性（Positioning）

复制代码 
/* 定位方式 */
position: static;                /* 默认，遵循 HTML 定位规则 */
position: absolute;              /* 绝对定位，脱离文档流，用 left/right/top/bottom 定位 */
position: relative;              /* 相对定位，相对于正常位置偏移，不可层叠 */

/* 位置 */
left: 100px;                     /* 距左侧 */
right: 50px;
top: 20px;
bottom: 30px;

/* 尺寸 */
width: 200px;
height: 150px;

/* 层叠顺序 */
z-index: 10;                     /* 数值越大越靠上，可为负数 */

/* 可见性 */
visibility: visible | hidden;    /* hidden 仍占据物理空间！ */
visibility: collapse;             /* 隐藏表格行/列 */
  • visibility: hidden vs display: none：前者保留空间，后者不保留

3.11 CSS 滤镜（Filter）属性

适用于 IE 旧版本，使用 filter: 属性：

滤镜 语法 说明
Alpha Alpha(Opacity=50, Style=0~3) 透明度，Style: 0=均匀 1=线形 2=圆形 3=矩形
Blur Blur(Add=1, Direction=45, Strength=5) 模糊，Direction: 0/45/90/135/180/225/270/315
Chroma Chroma(Color=#ff0000) 指定颜色变透明
DropShadow DropShadow(Color=gray, OffX=5, OffY=5) 投射阴影（无渐进感）
Shadow Shadow(Color=red, Direction=135) 阴影（有渐进感）
Glow Glow(Color=red, Strength=3) 外轮廓光晕（Strength: 1~255）
Mask Mask(Color=blue) 覆盖膜效果
Wave Wave(Add=1, Freq=3, Strength=10) 波浪变形
FlipH / FlipV 无参数 水平/垂直翻转
Gray 无参数 灰度
Invert 无参数 底片效果
Xray 无参数 只显示轮廓

第4章 JavaScript --- 网页特效

4.1 JavaScript 简介

JavaScript 是一种**基于对象（Object）和事件驱动（Event Driven）**的客户端脚本语言，与 HTML、CSS 一起实现 Web 页面交互。

  • JavaScript 不是 Java，前身是 LiveScript

  • 脚本可在服务器端（ASP/PHP）或客户端（JS）运行

4.2 JS 的三种引入方式 ⭐

① 内嵌脚本（在 HTML 中直接写）
复制代码 
<script language="JavaScript">
  // JS 代码
</script>

通常放在 <head> 中，保证先于页面内容加载执行。

② 链接外部脚本文件
复制代码 
<head>
  <script type="text/javascript" src="script.js"></script>
</head>

脚本保存在 .js 文件中，多个 HTML 可共用。

③ 在标记内添加（事件处理）
复制代码 
<input type="button" οnclick="doSomething()" value="点击">
多脚本网页

一个 HTML 中可以有多个 <script> 块，放在 <head> 和 <body> 中，浏览器依次执行。

4.3 数据类型与表达式

4种基本数据类型 ⭐
类型 说明 示例
number 整数和浮点数不区分，可自由转换 10, 3.14, 6e8
string 用单引号或双引号括起 "Hello", 'abc'
boolean 只有 true/false（不能用1/0） true, false
object 对象类型 {}, new Array()
常量

基本常量：

  • 字符型："123"、'abcABC123'

  • 数值型：十进制、十六进制（0x）、八进制（0）；实型如 12.32、6E8

  • 布尔型：true / false（不能用 1/0）

特殊常量：

  • null：空值（引用未定义变量时返回）

  • 控制字符（以 \ 开头）：

字符 含义 字符 含义
\b 退格 \f 换页
\n 换行 \r 回车
\t Tab \' 单引号
\" 双引号 \\ 反斜杠
变量 ⭐

命名规则：

  1. 首字符：字母（大小写均可）、_ 或 $

  2. 后续：字母、数字、_、$

  3. 不能有空格、+、-、, 等特殊符号

  4. 不能使用 JS 关键字（如 var、int、true 等40+个）

  5. 区分大小写

声明与赋值：

复制代码 
var x = 10;                      // 声明并赋值
var a, b, c;                     // 一次声明多个
var name = "张三", age = 18;     // 同时声明并赋值

作用域 ⭐：

类型 定义位置 作用范围
全局变量 所有函数体之外 全部函数（包括后面定义的）
局部变量 函数体之内（用 var） 仅该函数内，且在该变量定义之后
  • 函数内与全局变量同名的局部变量会遮蔽全局变量

实验10 - 变量作用域验证 ：第一个 <script> 声明的全局变量 myString 在第二个 <script> 中仍可访问，函数内部 var myString 创建的是局部变量，不影响外部。

代码见 实验10/js4-16.html

4.4 运算符与表达式

运算符一览
类别 运算符
算术 + - * / % ++ --
字符串 +（连接）
比较 == != < <= > >=（返回 boolean）
布尔 ! && ||
三目 条件 ? 结果1 : 结果2
位运算 & | ^ ~ << >> >>>
复合赋值 += -= *= /= %= &= |= ^=
运算符优先级（从高到低）

  1. ++ --

  2. * / %

  3. + -

  4. << >> >>>

  5. & \| ^ ~

  6. < <= > >= == !=

  7. ! && \|\| ?:

4.5 程序控制流程 ⭐ 必考

条件语句
复制代码 
// if
if (条件) {
    语句;
}

// if-else
if (条件) {
    语句1;
} else {
    语句2;
}

// if-else if-else
if (条件1) {
    语句1;
} else if (条件2) {
    语句2;
} else {
    语句3;
}

// switch
switch (变量) {
    case 值1:
        语句1;
        break;                    // 别忘了 break！
    case 值2:
        语句2;
        break;
    default:
        默认语句;
}
循环语句
复制代码 
// for（已知循环次数）
for (初始化; 条件; 增量) {
    语句;
}

// while（先判断再执行）
while (条件) {
    语句;
}

// do-while（至少执行一次）
do {
    语句;
} while (条件);
跳转语句
语句 作用
break 跳出整个循环或 switch
continue 跳过本轮循环，开始下一轮
label: 为语句加标号，配合 break/continue 使用

实验8 - 温度穿衣建议 ：prompt() 获取温度 → parseFloat() 转换 → if-else if-else 分支 → alert() 输出建议。

代码见 实验8/temperature_clothing.html
实验9 - 9×9 乘法表 ：双层 for 循环（i=1..9, j=1..i）生成下三角，document.createElement + appendChild 动态构建 DOM。

代码见 实验9/multiplication-table.html

4.6 函数 ⭐ 必考

函数定义
复制代码 
function 函数名(参数1, 参数2, ...) {
    语句;
    return 表达式;                // 可选返回值
}

动态定义（使用 Function 构造函数）：

复制代码 
var f = new Function("x", "y", "return x*y;");
// 等价于
function f(x, y) { return x*y; }
函数调用
复制代码 
// ① 无返回值调用
函数名(参数);
​
// ② 有返回值调用
var result = 函数名(参数);
​
// ③ 在超链接中调用
<a href="#" onClick="函数名(参数)"> 热点 </a>
<a href="javascript:函数名(参数)"> 热点 </a>
​
// ④ 页面加载时调用
<body onLoad="函数名(参数)">
全局变量与局部变量

  • 函数参数也是局部变量

  • 函数中与全局变量同名的局部变量会遮蔽全局变量

  • 函数中对全局变量的修改会影响所有引用

实验10 完整演示了跨 <script> 块的变量作用域

内置函数
函数 作用 示例
parseInt(str) 字符串→整数（截尾，非四舍五入） parseInt("6.8") → 6
parseFloat(str) 字符串→浮点数 parseFloat("6.8") → 6.8
isNaN(val) 判断是否非数值 isNaN("abc") → true
eval(str) 执行字符串表达式 eval("3+5") → 8
escape(str) URL 编码
unescape(str) URL 解码

4.7 基于对象的 JavaScript

对象概念

  • 属性（Properties）：描述对象特性的变量

  • 方法（Methods）：操作对象特性的函数

对象操作语句
复制代码 
// for...in：遍历对象所有属性
for (var key in obj) {
    console.log(key + " = " + obj[key]);
}

// with：简化对象属性访问
with (obj) {
    // 此处的属性和方法都属于 obj
    name = "张三";
    age = 18;
}

// this：当前对象
// new：创建对象实例
var obj = new 对象名(参数);

// delete：删除对象实例/属性
delete obj.property;
对象属性访问三种方式
复制代码 
obj.name            // ① 点运算符
obj["name"]         // ② 字符串下标
obj[0]              // ③ 数字下标（从0开始）
对象方法引用
复制代码 
对象名.方法名()

4.8 内置对象详解 ⭐

Array（数组）
复制代码 
// 定义方式
var arr = new Array();                    // 空数组
var arr = new Array(5);                   // 指定长度
var arr = new Array(1, 2, 3, 4, 5);      // 带初始值
var arr = [1, 2, 3, 4, 5];               // 字面量（推荐）
​
// 属性
arr.length                                // 数组长度
​
// 方法
arr.sort()                                // 排序（默认按ASCII码排序字符串）
arr.sort((a,b) => a-b)                   // 指定排序函数（数字升序）
arr.reverse()                             // 颠倒顺序
arr.concat(arr2, arr3)                    // 合并数组
arr.join("分隔符")                         // 合并为字符串
arr.slice(start, stop)                    // 截取子数组（支持负数索引）
arr.toString()                            // 转为逗号分隔字符串
String（字符串）
复制代码 
// 创建
var s = "Hello World";
var s = new String("Hello");
​
// 属性和方法
s.length                                  // 字符个数
s.charAt(0)                               // 返回指定位置字符
s.indexOf("World")                        // 查找子串首次出现位置
s.substring(0, 5)                         // 截取 [start, end)
s.slice(-3)                               // 从末尾截取
s.split("")                               // 分割为字符数组
s.toUpperCase()                           // 全大写
s.toLowerCase()                           // 全小写
s.replace("old", "new")                   // 替换（首次匹配）
s.match(/pattern/)                        // 正则匹配

实验11 - 字符串操作：获取输入字符串 → 显示长度、大写、小写 → 截取前5位和后3位 → 分割为数组。

代码见 实验11/index.html 中的 stringOps() 函数

Date（日期）⭐
复制代码 
// 创建
var now = new Date();                                   // 当前时间
var d1 = new Date(2025, 0, 1);                         // 2025年1月1日（月从0开始！）
var d2 = new Date(2025, 0, 1, 12, 30, 0);              // 带时分秒
var d3 = new Date("2025-01-01");                       // 字符串
​
// 获取方法（⚠ 月份从0开始，0=1月）
now.getFullYear()        // 年份（4位）
now.getMonth()           // 月份（0-11，0=1月）
now.getDate()            // 日（1-31）
now.getDay()             // 星期（0=周日，1=周一...6=周六）
now.getHours()           // 小时
now.getMinutes()         // 分钟
now.getSeconds()         // 秒
now.getTime()            // 毫秒数（从1970.1.1起）
​
// 设置方法
now.setFullYear(2026)
now.setMonth(5)          // 6月
now.setDate(15)
now.setHours(14)
​
// 格式转换
now.toLocaleString()     // 本地时间字符串
now.toGMTString()        // 格林威治标准时间
now.toString()           // 转为字符串

实验12 - 实时时钟 ：setInterval(updateTime, 1000) 每秒调用 new Date() 更新显示，使用 padStart(2,'0') 补零格式化。

代码见 实验12/index.html 中的 updateTime() 函数

Math（数学，无需 new）
复制代码 
// 属性
Math.PI            // 3.14159...
Math.E             // 2.718...

// 方法
Math.round(4.7)    // → 5    四舍五入
Math.floor(4.7)    // → 4    向下取整
Math.ceil(4.3)     // → 5    向上取整
Math.random()      // → [0, 1) 随机数
Math.sqrt(16)      // → 4    平方根
Math.abs(-5)       // → 5    绝对值
Math.max(1,2,3)    // → 3    最大值
Math.min(1,2,3)    // → 1    最小值
Math.pow(2, 3)     // → 8    2的3次方

// 常用技巧
Math.floor(Math.random() * 11)           // 0~10 随机整数
Math.floor(Math.random() * (max-min+1)) + min  // min~max随机整数

4.9 自定义对象

复制代码 
// 方式1：初始化对象（字面量）
var person = {
    name: "张三",
    age: 18,
    sayHi: function() { alert("Hi, " + this.name); }
};

// 方式2：构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        alert("Hi, " + this.name);
    };
}
var p = new Person("张三", 18);

4.10 DOM 对象及编程 ⭐ 重点

window 对象（浏览器窗口）
复制代码 
// 弹窗
window.alert("消息");
var input = window.prompt("提示文字", "默认值");  // 返回字符串或null
​
// 定时器（核心考点！）
var timerId = setInterval(函数, 毫秒);    // 每隔N毫秒执行一次
var timerId = setTimeout(函数, 毫秒);     // 延迟N毫秒后执行一次
clearInterval(timerId);                   // 清除定时器
clearTimeout(timerId);
​
// 窗口操作
window.open("url", "窗口名");
window.close();
document 对象（文档）
复制代码 
// 写入页面
document.write("内容");               // 不换行
document.writeln("内容");              // 换行（仅在<pre>中有效）
​
// 获取元素
document.getElementById("id值");       // 最常用
​
// 属性
document.title                        // 文档标题
document.bgColor                      // 背景色
document.fgColor                      // 前景色
document.URL                          // 页面URL
document.lastModified                 // 最后修改时间
document.linkColor                    // 链接颜色
document.alinkColor                   // 激活链接颜色
document.vlinkColor                   // 已访问链接颜色
location 对象（URL信息）
复制代码 
location.href          // 完整URL
location.protocol      // 协议
location.host          // 主机+端口
location.hostname      // 主机名
location.port          // 端口号
location.pathname      // 路径
location.hash          // 锚点#
location.search        // 搜索?参数
​
// 方法
location.reload()      // 刷新页面
location.assign(url)   // 跳转
location.replace(url)  // 替换（不产生历史记录）
history 对象（浏览历史）
复制代码 
history.length         // 历史记录数量
history.back()         // 后退
history.forward()      // 前进
history.go(-2)         // 跳转（负=后退，正=前进）

4.11 事件处理 ⭐ 必考

事件是预先定义好的、能被对象识别的动作。当事件发生时，JavaScript 自动调用对应的处理函数（句柄）。

浏览器事件
事件 句柄 触发时机
Load onLoad 页面（含所有元素）加载完成后
Unload onUnload 页面卸载前（地址栏输入新URL、导航按钮）
Submit onSubmit 表单提交时（常用于数据校验）
复制代码 
<body onLoad="init()">
<form οnsubmit="return validate()">    <!-- return false 阻止提交 -->

常见用法：

  • onLoad：弹窗显示版权/欢迎信息、密码认证

  • onUnload：结束页面、清理资源

  • onSubmit：数据校验，通过返回 true，不通过返回 false 阻止提交

实验14 - onSubmit 表单校验 ：表单数据校验，通过 return false 阻止无效提交。

鼠标事件
事件 句柄 触发时机
Click onClick 单击（表单元素、超链接）
DblClick onDblClick 双击
MouseDown onMouseDown 按下鼠标键
MouseUp onMouseUp 释放鼠标键
MouseOver onMouseOver 鼠标移入对象上方
MouseOut onMouseOut 鼠标移出对象
MouseMove onMouseMove 鼠标移动

实验14 - 鼠标事件 ：mouseenter→图片切换为2.jpg，mouseleave→切回1.jpg。

键盘与表单事件
事件 句柄 触发时机
KeyDown onKeyDown 按下键盘键
KeyPress onKeyPress 按压键盘键（KeyDown 之后）
KeyUp onKeyUp 释放键盘键
Focus onFocus 获得焦点
Blur onBlur 失去焦点（即使值未改变也触发）
Change onChange 内容改变且失去焦点（常用于校验）
Select onSelect 选中文本
Resize onResize 窗口/框架大小改变

实验14 - Change 事件：文本框1 change → 同步到文本框2；Select change → alert 选中项。

事件绑定方式
复制代码 
<!-- 方式1：HTML 属性（最传统） -->
<button οnclick="doSomething()">点击</button>
​
<!-- 方式2：JS 直接赋值 -->
<script>
document.getElementById('btn').onclick = function() { ... };
</script>
​
<!-- 方式3：addEventListener（推荐） -->
<script>
document.getElementById('btn').addEventListener('click', function() { ... });
</script>

实验13 - addEventListener 定时器 ：用 addEventListener 绑定开始/停止/重置按钮，setInterval 驱动计时器。

代码见 实验13/index.html

4.12 错误处理

复制代码 
// throw：扔出异常
throw "发生错误";
​
// try-catch：捕获异常
try {
    // 可能出错的代码
} catch (exception) {
    // 处理异常
}
​
// onError（window对象）
window.onerror = function(sMsg, sURL, sLine) {
    // sMsg: 错误描述  sURL: 发生错误的URL  sLine: 行号
    return true;   // true=不显示标准错误  false=显示
};

4.13 表单对象（Form Object）与 JS 交互

调用 Form 对象的一般格式：

复制代码 
<form name="表单名" action="URL" ...>
  <input type="类型" name="表项名" value="值" 事件="处理函数">
  ...
</form>
表单元素 关键属性 关键方法 关键事件
Text（单行文本） name, value, defaultValue blur(), select(), focus() onFocus, onBlur, onChange, onSelect
Textarea（多行文本） name, value, defaultValue blur(), select() onBlur, onFocus, onChange, onSelect
Select（选择栏） name, length, options\[\], selectedIndex onBlur, onFocus, onChange
Button name, value click() onClick
Checkbox name, value, checked, defaultChecked click() onClick
Radio name, value, checked click() onClick
Password name, value, defaultValue select(), blur(), focus()
Submit name, value click() onClick

附录：所有实验索引

实验 对应章节 核心知识点 关键文件
2 HTML 文字/超链接 <h#> <font> <hr> <a> 页内书签 多页面导航 1.html mulu.html tangshi/jys.html tangshi/hxos.html jianxi/jianxi.html
3 HTML 列表/图片 <ul> <ol> 三级嵌套列表 <img> 图片链接 index.html details.html
4 HTML 框架 <frameset> <frame> 框架嵌套 target 框架间链接 index.html mulu.html tangshi/* jianxi/*
5 HTML 表单 <form> input(text/email/submit/reset) 布局 form.html
7 CSS 引入方式 内部样式 链入外部 导入外部 class/id 选择符 internal-styles.html linked-style.html external-style.css imported-style.html import-style1.css import-style2.css class-id-style.html
8 JS 条件/函数 prompt() parseFloat() if-else alert() 函数封装 temperature_clothing.html
9 JS 循环/DOM 双层 for 循环 createElement appendChild grid 布局 multiplication-table.html
10 JS 变量作用域 全局变量 vs 局部变量 跨 <script> 块共享 var js4-16.html
11 JS 字符串/数组/定时器 String方法 Array操作 setInterval clearInterval DOM增删改 index.html
12 JS Date 对象 new Date() setInterval 实时时钟 数组随机排序 事件监听 index.html
13 JS 定时器 setInterval/clearInterval addEventListener 计时器控件 index.html
14 JS 事件交互 mouseenter/mouseleave change 事件同步 select 交互 index.html

🎯 考试代码填空高频考点速记

  1. HTML 结构 ：<html><head><title></title></head><body></body></html>

  2. 超链接 ：<a href="url" target="_blank">

  3. 书签跳转 ：定义 <a id="name">，跳转 <a href="#name">

  4. 图片 ：<img src="..." alt="..." width="..." height="...">

  5. 表格 ：<table border="1"><tr><td></td><th></th></tr></table>

  6. 框架 ：<frameset rows="20%,*"><frame src="..." name="..."></frameset>

  7. 表单 ：<form action="..." method="post"><input type="text" name="..."></form>

  8. 下拉框 ：<select><option selected>选项</option></select>

  9. CSS 行内 ：style="color:red; font-size:20px;"

  10. CSS 链入 ：<link rel="stylesheet" href="style.css">

  11. CSS 导入 ：@import url('style.css');

  12. CSS 语法 ：选择符 { 属性: 值; 属性: 值; }

  13. class/id ：.类名{} #id名{}

  14. JS 变量 ：var x = 10;

  15. JS 函数 ：function name(参数) { return 值; }

  16. 获取元素 ：document.getElementById("id")

  17. 定时器 ：setInterval(函数名, 1000) / clearInterval(id)

  18. 延时器 ：setTimeout(函数名, 3000) / clearTimeout(id)

  19. 弹窗 ：alert("消息") / prompt("提示", "默认")

  20. Date ：new Date() --- ⚠ 月份 getMonth() 从 0 开始（0=1月）

  21. 字符串转数字 ：parseInt() parseFloat()

  22. 表单校验 ：<form onsubmit="return check()"> --- return false 阻止提交

  23. 页面加载 ：<body onLoad="init()">

  24. 随机数 ：Math.random() --- Math.floor(Math.random() * 11) 生成 0~10

  25. 事件绑定 ：onclick="fn()" / .addEventListener('click', fn)

相关推荐
就叫_这个吧3 小时前
HTML或JSP页面链接CSS，link标签没问题，但不显示样式问题解决
java·前端·css·html·intellij-idea·jsp
古怪今人3 小时前
Vite8的项目中集成CSS预处理器编译器SCSS 集成Mock工具
前端·css·scss
小此方3 小时前
【别传：Web前端开发（二）】重塑视觉视界：CSS核心机理与弹性排版全景草稿
前端·css
粉末的沉淀3 小时前
css：隐藏video标签的下载按钮
前端·css
韩曙亮4 小时前
【Flutter】Flutter 编译 Web 网站 ① ( Tomcat 部署 Web 网站 )
前端·flutter·tomcat·web
kyriewen15 小时前
CSS Container Queries：彻底告别 @media 写到手软，附 5 个真实布局案例
前端·css·面试
川冰ICE20 小时前
JavaScript实战④｜天气查询应用，调用API与异步处理
javascript·css·css3
爱看老照片1 天前
浏览器的同源策略以及跨源问题 （ 浏览器的同域策略以及跨域问题）
浏览器·web·同源策略·跨域
艾伦野鸽ggg1 天前
CSS容器查询和悬浮间隙问题
前端·css
热门推荐
01《置身钉内》原文-可播放阅读02【AI】2026 年具身智能模型和世界模型总结03GitHub 镜像站点04Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？062026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf07Codex 下载安装指南：Windows 和 macOS 官方版下载08AI科技热点日报 | 2026年6月1日09【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法10CC-Switch 下载、安装与使用配置指南【2026.5.29】