微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

HTML中使用js的三种方式及优缺点介绍

零下一度
发布： 2017-06-27 10:33:04
原创
3945人浏览过

 

1.内部js: 在直接在页面的<script></script>标签内写js代码

 

 

 

优点：相对于使用行内js，内部js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护

缺点：js代码仅限于当前页面的使用，代码无法被多个页面重复使用，导致代码冗余度较高

 

2.外部js: 引入外部的js文件(推荐使用)

 

 

 

 

优点：1.页面代码跟js代码实现有效分离，降低耦合度

  　　 2.便于代码的维护和扩展

          3.有利于代码的复用

 

 

3.行内js: 直接嵌套在html的语句

 

 

立即学习“前端免费学习笔记（深入）”；

造点AI
造点AI

夸克 · 造点AI

造点AI 325
查看详情 造点AI

开发中不推荐这种方式，

(1)因为这种方式跟页面结构代码耦合性太强了，后期维护很不方便，

(2)而且这种方式在开发过程中会导致产生很多的冗余代码

 

 

 

    

以上就是HTML中使用js的三种方式及优缺点介绍的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript html js

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：js写一个简单的滚动条实例代码 下一篇：vue的一些事件实例教程
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js中this的六种模式 this的指向取决于函数调用方式，共六种绑定模式：1.全局环境中this指向window（浏览器）或global（Node.js）；2.独立调用时非严格模式指向全局对象，严格模式为undefined；3.作为对象方法调用时this指向调用者；4.构造函数中this指向新创建的实例；5.显式绑定通过call、apply、bind指定this值；6.箭头函数的this继承外层作用域，不可被显式改变。关键在于调用方式而非定义位置。
2025-11-10 16:17:02
695
可靠的AWS SDK JS S3请求超时处理策略 AWSSDKforJavaScript在处理S3操作时，其内置的httpOptions.timeout可能表现出不一致性，导致请求超时设置失效或长时间挂起。本文将介绍一种更稳健的解决方案，通过结合使用AWSSDK请求对象的abort()方法与JavaScript的setTimeout函数，实现对S3请求的精确和可预测的超时控制，从而有效避免资源浪费和应用程序阻塞。
2025-11-10 16:14:25
670
React/JSX与TypeScript：解决自定义HTML标签的类型声明问题 本文详细介绍了在React/JSX项目中使用自定义HTML标签（如SliderRevolution的rs-fullwidth-wrap）时，如何解决TypeScript报告的类型错误。通过讲解declareglobal和namespaceJSX的正确用法，并提供具体代码示例，指导开发者如何为非标准DOM元素扩展JSX.IntrinsicElements接口，从而确保代码的类型安全和编译通过。
2025-11-10 16:14:03
889
自定义工具栏在全屏模式下不显示按钮的解决方案 在使用自定义工具栏并启用全屏功能时，开发者可能会遇到工具栏在进入全屏模式后消失的问题，导致无法退出全屏。本文将深入探讨这一常见UI挑战，并提供两种有效的解决方案：一是通过调整HTML结构，移除可能导致冲突的特定属性和元素；二是通过CSS样式覆盖，利用position和高z-index值确保工具栏在全屏状态下依然可见，从而恢复其功能性。
2025-11-10 16:07:02
342
JavaScript 箭头函数：this 绑定与使用场景 箭头函数的this绑定取决于定义时的上下文且不可更改，适合用于数组方法回调、异步操作和工具函数，但不应用于对象方法、事件处理或构造函数，以避免this指向错误。
2025-11-10 16:07:04
809
React组件重复渲染、Key警告与数据获取优化实践 本文旨在解决React组件在数据获取和列表渲染中常见的重复渲染、keyprop警告问题。通过深入探讨useEffect的执行机制，我们将学习如何实施条件性数据加载以避免不必要的API请求，并强调keyprop在优化列表性能和避免错误中的核心作用，确保组件的高效稳定运行。
2025-11-10 15:58:02
151
Puppeteer 自动化：可靠点击动态页面元素的策略 在使用Puppeteer进行网页自动化时，开发者常遇到因页面元素类名动态变化而导致的点击失效问题。本文旨在提供一套健壮的解决方案，通过采用更通用的元素选择器和在页面上下文中执行点击操作，有效克服这类挑战。我们将探讨如何识别稳定属性、利用page.evaluate()模拟原生点击，并结合最佳实践确保自动化脚本的稳定性和可靠性，从而提升Puppeteer脚本的适应性。
2025-11-10 15:47:01
773
PHP 表单提交：解决 $_POST 无法获取按钮点击事件的常见问题 本教程旨在解决PHP开发中$_POST无法正确接收表单提交数据，特别是按钮点击事件的问题。文章深入分析了这一常见现象的根本原因——HTML表单结构缺失，并提供了详细的解决方案。通过构建正确的结构，确保所有相关输入元素和提交按钮被包含在内，从而使PHP后端能够成功捕获并处理用户提交的数据，实现预期的业务逻辑。
2025-11-10 15:43:01
486
TypeScript在大型JavaScript项目中的类型系统设计 TypeScript类型系统提升大型项目可维护性与安全性，需明确模块边界、使用泛型增强复用性、实施严格检查并渐进迁移，保持类型一致实用。
2025-11-10 15:42:03
372
在WordPress菜单中实现链接定向到指定iframe的教程 本教程详细介绍了如何在WordPress中，通过自定义代码将菜单项链接的目标（target）属性设置为指定的iframe名称，而非默认的_blank。文章将指导您修改functions.php文件以应用nav_menu_link_attributes过滤器，并强调确保目标iframe在页面中正确存在且其name属性与链接目标匹配的关键步骤，从而实现菜单链接在特定iframe中打开。
2025-11-10 15:37:01
337
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部