html 中如何写js代码提示

在HTML中编写JavaScript代码提示，我们通常使用一些工具或者库来帮助我们，这些工具或库可以提供代码自动补全、语法高亮等功能，大大提高我们的开发效率，下面我将详细介绍如何在HTML中使用这些工具。

（图片来源网络，侵删）

1、使用CodeMirror库

CodeMirror是一个开源的浏览器端的代码编辑器，它支持超过150种编程语言和脚本语言，包括JavaScript，我们可以在HTML中引入CodeMirror库，然后在需要编写JavaScript代码的地方添加一个<textarea>元素，并为其设置class="cmsdefault"，这样就可以启用CodeMirror的代码编辑功能了。

我们需要在HTML文件中引入CodeMirror的CSS和JS文件：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>CodeMirror示例</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script> </head> <body> <!在这里编写JavaScript代码 > </body> </html>

接下来，我们在<body>标签内添加一个<textarea>元素，并为其设置class="cmsdefault"：

现在，我们已经启用了CodeMirror的代码编辑功能，你可以在<textarea>元素中编写JavaScript代码，然后通过浏览器查看效果，CodeMirror会自动为你提供代码提示、语法高亮等功能。

2、使用Ace库

Ace是一个轻量级的代码编辑器，它也支持JavaScript，我们可以在HTML中引入Ace库，然后在需要编写JavaScript代码的地方添加一个<div>元素，并为其设置id="editor"，这样就可以启用Ace的代码编辑功能了。

我们需要在HTML文件中引入Ace的CSS和JS文件：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>Ace示例</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script> </head> <body> <div id="editor"></div> <script> var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/javascript"); editor.resize(); </script> </body> </html>

接下来，我们在<body>标签内添加一个<div>元素，并为其设置id="editor"：

现在，我们已经启用了Ace的代码编辑功能，你可以在<div>元素中编写JavaScript代码，然后通过浏览器查看效果，Ace会自动为你提供代码提示、语法高亮等功能。

在HTML中编写JavaScript代码提示，我们可以使用CodeMirror和Ace这两个强大的代码编辑器库，它们都提供了丰富的功能，可以帮助我们更高效地编写JavaScript代码，你可以根据自己的需求和喜好选择合适的库来使用。