JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 內(nèi)聯(lián)形式：通過 script 標(biāo)簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過 <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨(dú)立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么標(biāo)簽的代碼會被忽略！！！如下代碼所示：

、CSS引入方式（樣式表）

（一）內(nèi)部樣式表（嵌入式）

內(nèi)部樣式表是寫到HTML頁面內(nèi)部的，將所有的CSS代碼抽離出來，單獨(dú)放到一個(gè)<style>標(biāo)簽
標(biāo)簽理論上可以放到HTML文檔的任何地方，但是一般會放在穩(wěn)當(dāng)?shù)?lt;head>標(biāo)簽中
此方式方便控制當(dāng)前整個(gè)頁面中的元素樣式設(shè)置
代碼結(jié)構(gòu)清晰，但并沒有實(shí)現(xiàn)結(jié)構(gòu)和樣式完全分離

（二）行內(nèi)樣式表（行內(nèi)式）

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

行內(nèi)樣式表是在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定CSS樣式，適用于修改簡單的樣式
在雙引號中間，寫法要符合CSS規(guī)范
可以控制當(dāng)前的標(biāo)簽設(shè)置樣式
沒有體現(xiàn)出結(jié)構(gòu)與樣式相分離

（三）外部樣式表（鏈接式）

1.外部樣式表的核心是樣式單獨(dú)寫到CSS文件中，之后把CSS文件引入到HTML頁面中使用
2.引入外部樣式表分為兩步：
a.新建一個(gè)后綴名為.css樣式文件，把所有css代碼都放到此文件中
b.在HTML頁面中，使用link標(biāo)簽引入這個(gè)標(biāo)簽

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

想要在一個(gè)頁面引入CSS，共有以下3種方式

1、外部樣式表

2、內(nèi)部樣式表

3、行內(nèi)樣式表

一、外部樣式表

外部樣式表是最理想的CSS引入方式，指的是CSS代碼和HTML代碼都單獨(dú)放在不同文件種，然后在HTML文檔中使用link標(biāo)簽引用CSS樣式表

語法：

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

type屬性取值也是固定的，即"text/css"，表示這是標(biāo)準(zhǔn)的CSS

href屬性表示CSS文件的路徑，

舉例：

在線咨詢

上一篇：CSS樣式第一天-基本選擇器
下一篇：這 10 個(gè)技巧，助你早日精通 Vue

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。