HTML页面添加错误提示有五种方法：一、用try-catch捕获运行时错误并显示于DOM；二、用window.onerror监听未捕获脚本错误；三、用HTML5 validity API实现表单原生验证提示；四、重写console.error同步输出日志与界面提示；五、通过CustomEvent抛出自定义错误事件解耦处理。
当HTML页面在加载或交互过程中出现异常，用户需要及时获得明确的错误提示信息。以下是为HTML页面添加错误提示信息的具体操作方法：
一、使用JavaScript try-catch捕获运行时错误并显示提示
该方法适用于脚本执行过程中发生的语法错误、引用错误或类型错误等，通过try-catch结构拦截异常，并将错误信息以DOM元素形式插入页面。
1、在HTML文件的<body>底部添加一个用于显示错误的容器，例如：<div id="errorBox" style="color:red;font-weight:bold;display:none;"></div>。
2、在<script>标签内编写try-catch代码块，将可能出错的逻辑包裹其中。
立即学习“前端免费学习笔记（深入）”；
3、在catch语句中获取error.message属性，并将其赋值给errorBox的innerText，同时设置style.display = "block"使其可见。
4、确保errorBox容器位于所有可交互元素之后，避免遮挡关键UI。
二、利用window.onerror全局监听未捕获的JavaScript错误
该方法可捕获页面中未被try-catch处理的脚本错误，包括跨域脚本错误（需配合crossorigin属性使用），适合做统一错误上报与前端提示。
1、在页面加载完成前（如DOMContentLoaded事件中）绑定window.onerror函数。
2、函数参数依次为message、source、lineno、colno、error，从中提取error.message或message字符串。
3、创建一个临时<div>元素，设置其样式为固定定位、红色背景、白色文字、高z-index，并插入到document.body末尾。
4、调用event.preventDefault()可阻止浏览器默认错误弹窗，仅保留自定义提示。
三、通过HTML5 validity API在表单提交前触发原生错误提示
该方法利用浏览器内置的表单验证机制，在用户提交或失焦时自动显示标准化错误消息，无需额外JS逻辑即可实现语义化提示。
1、为<input>、<select>、<textarea>等表单控件添加required、pattern、minlength等约束属性。
2、在对应控件外层包裹<div class="form-group">，并在其内部添加<span class="error-message"></span>作为提示容器。
3、监听控件的invalid事件，在事件处理器中调用setCustomValidity("自定义错误文本")并更新.error-message的内容。
4、调用element.reportValidity()可主动触发验证并显示气泡提示，兼容Chrome/Firefox/Edge。
四、使用console.error输出错误日志并同步渲染DOM提示
该方法侧重开发阶段调试，同时兼顾用户可见提示，通过重写console.error方法实现日志与界面提示的双向同步。
1、在全局作用域保存原始console.error引用：const originalError = console.error;
2、覆盖console.error，使其在调用原生方法的同时，将第一个参数转为字符串并追加到#debugLog预设容器中。
3、为#debugLog添加CSS样式：position: fixed; bottom: 20px; right: 20px; background: #333; color: #fff; padding: 8px 12px; border-radius: 4px; font-family: monospace; max-width: 300px; overflow-wrap: break-word;
4、每次覆盖前需检查window.console是否可用，防止在无控制台环境报错。
五、借助CustomEvent抛出自定义错误事件并响应提示
该方法适用于模块化开发场景，允许不同组件间解耦地传递错误信号，由统一的错误处理器决定如何展示。
1、在发生错误的位置（如API请求失败回调）创建CustomEvent实例：new CustomEvent("app:error", { detail: { code: 404, message: "资源未找到" } })。
2、通过document.dispatchEvent(event)派发该事件。
3、在页面初始化时监听document上的"app:error"事件，事件处理器中读取e.detail.message并渲染至#globalErrorBar。
4、为避免重复监听，应在监听前使用removeEventListener清除旧处理器，再用addEventListener注册新处理器。
