| 第一种 | 第二种 | 第三种 | |
| CSS | 行内式 | 嵌入式 | 链接式 |
| JS | 行内式 | 嵌入式 | 外部式 |
一、CSS的引入方式
按照 CSS 书写的位置不同，CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。
<div style="color: red; font-size: 12px">行内样式表</div>- 设置当前标签样式
- 书写繁琐，不推荐大量使用。
内部样式表
将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。
<style>理论上可以放在 HTML 文档中任何一个地方，一般放在<head>标签中。- 方便控制整个页面中的元素样式。
<style>
p {
color: pink;
border: blue 1px solid;
}
</style>练习时使用，实际开发不用。
外部样式表
实际开发中都是外部样式表，适用于样式比较多的情况。 核心：样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中。
引入格式
<link rel="stylesheet" href="css文件路径" />二、 JS的引入方式
JS有3种书写位置，分别为行内、内嵌和外部
行内式
<input type="button" value="click" onclick="alert('Hello, world!')">- 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性） ，如： onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号。
- 可读性差，在html中编写JS大量代码时，不方便阅读；引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
内嵌式
<script>
alert("Hello world!");
</script>
学习时常用。
外部JS文件
<script src="newFile.js"></script>
- 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
- ==引用外部JS文件的script标签中间不可写代码==
- 适合于JS代码量比较大的情况
本文含有隐藏内容，请 开通VIP 后查看