Bạn cần một ngôn ngữ phía máy chủ. Tôi đã làm một số nghiên cứu về điều này trước đây. CSS không cho phép bạn làm điều này và mặc dù bạn có thể sử dụng iFrame nhưng nó không thực sự là công cụ được khuyên dùng nhất. Vì vậy, về mặt tiêu chuẩn, bạn nên sử dụng ngôn ngữ phía máy chủ hoặc cách khác, bạn có thể sử dụng một CMS thực hiện tất cả điều này cho bạn

Làm điều này bằng tay là khủng khiếp, tin tôi đi. Tôi đã làm điều đó một lần trên một trang web và nó nhanh chóng trở nên không thể quản lý được. Làm thế nào lớn là trang web đề xuất của bạn? . Chà, dù sao cũng không dành cho tôi

Thí dụ

Một tiêu đề cho một

:

 
Một tiêu đề ở đây

Đăng bởi John Doe

Một số thông tin bổ sung ở đây

 

Lorem Ipsum dolor bộ amet

Tự mình thử »

Thêm các ví dụ "Tự mình thử" bên dưới

---

Định nghĩa và cách sử dụng

Các

phần tử đại diện cho vùng chứa nội dung giới thiệu hoặc tập hợp các liên kết điều hướng

A

phần tử thường chứa

• một hoặc nhiều thành phần tiêu đề (-)
• logo hoặc biểu tượng
• thông tin tác giả

Ghi chú. Bạn có thể có một số

các phần tử trong một tài liệu HTML. Tuy nhiên, không thể được đặt trong một hoặc một phần tử khác

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử

Yếu tố5. 09. 04. 05. 011. 1

---

---

Thuộc tính toàn cầu

Các

thẻ cũng hỗ trợ Thuộc tính toàn cầu trong HTML

---

Thuộc tính sự kiện

Các

thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML

---

Thêm ví dụ

Thí dụ

Một tiêu đề trang

Tiêu đề trang chính ở đây

Đăng bởi John Doe

Tự mình thử »

---

Trang liên quan

Tham chiếu DOM HTML. đối tượng tiêu đề

---

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị

phần tử với các giá trị mặc định sau

Đó không phải là nhiều. Vì vậy, khi bạn hoàn thành công việc trên trang đích và bắt đầu trên trang liên hệ, bạn chỉ cần tạo một tệp HTML mới và sao chép tất cả mã từ trang đầu tiên

Đầu trang và chân trang đã trông đẹp mắt và tất cả những gì bạn cần làm là thay đổi phần còn lại của nội dung

Nhưng nếu khách hàng của bạn muốn 10 trang thì sao?

Đột nhiên, bất kỳ thay đổi nào, dù nhỏ đến đâu, đều phải được lặp lại trên tất cả các tệp đó

Đây là một trong những vấn đề lớn như React hoặc Handlebars. js giải quyết. bất kỳ mã nào, đặc biệt là những thứ có cấu trúc như đầu trang hoặc chân trang, có thể được viết một lần và dễ dàng sử dụng lại trong suốt dự án

Cho đến gần đây, không thể sử dụng các thành phần trong vanilla HTML và JavaScript. Nhưng với sự ra đời của Thành phần web, có thể tạo các thành phần có thể tái sử dụng mà không cần sử dụng những thứ như React

Thành phần web là gì?

Thành phần web thực sự là tập hợp của một số công nghệ khác nhau cho phép bạn tạo các phần tử HTML tùy chỉnh

Những công nghệ đó là

• mẫu HTML. Các đoạn đánh dấu HTML sử dụng các phần tử
  5 sẽ không được hiển thị cho đến khi chúng được thêm vào trang bằng JavaScript
• yếu tố tùy chỉnh. Các API JavaScript được hỗ trợ rộng rãi cho phép bạn tạo các phần tử DOM mới. Khi bạn tạo và đăng ký một thành phần tùy chỉnh bằng các API này, bạn có thể sử dụng nó tương tự như một thành phần React
• Bóng DOM. Một DOM nhỏ hơn, được đóng gói, được tách biệt khỏi DOM chính và được hiển thị riêng. Bất kỳ kiểu dáng và tập lệnh nào bạn tạo cho các thành phần tùy chỉnh của mình trong Shadow DOM sẽ không ảnh hưởng đến các thành phần khác trong DOM chính

Chúng ta sẽ đi sâu vào từng vấn đề này một chút trong suốt hướng dẫn

Cách sử dụng các mẫu HTML

Phần đầu tiên của câu đố là học cách sử dụng các mẫu HTML để tạo đánh dấu HTML có thể tái sử dụng

Hãy xem một ví dụ về tin nhắn chào mừng đơn giản

chỉ mục. html

Nếu bạn nhìn vào trang, cả phần tử

6 hoặc

7 đều không được hiển thị. Nhưng nếu bạn mở bảng điều khiển dành cho nhà phát triển, bạn sẽ thấy cả hai yếu tố đã được phân tích cú pháp

Để thực sự hiển thị thông báo chào mừng, bạn sẽ cần sử dụng một chút JavaScript

____4_______chỉ mục. js

Mặc dù đây là một ví dụ khá đơn giản, nhưng bạn đã có thể thấy việc sử dụng các mẫu giúp dễ dàng sử dụng lại mã trong một trang như thế nào.

Vấn đề chính là, ít nhất là với ví dụ hiện tại, mã thông báo chào mừng được trộn lẫn với phần còn lại của nội dung trang. Nếu bạn muốn thay đổi thông báo chào mừng sau này, bạn sẽ cần thay đổi mã trên nhiều tệp

Thay vào đó, bạn có thể kéo mẫu HTML vào tệp JavaScript, do đó, bất kỳ trang nào có JavaScript sẽ hiển thị thông báo chào mừng

chỉ số. html

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

chỉ mục. js

Bây giờ mọi thứ đã có trong tệp JavaScript, bạn không cần phải tạo phần tử

5 nữa – bạn có thể dễ dàng tạo một phần tử

9 hoặc

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

0

Tuy nhiên, các phần tử

5 có thể được ghép nối với phần tử

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

2, điều này cho phép bạn thực hiện những việc như thay đổi văn bản cho các phần tử trong

5. Nó hơi nằm ngoài phạm vi của hướng dẫn này, vì vậy bạn có thể đọc thêm về các phần tử

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

2

Cách tạo các phần tử tùy chỉnh

Một điều bạn có thể nhận thấy với các mẫu HTML là có thể khó chèn mã của bạn vào đúng chỗ. Ví dụ về tin nhắn chào mừng trước đó vừa được thêm vào trang

Nếu đã có nội dung trên trang, chẳng hạn như hình ảnh biểu ngữ, thì thông báo chào mừng sẽ xuất hiện bên dưới nội dung đó

Là một phần tử tùy chỉnh, thông báo chào mừng của bạn có thể trông như thế này

Và bạn có thể đặt nó ở bất cứ đâu bạn muốn trên trang

Với ý nghĩ đó, chúng ta hãy xem các yếu tố tùy chỉnh và tạo các yếu tố đầu trang và chân trang giống như React của riêng chúng ta

Cài đặt

Đối với một trang web danh mục đầu tư, bạn có thể có một số mã soạn sẵn giống như thế này

chỉ số. html

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

phong cách. css

Mỗi trang sẽ có đầu trang và chân trang giống nhau, vì vậy sẽ rất hợp lý khi tạo một phần tử tùy chỉnh cho từng trang đó

Hãy bắt đầu với tiêu đề

Xác định phần tử tùy chỉnh

Đầu tiên, tạo một thư mục có tên là

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

5 và bên trong thư mục đó, tạo một tệp mới có tên là

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

6 với đoạn mã sau

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

thành phần/tiêu đề. js

Nó chỉ là một ES5

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

7 đơn giản khai báo thành phần

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

8 tùy chỉnh của bạn, với phương thức

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

9 và từ khóa đặc biệt

0. Bạn có thể đọc thêm về những điều đó trên MDN

Bằng cách mở rộng lớp

1 chung, bạn có thể tạo bất kỳ loại phần tử nào bạn muốn. Cũng có thể mở rộng các yếu tố cụ thể như

2

Đăng ký phần tử tùy chỉnh của bạn

Trước khi bạn có thể bắt đầu sử dụng phần tử tùy chỉnh của mình, bạn cần phải đăng ký phần tử đó bằng phương thức

3

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

thành phần/tiêu đề. js

Phương thức này có ít nhất hai đối số

Đầu tiên là

4 bạn sẽ sử dụng khi thêm thành phần vào trang, trong trường hợp này là

5

Tiếp theo là lớp của thành phần mà bạn đã tạo trước đó, ở đây, lớp

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

8

Đối số thứ ba tùy chọn mô tả phần tử HTML hiện có mà phần tử tùy chỉnh của bạn kế thừa các thuộc tính từ đó, ví dụ:

7. Nhưng chúng tôi sẽ không sử dụng tính năng này trong hướng dẫn này

Sử dụng Gọi lại vòng đời để thêm tiêu đề vào trang

Có bốn lệnh gọi lại vòng đời đặc biệt dành cho các phần tử tùy chỉnh mà chúng tôi có thể sử dụng để nối phần đánh dấu tiêu đề vào trang.

8,

9,

0 và

1

Trong số các cuộc gọi lại này,

8 là một trong những cách được sử dụng phổ biến nhất.

8 chạy mỗi khi phần tử tùy chỉnh của bạn được chèn vào DOM

Bạn có thể đọc thêm về các callback khác

Đối với ví dụ đơn giản của chúng tôi,

8 là đủ để thêm tiêu đề vào trang

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      
      

        
      
    `;
  }
}

customElements.define('header-component', Header);

thành phần/tiêu đề. js

Sau đó, trong

5, thêm tập lệnh

6 và

5 ngay phía trên phần tử

8

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

0chỉ mục. html

Và thành phần tiêu đề có thể tái sử dụng của bạn sẽ được hiển thị trên trang

Giờ đây, việc thêm tiêu đề vào trang dễ dàng như thêm thẻ

9 chỉ vào

6 và thêm

5 vào bất cứ đâu bạn muốn

Lưu ý rằng, vì tiêu đề và kiểu dáng của nó được chèn trực tiếp vào DOM chính, nên có thể tạo kiểu cho nó trong tệp

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

2

Nhưng nếu bạn nhìn vào các kiểu tiêu đề có trong

8, thì chúng khá chung chung và có thể ảnh hưởng đến các kiểu khác trên trang

Ví dụ: nếu chúng tôi thêm Font Awesome và thành phần chân trang vào

5

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

1chỉ số. html

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

2thành phần/chân trang. js

Đây là giao diện của trang

Kiểu dáng từ thành phần chân trang sẽ ghi đè kiểu dáng cho tiêu đề, thay đổi màu của liên kết. Đó là hành vi được mong đợi đối với CSS, nhưng sẽ rất tuyệt nếu kiểu dáng của từng thành phần nằm trong phạm vi của thành phần đó và sẽ không ảnh hưởng đến những thứ khác trên trang

Chà, đó chính xác là nơi mà Shadow DOM tỏa sáng. Hay sắc thái?

Cách sử dụng Shadow Dom với các yếu tố tùy chỉnh

Shadow DOM hoạt động như một phiên bản riêng biệt, nhỏ hơn của DOM chính. Thay vì hoạt động như một bản sao của DOM chính, Shadow DOM giống như một cây con chỉ dành cho phần tử tùy chỉnh của bạn. Mọi thứ được thêm vào Shadow DOM, đặc biệt là các kiểu, đều nằm trong phạm vi phần tử tùy chỉnh cụ thể đó

Theo một cách nào đó, nó giống như sử dụng

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

5 và

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

6 thay vì

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

7

Hãy bắt đầu bằng cách tái cấu trúc thành phần tiêu đề

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

3thành phần/tiêu đề. js

Điều đầu tiên bạn cần làm là sử dụng phương pháp

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

8 để đính kèm một gốc bóng vào phần tử thành phần tiêu đề tùy chỉnh của bạn. Trong

8, thêm đoạn mã sau

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

4thành phần/tiêu đề. js

Lưu ý rằng chúng tôi đang chuyển một đối tượng tới

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

8 với một tùy chọn,

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

1. Điều này chỉ có nghĩa là DOM bóng của thành phần tiêu đề không thể truy cập được từ JavaScript bên ngoài

Nếu bạn muốn thao tác với bóng DOM của thành phần tiêu đề sau này bằng JavaScript bên ngoài tệp

6, chỉ cần thay đổi tùy chọn thành

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

3

Cuối cùng, nối thêm

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

4 vào trang bằng phương pháp

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

5

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

5thành phần/tiêu đề. js

Và bây giờ, vì các kiểu của thành phần tiêu đề được gói gọn trong Shadow DOM của nó, nên trang sẽ trông như thế này

Và đây là thành phần chân trang được cấu trúc lại để sử dụng Shadow DOM

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

6thành phần/chân trang. js

Nhưng nếu bạn kiểm tra trên trang, bạn sẽ nhận thấy rằng các biểu tượng Font Awesome hiện đã bị thiếu

Giờ đây, thành phần chân trang được gói gọn trong Shadow DOM của riêng nó, thành phần này không còn có quyền truy cập vào liên kết CDN của Font Awesome trong

5

Hãy xem nhanh lý do tại sao lại như vậy và cách để Font Awesome hoạt động trở lại

Đóng gói và Shadow DOM

Mặc dù Shadow DOM không ngăn các kiểu từ các thành phần của bạn ảnh hưởng đến phần còn lại của trang, nhưng một số kiểu chung vẫn có thể rò rỉ qua các thành phần của bạn

Trong các ví dụ trên, đây là một tính năng hữu ích. Ví dụ: thành phần chân kế thừa khai báo

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

7 được đặt trong

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

2. Điều này là do

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

9 là một trong số ít tài sản thừa kế, cùng với

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

0,

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

1,

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

2, v.v.

Nếu bạn muốn ngăn hành vi này và tạo kiểu hoàn toàn cho từng thành phần từ đầu, bạn có thể làm điều đó chỉ với một vài dòng CSS

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

7

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

3 là bộ chọn giả chọn phần tử đang lưu trữ Shadow DOM. Trong trường hợp này, đó là thành phần tùy chỉnh của bạn

Sau đó, khai báo

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

4 đặt tất cả các thuộc tính CSS về giá trị ban đầu của chúng. Và

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

5 làm điều tương tự cho thuộc tính

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

6 và đặt nó trở lại mặc định của trình duyệt,

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

7

Để biết danh sách đầy đủ các thuộc tính kế thừa CSS, hãy xem câu trả lời này trên Stack Overflow

Cách sử dụng phông chữ tuyệt vời với Shadow DOM

Bây giờ bạn có thể đang nghĩ, nếu

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

0,

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

1 và các thuộc tính CSS liên quan đến phông chữ khác là các thuộc tính có thể kế thừa, thì tại sao Font Awesome không tải ngay bây giờ khi thành phần chân trang đang sử dụng Shadow DOM?

Hóa ra, đối với những thứ như phông chữ và các nội dung khác, chúng cần được tham chiếu trong cả DOM chính và DOM bóng để hoạt động bình thường

May mắn thay, có một số cách đơn giản để khắc phục điều này

Ghi chú. Tất cả các phương pháp này vẫn yêu cầu Font Awesome được bao gồm trong

5 với phần tử

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      
      

        
      
    `;
  }
}

customElements.define('header-component', Header);

1 như trong đoạn mã ở trên

#1. Liên kết đến Phông chữ Tuyệt vời trong Thành phần của bạn

Cách đơn giản nhất để Font Awesome hoạt động trong thành phần Shadow DOM của bạn là thêm một

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      
      

        
      
    `;
  }
}

customElements.define('header-component', Header);

1 vào nó trong chính thành phần đó

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

8thành phần/chân trang. js

Một điều cần lưu ý là, mặc dù có vẻ như bạn đang khiến trình duyệt tải Font Awesome hai lần (một lần cho DOM chính và một lần nữa cho thành phần), các trình duyệt đủ thông minh để không tìm nạp lại cùng một tài nguyên

Đây là tab mạng cho thấy rằng Chrome chỉ tải xuống Phông chữ tuyệt vời một lần

#2. Nhập phông chữ tuyệt vời trong thành phần của bạn

Tiếp theo, bạn có thể sử dụng

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      
      

        
      
    `;
  }
}

customElements.define('header-component', Header);

3 và

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      
      

        
      
    `;
  }
}

customElements.define('header-component', Header);

4 để tải Font Awesome vào thành phần của mình

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

9

Lưu ý rằng URL phải giống với URL bạn đang sử dụng trong

5

#3. Sử dụng JavaScript để tự động tải phông chữ tuyệt vời cho thành phần của bạn

Cuối cùng, cách DRYest để tải Font Awesome trong thành phần của bạn là sử dụng một chút JavaScript

0thành phần/chân trang. js

Phương pháp này dựa trên câu trả lời này trên Stack Overflow và hoạt động khá đơn giản. Khi thành phần tải, nếu tồn tại một phần tử

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      
      

        
      
    `;
  }
}

customElements.define('header-component', Header);

1 trỏ đến Phông chữ tuyệt vời, thì phần tử đó sẽ được sao chép và nối vào Shadow DOM của thành phần đó

Mã cuối cùng

Đây là mã cuối cùng trên tất cả các tệp trông như thế nào và sử dụng phương pháp #3 để tải Phông chữ Tuyệt vời vào thành phần chân trang

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

1chỉ số. html

2phong cách. css

3thành phần/tiêu đề. js

4thành phần/chân trang. js

Kết thúc

Chúng tôi đã đề cập rất nhiều ở đây và bạn có thể đã quyết định chỉ sử dụng React hoặc Handlebars. thay vào đó là js

Đó là cả hai lựa chọn tuyệt vời

Tuy nhiên, đối với một dự án nhỏ hơn, nơi bạn chỉ cần một vài thành phần có thể tái sử dụng, toàn bộ thư viện hoặc ngôn ngữ tạo khuôn mẫu có thể là quá mức cần thiết

Hy vọng rằng bây giờ bạn đã tự tin để tạo các thành phần HTML có thể tái sử dụng của riêng mình. Bây giờ hãy ra khỏi đó và tạo ra thứ gì đó tuyệt vời (và có thể tái sử dụng)

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kris Koishigawa

Đọc thêm bài viết

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để bao gồm đầu trang và chân trang trong tệp HTML bằng PHP?