1_HTML基础学习笔记（Web安全方向）

HTML基础学习笔记（Web安全方向）

目录

  1. HTML概述与页面架构
  2. meta标签与基础设置
  3. HTML注释
  4. 标题与文本标签
  5. 文本格式化标签
  6. 超链接标签（a标签）
  7. 图像标签（img标签）
  8. 表格标签（table）
  9. 列表标签
  10. 表单标签（form）
  11. 框架（frameset与iframe）
  12. 总结与建议

1. HTML概述与页面架构

1.1 什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准标记语言。HTML使用标签来描述网页的结构和内容，由浏览器解析并渲染成可视化的网页。

1.2 基本页面架构

一个标准的HTML文档结构如下：

<!DOCTYPE html>        <!-- 文档类型声明，告诉浏览器使用HTML5标准 -->
<html>                  <!-- 根元素，所有内容都包含在其中 -->
<head>                  <!-- 头部区域，包含元数据、标题、样式等 -->
    <meta charset="UTF-8">   <!-- 字符编码设置 -->
    <title>页面标题</title>   <!-- 浏览器标签栏显示的标题 -->
</head>
<body>                  <!-- 主体区域，页面可见内容都写在这里 -->
    <!-- 这里放置所有可见的页面内容 -->
</body>
</html>

1.3 常见字符编码

编码 说明
UTF-8 国际通用编码，支持多语言（推荐）
GBK / GB2312 中文编码，国内常用，但兼容性不如UTF-8

2. meta标签与基础设置

<meta> 标签提供页面的元信息（meta-information），用于搜索引擎优化（SEO）、指定字符集、页面描述等。

2.1 设置字符编码

<meta charset="UTF-8">

2.2 设置页面关键词（SEO）

<meta name="keywords" content="网络安全, WEB渗透, 数据安全, 渗透测试, 安全培训">

2.3 设置页面描述（SEO）

<meta name="description" content="暗月安全培训专注于网络安全与渗透测试培训">

2.4 其他常用meta

<!-- 设置视口（响应式设计） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 设置页面自动刷新（单位：秒） -->
<meta http-equiv="refresh" content="30">

<!-- 设置页面跳转（5秒后跳转到指定URL） -->
<meta http-equiv="refresh" content="5; url=https://moonsec.com">

2.5 link标签

<link> 标签用于定义文档与外部资源的关系，常用于引入外部CSS文件或网站图标。

<!-- 引入外部CSS样式表 -->
<link rel="stylesheet" href="css/style.css">

<!-- 设置网站图标 -->
<link rel="icon" href="favicon.ico">

2.6 script标签

<script> 标签用于引入或嵌入JavaScript代码。

<!-- 嵌入JS代码 -->
<script>
    alert("Hello!");
</script>

<!-- 引入外部JS文件 -->
<script src="js/script.js"></script>

3. HTML注释

注释用于在代码中添加说明，浏览器不会显示注释内容。

<!-- 这是一段注释，不会在浏览器中显示 -->
<p>这是一段普通的段落。</p>

4. 标题与文本标签

4.1 标题标签

HTML提供了六级标题，从 <h1> 到 <h6>，重要性逐级递减。

<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>

4.2 换行与分隔线

<br>      <!-- 换行标签（单标签） -->
<hr>      <!-- 水平分隔线标签（单标签） -->

4.3 段落标签

<p>这是一个段落。段落之间会自动换行并留出间距。</p>
<p>这是另一个段落。</p>

4.4 预格式化文本

<pre> 标签中的文本会保留空格和换行，按原始格式显示（常用于代码展示）。

<pre>
    暗月安全培训
    全栈渗透测试课程
</pre>

5. 文本格式化标签

标签 说明 示例效果
<strong> 重要文本（加粗，语义更强） 加粗
<b> 粗体文本（纯样式） 粗体
<i> 斜体文本 斜体
<u> 下划线文本 下划线
<sup> 上标 X2
<sub> 下标 H2O
<del> 删除线文本 删除线
<font> 字体属性（已不推荐，建议用CSS）

font标签示例：

<font size="5" color="red">红色大号文字</font>

6. 超链接标签（a标签）

<a> 标签用于创建超链接，实现页面之间的跳转。

6.1 基本用法

<!-- 跳转到外部网站 -->
<a href="http://www.baidu.com" target="_self">百度</a>

<!-- 跳转到本站其他页面 -->
<a href="about.html">关于我们</a>

<!-- 跳转到指定锚点（页面内定位） -->
<a href="#section2">跳转到第二部分</a>

6.2 target属性（打开方式）

属性值 说明
_self 默认，在当前窗口/标签页打开
_blank 在新窗口/标签页打开
_parent 在父框架中打开
_top 在整个窗口中打开（跳出所有框架）

6.3 锚点链接

在页面内实现跳转定位。

<!-- 点击跳转到id为"section2"的位置 -->
<a href="#section2">跳转到第二部分</a>

<!-- 被跳转的目标位置 -->
<h2 id="section2">第二部分内容</h2>

6.4 邮箱链接与电话链接

<!-- 发送邮件 -->
<a href="mailto:admin@moonsec.com">联系我们</a>

<!-- 拨打电话（移动端） -->
<a href="tel:13800138000">拨打客服</a>

7. 图像标签（img标签）

<img> 标签用于在网页中嵌入图像。

<img src="/images/logo.png" alt="网站Logo" width="200" height="100">

7.1 常用属性

属性 说明
src 图像URL（必需）
alt 替代文本（图像加载失败时显示，利于SEO和无障碍访问）
width 图像宽度（像素）
height 图像高度（像素）

8. 表格标签（table）

表格用于展示结构化数据。

8.1 表格结构

标签 说明
<table> 定义表格
<caption> 表格标题
<tr> 表格行（table row）
<th> 表头单元格（加粗居中）
<td> 普通数据单元格

8.2 表格属性

属性 说明
border 边框宽度
width 表格宽度
height 表格高度
cellpadding 单元格内边距（内容与边框的距离）
cellspacing 单元格间距（单元格之间的距离）
colspan 跨列合并（横向合并）
rowspan 跨行合并（纵向合并）

8.3 表格示例

<table border="1" width="400" cellpadding="5" cellspacing="0">
    <caption>用户信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>zhangsan@email.com</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>lisi@email.com</td>
    </tr>
</table>

9. 列表标签

9.1 无序列表（ul）

项目符号默认为实心圆点，可用 type 属性修改。

<!-- 默认：实心圆点 -->
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ul>

<!-- 修改项目符号：circle（空心圆）、square（方块） -->
<ul type="square">
    <li>列表项一</li>
    <li>列表项二</li>
</ul>

9.2 有序列表（ol）

<ol> 标签用于定义有序列表，项目自动编号。

<!-- 默认：数字编号 -->
<ol type="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

type属性可选值：

属性值 说明 示例
1 数字 1, 2, 3, 4...
a 小写字母 a, b, c, d...
A 大写字母 A, B, C, D...
i 小写罗马数字 i, ii, iii, iv...
I 大写罗马数字 I, II, III, IV...

9.3 自定义列表（dl）

<dl> 用于自定义列表（术语+描述）。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于构建网页结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页样式</dd>
</dl>

10. 表单标签（form）

<form> 标签用于创建表单，收集用户输入数据并提交给服务器。

10.1 form属性

属性 说明
action 表单提交的目标URL
method 提交方式：GET 或 POST
enctype 编码类型（文件上传时必须用 multipart/form-data）

10.2 enctype属性值

值 说明
application/x-www-form-urlencoded 默认，数据编码为键值对
multipart/form-data 文件上传时必须使用
text/plain 纯文本编码

10.3 input标签

基本属性

属性 说明
name 字段名称（提交时的key）
value 默认值
size 输入框宽度（字符数）
maxlength 最大输入字符数
readonly 只读（不可修改）
disabled 禁用
placeholder 提示占位文本（HTML5）
required 必填（HTML5）

type属性值（部分）

类型 说明
text 普通文本输入框
password 密码输入框（输入内容隐藏）
hidden 隐藏域（用户不可见，用于传递数据）
file 文件上传
button 普通按钮
submit 提交按钮（提交表单）
reset 重置按钮（重置表单所有字段）
checkbox 复选框
radio 单选框（同name互斥）
email 邮箱（HTML5，自动验证格式）
number 数字输入（HTML5）
date 日期选择（HTML5）

10.4 其他表单元素

textarea（多行文本域）：

<textarea name="content" rows="5" cols="40">默认文本</textarea>

select（下拉列表）：

<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz" selected>广州</option>
</select>

button（按钮）：

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('点击了')">普通按钮</button>

10.5 完整表单示例

<form action="register.php" method="post" enctype="multipart/form-data">
    <!-- 文本输入 -->
    <label>用户名：</label>
    <input type="text" name="username" placeholder="请输入用户名" required>
    <br>

    <!-- 密码输入 -->
    <label>密码：</label>
    <input type="password" name="password" maxlength="20">
    <br>

    <!-- 隐藏域 -->
    <input type="hidden" name="token" value="abc123">

    <!-- 单选框（同name互斥） -->
    <label>性别：</label>
    <input type="radio" name="gender" value="male"> 男
    <input type="radio" name="gender" value="female" checked> 女
    <br>

    <!-- 复选框 -->
    <label>兴趣：</label>
    <input type="checkbox" name="hobby" value="reading"> 阅读
    <input type="checkbox" name="hobby" value="coding"> 编程
    <br>

    <!-- 下拉列表 -->
    <label>城市：</label>
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select>
    <br>

    <!-- 多行文本域 -->
    <label>备注：</label>
    <textarea name="remark" rows="3" cols="30"></textarea>
    <br>

    <!-- 文件上传 -->
    <label>头像：</label>
    <input type="file" name="avatar">
    <br>

    <!-- 提交/重置 -->
    <input type="submit" value="注册">
    <input type="reset" value="清空">
</form>

11. 框架（frameset与iframe）

11.1 frameset框架集

<frameset> 用于将页面划分为多个独立的框架区域（不能放在 <body> 内部）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>框架页面</title>
</head>
<!-- frameset替代body -->
<frameset rows="20%, 80%">    <!-- 上下划分：上20%，下80% -->
    <frame src="header.html" scrolling="auto">   <!-- 上框架 -->
    <frameset cols="30%, 70%">   <!-- 下框架再左右划分 -->
        <frame src="menu.html" scrolling="no">   <!-- 左框架 -->
        <frame src="content.html" name="content"> <!-- 右框架 -->
    </frameset>
</frameset>
</html>

属性说明：

  • cols：定义列的数目和尺寸（百分比/像素/*）
  • rows：定义行的数目和尺寸
  • scrolling：滚动条设置（auto/yes/no）

11.2 iframe内嵌框架

<iframe> 在页面内嵌入另一个HTML页面（可放在 <body> 内部）。

<!-- 嵌入外部页面 -->
<iframe src="https://moonsec.com" width="800" height="400" frameborder="0">
    您的浏览器不支持iframe
</iframe>

<!-- 结合a标签，在iframe中打开链接 -->
<a href="page2.html" target="myFrame">打开page2</a>
<iframe name="myFrame" width="800" height="400"></iframe>

常用属性：

  • src：嵌入页面的URL
  • width / height：框架宽度/高度
  • name：框架名称（配合a标签target使用）
  • frameborder：边框（0=无边框）

12. 总结与建议

12.1 HTML核心概念回顾

概念 说明
标签（Tag） 用尖括号包围的关键词，如 <p>、<div>
元素（Element） 开始标签 + 内容 + 结束标签
属性（Attribute） 标签的额外信息，如 class="box"
块级元素 独占一行，如 <div>、<p>、<h1>
行内元素 不换行，如 <span>、<a>、<img>
表单 用户输入和提交数据的核心方式
超链接 页面间的导航桥梁
框架 页面内嵌入其他页面

12.2 在Web安全中的意义

掌握HTML对于Web安全测试至关重要：

  • XSS（跨站脚本攻击）：理解HTML解析机制是构造XSS Payload的基础。
  • CSRF（跨站请求伪造）：理解表单提交原理。
  • 点击劫持（ClickJacking）：理解iframe和框架结构。
  • DOM操作：HTML文档结构是DOM操作的基础。
  • 信息收集：通过查看HTML源码获取敏感信息（注释、隐藏字段等）。

12.3 学习建议

  1. 动手练习：手写HTML代码，构建简单页面。
  2. 浏览器查看：按F12查看页面源码，理解标签结构。
  3. 重点关注：表单提交方式（GET/POST的区别）、input各种类型、链接跳转机制。
  4. 安全意识：查看页面源码中的注释、隐藏域、敏感链接等。

注意本笔记是源于暗月安全培训 https://edu.moonsec.com 的ai整合版

posted @ 2026-07-07 12:14  新手打怪兽  阅读(4)  评论(0)    收藏  举报