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小時內與您取得聯系。