JavaScript代码怎样引入到HTML中？

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

、CSS引入方式（样式表）

（一）内部样式表（嵌入式）

内部样式表是写到HTML页面内部的，将所有的CSS代码抽离出来，单独放到一个<style>标签
标签理论上可以放到HTML文档的任何地方，但是一般会放在稳当的<head>标签中
此方式方便控制当前整个页面中的元素样式设置
代码结构清晰，但并没有实现结构和样式完全分离

（二）行内样式表（行内式）

<div style="color:red font-size:12px;">

行内样式表是在元素标签内部的style属性中设定CSS样式，适用于修改简单的样式
在双引号中间，写法要符合CSS规范
可以控制当前的标签设置样式
没有体现出结构与样式相分离

（三）外部样式表（链接式）

1.外部样式表的核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
2.引入外部样式表分为两步：
a.新建一个后缀名为.css样式文件，把所有css代码都放到此文件中
b.在HTML页面中，使用link标签引入这个标签

<link rel="stylesheet" href="css文件路径">

想要在一个页面引入CSS，共有以下3种方式

1、外部样式表

2、内部样式表

3、行内样式表

一、外部样式表

外部样式表是最理想的CSS引入方式，指的是CSS代码和HTML代码都单独放在不同文件种，然后在HTML文档中使用link标签引用CSS样式表

语法：

rel表示引入的是一样样式文件（即CSS文件）

type属性取值也是固定的，即"text/css"，表示这是标准的CSS

href属性表示CSS文件的路径，

举例：

在线咨询

上一篇：CSS样式第一天-基本选择器
下一篇：这 10 个技巧，助你早日精通 Vue

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。