HTML结合CSS、JavaScript看这⼀篇就懂了
网站底部代码js特效@
⽬录
HTML结合CSS
引⼊CSS之内联式
css代码直接写在要设置样式的HTML开始标签中，如果有多条css样式代码中间⽤英⽂分号隔开。如下代码：
<p style= "color:red; font-size:12px">设置⽂本颜⾊和⼤⼩</p>
引⼊CSS之嵌⼊式
内联式css代码虽然简单，但是⼀旦需要设置的样式复杂起来，HTML代码看起来就会显得很混乱。
使⽤嵌⼊式CSS样式就可以解决这个问题。把css代码写在<style></style>标签之间。如下代码：
<style>
span{
color:green;
}
</style>
上⾯代码设置span标签内元素颜⾊为绿⾊，嵌⼊式css样式写在<head></head>标签之间。
引⼊CSS之外部式
外部css样式也称为外联式，把css代码写在⼀个单独的外部⽂件中，⽂件以“.css”为扩展名，在<head>内使⽤<link>标签将css外部⽂件链接到HTML⽂件中。如下代码：
<link href="demo.css" rel="stylesheet" type="text/css" />
1、css样式⽂件名称以有意义的英⽂字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置⼀般写在<head>标签之内。
这⾥就有个问题，为什么要把css代码放在<head></head>之间？
⾸先把css样式写在<head></head>之间是规范要求的内容。此外，这种做法可以让页⾯逐步显⽰，提⾼⽤户的体验。如果将样式代码放在⽂档底部，会使部分浏览器（包括Internet Explorer）不能逐步呈现页⾯甚⾄阻⽌渲染页⾯。所以这种做法可以防⽌⽤户收到空⽩页⾯或没有样式的内容。
三种⽅式的⽐较
介绍完CSS的三种链接⽅式，那么问题来了它们谁的优先级最⾼呢？
在权值相同的情况下，内联式 > 嵌⼊式 > 外部式。总体来讲，就是最近原则——离被设置样式元素越近优先级越⾼。所以嵌⼊式>外部式有⼀个前提：嵌⼊式css样式的位置⼀定在外部式的后⾯。既<link href="style.css" ...>代码在<style type="text/css">... </style>代码的前⾯（实际开发中也是这么写的）。
HTML结合JavaScript
引⼊JavaScript之嵌⼊式
-使⽤⼀个标签<script type="text/javascript">js代码</script>。如下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSdemo1</title>
</head>
<body>
<script type="text/javascript">
//向页⾯弹出⼀个框，显⽰内容
alert("aaaa");
</script>
</body>
</html>
引⼊JavaScript之外部式
使⽤script标签，引⼊⼀个外部的js⽂件
创建⼀个以".js"为扩展名的⽂件，然后通过<script type="text/javascript" src="demo.js"></script>引⼊外部⽂件。代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSdemo2</title>
</head>
<body>
<script type="text/javascript" src="demo.js">
//这⾥就不要写js代码了，将下⾏代码直接写在外部⽂件 demo.js 中即可
//alert("aaaa");
</script>
</body>
</html>
1、使⽤外部式Javascript时，就不要在script标签⾥⾯写js代码了，不会执⾏。
2、最好把<script>标签放在</body>之前
那么问题⼜来了，为什么<script>标签要放在</body>之前
原因是脚本在下载和执⾏期间会阻⽌HTML解析。这样做能保证HTML⾸先完成解析，将页⾯尽早呈现给⽤户。既浏览器不能开始下载脚本，直到整个⽂档（document）被解析。
总结
本⽂阐述了HTML结合CSS和Javascript代码的不同⽅式。
本⽂讨论了CSS不同链接⽅式的优先级。
本⽂给出了CSS和JS代码所置位置的解释。
同时，本⽂遗留了⼀个问题：什么是权值？让我留在再讲述吧。
参考
感谢点赞
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论