Nơi bao gồm css và js trong HTML

Question

Để bao gồm tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script có thuộc tính src. Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn

Nội dung chính Show

Tệp JavaScript
Bản demo đơn giản bao gồm JavaScript
JavaScript của người khác
Khung JavaScript
Kích thước tệp JavaScript
1. Cấu trúc thư mục và tệp
4. JavaScript
Làm cách nào để nhúng JavaScript và CSS vào HTML?
Tôi nên đặt CSS ở đâu trong HTML?
Tôi nên đặt JS ở đâu trong HTML?

Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn

Tệp JavaScript

Tệp JavaScript không phải là tệp HTML hoặc tệp CSS

Luôn kết thúc bằng phần mở rộng js
Chỉ bao gồm JavaScript

Theo thông lệ, đặt tất cả các tệp JavaScript vào một thư mục có tên là js trên các trang web, như vậy

Bản demo đơn giản bao gồm JavaScript

Dưới đây là minh họa rất đơn giản về cách đưa tệp JavaScript bên ngoài vào trang HTML

JavaScript của người khác

Đối với lớp này, bạn không cần phải viết bất kỳ mã JavaScript thực tế nào. Thật may mắn cho bạn, nhiều người đã viết rất nhiều JavaScript và thậm chí còn cho phép bạn sử dụng nó miễn phí

Khung JavaScript

Framework về cơ bản là một thư viện mã cho một ngôn ngữ nhất định. Nói chung, khung trừu tượng hóa các tác vụ phổ biến và giúp các nhà thiết kế và nhà phát triển viết mã cụ thể của họ dễ dàng và nhanh hơn. Các khung không thực sự tự làm bất cứ điều gì, chúng chỉ cung cấp một nền tảng dễ dàng hơn để mọi người xây dựng trên đó

Khung JavaScript phổ biến

Trong số các khung này, JQuery hiện là khung phổ biến nhất. Đó cũng là từ mà bạn muốn gặp nhất khi được sử dụng như một từ thông dụng

Kích thước tệp JavaScript

Nhiều tệp JavaScript có xu hướng khá lớn, điều này có thể làm chậm thời gian tải trang của bạn. Các khung phổ biến thường cung cấp phiên bản mã "rút gọn" của chúng. Bạn phải luôn sử dụng phiên bản này trong các trang của mình vì phiên bản này sẽ có kích thước tệp nhỏ hơn

Mục đích của hướng dẫn này là hướng dẫn bạn cách liên kết đến các tệp CSS và JavaScript trong một tệp HTML. Có thể viết CSS và JavaScript trực tiếp bên trong tài liệu HTML, nhưng nói chung tốt nhất là giữ ba ngôn ngữ này trong các tệp riêng biệt của chúng

nội dung

Cấu trúc thư mục và tệp
HTML
CSS
JavaScript

1. Cấu trúc thư mục và tệp

Bạn nên giữ các tệp HTML, CSS và JavaScript của mình trong các thư mục riêng biệt. Tạo một thư mục cho dự án của bạn có tên là css-and-js. Bên trong thư mục này, tạo thêm ba thư mục. Gọi họ là html,

<h1>If this text is red, then you successfully linked your CSS file!</h1>

0 và

<h1>If this text is red, then you successfully linked your CSS file!</h1>

1

Bên trong thư mục html của bạn, hãy tạo một tệp có tên là

<h1>If this text is red, then you successfully linked your CSS file!</h1>

3. Bên trong thư mục

<h1>If this text is red, then you successfully linked your CSS file!</h1>

0 của bạn, hãy tạo một tệp có tên

<h1>If this text is red, then you successfully linked your CSS file!</h1>

5. Và bên trong thư mục

<h1>If this text is red, then you successfully linked your CSS file!</h1>

1 của bạn, hãy tạo một tệp có tên

<h1>If this text is red, then you successfully linked your CSS file!</h1>

7

2. HTML

Để liên kết đến các tệp CSS và JavaScript của bạn, bạn sẽ cần một tài liệu HTML để làm việc trong đó. Mở

<h1>If this text is red, then you successfully linked your CSS file!</h1>

3 và nhập mã HTML sau

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Linking to CSS and JavaScript</title>
  </head>
  <body>
  </body>
</html>

Đảm bảo lưu công việc của bạn bất cứ khi nào bạn thêm mã vào tệp của mình. Trong hai phần tiếp theo, chúng tôi sẽ xem xét những gì bạn cần thêm vào tài liệu HTML của mình để liên kết với CSS và JavaScript của bạn

3. CSS

Trước tiên, bạn sẽ cần thêm nội dung nào đó vào phần nội dung HTML của mình để áp dụng kiểu dáng cho. Trên dòng tiếp theo sau thẻ mở đầu

<h1>If this text is red, then you successfully linked your CSS file!</h1>

9, thụt lề và thêm dòng sau

<h1>If this text is red, then you successfully linked your CSS file!</h1>

Như hiện tại, văn bản này sẽ xuất hiện với màu được xác định là màu gốc trong biểu định kiểu mặc định của trình duyệt – thường là màu đen. Để thay đổi màu của văn bản, hãy mở tệp

<h1>If this text is red, then you successfully linked your CSS file!</h1>

5 của bạn và thêm

h1 {  
  color: red;  
}

Bước cuối cùng trong phần này là liên kết đến tệp CSS bên trong tài liệu HTML của bạn. Nhập nội dung sau vào phần

h1 {  
  color: red;  
}

1 trên dòng sau thẻ đóng

h1 {  
  color: red;  
}

2

<link rel='stylesheet' href='../css/styles.css'>

Yếu tố

h1 {  
  color: red;  
}

3 phải được đặt trong phần

h1 {  
  color: red;  
}

1 của tài liệu. Chú ý phần tử

h1 {  
  color: red;  
}

3 là phần tử rỗng nên không cần thẻ đóng

Thuộc tính

h1 {  
  color: red;  
}

6 xác định mối quan hệ giữa tài nguyên và tài liệu HTML. Thuộc tính

h1 {  
  color: red;  
}

7 trỏ đến tệp CSS của bạn

Vì tệp nằm trong một thư mục khác nên bạn phải chỉ định đường dẫn bằng cách đi lên một thư mục bằng hai dấu chấm (

h1 {  
  color: red;  
}

8), tiếp theo là dấu gạch chéo (

h1 {  
  color: red;  
}

9), thư mục chứa tệp CSS của bạn (

<h1>If this text is red, then you successfully linked your CSS file!</h1>

0), một dấu gạch chéo khác, rồi sau đó .

<link rel='stylesheet' href='../css/styles.css'>

2

Đây là những gì tài liệu HTML của bạn sẽ trông giống như cho đến nay

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Linking to CSS and JavaScript</title>
    <link rel='stylesheet' href='../css/styles.css'>
  </head>
  <body>
    <h1>If this text is red, then you successfully linked your CSS file!</h1>
  </body>
</html>

4. JavaScript

Tiếp theo, bạn sẽ cần thêm một số mã vào tệp JavaScript của mình. Mở

<h1>If this text is red, then you successfully linked your CSS file!</h1>

7 và thêm

alert('You successfully linked your JavaScript file!');

Lưu công việc của bạn và điều hướng trở lại tài liệu HTML của bạn. Bước cuối cùng là liên kết đến tệp JavaScript bên trong tài liệu HTML của bạn. Nhập thông tin sau vào phần

<h1>If this text is red, then you successfully linked your CSS file!</h1>

9 trên dòng sau phần tử

<link rel='stylesheet' href='../css/styles.css'>

5

<script src='../javascript/script.js'></script>

Cách tốt nhất là đặt phần tử

<link rel='stylesheet' href='../css/styles.css'>

6 trong phần

<h1>If this text is red, then you successfully linked your CSS file!</h1>

9 ngay trước thẻ đóng

<link rel='stylesheet' href='../css/styles.css'>

8

Thuộc tính

<link rel='stylesheet' href='../css/styles.css'>

9 trỏ đến tệp JavaScript của bạn

Vì tệp JavaScript nằm trong một thư mục khác, bạn phải chỉ định đường dẫn trong thuộc tính

<link rel='stylesheet' href='../css/styles.css'>

9.

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Linking to CSS and JavaScript</title>
    <link rel='stylesheet' href='../css/styles.css'>
  </head>
  <body>
    <h1>If this text is red, then you successfully linked your CSS file!</h1>
  </body>
</html>

1

Đó là đoạn mã cuối cùng bạn cần nhập. Đây là giao diện của tài liệu HTML của bạn

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Linking to CSS and JavaScript</title>
    <link rel='stylesheet' href='../css/styles.css'>
  </head>
  <body>
    <h1>If this text is red, then you successfully linked your CSS file!</h1>
    <script src='../javascript/script.js'></script>
  </body>
</html>

Đảm bảo lưu công việc của bạn vào từng tệp trong số ba tệp của bạn. Bây giờ là lúc để xem các liên kết có hoạt động không. Mở tệp

<h1>If this text is red, then you successfully linked your CSS file!</h1>

3 của bạn trong trình duyệt bạn chọn. Khi bạn mở tệp trong trình duyệt của mình, trước tiên bạn sẽ gặp một hộp cảnh báo với thông báo bạn đã viết trong tệp JavaScript của mình. Sau khi nhấp vào OK, văn bản bạn đã nhập trong

<h1>If this text is red, then you successfully linked your CSS file!</h1>

9 của HTML sẽ xuất hiện màu đỏ

Nếu hộp cảnh báo không xuất hiện hoặc nếu văn bản

<h1>If this text is red, then you successfully linked your CSS file!</h1>

9 không có màu đỏ, hãy quay lại các bước trong hướng dẫn này để đảm bảo mọi thứ được nhập chính xác như được hiển thị ở đây

Làm cách nào để nhúng JavaScript và CSS vào HTML?

Chèn HTML, JS & CSS - Mã nhúng .

Trên bảng Chèn, sử dụng tùy chọn Nhúng

Chọn tab NHẬP MÃ

Nhập hoặc dán HTML, JavaScript và CSS tùy chỉnh vào hộp mã

Sử dụng nút TIẾP THEO để xem trước mã của bạn sẽ trông như thế nào

Sử dụng nút INSERT để thêm mã vào trang

Tôi nên đặt CSS ở đâu trong HTML?

CSS bên ngoài

Tôi nên đặt JS ở đâu trong HTML?

Trong HTML, mã JavaScript được chèn giữa các thẻ .

programming html

Nơi bao gồm css và js trong HTML

Tệp JavaScript

Bản demo đơn giản bao gồm JavaScript

JavaScript của người khác

Khung JavaScript

Kích thước tệp JavaScript

nội dung

1. Cấu trúc thư mục và tệp

2. HTML

3. CSS

4. JavaScript

Làm cách nào để nhúng JavaScript và CSS vào HTML?

Tôi nên đặt CSS ở đâu trong HTML?

Tôi nên đặt JS ở đâu trong HTML?

Bài Viết Liên Quan

MỚI CẬP NHẬP

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội