常用标签 块级标记 行内标记等
一、块级元素
特点：
- 独占一行
- 可以设置宽度、高度、内外边距
- 默认情况下会从上到下垂直排列
常见标签：
| 标签 |
含义 |
<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 的元素，兼具行内和块级元素的特点：
特点：
- 可在同一行显示
- 可以设置宽高和内外边距
- 适用于需要并排显示又想控制尺寸的元素
html
复制代码
<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> |
表尾部分（可选） |
html
复制代码
<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 编写网页动态效果的一般步骤（可能的代码补全？）
html
复制代码
<!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>
html
复制代码
(1) "toggleBtn"
(2) "click"
html
复制代码
<!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"
输入框内容实时预览
实现当用户在输入框中输入内容时，页面上同步显示其输入内容。
html
复制代码
<!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>