网络安全-HTML基础

声明

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

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

✍🏻作者简介：致力于网络安全领域，目前作为一名学习者 ，很荣幸成为一名分享者 ，最终目标是成为一名开拓者 ，很有趣也十分有意义

🤵‍♂️ 个人主页： @One_Blanks

欢迎评论 💬点赞👍🏻 收藏 📂加关注+
X：NO SYSTEM IS SAFE

文章目录

HTML简介

HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言
HTML 不是一种编程语言，而是一种标记语言
HTML 使用标记标签来描述网页
HTML 文档包含标签与文本内容
HTML文档也叫做web页面

HTML基本结构概述

<!DOCTYPE html>声明：位于文档最前端，表明这是 HTML5 文档，让浏览器按 HTML5 标准解析页面。
<html>元素 ：是 HTML 文档的根元素，其他元素都嵌套其中，有开始<html>和结束</html>标签，就像一个容器，包裹着整个网页的内容。
<head>元素（包含元数据）
- <meta>标签 ：如<meta charset="UTF - 8">指定字符编码，还有用于搜索引擎的其他元信息标签。
- <title>标签：定义浏览器标签页和搜索引擎结果中的标题。
<body>元素（包含可见内容） ：如文本（用<p>等标签）、图像（<img>标签）、链接（<a>标签）等。

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

下面是一个简单的HTML基本结构示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF - 8">
    <title>一个简单的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是网页的主要内容部分。</p>
</body>
</html>

首先是文档类型声明，然后是<html>根元素。<head>部分包含了字符编码设置和页面标题，<body>部分则包含了一个一级标题<h1>和一个段落<p>

head内标签

<meta>标签
- 字符编码设置：
  - 示例：<meta charset="UTF - 8">。这是<meta>标签的一个非常重要的用法。UTF - 8 是一种通用的字符编码方式，几乎可以表示世界上所有的字符。当浏览器读取这个标签时，它就知道应该如何正确地解析网页中的文字内容。如果没有正确设置字符编码，可能会导致文字显示乱码。
- 页面描述和关键词设置：
  - 示例：<meta name="description" content="这是一个关于HTML结构讲解的网页，包含详细的head标签内容">。name="description"属性表示这是一个页面描述标签，content属性则是具体的描述内容。
  - <meta name="keywords" content="HTML, head标签, 网页结构">。name="keywords"属性用于指定网页的关键词。
- 视口设置（用于移动端网页适配）：
  - 示例：<meta name="viewport" content="width=device - width, initial - scale = 1.0">。这个标签用于控制网页在移动设备上的显示方式。width=device - width表示网页的宽度应该等于设备的屏幕宽度，initial - scale = 1.0表示初始缩放比例为 1.0，即不进行缩放。这样可以确保网页在移动设备上能够自适应屏幕大小
<title>标签
- 示例：<title>HTML Head标签详解 - 学习网页基础知识</title>。这个标签定义了网页的标题。当网页在浏览器中打开时，标题会显示在浏览器的标签栏上。
<link>标签
- 样式表链接：
  - 示例：<link rel="stylesheet" type="text/css" href="styles.css">。这个标签用于将外部 CSS（层叠样式表）文件链接到 HTML 文档。rel="stylesheet"表示这是一个样式表链接，type="text/css"指定了链接文件的类型是 CSS，href="styles.css"则是样式表文件的路径。通过这种方式，可以将网页的内容和样式分离，方便维护和更新。
- 图标链接（favicon）：
  - 示例：<link rel="shortcut icon" href="favicon.ico">。这个标签用于指定网页的图标 （favicon）。rel="shortcut icon"表示这是一个快捷方式图标链接，href="favicon.ico"是图标的文件路径。当网页在浏览器中被收藏或者在浏览器标签栏显示时，这个图标就会出现。一般来说，favicon.ico 是一个 16x16 或 32x32 像素的图标文件，它可以帮助用户快速识别网页。
<script>标签（在中部分应用）
- 外部脚本链接：
  - 示例：<script src="script.js" defer></script>。这个标签用于引入外部的 JavaScript 脚本文件 。src="script.js"指定了脚本文件的路径，defer属性表示脚本会在文档解析完成后延迟执行。JavaScript 可以用于实现网页的交互功能，如菜单的展开和折叠、表单验证等。
- 内联脚本：
  - 示例：<script> function showMessage() { alert('欢迎来到这个网页！'); } </script>。这是一个内联脚本的例子，直接将 JavaScript 代码写在<script>标签内。

body内标签

文本相关标签
- <p>标签（段落标签）
  - 作用：用于定义一个段落。浏览器会在段落前后自动添加一些空白间距，使文本排版更加清晰。
  - 示例：<p>这是一个段落。它包含了一些文本内容，这些内容会在浏览器中以段落的形式显示。</p>。多个<p>标签可以用来划分不同的段落，每个段落会独占一行，并且上下段落之间会有一定的间距。
- <h1> - <h6>标签（标题标签）
  - 作用：用于定义不同级别的标题，<h1>是最高级别（最重要的标题），<h6>是最低级别。标题标签通常会以较大的字体和较粗的样式显示，用于突出网页内容的层次结构。
  - 示例：<h1>这是一级标题</h1>，<h2>这是二级标题</h2>。<h1>可能是文章的标题，<h2>可以是文章各个章节的标题，<h3>则可能是章节下小节的标题，以此类推。
- <span>标签
  - 作用：是一个内联标签 ，用于对文本的一小部分进行样式设置或其他操作。它本身不会对文本的显示产生像段落或标题那样明显的视觉变化。
  - 示例：<p>这是一段包含<span style="color: red;">红色文字</span>的段落。</p>。<span>标签用于将其中的文字颜色设置为红色。
- <strong>和<em>标签
  - 作用：<strong>标签用于强调文本内容，通常浏览器会以加粗的形式显示；<em>标签用于表示斜体强调，浏览器一般会将其内容显示为斜体。
  - 示例：<p>这个词很<strong>重要</strong>，而这个词是<em>需要特别注意的</em>。</p>。
列表标签

<ul>和<ol>标签（无序列表和有序列表）
- 作用：<ul>标签用于创建无序列表，列表项前面通常是一个实心圆点（可以通过 CSS 样式修改）；<ol>标签用于创建有序列表，列表项前面会有数字或字母等顺序标记。
- 示例：
无序列表：
html 复制代码
```
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
```
有序列表：

html 复制代码

<ol>
  <li>第一个项目</li>
  <li>第二个项目</li>
  <li>第三个项目</li>
</ol>

链接标签

<a>标签（超链接标签）
- 作用：用于创建超链接，可以将用户从当前页面引导到其他页面、同一页面的其他位置或者文件下载链接等。
- 示例：
  - 链接其他网站 ：<a href="https://www.baidu.com">访问示例网站</a>。当用户点击 "访问示例网站" 这几个字时，浏览器会跳转到https://www.baidu.com这个网址。
  - 链接到同一页面内的锚点（假设页面中有一个<div id="section - 2">的元素）：<a href="#section - 2">跳转到第二部分</a>。用户点击这个链接后，页面会滚动到id为section - 2的元素位置。
  - 下载链接 （假设要下载一个名为document.pdf的文件）：<a href="document.pdf" download>下载文档</a>。download属性表示这是一个下载链接，当用户点击 "下载文档" 时，浏览器会下载document.pdf文件。

图像标签

<img>标签
- 作用：用于在网页中插入图像。
- 示例：<img src="image.jpg" alt="风景图">。src属性指定图像文件的路径（可以是相对路径或绝对路径），alt属性是图像的替代文本。当图像无法加载时，浏览器会显示alt文本；同时，对于屏幕阅读器等辅助工具，alt文本可以帮助用户理解图像内容。

表格标签

<table>标签（表格整体）
- 作用：用于创建表格结构，它包含了表格的行和列等元素。
- 示例：
html 复制代码
```
<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>
```
<tr>标签表示表格行（Table Row），<td>标签表示表格列（Table Data）。

表单标签

<form>标签（表单整体）
- 作用：用于创建一个表单，用户可以通过表单输入信息并提交给服务器。
- 示例：

html 复制代码

<form action="submit.php" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>

action属性，指定了表单提交后数据处理的脚本文件（这里是submit.php，实际应用中可以是任何服务器端脚本语言编写的处理程序）

method属性指定了数据提交的方式（这里是post，还有get方式等）

<label>标签用于为表单元素提供说明

="提交">
```

action属性，指定了表单提交后数据处理的脚本文件（这里是submit.php，实际应用中可以是任何服务器端脚本语言编写的处理程序）

method属性指定了数据提交的方式（这里是post，还有get方式等）

<label>标签用于为表单元素提供说明

<input>标签用于创建各种输入框，如文本输入框、密码输入框、按钮等