Vindrinhttps://vindrin.top/This is my cool siteHugo -- gohugo.ioenvindrin@outlook.com (Vindrin)vindrin@outlook.com (Vindrin)Sun, 24 May 2026 00:00:00 +0000MISY350 Exam 1 完整复习笔记 / Complete Review Noteshttps://vindrin.top/posts/web-frontend-review/Sun, 24 May 2026 00:00:00 +0000vindrin@outlook.com (Vindrin)https://vindrin.top/posts/web-frontend-review/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)
Portability Web 技术无需修改即可跨设备和平台运行的特性 / 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
URI Uniform Resource Identifier（统一资源标识符）/ A string that identifies a resource on the Internet
URL Uniform Resource Locator（统一资源定位符），不仅标识资源还指明如何定位它 / A type of URI that specifies how to locate the resource
Hostname URL 中服务器的全限定域名，由 DNS 解析为 IP 地址 / The fully qualified domain name, resolved by DNS into an IP address
HTTP HyperText Transfer Protocol（超文本传输协议），客户端与服务器通信的应用层协议 / The application-layer protocol for communication between clients and servers
DNS Domain Name System（域名系统），将域名翻译为 IP 地址 / Translates human-readable domain names into machine-readable IP addresses
W3C World 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）

对比点 Comparison GET POST
数据位置 / Data location 附加在 URL 后的查询字符串中 / Appended to the URL as a query string 嵌入 HTTP 消息体中 / Embedded in the HTTP message body
示例 / Example google.com/search?q=deitel&source=chrome URL 不含数据 / 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 parent h1–h6, p, div, ol, ul, li, table, form
Inline（行内） 不换行，只占内容所需宽度 / Does not start a new line; only takes content width a, 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="yourname@example.com"
           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

]]>