零基础学前端-传统前端开发（第二期-HTML介绍与应用）（XSS防御）
首先谈一下我对传统前端开发的原理：就像是做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内容是不可能的，光熟练度就上不来，你自己需要长时间的实践与练习才能完全了解。
还是在皮卡丘靶场中引用过的伟大领袖毛主席的话