详谈HTML中script标签（附代码）
详谈HTML中script标签（附代码）
不言
发布： 2018-09-06 17:32:15
原创
8675人浏览过
本篇文章给大家带来的内容是关于详谈html中script标签（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
script 元素在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素，script 元素内部的代码从上而下依次执行。
在引入多个 script 元素的时候，浏览器会按照 script 元素在页面的中的先后顺序进行解析，当上一个解析完成时，才会进行下一个 script 元素中的内容
在 HTML 中使用 Javascript 的两种方法
//第一种方法：直接在标签内使用 javascript 即可 <script> console.log('第一种使用方法'); </script> //第二种方法：引用外部文件 <script src="example.js"></script>
登录后复制
script 元素的属性script 元素比较常用的几个属性
立即学习“前端免费学习笔记（深入）”；
src：可选，用于引用外部 javascript 文件
type：可选，编写代码使用的脚本语言的类型（也成MIME类型），默认值为 text/javascript
async：可选，异步加载脚本，只对外部脚本文件有效
defer：可选，延迟脚本加载，在文档完全被解析后在执行，只对外部脚本文件有效
script 元素在 HTML 中的位置由于「Javascript」语言是一门单线程语言，在同一时间内，只能执行一个任务，所以只有当上一个任务完成之后才能进行下一个任务，因此会导致 script 元素在 HTML 中的位置不同，会表现出不同效果。
所有 script 元素都放在 元素中
这种做法意味着，我们必须等待所有的 Javascript 代码必须执行完成之后才能开始展示页面的内容，如果页面的 Javascript 代码非常多，这种方法就会导致我们看到页面的加载会非常慢，用户体验非常差，那么这么样去优化呢？其实很简单。
<!DOCTYPE html> <html> <head> <title></title> <script src="example1.js"></script> <script src="example2.js"></script> </head> <body> <div>页面的内容区域</div> </body> </html>
登录后复制
所有 script 元素都放在页面内容的后面
优化上面所说的页面加载慢的问题，只需要把我们使用的 Javascript 代码放到页面的内容之后即可，这样页面会首先加载内容然后现实出来，再去执行 Javascript 代码，这样用户就不会等待很久页面才会显示内容。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div>页面的内容区域</div> <script src="example1.js"></script> <script src="example2.js"></script> </body> </html>
登录后复制
脚本的延时加载脚本如何进行延时加载，这个就要利用 script 元素的 defer 属性，在元素使用 defer 属性时，脚本会被延迟到整个页面解析完成后在执行。
//example1.js 中的代码 //console.log('example1'); //console.log(document.getElementById('content')); //example2.js 中的代码 //console.log('example2'); //console.log(document.getElementById('content')); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script defer src="example1.js"></script> <script defer src="example2.js"></script> </head> <body> <div id="content">这里页面的内容</div> </body> </html>
登录后复制
你会发在没有加入 defer 属性时控制台会打印出如下结果
example1 null example2 null
登录后复制
当给元素加上 defer 属性时，结果会发生变化，可以发现在 p 元素的内容加载完成之后 Javascript 代码才会执行。
example1 <div id="content">这里页面的内容</div> example2 <div id="content">这里页面的内容</div>
登录后复制
脚本的异步加载脚本的异步加载，要用到 script 元素到 async 属性，它与 defer 属性类似，都是修改 script 元素的加载行为，不过 async 属性不会影响页面的其他加载，不会阻塞文档呈现，而且带有 async 属性的脚本不能保证它们执行的前后顺序，这一点与 defer 属性有着不同之处。
换句话说 example2.js 的代码可能会先于 example1.js 中的代码执行，所以在使用 async 属性时，要避免两个 js 相互依赖。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <div id="content">这里页面的内容</div> </body> </html>
登录后复制
noscript 元素早期的浏览器都会又一个问题，那就是当浏览器不支持 Javascript 语言时如何显示页面内容，为此的解决方案就是创建了一个 noscript 元素，它可以在不支持 Javascript 的浏览器中显示内容，而且只会在不支持 Javascript 的浏览器中才会显示其中的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <noscript> 当前浏览器不支持 Javascript 请更换浏览器 </noscript> </body> </html>
登录后复制
相关推荐：
script标签在HTML中的作用是什么？script标签中type属性的用法是什么？
HTML中的script标签研究_html/css_WEB-ITnose
html中的<script>标签还能链接非js文件啊_html/css_WEB-ITnose</script>
以上就是详谈HTML中script标签（附代码）的详细内容，更多请关注php中文网其它相关文章！
HTML速学教程(入门课程)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
下载
来源：php中文网
上一篇：利用HTML+CSS设计一个简单的用户注册页面【示例】 下一篇：什么是html文件？html格式如何打开？（图）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何用HTML制作一个简单的页脚？ 页脚设计指南 一个“到位”的页脚应包含版权声明、法律链接、联系方式、辅助导航、社交媒体和网站地图；1.版权声明体现专业性；2.隐私政策和服务条款等法律链接保障合规；3.联系方式或链接提升用户信任；4.辅助导航补充主菜单未涵盖的重要页面；5.社交媒体链接增强品牌互动；6.网站地图便于用户与搜索引擎查找内容；设计时需围绕“用户最后需要什么”来组织信息，避免堆砌。为实现响应式，应使用媒体查询在小屏幕上调整布局，通过Flexbox设置flex-wrap:wrap允许换行，并在屏幕宽度小于768px时改为flex-di
2025-07-31 17:02:01
HTML中的表单自动完成怎么设置？ autocomplete属性使用 HTML表单的自动完成功能通过autocomplete属性控制，1.启用整个表单自动完成使用；2.禁用整个表单使用；3.针对单个输入框设置可用或；4.使用语义化值如email、street-address、new-password等可提升自动完成精度；5.某些情况下autocomplete="off"可能被浏览器忽略，尤其在密码字段，因安全策略浏览器会优先支持密码管理器；6.自定义建议列表需结合元素与JavaScript实现；7.自动完成在提升用户体验的同时可能带来安全风险，应在敏感场景权衡启用
2025-07-31 16:59:01
如何创建HTML文件？用什么软件打开HTML格式？ 创建HTML文件需用纯文本编辑器编写符合规范的代码并保存为.html或.htm扩展名；2.打开HTML文件可用任何现代浏览器直接渲染；3.基本结构包括声明、根元素、元数据区和内容区；4.常见问题如文件扩展名错误、字符编码不匹配、路径错误、语法错误等可通过检查文件名、统一使用UTF-8编码、验证标签闭合及使用浏览器开发者工具排查；5.提升效率的方法包括使用VSCode等专业编辑器、熟练应用Emmet快捷生成代码、坚持语义化标签、保持代码格式整洁并利用开发者工具实时调试，最终实现高效且高质量的HTM
2025-07-31 16:58:01
tt标签怎么用？等宽字体文本如何设置？ 不应使用标签，因其已被废弃，现代开发应使用语义化标签如、、、来替代，并通过CSS的font-family属性设置等宽字体；2.等宽字体对代码可读性、语义识别、跨平台一致性至关重要，能确保字符对齐并提升技术内容的阅读体验；3.使用自定义等宽字体面临FOIT、FOUT等性能问题，可通过font-display:swap、字体子集化、WOFF2格式和local()检查本地字体来优化加载；4.最佳字体方案需兼顾字符区分度、行高、字号与连字支持，推荐使用包含'FiraCode'、'JetBrainsMon
2025-07-31 16:49:01
HTML文档的常见标签是什么？如何打开HTML文件？ HTML文档的核心是标签，它们定义网页结构和内容显示方式；2.打开HTML文件最直接的方式是用现代浏览器双击打开或拖入浏览器窗口，适合预览效果；3.编辑HTML文件需使用文本编辑器或IDE，如VSCode、SublimeText等，可进行代码修改；4.理解HTML标签的语义化至关重要，它提升代码可读性、可维护性，优化SEO，增强无障碍访问，为CSS和JavaScript提供更好操作基础；5.当HTML文件无法正常显示时，应检查文件扩展名是否为.html，确认资源引用路径正确，注意大小写敏感问题，
2025-07-31 16:48:01
如何调试HTML文件？用什么工具编辑HTML格式？ 调试HTML最直接有效的方式是使用浏览器开发者工具，如ChromeDevTools或Firefox开发者工具，通过F12打开后利用“Elements”面板检查DOM结构和CSS样式，确认元素是否被正确渲染、样式是否被覆盖，使用“Console”面板查看JavaScript错误或资源加载问题，通过“Network”面板排查资源404等加载失败情况；2.编辑HTML工具的选择取决于个人需求和项目复杂度，新手可从Notepad++或SublimeText等轻量编辑器入手，日常开发推荐使用功能强大且免费
2025-07-31 16:46:01
caption标签的作用？表格标题怎么定义？ 标签是HTML中为表格提供语义化标题的专用元素，必须作为的第一个子元素以确保正确的语义解析；2.与普通标题如不同，与表格具有强制性的结构关联，能被屏幕阅读器优先识别并朗读，帮助用户快速理解表格内容；3.可通过CSS对设置样式，包括使用caption-side属性控制其显示在表格上方或下方，并可通过字体、颜色、对齐等属性优化视觉呈现；4.实际使用中常见错误包括位置放错、过度装饰导致冗长、滥用在无需标题的表格上，应根据实际需要简洁准确地使用，提升可访问性和信息架构清晰度。
2025-07-31 16:45:01
HTML文档如何工作？如何编辑HTML格式文件？ 浏览器解析和渲染HTML的过程包括：1.解析HTML构建DOM树；2.结合CSS构建渲染树；3.布局计算元素位置；4.绘制像素到屏幕。编辑HTML可使用记事本、VSCode、SublimeText等文本或代码编辑器，其中VSCode因语法高亮、自动补全和插件生态成为主流选择。标准HTML5文档结构以声明开头，包含根元素，其内分为（定义元数据、标题、链接样式表等）和（存放可见内容），常用标签有-、、、、/、、、等，标签通过属性提供额外信息，内容通过成对标签或自闭合标签定义，整个机制使浏览器能准确展
2025-07-31 16:44:01
rel属性的用途是什么？链接关系怎么定义？ rel属性用于定义当前文档与链接资源之间的关系，对SEO和用户体验至关重要；1.rel="stylesheet"用于引入CSS文件，确保页面样式正确加载；2.rel="icon"指定网站图标，提升品牌识别；3.rel="canonical"解决重复内容问题，集中页面权重，避免搜索引擎收录混乱；4.rel="alternate"指向内容的替代版本，如多语言页面，助力国际化SEO；5.rel="nofollow"、rel="ugc"和rel="sponsored"分别用于标记不可信、用户生成和付费链
2025-07-31 16:43:01
怎样在HTML中插入一个邮箱链接？ 邮件链接创建方法 使用标签的href属性设置为mailto:邮箱地址即可创建邮箱链接；2.添加?subject=主题可预设邮件主题；3.使用&body=内容可预设邮件正文，特殊字符建议进行URL编码；4.通过&cc=邮箱和&bcc=邮箱可分别预填抄送和密送地址，多个地址用逗号分隔；5.需注意垃圾邮件风险、客户端兼容性及用户体验，推荐配合联系表单使用以提供备用方案，最终效果以完整句子结束。
2025-07-31 16:42:01