JavaScript代码的三种引入方式【操作演示】
在网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。
行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下：
需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。
(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。
(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。
嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下：
外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下：
上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。
为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。
标签的src属性设置了要引入的文件为Example02.js。
创建Example02.js文件，在该文件中编写如下代码：
保存代码，在浏览器中访问Example02.html文件，页面效果与例1-1相同。
以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScrixt这3部分代码，这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时，推荐使用外链式。外链式相比嵌入式，具有以下3点优势：
(1)外链式存在于独立文件中，有利于修改和维护，而嵌人式会导致HTML代码与JavaScript代码混合在一起。
(2)外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件了。
(3)外链式有利于HTML页h代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。
网页设计必学：CSS四种样式引入方式及常用样式
“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
睡眠等同于希望
每次醒来都是一个新的开始
一个新的希望
– 2024.03.22 –
在Web开发的世界中，CSS（层叠样式表）是构建视觉吸引力和定义网页布局的不可或缺的工具。
掌握如何恰当地引入CSS样式以及理解它们的优先级规则，对于前端开发者来说至关重要。今天，我们就来深入探讨CSS的四种引入方式，以及选择器的优先级之谜，了解常用的CSS样式及使用方法！
CSS（层叠样式表）为网页提供了丰富的样式定义，允许开发者通过多种方式将样式应用到HTML文档中。以下是四种主要的CSS引入方式：
1.1 行内样式
这是最直接也最简单的方法，通过在HTML元素的style属性中直接编写CSS规则。
示例：
这种方式的优点是简单快捷，但缺点是它使得HTML代码与样式混合，不够纯净，且不利于样式的复用和维护。
1.2 内嵌样式
在一个HTML文档中使用<style>标签将CSS规则嵌入到HTML的head部分。这种方式适用于定义特定于某一页面的样式。
示例：
1.3 外部样式
这是最常用的方法，它通过<link>标签将外部的CSS文件链接到HTML文档中。这种方法的优势在于可以在多个页面间共享同一个样式文件，有助于保持代码的整洁和一致性。
示例：
1.4 导入样式
使用@import语句在CSS文件中导入另一个CSS文件。尽管这种方法可以分离样式表，但它通常不被推荐使用，因为其加载时序可能会影响页面渲染效率。
示例：
1.5 样式单优先级
作用域范围：外部样式表>内部样式表>行内样式表
优先级：
- 行内样式表>内部样式表>外部样式表
- 相同的样式作用在同一个标签上：就近原则；不同的样式作用在同一个标签上：叠加。
- 加载外部样式表或者内部样式表时候，需要注意加载顺序：加载html文件是从上向下加载的，也就是后面加载的样式会覆盖前面的样式。
2.1 字体样式
normal – 文字正常显示
italic – 文本以斜体显示
oblique – 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细
示例：
2.2 文本样式
color: 字体颜色
text-align: center; – – 文本对齐方式
text-decoration:none; – – 文本的线
text-shadow: pink 5px 5px 2px; – – 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】
line-height: – – 行高 （文本在标签内所占的高度）
width:
height:
border: 1px #ffffff solid; – – 盒子边框【边框粗细-颜色-边框线样式】
示例：
2.3 背景样式
width: 500px;
height: 1200px;
background-color: pink; – – 背景颜色
background-image: url(…/img/background.jpg); – – 背景图片
background-repeat: no-repeat; – – 背景图片是否平铺
background-position: left top; – – 指定背景图片的位置
background-attachment: fixed; – – 背景图片是否随着标签滚动 【fixed-固定 scroll-滚动】
示例：
2.4 列表样式
2.5 边框样式
2.6 盒子模型
所有的html元素可以看做是盒子，在css中，\”box model\”是用来设计和布局时使用。
CSS盒子模型本质是一个盒子，封装周围的html元素，它包括：边框、边距、填充、实际内容。
盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。
- margin：外边距，清除边框外区域，外边距是透明的。
- border：边框，围绕在内边距和内容外的边框。
- padding：内边距，清除内容周围区域内边距是透明的。
- content：内容，显示文字和图像。
想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想
示例：
1）盒子的宽高
元素的实际宽度和高度：
- 计算一个元素在实际在页面占据的总宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 元素实际在页面占据的总高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
2）设置宽度=元素实际宽度，box-sizing属性。
CSS的世界博大精深，以上只是冰山一角，希望通过这些基础的常用样式可以帮助你快速进入CSS世界的大门。
掌握CSS的引入方式和选择器优先级是构建高效、可维护网站的关键。通过这些知识，你可以更好地管理和优化你的样式代码，创造出既美观又专业的网页设计。现在，准备好迈入CSS的世界，开启你的创意之旅吧！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
