TryHackMe Day3 Task2 HTML 超文本标记语言

原创已于 2025-10-08 13:16:25 修改 · 530 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #TryHackMe #网络安全

于 2025-10-08 13:16:07 首次发布

TryHackMe 专栏收录该内容

3 篇文章

订阅专栏

AI 算力加速指南：让设计、办公、创作效率翻倍 10w+人浏览 112人参与

HTML 超文本标记语言

HTML（超文本标记语言）是构建网页的核心技术，它使用标签来定义内容的结构和语义。在 TryHackMe 的 Day 3 Task 2 中，您将学习 HTML 的基础知识，作为理解 Web 应用程序安全的第一步。本部分内容将帮助您逐步掌握 HTML 的核心概念，确保您能创建简单的网页并识别潜在的安全风险。以下内容基于 TryHackMe 课程的结构，以清晰、可靠的方式呈现。

1. HTML 是什么？

HTML 是一种标记语言，用于描述网页的结构。它通过一系列标签（如 <tag>）来定义文本、图像、链接等元素。每个标签可以包含属性（如 id 或 class），这些属性提供额外信息。例如：

网页内容被包裹在 <html> 标签中。
<head> 部分包含元数据（如页面标题）。
<body> 部分包含可见内容。

2. 基本 HTML 文档结构

一个标准的 HTML 文档以 <!DOCTYPE html> 声明开头，表示文档类型为 HTML5。以下是基本模板：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title> <!-- 定义浏览器标签页的标题 -->
</head>
<body>
    <h1>欢迎来到 TryHackMe</h1> <!-- 一级标题 -->
    <p>这是一个段落文本。</p> <!-- 段落 -->
</body>
</html>

<!DOCTYPE html>：确保浏览器正确渲染页面。
<html>：根元素，包裹整个文档。
<head>：包含非可视元素，如字符集定义或 CSS 链接。
<body>：包含所有可视内容，如文本、图像和表单。

3. 常用 HTML 标签

HTML 提供了多种标签来组织内容。以下是一些关键标签及其用途：

标题标签：<h1> 到 <h6> 用于不同级别的标题（<h1> 最大，<h6> 最小）。
- 示例：<h1>主标题</h1>
段落标签：<p> 用于文本段落。
- 示例：<p>这是一个示例段落。</p>
链接标签：<a> 用于创建超链接，使用 href 属性指定目标 URL。
- 示例：<a href="https://tryhackme.com">访问 TryHackMe</a>
图像标签：<img> 用于嵌入图像，使用 src 属性指定图像路径，alt 属性提供替代文本。
- 示例：<img src="logo.png" alt="TryHackMe 标志">
列表标签：<ul>（无序列表）和 <ol>（有序列表）配合 <li>（列表项）。
- 示例：
```
<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>
```

4. HTML 属性和表单

属性用于修改标签行为，常见于交互元素：

通用属性：如 id（唯一标识符）或 class（CSS 类名）。
- 示例：<p id="intro">介绍文本</p>
表单元素：用于收集用户输入，是 Web 安全的关键点。表单由 <form> 包裹，包含输入字段如 <input>。
- 基本表单示例：
```
<form action="/submit" method="POST">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="user"> 
    <input type="submit" value="提交"> 
</form>
```
- 常见输入类型：
  - type="text"：单行文本。
  - type="password"：密码字段（内容被遮蔽）。
  - type="checkbox"：复选框。