声明：
本文的学习内容来源于B站up主“泷羽sec”视频“黑客基础之html（超文本标记语言）”的公开分享，所有内容仅限于网络安全技术的交流学习，不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题，请联系本人，我将立即删除相关内容。
本文旨在帮助网络安全爱好者提升自身安全技能，并严格遵守国家法律法规。任何人利用本文中的信息从事违法活动，均与本文作者和“泷羽sec”无关。请读者自觉遵纪守法，合理合法使用相关知识。
1 html简介
HTML 是一种用于描述网页的标记语言，其全称是超文本标记语言（HyperText Markup Language）。不同于编程语言，HTML 通过一套标记标签（markup tag）来结构化网页内容。HTML 文档包含各种标签和文本内容，这些标签用于定义网页的不同元素，使浏览器能够正确显示网页。HTML 文档通常被称为 web 页面。
2 HTML 基本结构概述
HTML（超文本标记语言）网页有一个标准的结构，主要由以下几个关键部分组成：文档类型声明、HTML 根元素、头部（head）和主体（body）部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架。
3 文档类型声明（DOCTYPE）
<!DOCTYPE html>：这是 HTML5 的文档类型声明。它必须位于 HTML 文件的第一行，作用是告知浏览器文档所遵循的 HTML 版本，以便浏览器能够正确地渲染页面。对于 HTML5 来说，这个声明简洁明了，统一了 HTML 文档类型的标准，取代了以往复杂的 DTD（文档类型定义）声明。
4 HTML 根元素（<html>）
<html>：作为 HTML 文档的根标签，所有其他的 HTML 元素都被包含在它里面。它有开始标签 <html> 和结束标签 </html>。这个标签界定了整个 HTML 文档的范围，浏览器会识别其中特定内容为有效的 HTML 代码。
5 头部部分（<head>）
<head>：此部分包含了关于网页的元数据，这些信息对浏览器的渲染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示。
<title>：用于定义网页的标题，标题内容会显示在浏览器的标题栏或标签页上。例如：<title>精彩网页世界</title>。这是用户识别网页的重要标识，同时也对搜索引擎优化（SEO）有一定影响。<meta>：用于提供多种类型的元数据。常见的有字符编码设置，如<meta charset="UTF-8">，它确保浏览器能够正确解析和显示网页中的各种字符，支持多种语言的字符集。另外，还可用于设置页面描述、关键词等信息，如<meta name="description" content="这是一个充满趣味的网页">用于向搜索引擎描述网页内容，<meta name="keywords" content="网页, 趣味, 示例">可设置关键词帮助搜索引擎索引网页。<link>：主要用于链接外部资源，最常见的是连接 CSS 样式表。例如：<link rel="stylesheet" href="styles.css">，其中rel="stylesheet"表明这是一个样式表链接，href属性性指定了 CSS 文件的路径。通过这种方式，可以实现网页内容与样式的分离，方便网页设计和维护。<script>：可用于在 HTML 文档中嵌入 JavaScript 代码或引用外部的 JavaScript 文件。如果是嵌入代码，可以这样写：<script>alert('欢迎来到我的网页');</script>。若引用外部文件，则是<script src="script.js"></script>，这里src属性性指定了 JavaScript 文件的路径。脚本可以为网页添加交互功能。
6 主体部分（<body>）
<body>：包含了所有在网页中可见的内容，如文本、图像、超链接、表格、表单等各种网页元素。
- 文本元素：可以使用段落标签
<p>来组织文本，如<p>这是一段普通的文本内容。</p>。 - 标题标签
<h1>-<h6>可用于创建不同级别的标题，<h1>表示最高级别的标题，重要性依次递减，例如<h1>主标题</h1>,<h2>副标题</h2>。 - 图像元素：使用
<img>标签来插入图像，如<img src="image.jpg" alt="图像描述">，src属性性指定图像的来源路径，alt属性在图像无法正常显示时提供替代文本，对于可访问性和 SEO 都很重要。 - 超链接元素：通过
<a>标签创建超链接，如<a href="https://www.example.com">点击这里</a>，href属性定义了链接的目标 URL，标签内的文本是用户看到的可点击的链接内容。 - 表格元素：使用
<table>标签创建表格，<tr>表示表格行，<td>表示表格单元格，例如：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
- 表单元素：用于收集用户输入信息，例如
<form>标签包含表单内容，<input>标签用于创建各种输入框，如<input type="text" placeholder="请输入用户名">用于创建一个文本输入框，type属性性指定输入类型，placeholder属性性显示提示文本。
以下是一个完整的简单 HTML 网页示例：
<!DOCTYPE html>
<html>
<head>
<title>示例网页</title>
<meta charset="UTF-8">
</head>
<body>
<h1>欢迎来到示例网页</h1>
<p>这是网页的主要内容部分，这里可以展示各种信息。</p>
<img src="example.jpg" alt="示例图片">
<a href="https://www.example.com">访问示例网站</a>
</body>
</html>
