复习
核心问题：
- HTML文档基本结构
- 各大html标签的使用
- *表单控件
- 注释与特殊字符
Q&A
HTML文档基本结构
文本与段落(h1 div p br)
列表(ul/ol li dl/dd/dt type)
超链接<a> href、target
表格<table> tr/th/td colspan/rowspan
图像<img> src alt width/height
图像热区 map/area 的 shape/coords 怎么分？
多媒体嵌入audio video controls
滚动字幕 marquee 有哪些属性？
embed 嵌入外部内容怎么用？
iframe框架 src name(结合超链接的target)
.class 和 #id
表单控件有哪些？GET 与 POST 的区别？（CTF 重点）
注释与特殊字符怎么写？（CTF 可能藏 flag）
1. HTML 文档基本结构与编写
<!DOCTYPE>声明：位于文档最前面，告知浏览器文档使用的 HTML 规范。- 基本结构：
<!DOCTYPE html><html> <head> <title>页面标题</title> </head> <body> 网页内容 </body></html>2. 文本与段落标签
| 标签 | 用途 |
|---|---|
<h1>~<h6> | 标题标签 |
<p> | 段落标签 |
<br> | 换行标签 |
<pre> | 预排版标签（空格换行直接渲染） |
<div> | 分区显示标签 |
<font> | 文字格式标签（设置大小、字体、颜色） |
3. 列表标签
- 无序列表：
<ul>+<li> - 有序列表：
<ol>+<li> - 定义列表：
<dl>+<dt>+<dd> - 列表嵌套： 列表之间可以相互嵌套使用
type 属性（改变符号 / 编号样式）：
| 列表 | type 取值 | 效果 |
|---|---|---|
无序 <ul> | disc（默认实心圆）circle（空心圆）square（方块） | 项目符号样式 |
有序 <ol> | 1 A a I i | 编号用数字/大写/小写/罗马 |
列表常用技巧：
- 去项目符号：
list-style: none; - 让
li横向排成一排： 给li设display: inline-block;（常用于导航栏菜单）
4. 超链接标签 <a>
基本语法： <a href="链接地址" target="打开方式">热点文本</a>
链接类型：
- 链接到其他页面：
<a href="目标文件.html">热点文本</a> - 链接到本页内锚点（标题/位置跳转）：
<a href="#书签名">热点文本</a>，配合目标元素的id="书签名"，点击后页面滚动到对应标题/位置 - 链接到其他类型文件（如压缩包）
- 链接到电子邮箱：
<a href="mailto:邮箱地址">热点文本</a>
target 属性（打开方式）：
| 值 | 含义 |
|---|---|
_blank | 在新窗口打开 |
_self | 在当前框架打开 |
_top | 在整个浏览器窗口打开 |
_parent | 在父窗口打开 |
5. 表格标签 <table>
基本结构：
- 表格：
<table> - 行：
<tr>（Table Row） - 表头：
<th>（Table Header） - 单元格：
<td>（Table Data）
跨行与跨列：
colspan：跨列合并（横向）rowspan：跨行合并（纵向）
表格属性： border（边框）、width/height（宽高）、align（对齐）、bgcolor（背景色）、background（背景图片）
表格结构标签： <thead>（表头）、<tbody>（表体）、<tfoot>（表尾）、<caption>（表格标题）
6. 图像标签 <img>
基本语法： <img src="图片文件名" alt="简单说明" width="宽度" height="高度">
常用属性： border（边框）、width/height（宽高）、align（对齐）、hspace（水平空白）、vspace（垂直空白）
align 对齐属性取值：
| 取值 | 含义 |
|---|---|
top | 顶端对齐 |
middle | 垂直居中 |
bottom | 底部对齐（默认） |
left | 向左对齐 |
center | 水平居中 |
right | 向右对齐 |
注：
hspace控制图像左右的空白，vspace控制图像上下的空白，单位为像素。
图像作为超链接： <a href="链接"><img src="图片"></a>
图像热区 <map> + <area>
用 map 配合 area 在图像上划分多个可点击区域（热区），不同区域可跳转到不同地址：
<img src="地图.jpg" usemap="#页面地图"><map name="页面地图"> <area shape="rect" coords="x1,y1,x2,y2" href="链接1" alt="说明1" title="提示1"> <area shape="circle" coords="cx,cy,r" href="链接2" alt="说明2" title="提示2"></map><area> 常用属性：
| 属性 | 说明 |
|---|---|
shape | 热区形状：rect（矩形）、circle（圆形）、poly（多边形）、default（整图） |
coords | 坐标：矩形 x1,y1,x2,y2；圆形 圆心x,圆心y,半径；多边形 x1,y1,x2,y2,... |
href | 点击后跳转的链接 |
alt | 图片无法显示时的替代文字 |
title | 鼠标悬停时的提示文字 |
要点：
<img>上写usemap="#名字"，<map name="名字">与之一一对应才能生效。
7. 多媒体标签
- 背景音乐：
<bgsound src="声音文件" loop="播放次数">（仅部分旧版浏览器支持） - 音频：
<audio controls src="音频文件"></audio> - 视频：
<video controls width="宽度" src="视频文件"></video> <video>常用属性：controls、autoplay、loop、muted- 页面自动刷新：
<meta http-equiv="Refresh" content="秒数; url=新页面">
滚动字幕 <marquee>（旧标签，了解）
使文字/图片在页面中往复滚动显示。HTML5 已废弃，但考纲可能涉及：
<marquee direction="left" behavior="scroll" scrollamount="6" scrolldelay="85" onmouseover="this.stop()" onmouseout="this.start()"> 滚动的内容</marquee>常用属性：
| 属性 | 说明 |
|---|---|
direction | 滚动方向：left（向左）/ right（向右）/ up（向上）/ down（向下） |
behavior | 滚动行为：scroll（连续滚动）/ slide（滑到即停）/ alternate（来回交替） |
scrollamount | 滚动速度（每帧移动像素，值越大越快） |
scrolldelay | 滚动延迟（毫秒，值越大越慢） |
onmouseover | 鼠标移入时的处理（常用 this.stop() 暂停） |
onmouseout | 鼠标移出时的处理（常用 this.start() 继续） |
嵌入内容 <embed>
在网页中嵌入外部多媒体/插件内容（音频、视频、Flash、PDF 等）：
<embed src="音频.mp3" width="300" height="200">常用属性与 img/video 类似：src（源）、width/height（宽高）。
8. 框架应用
<iframe>标签： 在页面中嵌入另一个页面
<iframe src="嵌入页面.html" width="宽度" height="高度" frameborder="边框"></iframe>- 结合超链接的
target属性： 通过设置target="iframe的name属性值"实现框架间的链接跳转 —— 给<iframe name="帧名">命名，超链接写<a href="页面.html" target="帧名">，点击后目标页面在 iframe 内打开
9. DIV + CSS 布局
- 使用
<div>标签结合 CSS 技术进行页面布局
.class（类选择器） vs #id（ID选择器）：
| 对比 | Class（类） | ID |
|---|---|---|
| 唯一性 | 可重复使用 | 同一页面只能出现一次 |
| 优先级 | 较低 | 较高 |
| 适用场景 | 多个元素需要相同样式 | 单个元素的专属样式或 JS 钩子 |
| 命名规则 | .类名 { } | #ID名 { } |
注意一个页面中一个 ID 只能对应一个元素，不能重复；.class 可复用，多个元素可共用。
<div> vs <span>：
<div>：块级元素，独占一行，常用于页面分区、布局<span>：行内元素，不换行，常用于包裹文本片段设置样式
常用 display 值与行内/块级：
| 值 | 行为 |
|---|---|
block | 块级，独占一行（如 div、p） |
inline | 行内，不换行，不可设宽高（如 span、a） |
inline-block | 行内 + 可设宽高：不换行，但能设置 width/height/margin/padding（导航菜单常用） |
:hover 伪类：
鼠标悬停在元素上时应用的样式，常配合超链接：
a:hover { color: red; }<a> 的四种状态（顺序记：L-V-H-A 爱恨）：:link(未访问) → :visited(已访问) → :hover(悬停) → :active(按下)。
10. *表单标签 <form> ⭐（CTF 常见考点）
基本语法： <form action="提交地址" method="提交方式">...</form>
关键属性： action（提交目标 URL）、method（GET 或 POST）
常用表单控件：
- 单行文本框：
<input type="text" name="用户名" value="默认值"> - 密码框：
<input type="password" name="密码"> - 单选框：
<input type="radio" name="性别">（同name为一组） - 复选框：
<input type="checkbox" name="爱好"> - 下拉列表：
<select name="城市"><option value="广州">广州</option></select> - 文本域：
<textarea name="简介" rows="行数" cols="列数"></textarea> - 隐藏域：
<input type="hidden" name="token" value="xxxxx"> - 提交按钮：
<input type="submit" value="提交"> - 重置按钮：
<input type="reset" value="重置"> - 普通按钮：
<input type="button">或<button>点击</button>
CTF 考点
hidden隐藏字段可能存放敏感信息！前端隐藏的不代表安全，源代码中可见。
GET 与 POST 的区别（重点）：
| 对比 | GET | POST |
|---|---|---|
| 数据位置 | URL 地址栏中（?key=value） | 请求体中 |
| 数据大小限制 | 有（约 2KB） | 无限制（通常由服务器配置） |
| 安全性 | 低（数据暴露在地址栏） | 相对高（不暴露在 URL 中） |
| 缓存 | 会缓存 | 不会缓存 |
| 用途 | 获取数据 | 提交数据 |
CTF 考点GET 参数在 URL 中可见；POST 参数需要抓包（如 Burp Suite）才能查看。
11. 注释与特殊字符
- HTML 注释：
<!-- 注释内容 -->（浏览器不显示，但可在源代码中看到）
CTF 考点注释里的内容页面看不到，但 F12 查看源代码就能发现，CTF 里常用注释藏 key/flag。
常见特殊字符：
| 显示 | HTML 实体 |
|---|---|
| 空格 | |
< | < |
> | > |
& | & |
" | " |
© | © |