⽹站开发（⼊门篇⼆）-html引⼊css、js代码
css 内联样式/内部样式表/外部样式表
js 内嵌脚本/外部引⼊
开发中的⼀些⼩细节
index.html
<!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">
<link rel="stylesheet" href="index.css">
<script src="index.js" type="text/javascript"></script>
<title>html如何引⼊css和js</title>
<style>
css样式表优先级最高
p {
background-color: #909399;
border-radius: 15px;
padding: 8px 12px;
box-shadow: 0 0 1px #C0C4CC;
width: 150px;
color: #fff;
}
</style>
</head>
<body>
<p >这是我的P标签</p>
</body>
<script type="text/javascript">
alert('这是我的内嵌脚本')
alert(a)
</script>
</html>
index.css
p{
font-size: 32px;
background-color: aqua;
}
index.js
alert('这是外部引⼊脚本')
var a=1
创建⼀个html基本模板代码
CSS
内联样式标签上添加style属性，并添加样式即可，多个样式⽤分号";"隔开⾸先我们创建⼀对<p></p>标签，内容为：这是我的P标签我们页⾯会如下显⽰当我们对⽂字进⾏加粗、字体颜⾊变红，代码如下 <p >这是我的P标签</p>
内部样式表贴出全部代码<style> p{ background-color: #909399; border-radius: 15px; padding: 8px 12px; box-shadow:0 0 1px #C0C4CC; width: 150px; color: #fff; } </style> 在<head></head>标签或<body></body>内都可以通过添加标签<style></style>然后添加内部样式表<p></p>设置背景⾊、圆⾓边框、内填充、阴影、宽度以及颜⾊（颜⾊是设置⽆效的下⾯讲）效果如下之所以我们在内部样式表中对p标签设置颜⾊不起作⽤是因为，样式的优先级问题。内联式 > 嵌⼊式 > 外部式外部样式表外部样式表是指引⽤外部的css资源⽂件，可能来源于本地的⽂件，也可以来⾃外部的⽹络资源，引⼊⽅式：<link rel="stylesheet" href="style.css"> 我们在当前⽂件夹创建⼀个index.css⽂件，并对p标签进⾏字体⼤⼩、背景颜⾊进⾏控制，代码如下我们可以看到字体⼤⼩是作⽤上的，但是我们的背景颜⾊没有被作⽤，这也是上⾯说的优先级问题。
CSS⼩知识注意⾏内联样式/内部样式表/外部样式表的优先级问题，内联>内部样式>外部样式选择器的合理运⽤，css选择器有很多，⽐如我们⽤到的p 就是标签选
择器，常⽤的选择器有类选择器、id选择器、标签选择器，具体使⽤⽅式可以搜索css选择器这⾥不过多阐述
js
html中脚本其实不⽌js⼀种，⽽且还有vbscript但是我们常⽤在html中就是js脚本，在创建脚本时通过<script></script>标签创建和引⽤
内嵌脚本
只需要在<script></script>内部编写具体脚本即可，script标签有⼀个type指定脚本类型
外部引⼊
只需要在标签的src属性添加引⽤的地址即可
<script src="index.js" type="text/javascript"></script>
注意 js引⼊不像css引⼊涉及到优先级问题，⽽它在乎的是⽂件加载引⽤顺序⽐如：我内嵌代码弹出警告框alert('这是我的内嵌脚本') 外部引⼊则：alert('这是外部引⼊脚本') ⽽页⾯的效果是效果图所⽰，先加载的外部⽂件、再加载的内嵌代码，这是script标签的先后顺序，html⽂档是按照⽂件的先后顺序进⾏加载，所以开发中请注意这个问题
js⽂件代码因为加载顺序，所以也是可以访问到其他⽂件的变量，⽐如我在index.js声明变量var a=1我们再内嵌脚本输出alert(a)
效果如下
我们可以看到和我们讲的⼀样，我们就可以通过这个原理去实现更复杂的js脚本模块化编写，这⾥不再
阐述
1. 注意样式优先级问题
2. 注意脚本⽂件加载顺序问题，⽐如优先将公共脚本⽂件放在<head></head>标签内，⽽对于过多的脚本我们应该放在<body></body>句末
3.在外部引⽤的时候，如果你修改了外部⽂件的代码，结果刷新页⾯并没有发⽣改变，是因为浏览器对你的⽂件进⾏了缓存（asp中js⽂件很有体现），这时候我
们在引⼊地址后⾯加上?v=随便的数字指定⽂件版本，浏览器会重新获取⽂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html如何引⼊css和js</title>
<style>
p {
width: 150px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<p>这是我的P标签</p>
</body>
</html>
A. 标签<p></p>的最后宽度为150px
B. 标签<p></p>的最后宽度为500px
C. 脚本代码不到width属性，并报错
D. 脚本代码不到style属性，并报错
E. 脚本语法错误

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。