【前端每日一问001】HTML中script标签应该写在哪个位置

简介: 【前端每日一问001】HTML中script标签应该写在哪个位置

在 HTML 中,script 标签可以用来定义 JavaScript 代码。script 标签可以被放置在 HTML 文档的不同位置,每个位置都有不同的用途和影响。下面是一些常见的 script 标签放置位置

🍁1. 在 head 中

在 head 标签中添加 script 标签是最常见的用法之一,它通常用于引入外部 JavaScript 文件或定义内>部 JavaScript 代码。在 head 中添加 script 标签会在页面加载时立即执行,但是如果脚本较大或需要>执行时间较长,它会阻塞页面的渲染哟。下面举个栗子

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script src="myScript.js"></script>
    <script>
      // some JavaScript code
    </script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

🍁2. 在 body 底部

将 script 标签放在 body 底部是一种常见的优化方式,它通常用于加速页面加载。将脚本放在 body 底部可以使页面内容先加载,然后再加载 JavaScript 代码,从而加快页面的渲染速度。此外,将脚本放在 body 底部还可以避免阻塞页面的渲染哟。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- 页面内容 -->
    <script src="myScript.js"></script>
    <script>
      // some JavaScript code
    </script>
  </body>
</html>

🍁3. 在异步加载中

异步加载脚本是一种常见的优化方式,它可以提高页面的加载速度。异步加载脚本可以使用 HTML5 的 async 或 defer 属性来实现。async 属性表示脚本可以在加载时立即执行,而不会阻塞页面的渲染。defer 属性表示脚本可以在文档解析完成后执行,而不会阻塞页面的渲染。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- 页面内容 -->
    <script src="myScript.js" async></script>
    <script src="myOtherScript.js" defer></script>
  </body>
</html>

总的来说,script 标签可以放置在 HTML 文档的不同位置,每个位置都有不同的用途和影响。在实际>开发中,应该根据具体情况选择最适合的放置位置。


8ea6575a83c54d829a8b424000672ac6.jpg

相关文章
|
17天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
42 5
|
8天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
30 1
前端基础(十七)_HTML5新特性
|
16天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
26 2
|
16天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
21 1
|
19天前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
13 2
|
19天前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
20 1
|
1月前
|
前端开发 BI
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
48 3
|
1月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
86 1
|
1月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
110 1