HTML中style标签和script标签的存放位置

最新推荐文章于 2023-10-27 22:35:57 发布
最新推荐文章于 2023-10-27 22:35:57 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： 工作总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang_guang3/article/details/103995059
版权
HTML文件自上而下执行，CSS加载不阻塞，而JS可能造成阻塞。通常，将style标签置于head中，script标签置于body底部，避免延迟页面渲染。若需提前执行JS，可将其放在相关DOM元素之后，或使用jQuery的$(function(){}),确保DOM加载完毕再执行。" 89219003,1394517,Elasticsearch入门：倒排索引原理与实现,"['Elasticsearch', '搜索技术', '数据索引', '分布式', '数据库']
摘要由CSDN通过智能技术生成

       html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。

       其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。

       其实还有另外一种方法，那就是用jquery的初始化页面方法，把上面给标签添加的点击事件加入到$(function(){})中也是可以的，原理和上面是一样的，这个方法是等页面加载好了才执行，所以不管放在哪都可以了！

结论：

       依据个人经验，将<style>对应的标签放到html对应的<head>标签中；<script>对应的标签放到<body>标签之后。<

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Rsun04551
关注
专栏目录
订阅专栏
HTML（一）：行级标签、块级标签、其他标签
m0_50134014的博客
10-23 1838
这里写目录标题一、HTML1.1 HTML概述1.1.1 HTML是什么1.1.2 HTML基本结构1.1.3 HTML语法细节1.2 字体标签1.2.1 Font标签1.2.2 标题标签1.2.3 特殊字符1.2.4 颜色表示1.3 列表标签1.3.1 定义列表1.3.2 有序列表1.3.3 无序列表1.4 图像1.4.1 Img1.4.2 Map1.5 超链接1.5.1 超链接概述1.5.2 链接资源1.5.3 定位标记1.6 表格1.6.1 table1.6.2 caption1.6.3 TBODY、
javascript、style在html中的位置
cxy_zj97的博客
07-27 1632
html基础 js位置 在head标签中写js 但是影响页面加载速度，等待js加载完毕进行页面渲染 <head> <script type="text/javascript" src="file1.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> 在body标签中写js 为了尽量减少对整个页面
script标签位置
weixin_43862596的博客
06-04 122
script标签的位置 JS在HTML中放的位置 script标签到底该放在哪 HTML中style标签和script标签的存放位置
html中style布局放哪,CSS样式表与格式布局详解
weixin_42124743的博客
06-17 1430
样式表CSS(Cascading Style Sheets 层叠样式表)，作用是美化HTML网页。内联样式表： 例：内联样式表内嵌样式表：必须写在head标签里例：p{ 样式;}hei外部样式表：新建一个CSS文件用来放置样式表 在HTML中 右键--CSS样式--附加样式表例：*{ margin:0px; padding:0px;} //网页边距为0像素 字体间距为0像素.mian /...
html页面标签顺序
qq_53120043的博客
07-08 368
由于标签顺序摆放错误，导致引用了vue却无法生效
script 标签到底该放在哪里
愿我如星君如月 ... 夜夜流光相皎洁 ...
11-09 583
一般script标签会被放在头部或尾部。头部就是&lt;head&gt;里面，尾部一般指&lt;body&gt;里。 将script放在&lt;head&gt;里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。 讨厌的是浏览器在下载JS时，是不能多个JS并发一起下载的。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS...
详解HTML5中的<template>标签
09-28
2. **位置任意性**：`<template>`标签的另一个优势是它可以放置在HTML文档的任何位置，如同`<script>`和`<style>`标签，既可以在`<head>`中，也可以在`<body>`或`<frameset>`中。这种灵活性允许开发者根据需要自由...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6390
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
前端 学习笔记2 标签
Neflibata_mo的博客
04-11 440
1. HTML语法规范 1.1 基本语法概述 HTML标签是由尖括号包围的关键词 所有的标签都包含在 <> 中，大部分情况下是成对出现的。 双标签： <html></html> 前面的叫开始标签，后面的叫结束标签。（结束标签有 / ) 单标签： <br /> 1.2 标签关系 双标签关系可分为：包含关系 并列关系 包含关系: <head> <title> </title> </head> 并
<script>标签书写位置
心若无尘
09-03 9043
今天在使用标签时，发现了一个问题，同样的代码在
关于script在页面的最佳位置以及html执行顺序
LeoSong121的博客
09-17 3206
首先需要知道： html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到&lt;script&gt;脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。 　　　　所以，大部分网上讨论是将script脚本放在&lt;body&gt;之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，...
HTML语言注释的格式为,HTML注释代码在style和script标签中的作用及用法
weixin_42165018的博客
05-30 1025
html注释代码，通常是用来掺入一段注释说明文字，以便以后对代码进行编辑修改、屏蔽等工作！但今天，要介绍的是html注释代码在style和script标签中的作用及用法。html注释代码在style标签中的用法语法格式：以上注释代码并不能屏蔽CSS样式的效果，要想屏蔽CSS样式效果，请使用/* 注释内容区 */示例演示：html>html注释代码在style标签中的作用和用法刘代码博客示...
html中的样式写在什么位置,css样式放在哪里？
weixin_39636691的博客
06-04 5794
css(Cascading Style Sheets，层叠样式表)，它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语言。CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号...
HTML ＜style＞ 标签
weixin_50662941的博客
09-21 3643
HTML <style> 标签 什么是<style> 标签？ <style> 标签用于为 HTML 文档定义样式信息。 在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。 style 元素位于 head 部分中。 实例 <!DOCTYPE html> <html> <head> <meta charset=“utf‐8”> <title>xinbiancheng.cn </title&g
JavaScript前端代码规范
q_qman的博客
03-15 1176
HTML篇 #1. 标准模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <lin
关于script标签在HTML代码页面的放置位置的个人理解
最新发布
m0_62407354的博客
10-27 857
在HTML页面中，<script>标签可以放在<head>标签中，也可以放在<body>标签中，甚至可以放在<body>标签的底部。具体放哪里取决于你的需求和使用的JavaScript库或框架。
正则 匹配html、style、script，获取文本内容 java
Fzhuzhu的博客
09-20 979
4、注意：html匹配替换必须在style和script之后。
HTML、CSS与JavaScript语法完全指南
`<HEAD>`标签用于存放元信息，如页面标题、字符编码等，而`<BODY>`标签则包含了用户在浏览器中看到的所有内容。 HTML文件的基本结构如下： ```html <!DOCTYPE html> <html> 网页标题 <!-- 其他头部信息 --> ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rsun04551

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值