首先谈一下我对传统前端开发的原理：就像是做PPT一样。
所以本期内容除了学习与介绍HTML外，本期还会像做PPT的模板一样，先做一个HTML模板
同时，本期内容会展示上个系列皮卡丘靶场中相关联的知识点-XSS攻击，我会通过实例来演示如何化解黑客简单的XSS攻击
一，模板快捷键使用
（我的VScode美化过了，所以看起来会有不同，我之后会单独介绍的）
既然有了新生产力VScode我们就要用好它，比如先创建一个 .html 文件（文件夹随便，名字随便，后缀改为.html就行了）
但是我们手动输入这样的.html模板那太浪费时间了，所以就要用好VScode的快捷键，新版本的VScode通过输入"!"（感叹号）然后选择第一个"!"即可快速生成一个HTML模板
（切记，要英文版的"!"中文版的用不了，如果不知道自己的是什么，就打开大写，按压你键盘左下方的"CapsLock"就行）。
二，HTML模板结构理解
<title></title>模块
（这是一个相当标准的HTML模板，传统前端开发基本上就是基于此开发的）
我们先来了解一下这里面的东西有什么用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
用途：声明文档类型。
解释：
<!DOCTYPE html> 是一个文档类型声明，用于告诉浏览器这是一个HTML5文档。这个声明确保浏览器以标准模式渲染页面，避免浏览器不理解，从而保证网页的兼容性和一致性。
HTML5是目前最常用的HTML版本，它提供了更简洁的语法和更强大的功能。
<html lang="en">
用途：定义HTML文档的根元素。
解释：
<html> 是HTML文档的根元素，它包含了网页的所有内容。
lang="en" 属性指定了文档的语言为英语。这有助于搜索引擎和屏幕阅读器正确处理文档内容，例如翻译工具可以根据语言设置来正确翻译。
<head>
用途：包含文档的元数据。
解释：
<head> 元素是HTML文档的头部部分，它不直接显示在网页上，但包含了网页的元数据，如标题、字符集声明、视口设置、样式表链接等。
在这里面，<head> 包含了以下内容：
<meta charset="UTF-8">：指定字符集为UTF-8。UTF-8是一种广泛使用的字符编码，可以支持多种语言的字符，确保网页内容正确显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口（viewport），用于优化移动设备的显示效果。
width=device-width 表示页面宽度与设备宽度一致，
initial-scale=1.0 表示初始缩放比例为1.0，这有助于网页在不同设备上自适应显示。
<title>Document</title>：定义网页的标题，显示在浏览器的标题栏或标签页上。这里的标题是“Document”，可以根据需要修改为更具体的标题。
<body>
用途：包含网页的可见内容。
解释：
<body> 元素是HTML文档的主体部分，包含了网页上用户可以看到的所有内容，如文本、图片、表格、表单等。
在这里面，<body> 是空的，因此网页上没有任何可见内容。如果要添加内容，可以在这个标签内添加HTML元素大家可能有些迷惑，所以我们用浏览器打开看看（记住保存：点击VScode左上角的"文件"，然后点击"保存"即可）
用谷歌浏览器（右键创建好的html文件然后在"打开方式"中选择谷歌浏览器即可）打开后我们可以看到浏览器网页名称是Document，由此，我们可以知道<title></titile>标签可以控制浏览器的网页名称
我们再更改一下<title></title>标签内的东西看看
刷新浏览器，我们可以看到没问题
<body>模块
从上面的分析中我们可以知道<body>是写页面主要内容的全部主要内容了，是传统前端中主要撰写内容的一个模块，里面包含了很多的小标签，我们一一介绍与实践
文本内容类标签
标题标签
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>.....以此类推，最大有六级标题标签
正文标签
<p>段落标签</p>
<p>段落标签<b>字体加粗</b></p>
<p>段落标签<i>斜体</i></p>
<p>段落标签<u>下划线</u></p>
<p>段落标签<s>删除线</s></p>换行标签
<br>换行标签</br>分割标签
<hr>
列表类标签
<dl>
<dt>列表标签</dt>
<dd>这是一个列表标签</dd>
</dl>（无序就是前面没有数字序号）
<ul>
<li>无序标签1</li>
<li>无序标签2</li>
</ul>
<ol>
<li>有序标签1</li>
<li>有序标签2</li>
</ol>
链接类标签
<a href="https://www.baidu.com" target="_blank">打开百度</a>
<a href="https://www.baidu.com" target="_blank">打开百度</a><a>：超链接标签，用于创建链接。
属性：
href：指定链接的目标URL。
target：指定链接打开的方式，如 _blank（在新窗口打开）。
图像类标签
<img src="image.jpg" alt="无法打开" width="300" height="200"><img>：图像标签，用于插入图片。
属性：
src：指定图片的路径。
alt：图片的替代文本，当图片无法显示时显示此文本。
width 和 height：设置图片的宽度和高度。多媒体类
<video>：视频播放器。
src：指定视频文件路径。
controls：显示播放控件。
示例：
<video src="video.mp4"controls width ="300"></video>
<audio>：音频播放器。
src：指定音频文件路径。
controls：显示播放控件。
示例：
<audio src="audio.mp3"controls></audio>表格类标签
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table><table>：表格容器。
<tr>：表格行。
<th>：表格头部单元格，通常用于表头，内容会加粗并居中。
<td>：表格普通单元格。
表单类标签
<form action="/submit" method="post">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="提交">
</form><form>：表单容器，用于收集用户输入。
属性：
action：指定表单提交的URL。
method：指定提交方法（如 GET 或 POST）。
<input>：输入框，用于创建各种输入控件。
属性：
type：指定输入框的类型（如 text、password、submit 等）。
name：指定输入框的名称。
value：指定输入框的默认值。<label for="username">用户名：</label>
<input type="text" id="username" name="username"><label>：用于定义输入框的说明文字。
属性：
for：与输入框的 id 关联。<textarea name="message" rows="4" cols="50">请输入内容</textarea><textarea>：多行文本输入框<select name="city">
<option value="beijing">山西太原</option>
<option value="shanghai">内蒙古呼和浩特</option>
</select><select> 和 <option>：下拉选择框容器类标签
因为涉及到CSS的内容，所以只简单说一下
<div>：块级容器，用于分组HTML元素，常用于布局。
示例
<div style="background-color: yellow;">
<p>这是一个段落。</p>
</div>
<span>：行内容器，用于对文本或元素进行局部样式设置。
示例
<p>这是一个 <span style="color: red;">红色</span> 的文本。</p>其他类
由于以下内容属于拓展类型，就由大家自己尝试，在此便不过多赘述
<header>：页面头部区域。
<footer>：页面底部区域。
<nav>：导航栏区域。
<section>：独立的区域或部分。
<article>：独立的文章内容。
<aside>：侧边栏内容XSS防御
了解后我们来做一个有XSS攻击漏洞的html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XSS 漏洞示例</title>
</head>
<body>
<h1>这是一个H1标题标签</h1>
<p>这是一个只涉及 HTML 的 XSS 漏洞文件示例。</p>
<form action="" method="get">
<label for="userInput">请输入内容：</label>
<input type="text" id="userInput" name="userInput" />
<button type="submit">提交</button>
</form>
<h2>你输入的内容：</h2>
<div id="userContent"></div>
<!-- 用于演示 XSS 漏洞 -->
<script>
// 获取 URL 参数中的 userInput 值
let urlParams = new URLSearchParams(window.location.search);
let userInput = urlParams.get('userInput');
// 直接将用户输入的内容设置到页面元素中，没有过滤和转义，存在 XSS 漏洞
document.getElementById('userContent').innerHTML = userInput || '暂无输入';
</script>
</body>
</html>我们输入
<marquee>滚动文字</marquee>如果出现滚动文字说明有XSS漏洞，
接下来用
<script>alert("XSS");</script>因为由于现代浏览器的安全机制，可能不会弹出警告框。但是如果你可以在url中看到插入后就说明成功了
这个是修复后的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修复后的 XSS 漏洞示例</title>
</head>
<body>
<h1>这是一个H1标题标签</h1>
<p>这是一个修复后的 HTML 文件示例，演示如何防止 XSS 漏洞。</p>
<form action="" method="get">
<label for="userInput">请输入内容：</label>
<input type="text" id="userInput" name="userInput" />
<button type="submit">提交</button>
</form>
<h2>你输入的内容：</h2>
<div id="userContent"></div>
<script>
// 获取 URL 参数中的 userInput 值
let urlParams = new URLSearchParams(window.location.search);
let userInput = urlParams.get('userInput');
// 使用转义函数对用户输入进行处理，防止 XSS 漏洞
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 将转义后的用户输入设置到页面元素中
document.getElementById('userContent').innerHTML = escapeHtml(userInput) || '暂无输入';
</script>
</body>
</html>所以，在开发网站时，一定要有一定的网站防御能力（虽然前端防御用处不大）
明确的说，本期内容演示的是在前端开发中常用到的开发内容，想要凭一篇文章了解全部的HTML内容是不可能的，光熟练度就上不来，你自己需要长时间的实践与练习才能完全了解。
还是在皮卡丘靶场中引用过的伟大领袖毛主席的话