Thêm thẻ liên kết vào đầu javascript

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

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>

6. Bạn đã sử dụng thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>

6 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
Làm cách nào để liên kết JavaScript trong đầu?
Làm cách nào để thêm thẻ liên kết trong JavaScript?
Thẻ liên kết có phải ở trong đầu không?
Bạn có thể sử dụng thẻ liên kết cho JavaScript không?

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

Để tránh các thẻ trùng lặp trong

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>

8, bạn có thể sử dụng thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>

9, thuộc tính này sẽ đảm bảo thẻ chỉ được hiển thị một lần, như trong ví dụ sau

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

Trong trường hợp này, chỉ có

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

0 thứ hai được hiển thị. Các thẻ

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

1 có thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>

9 trùng lặp được xử lý tự động

Nội dung của
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>
8 sẽ bị xóa khi ngắt kết nối thành phần, vì vậy hãy đảm bảo rằng mỗi trang xác định đầy đủ những gì nó cần trong
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>
8 mà không đưa ra các giả định về những gì các trang khác đã thêm vào

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

0,

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

1 hoặc bất kỳ yếu tố nào khác (e. g.

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

2) cần được chứa dưới dạng phần tử con trực tiếp của phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

3 hoặc được gói gọn trong tối đa một cấp độ của

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

0 hoặc mảng—nếu không, các thẻ sẽ không được chọn chính xác trên điều hướng phía máy khách

Phần đầu của tài liệu HTML là phần không được hiển thị trong trình duyệt web khi trang được tải. Nó chứa thông tin chẳng hạn như trang

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

4, liên kết đến CSS (nếu bạn chọn tạo kiểu cho nội dung HTML của mình bằng CSS), liên kết đến biểu tượng yêu thích tùy chỉnh và siêu dữ liệu khác (dữ liệu về HTML, chẳng hạn như tác giả và các từ khóa quan trọng mô tả . Trình duyệt web sử dụng thông tin có trong phần đầu để hiển thị chính xác tài liệu HTML. Trong bài viết này, chúng tôi sẽ đề cập đến tất cả những điều trên và hơn thế nữa, nhằm cung cấp cho bạn cơ sở tốt để làm việc với mã đánh dấu

điều kiện tiên quyết. Làm quen với HTML cơ bản, như được trình bày trong Bắt đầu với HTML. Khách quan. Để tìm hiểu về phần đầu HTML, mục đích của nó, các mục quan trọng nhất mà nó có thể chứa và tác dụng của nó đối với tài liệu HTML

Hãy xem lại đơn giản

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test pagetitle>
  head>
  <body>
    <p>This is my pagep>
  body>
html>

Phần đầu HTML là nội dung của phần tử

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

5. Không giống như nội dung của phần tử

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

6 (được hiển thị trên trang khi được tải trong trình duyệt), nội dung của phần đầu không được hiển thị trên trang. Thay vào đó, công việc của phần đầu là chứa siêu dữ liệu về tài liệu. Trong ví dụ trên, đầu khá nhỏ

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

Tuy nhiên, trong các trang lớn hơn, phần đầu có thể khá lớn. Hãy thử truy cập một số trang web yêu thích của bạn và sử dụng các công cụ dành cho nhà phát triển để xem nội dung chính của chúng. Mục đích của chúng tôi ở đây không phải là chỉ cho bạn cách sử dụng mọi thứ có thể được đưa vào đầu, mà là hướng dẫn bạn cách sử dụng các yếu tố chính mà bạn muốn đưa vào đầu và giúp bạn làm quen. Bắt đầu nào

Chúng ta đã thấy phần tử

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

4 đang hoạt động — phần tử này có thể được sử dụng để thêm tiêu đề vào tài liệu. Tuy nhiên, điều này có thể bị nhầm lẫn với phần tử

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

8, được sử dụng để thêm tiêu đề cấp cao nhất vào nội dung cơ thể của bạn — điều này đôi khi còn được gọi là tiêu đề trang. Nhưng chúng là những thứ khác nhau

Phần tử
```
<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>
```
8 xuất hiện trên trang khi được tải trong trình duyệt — thông thường phần tử này nên được sử dụng một lần trên mỗi trang, để đánh dấu tiêu đề nội dung trang của bạn (tiêu đề câu chuyện hoặc tiêu đề tin tức hoặc bất kỳ thứ gì phù hợp với cách sử dụng của bạn. )
Phần tử
```
<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>
```
4 là siêu dữ liệu đại diện cho tiêu đề của toàn bộ tài liệu HTML (không phải nội dung của tài liệu. )

Để bắt đầu quá trình học tích cực này, chúng tôi muốn bạn truy cập kho lưu trữ GitHub của chúng tôi và tải xuống bản sao ví dụ tiêu đề của chúng tôi. trang html. Để làm điều này, hoặc
1. Sao chép và dán mã ra khỏi trang và vào một tệp văn bản mới trong trình chỉnh sửa mã của bạn, sau đó lưu mã vào một nơi hợp lý
2. Nhấn nút "Thô" trên trang GitHub để mã thô xuất hiện (có thể trong tab trình duyệt mới). Tiếp theo, chọn menu Lưu trang dưới dạng… của trình duyệt của bạn và chọn một nơi hợp lý để lưu tệp
Bây giờ hãy mở tệp trong trình duyệt của bạn. Bạn sẽ thấy một cái gì đó như thế này.
Bây giờ hoàn toàn rõ ràng nơi nội dung
```
<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>
```
8 xuất hiện và nơi nội dung
```
<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>
```
4 xuất hiện.
Bạn cũng nên thử mở mã trong trình chỉnh sửa mã của mình, chỉnh sửa nội dung của các thành phần này, sau đó làm mới trang trong trình duyệt của bạn. Có một số niềm vui với nó

Nội dung phần tử

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

4 cũng được sử dụng theo những cách khác. Ví dụ: nếu bạn thử đánh dấu trang (Dấu trang > Đánh dấu trang này hoặc biểu tượng ngôi sao trên thanh URL trong Firefox), bạn sẽ thấy nội dung

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

4 được điền dưới dạng tên dấu trang được đề xuất

Nội dung của

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

4 cũng được sử dụng trong kết quả tìm kiếm, như bạn sẽ thấy bên dưới

Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

96 element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

96 elements that can be included in your page's , but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.

Trong ví dụ chúng ta đã thấy ở trên, dòng này được bao gồm

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

9

Phần tử này chỉ định mã hóa ký tự của tài liệu — bộ ký tự mà tài liệu được phép sử dụng.

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

98 là một bộ ký tự phổ quát bao gồm hầu hết mọi ký tự từ bất kỳ ngôn ngữ nào của con người. Điều này có nghĩa là trang web của bạn sẽ có thể hiển thị bất kỳ ngôn ngữ nào; . Ví dụ: trang của bạn có thể xử lý tốt tiếng Anh và tiếng Nhật

Ví dụ: nếu bạn đặt mã hóa ký tự thành

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

99 (bộ ký tự cho bảng chữ cái Latinh), kết xuất trang của bạn có thể bị rối

Ghi chú. Một số trình duyệt (như Chrome) tự động sửa mã hóa không chính xác, do đó, tùy thuộc vào trình duyệt bạn sử dụng, bạn có thể không gặp sự cố này. Dù sao thì bạn vẫn nên đặt mã hóa

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

98 trên trang của mình để tránh bất kỳ sự cố tiềm ẩn nào trong các trình duyệt khác

Để thử điều này, hãy xem lại mẫu HTML đơn giản mà bạn đã nhận được trong phần trước trên

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

4 (tiêu đề-ví dụ. html), hãy thử thay đổi giá trị bộ ký tự meta thành

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

99 và thêm tiếng Nhật vào trang của bạn. Đây là mã chúng tôi đã sử dụng

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

7

Nhiều phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

96 bao gồm các thuộc tính

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

74 và

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

75

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

74 chỉ định loại phần tử meta của nó;

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

75 chỉ định nội dung meta thực tế

Hai phần tử meta hữu ích để đưa vào trang của bạn sẽ xác định tác giả của trang và cung cấp mô tả ngắn gọn về trang. Hãy xem một ví dụ

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

3

Chỉ định một tác giả có lợi theo nhiều cách. thật hữu ích khi có thể hiểu ai đã viết trang này, nếu bạn có bất kỳ câu hỏi nào về nội dung và bạn muốn liên hệ với họ. Một số hệ thống quản lý nội dung có các phương tiện để tự động trích xuất thông tin tác giả trang và cung cấp thông tin đó cho các mục đích đó

Việc chỉ định mô tả bao gồm các từ khóa liên quan đến nội dung trang của bạn rất hữu ích vì nó có khả năng làm cho trang của bạn xuất hiện cao hơn trong các tìm kiếm có liên quan được thực hiện trong các công cụ tìm kiếm (các hoạt động như vậy được gọi là Tối ưu hóa Công cụ Tìm kiếm hoặc SEO. )

Mô tả cũng được sử dụng trên các trang kết quả của công cụ tìm kiếm. Chúng ta hãy đi qua một bài tập để khám phá điều này

Chuyển đến trang đầu của Mạng nhà phát triển Mozilla
Xem nguồn của trang (nhấp chuột phải vào trang, chọn Xem nguồn trang từ menu ngữ cảnh. )

Tìm thẻ meta mô tả. Nó sẽ giống như thế này (mặc dù nó có thể thay đổi theo thời gian)

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

4

Bây giờ hãy tìm kiếm "MDN Web Docs" trong công cụ tìm kiếm yêu thích của bạn (Chúng tôi đã sử dụng Google. ) Bạn sẽ nhận thấy nội dung phần tử mô tả

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

96 và

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

4 được sử dụng trong kết quả tìm kiếm — chắc chắn đáng để có.

Ghi chú. Trong Google, bạn sẽ thấy một số trang con có liên quan của MDN Web Docs được liệt kê bên dưới liên kết trang chủ chính — những trang này được gọi là liên kết trang web và có thể định cấu hình trong công cụ quản trị trang web của Google — một cách giúp cải thiện kết quả tìm kiếm trên trang web của bạn trong công cụ tìm kiếm của Google

Ghi chú. Nhiều tính năng của

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

96 không còn được sử dụng nữa. Ví dụ: phần tử từ khóa

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

96 (

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

32) — được cho là cung cấp từ khóa cho các công cụ tìm kiếm để xác định mức độ liên quan của trang đó đối với các cụm từ tìm kiếm khác nhau — bị các công cụ tìm kiếm bỏ qua, vì những kẻ gửi thư rác chỉ lấp đầy danh sách từ khóa bằng hàng trăm từ khóa,

Khi bạn di chuyển trên web, bạn cũng sẽ tìm thấy các loại siêu dữ liệu khác. Rất nhiều tính năng bạn sẽ thấy trên các trang web là sáng tạo độc quyền, được thiết kế để cung cấp cho một số trang nhất định (chẳng hạn như trang mạng xã hội) những mẩu thông tin cụ thể mà họ có thể sử dụng

Ví dụ: Open Graph Data là một giao thức siêu dữ liệu mà Facebook đã phát minh ra để cung cấp siêu dữ liệu phong phú hơn cho các trang web. Trong mã nguồn MDN Web Docs, bạn sẽ tìm thấy điều này

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

0

Một ảnh hưởng của việc này là khi bạn liên kết tới MDN Web Docs trên Facebook, liên kết sẽ xuất hiện cùng với hình ảnh và mô tả. trải nghiệm phong phú hơn cho người dùng

Twitter cũng có siêu dữ liệu độc quyền tương tự của riêng mình được gọi là Thẻ Twitter, có tác dụng tương tự khi URL của trang web được hiển thị trên twitter. com. Ví dụ

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

1

Để làm phong phú hơn nữa thiết kế trang web của bạn, bạn có thể thêm các tham chiếu đến các biểu tượng tùy chỉnh trong siêu dữ liệu của mình và những biểu tượng này sẽ được hiển thị trong các ngữ cảnh nhất định. Được sử dụng phổ biến nhất trong số này là favicon (viết tắt của "biểu tượng yêu thích", đề cập đến việc sử dụng nó trong danh sách "yêu thích" hoặc "dấu trang" trong trình duyệt)

Favicon khiêm tốn đã tồn tại trong nhiều năm. Đây là biểu tượng đầu tiên của loại này. biểu tượng hình vuông 16 pixel được sử dụng ở nhiều nơi. Bạn có thể thấy các biểu tượng yêu thích (tùy thuộc vào trình duyệt) được hiển thị trong tab trình duyệt chứa từng trang đang mở và bên cạnh các trang được đánh dấu trang trong bảng dấu trang

Một biểu tượng yêu thích có thể được thêm vào trang của bạn bằng cách

Lưu nó trong cùng thư mục với trang chỉ mục của trang web, được lưu ở định dạng

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

33 (hầu hết cũng hỗ trợ favicon ở các định dạng phổ biến hơn như

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

34 hoặc

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

35)

Thêm dòng sau vào khối

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

5 của HTML để tham chiếu nó

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

6

Dưới đây là một ví dụ về biểu tượng yêu thích trong bảng dấu trang

Ngày nay cũng có rất nhiều loại biểu tượng khác để xem xét. Ví dụ: bạn sẽ tìm thấy điều này trong mã nguồn của trang chủ MDN Web Docs

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

7

Các nhận xét giải thích mục đích sử dụng của từng biểu tượng — những yếu tố này bao gồm những thứ như cung cấp biểu tượng có độ phân giải cao đẹp mắt để sử dụng khi trang web được lưu vào màn hình chính của iPad

Đừng lo lắng quá nhiều về việc triển khai tất cả các loại biểu tượng này ngay bây giờ — đây là một tính năng khá nâng cao và bạn sẽ không cần phải có kiến thức về điều này để hoàn thành khóa học. Mục đích chính ở đây là để cho bạn biết những thứ đó là gì, trong trường hợp bạn bắt gặp chúng khi duyệt mã nguồn của các trang web khác

Ghi chú. Nếu trang web của bạn sử dụng Chính sách bảo mật nội dung (CSP) để tăng cường bảo mật thì chính sách này sẽ áp dụng cho biểu tượng yêu thích. Nếu bạn gặp sự cố với biểu tượng yêu thích không tải, hãy xác minh rằng chỉ thị

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

38 của tiêu đề

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    




)
}
export default IndexPage

37 không ngăn chặn quyền truy cập vào nó

Gần như tất cả các trang web bạn sẽ sử dụng trong thời hiện đại sẽ sử dụng CSS để làm cho chúng trông bắt mắt và JavaScript để hỗ trợ chức năng tương tác, chẳng hạn như trình phát video, bản đồ, trò chơi, v.v. Chúng được áp dụng phổ biến nhất cho một trang web sử dụng phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

39 và phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

40 tương ứng

Phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

39 phải luôn nằm trong phần đầu của tài liệu của bạn. Điều này có hai thuộc tính,

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

42, chỉ ra rằng đó là biểu định kiểu của tài liệu và

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

43, chứa đường dẫn đến tệp biểu định kiểu

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

0

Phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

40 cũng phải đi vào phần đầu và phải bao gồm thuộc tính

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

45 chứa đường dẫn đến JavaScript mà bạn muốn tải và

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

46, về cơ bản hướng dẫn trình duyệt tải JavaScript sau khi trang hoàn tất phân tích cú pháp HTML. Điều này hữu ích vì nó đảm bảo rằng tất cả HTML đã được tải trước khi JavaScript chạy, do đó bạn không gặp phải lỗi do JavaScript cố truy cập vào phần tử HTML chưa tồn tại trên trang. Thực tế, có một số cách để xử lý việc tải JavaScript trên trang của bạn, nhưng đây là cách đáng tin cậy nhất để sử dụng cho các trình duyệt hiện đại (đối với các trình duyệt khác, hãy đọc)

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

1

Ghi chú. Phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

40 có thể trông giống như một phần tử void, nhưng không phải vậy, và do đó cần có thẻ đóng. Thay vì trỏ đến tệp tập lệnh bên ngoài, bạn cũng có thể chọn đặt tập lệnh của mình bên trong phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

40

Để bắt đầu quá trình học tích cực này, hãy lấy một bản sao siêu ví dụ của chúng tôi. html, kịch bản. js và phong cách. css và lưu chúng trên máy tính cục bộ của bạn trong cùng thư mục. Đảm bảo rằng chúng được lưu với tên và phần mở rộng tệp chính xác
Mở tệp HTML trong cả trình duyệt và trình soạn thảo văn bản của bạn

Bằng cách làm theo thông tin được cung cấp ở trên, hãy thêm các phần tử

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

39 và

import Head from 'next/head'

function IndexPage() {
  return (
    
      
        My page title
        
      
      
        
      
      
Hello world!
    
  )
}

export default IndexPage

40 vào HTML của bạn để CSS và JavaScript của bạn được áp dụng cho HTML của bạn

Nếu được thực hiện đúng, khi bạn lưu HTML và làm mới trình duyệt của mình, bạn sẽ có thể thấy rằng mọi thứ đã thay đổi

JavaScript đã thêm một danh sách trống vào trang. Bây giờ khi bạn nhấp vào bất kỳ đâu bên ngoài danh sách, một hộp thoại sẽ bật lên yêu cầu bạn nhập một số văn bản cho một mục danh sách mới. Khi bạn nhấn nút OK, một mục danh sách mới sẽ được thêm vào danh sách chứa văn bản. Khi bạn nhấp vào một mục danh sách hiện có, một hộp thoại sẽ bật lên cho phép bạn thay đổi văn bản của mục đó
CSS đã làm cho nền có màu xanh lục và văn bản trở nên to hơn. Nó cũng đã tạo kiểu cho một số nội dung mà JavaScript đã thêm vào trang (thanh màu đỏ có viền đen là kiểu mà CSS đã thêm vào danh sách do JS tạo. )

Ghi chú. Nếu bạn gặp khó khăn trong bài tập này và không thể áp dụng CSS/JS, hãy thử xem css-and-js của chúng tôi. trang ví dụ html

Cuối cùng, điều đáng nói là bạn có thể (và thực sự nên) đặt ngôn ngữ cho trang của mình. Điều này có thể được thực hiện bằng cách thêm thuộc tính lang vào thẻ HTML mở (như đã thấy trong siêu ví dụ. html và hiển thị bên dưới. )

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

2

Điều này hữu ích theo nhiều cách. Tài liệu HTML của bạn sẽ được các công cụ tìm kiếm lập chỉ mục hiệu quả hơn nếu ngôn ngữ của nó được đặt (ví dụ: cho phép nó xuất hiện chính xác trong các kết quả dành riêng cho ngôn ngữ) và nó hữu ích cho những người khiếm thị sử dụng trình đọc màn hình (ví dụ: từ . )

Bạn cũng có thể đặt các phần phụ của tài liệu của mình được nhận dạng là các ngôn ngữ khác nhau. Ví dụ: chúng tôi có thể đặt phần ngôn ngữ tiếng Nhật của mình được công nhận là tiếng Nhật, như vậy

<head>
  <meta charset="utf-8" />
  <title>My test pagetitle>
head>

3

Các mã này được xác định theo tiêu chuẩn ISO 639-1. Bạn có thể tìm hiểu thêm về chúng trong thẻ Ngôn ngữ trong HTML và XML

Điều đó đánh dấu sự kết thúc chuyến tham quan nhanh của chúng tôi về đầu HTML — còn nhiều điều bạn có thể làm ở đây, nhưng một chuyến tham quan toàn diện sẽ nhàm chán và khó hiểu ở giai đoạn này và chúng tôi chỉ muốn cung cấp cho bạn ý tưởng về những điều phổ biến nhất . Trong bài viết tiếp theo, chúng ta sẽ xem xét các nguyên tắc cơ bản về văn bản HTML

Làm cách nào để liên kết JavaScript trong đầu?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với 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. Thẻ tập lệnh này phải được bao gồm giữa các thẻ

Làm cách nào để thêm thẻ liên kết trong JavaScript?

Làm cách nào để tạo liên kết trong JavaScript? . var a = tài liệu. .

Create an anchor element..

Tạo một nút văn bản với một số văn bản sẽ hiển thị dưới dạng liên kết

Append the text node to the anchor element..

Set the title and href property of the element..

Append element in the body..

Thẻ liên kết có phải ở trong đầu không?

Phần tử . Ví dụ: loại liên kết biểu định kiểu là body-ok và do đó

Bạn có thể sử dụng thẻ liên kết cho JavaScript không?

Có, bạn có thể tìm nạp trước/tải trước javascript, css và các nội dung khác bằng thẻ .

programming javascript

Thêm thẻ liên kết vào đầu javascript

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

Làm cách nào để liên kết JavaScript trong đầu?

Làm cách nào để thêm thẻ liên kết trong JavaScript?

Thẻ liên kết có phải ở trong đầu không?

Bạn có thể sử dụng thẻ liên kết cho JavaScript không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội