Home Home Home Blog Blog Blog Project Project Project Docs Docs Docs Jour Jour Jour Lang Lang

Contents

MISY350 Exam 1 完整复习笔记 / Complete Review Notes

Vindrin
   3557 words 
Contents

MISY350 Exam 1 完整复习笔记 / Complete Review Notes

考试格式 / Exam Format：闭卷 / Closed-book | 20 选择/判断 (40%) + 10 简答 (30%) + 1 HTML/CSS 填空 (15%) + 1 CSS 编程题 (15%) 20 Multiple Choice/True-False (40%) + 10 Short Answer (30%) + 1 HTML/CSS Fill-in-blank (15%) + 1 CSS Coding (15%)

Topic 1：互联网与 Web 基础 / Internet & Web Fundamentals

核心术语 / Core Terminology

术语 Term含义 (中文) / Definition (English)
PortabilityWeb 技术无需修改即可跨设备和平台运行的特性 / The ability of web technologies to run across different devices and platforms without modification
Client-side programming在浏览器（客户端）端运行的代码，如 HTML/CSS/JavaScript / Code that runs in the browser (client), such as HTML/CSS/JavaScript
Server-side programming在服务器上响应客户端请求的代码，如搜索引擎、数据库操作 / Code that runs on the server to respond to client requests
Hyperlink可点击跳转到另一个资源的链接；Web 最基本特征之一 / A clickable element that navigates to another resource; one of the most fundamental features of the Web
Web server存储并向客户端提供 Web 资源的计算机软件，如 Apache、IIS / A computer program that stores and serves web resources
URIUniform Resource Identifier（统一资源标识符）/ A string that identifies a resource on the Internet
URLUniform Resource Locator（统一资源定位符），不仅标识资源还指明如何定位它 / A type of URI that specifies how to locate the resource
HostnameURL 中服务器的全限定域名，由 DNS 解析为 IP 地址 / The fully qualified domain name, resolved by DNS into an IP address
HTTPHyperText Transfer Protocol（超文本传输协议），客户端与服务器通信的应用层协议 / The application-layer protocol for communication between clients and servers
DNSDomain Name System（域名系统），将域名翻译为 IP 地址 / Translates human-readable domain names into machine-readable IP addresses
W3CWorld Wide Web Consortium（万维网联盟），1994 年由 Tim Berners-Lee 创建 / Founded in 1994 by Tim Berners-Lee; develops Web standards

URL 结构解析 / URL Structure Breakdown

http://www.deitel.com/books/downloads.html
  │          │                │
 协议        主机名            资源路径
Protocol   Hostname         Resource path
  • http:// → 使用 HTTP 协议 / Uses the HTTP protocol
  • www.deitel.com → hostname，DNS 将其解析为 IP 地址 / Resolved by DNS into an IP address
  • /books/downloads.html → 服务器上的资源路径 / The resource path on the server

GET vs POST（重点区分 / Key Distinction）

对比点 ComparisonGETPOST
数据位置 / Data location附加在 URL 后的查询字符串中 / Appended to the URL as a query string嵌入 HTTP 消息体中 / Embedded in the HTTP message body
示例 / Examplegoogle.com/search?q=deitel&source=chromeURL 不含数据 / URL contains no visible data
查询字符串 / Query string? 分隔路径与数据，& 分隔多个参数 / ? separates path from data无查询字符串 / No query string
数据长度 / Data length有长度上限（受 URL 长度限制）/ Has an upper limit无限制，适合大量数据 / No limit; suitable for large amounts of data
隐私性 / Privacy数据在 URL 中可见，不安全 / Data is visible — not secure数据隐藏在请求体中，相对安全 / Data is hidden — relatively secure
缓存 / Caching浏览器可缓存 GET 响应 / Browser may cache GET responses浏览器不缓存 POST 响应 / Browser does NOT cache POST responses
常见用途 / Common use获取/检索资源（搜索、浏览）/ Retrieving resources提交/发送数据（登录、表单）/ Submitting data

客户端缓存 / Client-side Caching

  • 浏览器将最近访问的页面保存在本地磁盘上 / The browser saves recently visited pages on local disk
  • HTTP 响应可指定内容的"新鲜度"时间 / HTTP responses can specify a “freshness duration”
  • 若缓存未过期 → 直接从缓存加载 / If cache has not expired → load from cache
  • 若服务器返回 “not modified”（304）→ 也使用缓存 / If server returns 304 → also use cache
  • POST 请求的响应不被缓存 / POST responses are not cached
  • 遇到页面不同步问题 → 清除浏览器缓存 / Clear browser cache if pages are out-of-sync

三层架构 / Three-Tier Architecture

[ 客户端/表示层 ]  ←→  [ 中间层/业务逻辑层 ]  ←→  [ 数据层/信息层 ]
Client /            Middle /                    Data /
Presentation        Business Logic              Information
  浏览器、UI           服务器逻辑                  数据库 (RDBMS)
  Browser, UI         Server logic                Database (RDBMS)
  • Bottom tier（数据层）：存储数据，通常使用 RDBMS / Stores data, typically using a RDBMS
  • Middle tier（中间层）：Controller logic + Business logic + Presentation logic / Handles requests, enforces business rules, generates responses
  • Top tier（客户端/表示层）：浏览器渲染 HTML/CSS/JavaScript / The browser renders content

MVC 模式 / MVC Pattern

组成部分 Component含义 (中文) / Definition (English)
Model（模型）代表应用数据和业务规则 / Represents the application data and business rules
View（视图）渲染用户界面，将数据呈现给用户 / Renders the user interface and presents data to the user
Controller（控制器）解释用户操作，将其映射到 Model 或 View 的动作 / Interprets user actions and maps them to actions

Topic 2：HTML5

基本术语 / Basic Terminology

术语 Term含义 (中文) / Definition (English)
Tag（标签）HTML 关键字，用尖括号 <> 包裹 / An HTML keyword enclosed in angle brackets
Element（元素）开标签 + 内容 + 闭标签组成的完整结构 / A complete structure of opening tag + content + closing tag
Attribute（属性）在开标签内指定的名值对 / A name-value pair inside an opening tag
Void element（空元素）没有内容和闭标签的元素 / An element with no content and no closing tag

文档结构 / Document Structure

<!DOCTYPE html>       <!-- 文档类型声明，必须在第一行 / Document type declaration; must be on the first line -->
<html lang="en">      <!-- HTML 根元素；HTML 不区分大小写 / Root element; case-insensitive -->
<head>
    <meta charset="UTF-8">                                       <!-- 字符编码 / Character encoding -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Author" content="Alan Wang">
    <meta name="Description" content="Our first HTML document">
    <title>Our First HTML Document</title>                        <!-- head 中唯一必须的元素 / Only required element in head -->
</head>
<body>
    <!-- 可视内容全部写在 body 中 / All visible content goes inside body -->
</body>
</html>

Head 元素 / Head Elements

元素/属性 Element/Attribute作用 (中文) / Purpose (English)示例 / Example
<title>页面标题，显示在浏览器标签栏 / Page title shown in browser tab<title>My Page</title>
<meta charset>声明字符编码，UTF-8 为推荐值 / Declares character encoding; UTF-8 recommended<meta charset="UTF-8">
<meta name="keywords">页面关键词，供搜索引擎使用 / Page keywords for search engines<meta name="keywords" content="gaming">
<meta name="description">页面描述，搜索引擎结果中的摘要 / Page description in search results<meta name="description" content="...">
<meta name="author">页面作者 / Page author<meta name="author" content="Junli Wang">
<meta name="viewport">控制移动端视口缩放 / Controls mobile viewport scaling<meta name="viewport" content="width=device-width">

Block-Level vs Inline 元素 / Block-Level vs Inline Elements

类型 Type特点 (中文) / Characteristics (English)常见元素 / Common Elements
Block-level（块级）独占一行，宽度自动撑满父容器 / Occupies its own line; width fills parenth1–h6, p, div, ol, ul, li, table, form
Inline（行内）不换行，只占内容所需宽度 / Does not start a new line; only takes content widtha, img, strong, em, span, br

Body 常用元素速查 / Body Common Elements Quick Reference

<!-- 标题 / Headings：h1 最大，h6 最小 -->
<h1>This is a level 1 heading</h1>
<h2 id="level2">This is a <span>level 2</span> heading</h2>
<!-- span 是行内分组元素 / span is an inline grouping element -->

<!-- 段落 / Paragraph -->
<p>This is a paragraph. Here is a <a href="https://www.swufe.edu.cn">link</a>.</p>

<!-- 链接 / Hyperlinks -->
<a href="https://example.com">External link / 外部链接</a>
<a href="#level2">Link to Level 2 heading / 内部锚点</a>  <!-- 目标元素需设 id / target needs id -->

<!-- 图片 / Image（void element，无闭标签） -->
<img src="localswufe.jpg" width="300px" alt="SWUFE logo">
<!-- src: 图片路径 / image path | alt: 替代文字 / alt text -->

<!-- 特殊字符 / Special Characters -->
&copy;  →  ©   <!-- 版权符号 / Copyright symbol -->

<!-- 有序列表 / Ordered List -->
<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>

<!-- 无序列表 / Unordered List（可嵌套 / can be nested） -->
<ul>
    <li>First Item
        <ol>
            <li>sub item 1</li>
        </ol>
    </li>
    <li>Second Item</li>
</ul>

<!-- 块级分组 / Block grouping -->
<div>
    <h1>This is a level 1 heading</h1>
    <p>This is a paragraph.</p>
</div>

<!-- 行内分组 / Inline grouping -->
<h2>This is a <span>level 2</span> heading</h2>

<!-- 换行 / Line break（void element） -->
<br>

表格结构 / Table Structure

<table>
  <thead>                                   <!-- thead：表头区域 / table header section -->
    <tr>                                     <!-- tr: table row / 表格行 -->
      <th>First Name</th>                    <!-- th: table header cell（加粗居中）-->
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>                                   <!-- tbody：表体数据区域 / table body -->
    <tr>
      <td>Alan</td>                         <!-- td: table data cell / 数据单元格 -->
      <td>Wang</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

表单 / Forms

form 元素属性 / Form Element Attributes

属性 Attribute说明 (中文) / Description (English)
method提交方式 / Submission method：get 或 post
action表单数据提交的目标 URL / The target URL for form data submission
autocomplete是否启用浏览器自动补全 / Whether to enable browser autocomplete：on 或 off

input 类型大全 / Input Type Reference

type 值 Value用途 (中文) / Purpose (English)示例 / Example
text单行文本输入 / Single-line text input<input type="text" name="fullname" placeholder="Enter name">
password密码输入（字符遮蔽）/ Password input (masked)<input type="password" name="password">
submit提交按钮 / Submit button<input type="submit" value="Send">
reset重置按钮，清空表单 / Reset button; clears form<input type="reset" value="Clear">
checkbox复选框，同 name 为一组可多选 / Checkbox; multiple selections allowed<input type="checkbox" name="interest" value="fps">
radio单选按钮，同 name 为一组互斥 / Radio button; mutually exclusive—
email邮箱输入，浏览器自动验证格式 / Email input; auto-validates format<input type="email" name="email">
tel电话号码输入 / Telephone number input<input type="tel" name="contact">
number数字输入，可设 min/max / Number input with min/max<input type="number" name="age" min="1" max="120">
date日期选择器 / Date picker<input type="date" name="since">
range滑动条 / Range slider<input type="range" name="hours" min="1" max="10">
hidden隐藏字段，随表单提交但用户不可见 / Hidden field; submitted but invisible—

表单属性 / Form Attributes

属性 Attribute说明 (中文) / Description (English)
autofocus页面加载时自动获得焦点 / Automatically gains focus on page load
placeholder输入框中的灰色提示文字 / Gray hint text in the input box
required必填项，提交前浏览器自动验证 / Required field; browser auto-validates

select（下拉菜单）与 label 的写法 / select (Dropdown) and label Patterns

<!-- 方式一：label 作为独立标签 + for 绑定 id -->
<!-- Style 1: label as standalone tag + for binding to id -->
<label for="platform">Preferred Gaming Platform:</label><br>
<select id="platform" name="platform" required>
    <option value="">-- Select a platform --</option>
    <option value="pc">PC</option>
    <option value="playstation">PlayStation</option>
</select>

<!-- 方式二：label 包裹 input/select -->
<!-- Style 2: label wrapping the input/select -->
<label>Rate our site:
    <select name="rating">
        <option value="5">Amazing</option>
    </select>
</label>

checkbox 复选框分组 / Checkbox Grouping

<label>What do you enjoy? (check all that apply):</label><br>
<input type="checkbox" id="fps" name="interest" value="fps">
<label for="fps">FPS Games (CS2, Valorant)</label><br>
<input type="checkbox" id="sandbox" name="interest" value="sandbox">
<label for="sandbox">Sandbox / Open World (Minecraft, GTA)</label><br>
<!-- 所有 checkbox 使用相同的 name="interest" 形成一组，可多选 -->
<!-- All checkboxes share name="interest" to form a group; multiple selections allowed -->

完整表单结构 / Complete Form Structure

<form method="get" action="./contact.html" autocomplete="on">
    <!-- method="get": 数据附加在 URL 后 / data appended to URL -->
    <label for="fullname">Full Name (required):</label><br>
    <input type="text" id="fullname" name="fullname"
           placeholder="Enter your full name"
           required autofocus><br><br>

    <label for="email">Email Address (required):</label><br>
    <input type="email" id="email" name="email"
           placeholder="[email protected]"
           required><br><br>

    <input type="submit" value="Send Message">
</form>

页面结构元素 / Page Structure Elements

元素 Element用途 (中文) / Purpose (English)
<header>页面或区段的头部区域（≠ <head>）/ Header area of a page or section (≠ <head>)
<nav>导航链接的分组容器 / A container for grouping navigation links
<figure> + <figcaption>图表/图片与其说明文字的组合 / Figure/image with its caption
<article>独立的、可独立分发的内容区块 / A self-contained content block
<section>相关内容的分组 / A grouping of related content
<aside>侧边内容，补充信息 / Side content, supplementary information
<summary> + <details>summary 可点击展开 details 中的隐藏内容 / Clickable summary expands hidden details
<mark>高亮/标记文本，默认黄色背景 / Highlighted text, typically yellow background
<wbr>Word Break Opportunity（建议换行符）/ Suggested line break point
<footer>页面或区段的底部区域 / Footer area of a page or section

Topic 3：CSS3 基础 / CSS3 Basics

CSS 优势 / Advantages of CSS

  • 分离内容（HTML）与展示（CSS）/ Separates content (HTML) from presentation (CSS)
  • 全站统一风格：修改一个 .css 文件即可改变整个网站外观 / Site-wide consistent styling with one .css file
  • 减少网络传输：外部 CSS 文件被浏览器缓存 / Reduced network traffic: external CSS files are cached
  • 跨设备适配：通过媒体查询等为不同设备提供不同样式 / Cross-device adaptation via media queries
  • 更好的可访问性 / Better accessibility for assistive tools

三种写法 / Three Writing Methods

优先级 / Priority：内联 > 嵌入 > 外部 / Inline > Embedded > External

<!-- ① Inline（内联样式）——写在元素的 style 属性中，优先级最高 -->
<!-- ① Inline styles — written in the element's style attribute; highest priority -->
<p style="font-size: 20pt; color: deepskyblue;">Inline style example / 内联样式示例</p>

<!-- ② Embedded（嵌入样式）——写在 <head> 的 <style> 标签内 -->
<!-- ② Embedded styles — written in <style> inside <head> -->
<head>
    <style>
        h1 { text-align: center; }
        h1, p { color: deepskyblue; font-family: "Times New Roman", Times, serif; }
    </style>
</head>

<!-- ③ External（外部样式表）——推荐！引入独立 .css 文件 -->
<!-- ③ External stylesheet — recommended! Links an independent .css file -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Topic 4：选择器 / Selectors

/* 元素选择器 / Element Selector：选中所有同类型元素 */
h1 { color: rgba(215, 9, 222, 0.869); }

/* 多元素选择器 / Multiple Element Selector（逗号分隔）*/
h1, p { font-family: Arial, Helvetica, sans-serif; }

/* 后代选择器 / Descendant Selector（空格分隔）*/
ul li { font-size: 18px; }
li ul { font-style: italic; }           /* 只选中 li 内部的 ul */

/* ID 选择器 / ID Selector（# 前缀，页面内必须唯一）*/
#logo { width: 200px; height: 100px; }

/* Class 选择器 / Class Selector（. 前缀，可复用）*/
.nodec { text-decoration: none; }        /* 去掉下划线 / remove underline */
.desc { font-family: "Times New Roman", Times, serif; font-size: 20px; color: #ffa600; }

/* 元素+类选择器 / Element + Class Selector：只选中带该 class 的特定元素 */
a.nodec { font-weight: bolder; }         /* 只有 <a class="nodec"> 被选中 */

/* 伪类选择器 / Pseudo-Class Selector：访问 HTML 未明确声明的元素状态 */
a:hover { text-decoration: none; }       /* 鼠标悬停时去掉下划线 */
/* 常见伪类 / Common pseudo-classes: :hover | :link | :visited */

Topic 5：样式冲突解决 / Cascading & Conflict Resolution

优先级从高到低 / Priority from Highest to Lowest：

内联样式（inline style）
  > ID 选择器（ID selector）
    > Class 选择器（Class selector）
      > 元素选择器（Element selector）
        > 作者样式 > 用户样式 > 浏览器默认样式
          Author style > User style > Browser default
规则 Rule说明 (中文) / Explanation (English)
继承 / Inheritance父元素的 CSS 属性默认被子元素继承 / Parent element’s CSS properties are inherited by child elements
特异性 / Specificity子元素自身定义的样式优先级高于继承自父元素的样式 / Child-defined styles have higher priority than inherited styles
作者 > 用户 > 浏览器 / Author > User > Browser开发者编写的样式优先于用户设置，再优先于浏览器默认样式 / Developer styles > user settings > browser defaults
级联 / Cascade多个样式来源按优先级合并，最终效果是叠加结果 / Multiple style sources merged by priority

Topic 6：Font & Text 属性 / Font & Text Properties

/* font-weight：字体粗细 / Font Weight */
p { font-weight: bold; }          /* bold | normal | bolder | lighter */
p { font-weight: 700; }           /* 100–900；700 = bold，400 = normal */

/* font-family：字体族 / Font Family */
body { font-family: "Times New Roman", Times, serif; }
/* "Times New Roman" 为首选（带空格需加引号）；serif 为泛类兜底 */
/* "Times New Roman" preferred (quotes required); serif as generic family fallback */

/* font-size：字体大小 / Font Size */
p { font-size: 17px; }            /* 像素（绝对单位）/ pixels (absolute unit) */
p { font-size: 1.5em; }           /* em：相对于父元素字号 / relative to parent */
p { font-size: 1rem; }            /* rem：相对于根元素字号 / relative to root */
p { font-size: large; }            /* keyword: xx-small | x-small | small | medium | large | x-large | xx-large */

/* font-style：斜体 / Font Style */
em { font-style: italic; }         /* none | italic | oblique */

/* text-decoration：文字装饰线 / Text Decoration */
.style1 { text-decoration: overline; }   /* 上划线 / line above text */
.style2 { text-decoration: underline; }  /* 下划线 / underline */
a       { text-decoration: underline; }  /* 链接默认有下划线 */
.nodec  { text-decoration: none; }       /* 去掉装饰线 / remove decoration */
/* 可选值 / values: none | underline | overline | line-through | blink */

/* color：文字颜色 / Text Color */
h1 { color: deepskyblue; }               /* 颜色关键字 / color keyword */
h1 { color: #ffa600; }                   /* 6 位十六进制 / 6-digit hex */
h1 { color: #06f; }                      /* 3 位十六进制 = #0066ff / 3-digit = #0066ff */
h1 { color: rgb(255, 166, 0); }          /* RGB 整数 (0–255) */
h1 { color: rgba(215, 9, 222, 0.869); } /* RGBA：第 4 参数为透明度 0~1 */

/* text-align：水平对齐 / Horizontal Alignment */
h1    { text-align: center; }
.style1 { text-align: left; }

/* text-indent：首行缩进 / First-line Indent */
.style1 { text-indent: 2em; }           /* 缩进 2 个字符宽度 / indent 2 character widths */

Topic 7：Box Model（盒模型）/ Box Model

Box Model 只适用于 Block-level 元素（body, p, h1~h6, div, table, form 等）。 Inline 元素可通过 display: block 转换后应用 Box Model。 Box Model only applies to Block-level elements. Inline elements can use Box Model after display: block.

┌─────────────────────────────────┐
│          margin（外边距）        │  ← 元素边框与外部内容之间的距离
│          margin (outer spacing) │  ← Distance between element border and outside content
│  ┌───────────────────────────┐  │
│  │        border（边框）      │  │  ← 围绕内容和内边距的边界线
│  │        border             │  │  ← Boundary line surrounding content + padding
│  │  ┌─────────────────────┐  │  │
│  │  │    padding（内边距）  │  │  │  ← 内容与边框之间的距离
│  │  │    padding           │  │  │  ← Distance between content and border
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │  content（内容）│  │  │  │  ← 实际内容区域
│  │  │  │  content       │  │  │  │  ← Actual content area (text, images, etc.)
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘
.style1 {
    /* padding：内边距（内容到边框的距离）/ padding: inner spacing */
    padding: 15px;
    /* 简写规则 / shorthand: 顺时针 上→右→下→左 / clockwise top→right→bottom→left */
    /* padding: 10px;              四边相同 / all 4 sides equal */
    /* padding: 10px 20px;         上下 | 左右 / top-bottom | left-right */
    /* padding: 10px 20px 15px 5px;  上 右 下 左 / top right bottom left */

    /* border：边框 / border — style 必须指定！/ style is required! */
    border: 2px dashed #336699;    /* width style color */
    /* 可选 style：solid | dashed | dotted | double | groove | ridge | inset | outset */

    /* margin：外边距（元素边框到外部内容的距离）/ margin: outer spacing */
    margin: 20px;
    /* margin: auto 可用于水平居中块元素 / margin: auto centers block elements horizontally */

    background-color: #f5f9ff;
}

Topic 8：定位 / Positioning

/* Relative Positioning（相对定位）*/
/* 元素相对于自身正常位置偏移，不脱离文档流 */
/* Element is offset relative to its normal position; does NOT leave document flow */
.title {
    position: relative;
    height: 80px;
}

/* Absolute Positioning（绝对定位）*/
/* 脱离文档流，位置相对于最近的 positioned（非 static）祖先元素 */
/* Leaves document flow; positioned relative to nearest positioned ancestor */
.icon img {
    position: absolute;
    z-index: 0;              /* 堆叠层级 / stacking level：0 在下层 */
    left: 30px;
    height: 65px;
}
.caption {
    position: absolute;
    left: 30px;
    top: 10px;
    z-index: 1;              /* z-index 更大，覆盖在 icon 上方 / higher z-index, overlays on top */
    font-size: 24px;
    font-weight: bold;
    color: rgb(34, 163, 202);
    padding: 2px 5px;
}
/* z-index：控制重叠元素的前后顺序，需配合 position 使用 */
/* z-index controls stacking order; requires position: relative/absolute/fixed */

注意 / Note：HTML 元素默认从上到下、从左到右排列（默认文档流 / normal document flow）。position 默认值为 static。

Topic 9：Background 属性 / Background Properties

body {
    background-image: url("background.png");       /* 背景图片路径 / background image path */
    background-position: center top;             /* 定位 / positioning: top|bottom|center|left|right */
    background-repeat: no-repeat;                /* 不平铺 / do not tile (default: repeat) */
    background-attachment: local;                /* 背景附着方式 / attachment: scroll|fixed|local */
    background-size: cover;                     /* 背景尺寸 / size: cover|contain */
}

Topic 10：text-shadow & box-shadow

/* text-shadow: 水平偏移 垂直偏移 模糊半径 颜色; */
/* text-shadow: h-offset v-offset blur-radius color; */
h1    { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.glow { text-shadow: 0 0 10px deepskyblue; }        /* 发光效果 / glow effect */

/* box-shadow: 水平偏移 垂直偏移 模糊半径 颜色; */
/* box-shadow: h-offset v-offset blur-radius color; */
.style1 { box-shadow: 6px 6px 10px #cccccc; }
.style2 { box-shadow: 6px 6px 10px #bbbbbb; }

Topic 11：CSS Animation（关键帧动画）/ Keyframe Animation

CSS 动画不需要 JavaScript 或 Flash。需要两部分配合： CSS animation requires no JavaScript or Flash. Two parts work together:

① animation 属性（写在目标元素上）/ animation Property (on target element)

#logo {
    position: absolute;
    right: 400px;
    top: 25px;
    animation: movingImage linear 5s 1s infinite normal;
    /*
      name:             movingImage   → 对应的 @keyframes 名称 / matching @keyframes name
      timing-function:  linear        → 匀速 / constant speed
      duration:         5s            → 每次动画持续 5 秒 / each cycle lasts 5 seconds
      delay:            1s            → 延迟 1 秒开始 / start 1s after page load
      iteration-count:  infinite      → 无限循环 / loop forever
      direction:        normal        → 正向播放 / play forward (alternate = 正向→反向交替)
    */
}

② @keyframes 规则（定义动画帧）/ @keyframes Rule (defines animation frames)

@keyframes movingImage {
    0%   { top: 25px;  right: 400px; }
    25%  { top: 75px;  right: 400px; }   /* 先向下移动 / move down */
    50%  { top: 75px;  right: 350px; }   /* 再向左移动 / then move left */
    75%  { top: 25px;  right: 350px; }   /* 再向上移动 / then move up */
    100% { top: 25px;  right: 400px; }   /* 回到原位 / return to start */
}
/* 0% = 起始帧 / starting frame; 100% = 结束帧 / ending frame */
/* 两帧动画可用 from / to 代替 0% / 100% */

浏览器前缀 / Browser Prefixes

.element {
    -webkit-animation: movingImage linear 5s 1s infinite normal;   /* Chrome/Safari */
    -moz-animation:    movingImage linear 5s 1s infinite normal;   /* Firefox */
    animation:         movingImage linear 5s 1s infinite normal;   /* 标准写法放最后 */
}

Topic 12：display 属性 / display Property

.element {
    display: block;          /* 显示为块级元素 / display as block-level element */
    display: inline;         /* 显示为行内元素 / display as inline element */
    display: inline-block;   /* 行内块：不换行但可设宽高 / inline but can set width/height */
    display: none;           /* 完全隐藏，不占空间 / completely hidden, takes no space */
}

四、交互式演示页面 / Interactive Demo Pages

下方嵌入了两份完整的可交互复习笔记页面，可直接操作体验： The two complete interactive review pages are embedded below for hands-on experience:

HTML5 复习笔记（含表单演示）/ HTML5 Review Notes (with form demo)

CSS3 复习笔记（含动画演示）/ CSS3 Review Notes (with animation demo)

五、综合速查表 / Comprehensive Quick Reference

属性 Property常用值 / Common Values备注 / Notes
font-weightbold / normal / 100–900700=bold, 400=normal
font-sizepx / em / rem / small / large数字与单位之间无空格 / no space between number and unit
font-stylenormal / italic / oblique—
font-family"Times New Roman", Times, serif含空格字体名需加引号 / quote names with spaces
text-decorationnone / underline / overline / line-through—
colorkeyword / #hex / rgb() / rgba()#06f = #0066ff；rgba 第4参数 0~1
text-alignleft / center / right水平对齐 / horizontal alignment
text-indent2em / 3em / 20px仅缩进首行 / first line only
padding上右下左（顺时针）/ clockwise内容到边框的距离 / content to border
margin上右下左 或 auto / clockwise or autoauto 用于水平居中 / for horizontal centering
borderwidth style color 简写 / shorthandstyle 必须存在 / style is required
positionstatic / relative / absoluteabsolute 脱离文档流 / leaves document flow
z-index整数 / integer需配合 position 使用 / requires position
background-imageurl("path")背景图片 / background image
background-repeatrepeat / no-repeat / repeat-x / repeat-y—
background-positiontop/bottom/center 或 px/%—
background-attachmentscroll / fixed / local—
background-sizecover / contain—
box-shadowh-offset v-offset blur color—
text-shadowh-offset v-offset blur color—
animationname timing duration delay count direction配合 @keyframes 使用 / use with @keyframes
displayblock / inline / inline-block / nonenone 完全隐藏 / completely hidden

使用说明 / Usage Notes

  • 上方嵌入了两份完整的复习笔记页面，支持滚动浏览和实时交互演示 / Two complete review pages embedded above, with scrolling and live interaction
  • HTML5 页面内置了表单操作、导航锚点跳转等功能 / The HTML5 page includes form interaction and navigation anchor jumps
  • CSS 页面内置了动画实时渲染（slideIn / spin / bounce）/ The CSS page includes live animation rendering
  • 如需全屏查看或单独收藏，可直接访问 / For fullscreen or separate access:
 前端, HTML, CSS, 复习笔记, MISY350, Web基础
Back | Home