黑客基础之HTML

声明

学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章

笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负

泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频

https://space.bilibili.com/350329294

一，HTML简介

HTML（超文本标记语言------HyperText Markup Language）是构成Web世界的基础要素之一，自1990年起就被用作万维网语言，它是一种建立网页文件的语言，通过标记式的指令（Tag），将文字、图形、动画、声音、表格、链接、影像等内容显示出来。HTML文档是一种静态的网页文件，其中包含的指令代码是一种排版网页中资料显示位置的标记结构语言，易学易懂3。

HTML 的主要功能

给予文本意义 ：让浏览器知道如何正确显示文本，例如将文本块分解为结构化的标题和段落、强调和加粗单词、创建列表等。还可以标记引文、描述列表、计算机代码、下标和上标、联系信息等不太为人熟知但有用的元素来排版文本1。
定义网页结构 ：除了定义页面的个别部分（如段落、图像）外，也用于定义网站的区域（如标题、导航菜单和主要内容）1。
实现超文本链接 ：超文本是指连接单个网站内或多个网站间的网页的链接，这是网络的一个基本方面。通过HTML可以创建超文本，使用户能通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，这也是HTML获得广泛应用的重要原因之一3。

HTML 的基本结构

一个典型的HTML页面包含head部分和其他部分。

head 部分：当页面被加载后，HTML中的head部分不会被显示在Web浏览器中。它包含了许多信息，例如网页的标题、指向的链接（如果使用CSS来设计HTML内容的样式的话）、指向自定义网站图标的链接和一些元数据（关于HTML本身的数据，例如它的作者和描述这个文档的关键字）1。
其他部分 ：包含如标题、段落、图像、链接等各种元素，这些元素通过标签（tag）来表示，标签由在<和>中包裹的元素名组成，HTML标签里的元素名不区分大小写，但习惯上与实践上都推荐将标签名全部小写2。

HTML 的语法特点

元素与标签：HTML由元素组成，元素通过标签从文档中引出。例如<title>标签用于定义网页标题。
属性修饰：每个元素都可以被多个属性修饰。HTML文档中的元素通过属性来进一步定义其特性。
全局属性 ：存在全局属性，可以在所有元素上进行设置，即使某些非标准元素使得文档并不符合HTML5标准，也必须允许这些属性存在。元素通常是行级或块级元素，行级元素仅会占用由定义它的标签所包裹起来的空间，而块级元素将会占用其父元素（容器）的全部空间，也就是创建一个块2。

HTML5 的新特性

语义化标签 ：如<header>、<footer>、<article>、<section>等，用于更好地描述和组织网页内容，使搜索引擎和浏览器能更好地理解和处理页面结构4。
视频和音频 ：提供了<video>和<audio>标签，使得在网页中嵌入视频和音频变得更加简单和直观，消除了对插件（如Flash）的依赖，并提供了更好的可访问性和可定制性4。
地理定位 ：通过navigator.geolocation API提供了一种在Web应用程序中获取用户位置的标准方法，这使得开发者可以创建基于位置的应用4。
其他特性 ：还包括画布（canvas）、存储（web storage）、web workers、拖放（drag and drop）、web components、响应式设计等新特性4。

二，HTML基本结构概述

一、整体结构

HTML文档的基本结构由以下几个主要部分组成：

文档类型声明（DocumentTypeDeclaration，DTD） ：这是HTML文档必须的部分，用来说明该文档是HTML文档，并且说明了文档的类型及其所遵守的标准规范集。例如在HTML4.01Transitional中，文档类型声明为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01Transitional//EN；在HTML5中，文档类型声明为<!DOCTYPE html>1。
html 标签对 ：html标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML文档的结束。这两个标签对成对存在，中间的部分是文档的头部和主体。该标签有dir和lang两个属性，dir用来指定浏览器显示文本的方向（有ltr从左到右和rtl从右到左两种），一般可省略；lang属性用来指明文档内容或者某个元素内容使用的语言，理想情况下，浏览器可以根据此属性更好地显示文本给用户1。
head 标签对 ：head标签包含有关HTML文档的信息，可以包含一些辅助性标签，如title、base、link、meta、style、script等。但是浏览器除了会在标题栏显示title元素的内容外，不会向用户显示head元素内的其他任何内容。head元素有个profile属性，该属性提供了与当前文档相关联的配置文件的URL1。
body 标签对 ：它是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。在此标签中可以包含p、h1、br等众多标签，body标签出现在</head>标签之后，且必须在闭标签</html>之前闭合1 2。

二、各部分功能作用

文档类型声明（DTD）
- 确保浏览器正确解析文档：不同的文档类型声明使浏览器按照相应的标准来解析HTML代码。例如HTML5的<!DOCTYPE html>简洁的声明方式，让浏览器知道这是一个遵循HTML5标准的文档，从而采用HTML5的解析模式。
- 兼容性和规范性：遵循特定的文档类型声明有助于保证HTML文档在不同浏览器中的兼容性，遵循统一的规范可以使网页在各种设备和浏览器上呈现出预期的效果。
html 标签对
- 界定文档范围：明确HTML文档的开始和结束，浏览器在解析HTML代码时，会识别html标签所包含的内容为一个完整的HTML文档内容。
- 提供语言相关属性：通过lang属性可以帮助浏览器进行语言相关的处理，如正确的字符编码、语音合成等。
head 标签对
- 提供文档元信息：meta标签可以设置文档的字符集（如charset=utf - 8）、页面描述、关键词等信息，这些信息对于搜索引擎优化（SEO）以及浏览器正确处理文档都非常重要。
- 引入外部资源：通过link标签可以引入外部的样式表（如CSS文件），使网页的样式与结构分离；script标签可以用来引入JavaScript脚本，实现网页的交互功能。
- 定义文档标题：title标签中的内容会显示在浏览器的标题栏，同时也是搜索引擎结果页面中显示的网页标题，对用户识别网页内容和搜索引擎优化有重要意义。
body 标签对
- 展示网页内容：包含了网页中所有直接呈现给用户的内容，如文本内容、图像（通过img标签）、超链接（通过a标签）、表格（通过table标签）等。
- 布局和设计基础：是进行网页布局和设计的主要区域，通过各种HTML标签的组合和嵌套，可以创建出不同的网页布局和视觉效果。

三，常用HTML标签

文本内容标签

标题标签 (<h1> 到 <h6>)
- 用于定义文档的标题，<h1> 是最高级别的标题，<h6> 是最低级别的标题。
段落标签 (<p>)
- 用于定义段落。浏览器会自动在段落前后添加空行。
换行标签 (<br>)
- 用于在文本中插入换行符。
加粗标签 (<b> 和 <strong>)
- <b> 用于视觉上的加粗，<strong> 表示强调的内容，通常也会显示为加粗。
斜体标签 (<i> 和 <em>)
- <i> 用于视觉上的斜体，<em> 表示强调的内容，通常也会显示为斜体。

链接标签

超链接标签 (<a>)
- 用于创建超链接，可以跳转到其他页面或位置。例如：<a href="https://www.example.com">Example</a>

列表标签

无序列表 (<ul> 和 <li>)
- <ul> 定义无序列表，<li> 定义列表项。例如：
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  </ul>
有序列表 (<ol> 和 <li>)
- <ol> 定义有序列表，<li> 定义列表项。例如：
  <ol>
  <li>Item 1</li>
  <li>Item 2</li>
  </ol>

图像和多媒体标签

图像标签 (<img>)
- 用于插入图像，可以通过指定图像的URL来显示图片。例如：<img src="image.jpg" alt="Description of image">

表格标签

表格标签 (<table>, <tr>, <td>)
- <table> 定义表格，<tr> 定义表格的行，<td> 定义表格的单元格。例如：
  <table>
  <tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
  </tr>
  <tr>
  <td>Row 2, Cell 1</td>
  <td>Row 2, Cell 2</td>
  </tr>
  </table>

表单标签

表单标签 (<form>, <input>, <label>, <textarea>, <button>, <select>)
- <form> 定义表单，<input> 定义输入字段，<label> 定义标签，<textarea> 定义多行文本输入框，<button> 定义按钮，<select> 定义下拉列表。例如：
  <form action="/submit">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  <br>
  <button type="submit">Submit</button>
  </form>

语义和布局标签

块级元素和行内元素
- 块级元素（如 <div>）在浏览器中会占据一整行，行内元素（如 <span>）则不会。
容器标签 (<div>, <span>)
- <div> 用于定义文档中的块级元素，<span> 用于定义文档中的行内元素。

四，HTML与网络安全

HTML（超文本标记语言）是构建网页的基础语言，而网络安全则是确保这些网页及其背后的数据免受恶意攻击和未经授权访问的领域。结合HTML与网络安全，主要涉及以下几个方面：

1. XSS （跨站脚本）攻击防护

XSS攻击是通过在网页中注入恶意脚本来窃取用户信息的一种常见攻击方式。为了防止XSS攻击，开发者应该：

内容安全策略（CSP） ：通过设置CSP头部指令，限制资源加载，减少XSS攻击的风险1。
数据编码 ：对用户输入进行适当的HTML实体编码，避免恶意代码执行1。
使用安全的API ：避免使用不安全的API，如document.write ，改为使用innerHTML或textContent1。

2. CSRF （跨站请求伪造）防范

CSRF攻击是通过利用用户已经登录的身份，向服务器发送伪造的请求来执行未授权的操作。防范措施包括：

Anti-CSRF 令牌：在用户会话中使用Anti-CSRF令牌，并在请求中验证1。
设置Cookie的SameSite属性 ：使用SameSite属性防止CSRF攻击1。
验证HTTP Referer头 ：检查HTTP Referer头以确认请求来源1。

3. SQL 注入防护

SQL注入是通过在输入字段中插入恶意SQL代码，以操纵数据库查询的一种攻击方式。防护措施包括：

预编译语句 ：使用参数化查询，而不是将用户输入直接拼接到SQL语句中1。
限制数据库权限 ：确保数据库用户只有执行所需操作的最小权限1。
输入验证 ：对所有输入进行严格的验证，确保它们是预期的格式1。

4. 文件上传安全

文件上传功能如果处理不当，可能会被用来上传恶意软件。安全措施包括：

文件类型限制 ：禁止上传可执行文件，如.php、.exe等1。
文件大小限制 ：设置合理的文件大小限制，以防止大文件上传导致的拒绝服务攻击(DoS)1。
扫描恶意软件 ：在上传前对文件进行恶意软件扫描1。

5. 会话管理

会话管理是确保用户在登录后能够安全地访问其账户的关键。措施包括：

使用HTTPS ：通过HTTPS协议保护会话Cookie1。
设置Cookie的HttpOnly属性 ：确保会话Cookie的HttpOnly属性为true，以防止客户端脚本访问1。
定期更新会话ID ：通过轮换会话ID来增加会话的安全性1。