html引入js的方式
时间: 2023-11-26 20:05:50 浏览: 19
HTML引入JS的方式有两种:
1. 使用`<script>`标签
在HTML文档中,通过`<script>`标签引入JS文件,例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入JS文件</title>
<script src="js/myScript.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
```
其中,`src`属性指定JS文件的路径,该路径可以是相对路径或者绝对路径。
2. 将JS代码嵌入到HTML文档中
在HTML文档中,可以直接将JS代码嵌入到`<script>`标签内,例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入JS代码</title>
<script>
// JS代码
function showMessage() {
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="showMessage()">点击显示消息</button>
</body>
</html>
```
在这种方式下,JS代码直接写在`<script>`标签内,并且不需要指定`src`属性。
相关问题
html引入javascript文件
在HTML中引入JavaScript文件可以使用`<script>`标签,具体方法如下:
1. 首先,将JavaScript代码保存在一个独立的.js文件中,比如说`example.js`。
2. 在HTML文件中使用`<script>`标签,将`example.js`文件引入到HTML文件中。可以使用以下两种方法:
- 在`<head>`标签中引入JavaScript文件:
```
<head>
<script src="example.js"></script>
</head>
```
- 在`<body>`标签中引入JavaScript文件:
```
<body>
<script src="example.js"></script>
</body>
```
注意:`src`属性中的文件路径应该根据实际情况修改。如果`example.js`与HTML文件在同一目录下,则只需要写文件名即可,否则需要写出文件的完整路径。
html引入js文件
在HTML中引入JS文件可以通过使用`<script>`标签来实现。你可以将JS代码保存在一个后缀名为.js的文件中,然后使用`<script>`标签的`src`属性来指定要引入的JS文件的路径。例如,如果你的JS文件名为`test.js`,你可以在HTML中使用以下代码来引入该文件:
```html
<script type="text/javascript" src="test.js"></script>
```
这样,浏览器在解析HTML时会自动加载并执行`test.js`文件中的JS代码。你可以将这个`<script>`标签放在HTML文件的`<head>`标签内或`<body>`标签中,具体位置取决于你的需求。\[1\] \[2\] \[3\]
#### 引用[.reference_title]
- *1* *2* [❗HTML引入JavaScript的三种常用方式汇总❗](https://blog.csdn.net/YXXXYX/article/details/120619666)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [html如何引入JavaScript代码](https://blog.csdn.net/asd3331380/article/details/121268957)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]