可通过四种方式修改HTML：一、文本编辑器手动编辑源码；二、浏览器开发者工具临时调试；三、JavaScript动态修改已加载页面；四、命令行工具批量替换。
如果您需要修改HTML文件的内容或调整其元素的属性设置，可以通过直接编辑源代码实现。以下是几种常用且有效的操作方式：
一、使用文本编辑器手动修改
HTML文件本质上是纯文本文件，任何支持UTF-8编码的文本编辑器均可打开并修改其内容与属性。该方法适用于精确控制每个标签、属性及嵌套结构。
1、右键点击HTML文件，选择“打开方式” → “记事本”（Windows）或“文本编辑”（macOS）。
2、在编辑器中定位到需修改的HTML元素，例如<p class="intro">欢迎访问</p>。
立即学习“前端免费学习笔记（深入）”；
3、修改内容：将“欢迎访问”替换为所需文字，如“欢迎来到首页”。
4、修改属性：在起始标签内添加或更改属性，例如将class="intro"改为id="welcome-text"或追加style="color: blue;"。
5、保存文件：按Ctrl+S（Windows）或Cmd+S（macOS），确保编码格式为UTF-8，扩展名仍为“.html”。
二、使用浏览器开发者工具临时调试
浏览器开发者工具允许实时查看和编辑页面渲染后的HTML结构，便于快速验证修改效果，但所做更改仅在当前会话生效，不保存至原始文件。
1、在Chrome或Edge浏览器中打开目标HTML文件（可通过file://协议直接打开）。
2、按F12或右键选择“检查”，切换到“Elements”面板。
3、在DOM树中找到目标元素，双击其文本节点可编辑显示内容，例如将<h1>标题</h1>中的“标题”改为主标题。
4、右键目标标签，选择“Edit as HTML”，可直接修改整个标签及其属性，例如添加data-test="active"。
5、修改后按Enter确认，页面即时更新，但刷新后恢复原状。
三、通过JavaScript动态修改已加载页面
在HTML文件内部或外部引入JavaScript，可在页面加载后动态更改元素内容或属性，适用于交互式场景或条件化更新。
1、在HTML文件的<body>底部或<head>中添加<script>标签。
2、使用document.getElementById()获取指定元素，例如const el = document.getElementById("header");。
3、修改文本内容：el.textContent = "新页眉";。
4、修改属性：el.setAttribute("class", "main-header active"); 或 el.id = "top-header";。
5、若需批量修改，可使用document.querySelectorAll("p")获取所有段落，再遍历调用innerHTML或dataset赋值。
四、使用命令行工具批量替换文本
当需在多个HTML文件中统一修改某类内容或属性时，可借助系统命令行工具执行高效文本替换，避免逐一手动编辑。
1、在Windows PowerShell中，进入HTML文件所在目录，运行：
Get-ChildItem *.html | ForEach-Object { (Get-Content $_.FullName) -replace 'old-class', 'new-class' | Set-Content $_.FullName }。
2、在macOS或Linux终端中，使用sed命令：
sed -i '' 's/class="old"/class="new"/g' *.html。
3、确保原始文件已备份，因该操作直接覆盖原文件，不可逆。
4、替换前验证正则表达式准确性，避免误改其他相似字符串，例如防止将“old-class-name”错误匹配为“old”。
