web程序设计期末复习-填空题

常用标签块级标记行内标记等

一、块级元素

特点：

独占一行
可以设置宽度、高度、内外边距
默认情况下会从上到下垂直排列

常见标签：

标签	含义
`<div>`	最常用的通用块级容器
`<p>`	段落
`<h1>`到`<h6>`	标题（一级到六级）
`<ul>`	无序列表
`<ol>`	有序列表
`<li>`	列表项
`<header>`	页面头部
`<footer>`	页面底部
`<nav>`	导航栏
`<section>`	文档中的节（如章节、页眉、页脚或文档的其他部分）
`<article>`	独立内容块（如博客文章、新闻等）
`<aside>`	侧边栏内容
`<main>`	页面主要内容
`<table>`	表格容器
`<form>`	表单容器

二、行内元素

特点：

不独占一行
设置宽高无效（除非转换为 block 或 inline-block）
内容决定大小
通常用于文本级别的样式控制

常见标签：

标签	含义
`<span>`	通用行内容器
`<a>`	超链接
`<strong>`	加粗强调（语义更强）
`<em>`	斜体强调
`<b>`	加粗（无强调语义）
`<i>`	斜体（无强调语义）
`<u>`	下划线
`<s>`或`<del>`	删除线
`<sup>`	上标
`<sub>`	下标
`<code>`	代码片段
`<mark>`	高亮文本
`<small>`	小号字体
`<input>`	输入框（如文本框、按钮等）
`<img>`	图片（虽然是行内元素，但可设置宽高）
`<br>`	换行符
`<button>`	按钮

三、行内块元素

这类元素是通过CSS设置 display: inline-block 的元素，兼具行内和块级元素的特点：

特点：

可在同一行显示
可以设置宽高和内外边距
适用于需要并排显示又想控制尺寸的元素

<span style="display: inline-block; width: 100px;">示例</span>
<img src="image.jpg" style="display: inline-block;">

表格

常用标签说明

标签	含义
`<table>`	定义整个表格
`<tr>`	表示表格中的一行（Table Row）
`<td>`	表示普通单元格（Table Data Cell）
`<th>`	表示表头单元格（Table Header Cell），默认加粗并居中显示
`<thead>`	表头部分（可选）
`<tbody>`	表体部分（可选）
`<tfoot>`	表尾部分（可选）

<table><tr><th>标题1</th><th>标题2</th></tr><tr><td>内容A1</td><td>内容A2</td></tr><tr><td>内容B1</td><td>内容B2</td></tr>
</table>

表单

元素	类型 / 标签	描述
单行文本框	`<input type="text">`	输入一行文字，如用户名、邮箱
密码框	`<input type="password">`	输入内容隐藏（显示为星号）
多行文本框	`<textarea></textarea>`	可输入多行文本，如留言、描述
提交按钮	`<input type="submit">`或`<button type="submit">`	提交表单到服务器
单选按钮	`<input type="radio">`	多个选项中只能选择一个
复选框	`<input type="checkbox">`	可以选择多个选项
下拉选择框	`<select><option>...</option></select>`	下拉菜单选择
文件上传框	`<input type="file">`	用户上传文件
重置按钮	`<input type="reset">`	清空已填写内容

GET 与 POST 的区别

特性	GET 方法	POST 方法
数据传递方式	通过 URL 的查询字符串（Query String）传递数据	数据放在请求体（Body）中传输
数据可见性	可见，暴露在 URL 中	不可见，数据在 Body 中
数据长度限制	有限制（受 URL 长度限制，通常 2KB 左右）	无明确限制
书签/缓存支持	可以被缓存，URL 可保存为书签	一般不会被缓存，也不适合保存为书签
安全性	安全性较低（不适合敏感信息）	比 GET 更安全（但也不是绝对安全）
幂等性	是幂等的（多次执行结果相同）	不是幂等的（可能改变服务器状态）
用途建议	获取数据（如搜索、筛选）	提交数据（如注册、登录、评论）

动态页面和静态页面的区别

静态网页与动态网页的区别在于Web服务器对它们的处理方式不同

动态页面的原理和执行过程

当Web服务器接收到对静态网页的请求时，服务器直接将该页发送给客户浏览器，不进行任何处理。

如果接收到对动态网页的请求，则从Web 服务器中找到该文件，并将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，将执行后的结果传递给客户浏览器。

常见网页图像格式

格式	全称	是否支持透明	是否支持动画	压缩方式	使用场景
JPEG / JPG	Joint Photographic Experts Group	❌ 不支持	❌ 不支持	有损压缩	照片、复杂图像
PNG	Portable Network Graphics	✅ 支持（全透明/半透明）	❌ 不支持	无损压缩	图标、Logo、图形、需要透明背景的图片
GIF	Graphics Interchange Format	✅ 支持（1位透明）	✅ 支持	有损压缩（8-bit）	简单动画、小图标
WebP	Web Picture Format（Google推出）	✅ 支持	✅ 支持（动态WebP）	有损+无损	替代 JPEG/PNG，高质量+更小体积
SVG	Scalable Vector Graphics	✅ 支持	✅ 支持（通过 JS/CSS）	矢量图形	图标、LOGO、可缩放图形、响应式设计
APNG	Animated PNG	✅ 支持	✅ 支持	无损	高质量动画（兼容性不如 GIF）
AVIF	AV1 Image File Format	✅ 支持	✅ 支持	高效压缩	新一代图像格式，压缩率

CSS 选择器的基本分类

类型	示例	描述
元素选择器	`div`	匹配所有`<div>`元素
类选择器	`.box`	匹配所有 class="box" 的元素
ID 选择器	`#header`	匹配 id="header" 的唯一元素
属性选择器	`[type="text"]`	匹配具有指定属性的元素
伪类选择器	`a:hover`	匹配特定状态下的元素
伪元素选择器	`::before`	匹配元素的某些虚拟部分

常用组合方式一览

组合方式	写法	含义
群组选择器	`h1, h2, h3`	多个选择器共享样式
后代选择器	`div p`	所有 div 内部的 p
子代选择器	`ul > li`	ul 直接子元素 li
相邻兄弟	`h2 + p`	紧跟在 h2 后的 p
通用兄弟	`input ~ label`	input 后面的所有 label
交集选择器	`div.box`	是 div 且 class=box
多类名	`.btn.primary`	同时包含 btn 和 primary 类
属性组合	`input[type][readonly]`	拥有 type 和 readonly 的 input

JavaScript 编写网页动态效果的一般步骤（可能的代码补全？）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS动态效果练习</title>
</head>
<body><h1 id="message">Hello</h1><button id="toggleBtn">切换文字</button><script>// 步骤1：获取DOM元素var message = document.getElementById("message");var toggleBtn = document.getElementById("______");  // (1) 补全ID名// 步骤2：注册事件监听器toggleBtn.addEventListener("______", function() {   // (2) 补全事件类型// 步骤3：判断当前内容并切换if (message.innerHTML === "Hello") {message.innerHTML = "Goodbye";} else {message.innerHTML = "Hello";}});</script>
</body>
</html>

(1) "toggleBtn"
(2) "click"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>颜色切换</title>
</head>
<body><p id="text">这是一段可变色的文字。</p>
<button id="colorBtn">切换颜色</button><script>var text = document.getElementById("text");var colorBtn = document.getElementById("colorBtn");colorBtn.addEventListener("click", function() {if (text.style.color === "red") {text.style.______ = "blue";  // 补全属性名} else {text.style.color = ______;   // 补全颜色值}});
</script></body>
</html>

第1空：color
第2空："red" 或 "blue"

输入框内容实时预览

实现当用户在输入框中输入内容时，页面上同步显示其输入内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>输入预览</title>
</head>
<body><input type="text" id="inputText" placeholder="请输入内容">
<p>你输入的是：<span id="preview"></span></p><script>var input = document.getElementById("inputText");var preview = document.getElementById("preview");input.addEventListener("______", function() {  // 补全事件类型preview.innerHTML = ______.value;         // 补全对象});
</script></body>
</html>