Làm cách nào để tạo một tệp HTML chỉ mục?

Question

HTML có các thẻ khác nhau, một số trong đó có ý nghĩa ngữ nghĩa. Một bản soạn sẵn cơ bản cho một tệp HTML trông như thế này

Nội dung chính Show

LOẠI TÀI LIỆU
thẻ đầu
thẻ tiêu đề
thẻ liên kết
thẻ cơ thể
thẻ chính
Các tệp HTML chỉ mục là gì?
Làm cách nào để tạo một thư mục HTML?
Tệp HTML chỉ mục của trang web của bạn ở đâu?
Làm cách nào để tạo tệp HTML chỉ mục trong Linux?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
	<script src="index.js"></script>
  </body>
</html>

Trong phần còn lại của bài viết này, tôi sẽ giải thích ý nghĩa của từng phần trong bản tóm tắt này

Cú pháp soạn sẵn HTML

LOẠI TÀI LIỆU

<!DOCTYPE html>

Phần tử này là khai báo doctype của tệp HTML.

<!DOCTYPE html>

1 yêu cầu trình duyệt hiển thị mã HTML dưới dạng HTML5 (trái ngược với một số phiên bản HTML khác)

Điều này rất quan trọng vì nếu không có phần khai báo này, các phần tử HTML5 như

<!DOCTYPE html>

2,

<!DOCTYPE html>

3, v.v. có thể không được hiển thị chính xác

thẻ html

<html lang="en">
    ...
</html>

Thẻ

<!DOCTYPE html>

4 là gốc của tài liệu HTML. Nó chứa thẻ

<!DOCTYPE html>

5, thẻ

<!DOCTYPE html>

6 và mọi phần tử HTML khác (ngoại trừ DOCTYPE) được sử dụng trong trang web của bạn

Nó cũng có thuộc tính

<!DOCTYPE html>

7, bạn có thể sử dụng thuộc tính này để chỉ định ngôn ngữ của nội dung văn bản trên trang web. Giá trị mặc định là "không xác định", vì vậy bạn nên luôn chỉ định một ngôn ngữ

Việc xác định ngôn ngữ giúp trình đọc màn hình đọc chính xác các từ và giúp công cụ tìm kiếm trả về kết quả tìm kiếm theo ngôn ngữ cụ thể

thẻ đầu

<!DOCTYPE html>

0

Thẻ

<!DOCTYPE html>

5 chứa siêu dữ liệu của trang web của bạn. Đây là những dữ liệu vô hình đối với người dùng, nhưng chúng cung cấp thông tin về nội dung trang web của bạn. Các công cụ tìm kiếm đặc biệt sử dụng dữ liệu này để xếp hạng trang web của bạn

Siêu dữ liệu trong thẻ đầu bao gồm thẻ meta, thẻ tiêu đề, thẻ liên kết, tập lệnh, biểu định kiểu, v.v.

thẻ meta

<!DOCTYPE html>

2

Thẻ

<!DOCTYPE html>

9 là một phần tử siêu dữ liệu được sử dụng để thêm nhiều siêu dữ liệu hơn vào trang web của bạn so với loại mà các thẻ không phải meta như tiêu đề cung cấp

Bạn có thể sử dụng các thẻ này cho các mục đích khác nhau

thêm siêu dữ liệu cho các nền tảng truyền thông xã hội để tạo bản xem trước liên kết
thêm một mô tả cho trang web của bạn
thêm mã hóa ký tự cho trang web của bạn
và nhiều cái khác

Công cụ tìm kiếm, nền tảng truyền thông xã hội và dịch vụ web sử dụng siêu dữ liệu này để hiểu nội dung trang web của bạn và xác định cách hiển thị chúng cho người dùng

thẻ tiêu đề

<!DOCTYPE html>

4

Thẻ

<html lang="en">
    ...
</html>

0 được sử dụng để chỉ định tiêu đề cho trang web của bạn. Trình duyệt của bạn sử dụng điều này để hiển thị tiêu đề trên thanh tiêu đề

Thẻ này cũng giúp các công cụ tìm kiếm hiển thị tiêu đề cho trang web của bạn trên kết quả tìm kiếm của họ

thẻ liên kết

Bạn sử dụng thẻ

<html lang="en">
    ...
</html>

1, như tên của nó, để liên kết đến một tài liệu khác. Thông thường, điều này thiết lập các loại mối quan hệ khác nhau giữa tài liệu hiện tại và một tài liệu riêng biệt

<!DOCTYPE html>

7

Ví dụ: như đã thấy trong khối mã ở trên, chúng tôi đã thiết lập mối quan hệ tài liệu "biểu định kiểu" với các kiểu. tập tin css

Cách sử dụng phổ biến nhất của thẻ này là thêm biểu định kiểu vào tài liệu và cũng để thêm biểu tượng yêu thích vào trang web

<!DOCTYPE html>

8

Favicon là một hình ảnh nhỏ gần với tiêu đề của trang web, như được thấy bên dưới

thẻ cơ thể

<!DOCTYPE html>

9

Thẻ

<!DOCTYPE html>

6 chứa nội dung chính của trang web, hiển thị cho người dùng. Mặc dù các yếu tố không nhìn thấy được như

<html lang="en">
    ...
</html>

3 và

<html lang="en">
    ...
</html>

4 cũng có thể được thêm vào đây, hầu hết các thẻ nội dung thường được hiển thị

Từ tiêu đề đến đoạn văn đến phương tiện và nhiều hơn nữa, những yếu tố đó được thêm vào đây. Bất kỳ phần tử nào không tìm thấy ở đây (có thể được bao gồm trong thẻ đầu) sẽ không được hiển thị trên màn hình

thẻ chính

<!DOCTYPE html>

3

Thẻ

<html lang="en">
    ...
</html>

5 chỉ định nội dung thiết yếu của trang web. Đây sẽ là nội dung liên quan đến tiêu đề của trang web

Ví dụ: một trang đăng bài blog. Chia sẻ mạng xã hội ở bên trái, quảng cáo ở bên phải, đầu trang và chân trang là những phần nhỏ của trang web. Bản thân bài đăng hiển thị ảnh bìa, tiêu đề và nội dung văn bản bài đăng là phần trung tâm, sẽ nằm trong phần tử

<html lang="en">
    ...
</html>

5

thẻ h1

HTML có các thành phần tiêu đề khác nhau là ________ 57, ________ 58, ________ 59, _______ 100,

<!DOCTYPE html>

01 và

<!DOCTYPE html>

02. Các phần tử tiêu đề được sử dụng để mô tả các phần khác nhau của trang web. Và những yếu tố này có thứ tự, với

<html lang="en">
    ...
</html>

7 là cao nhất

Bạn chỉ nên có một phần tử

<html lang="en">
    ...
</html>

7 trên trang web vì điều này bắt đầu phần chính. Và sau đó, bạn có các phần và tiểu mục khác mà bạn có thể sử dụng các thành phần tiêu đề khác

Ngoài ra, lưu ý rằng bạn không nên bỏ qua các tiêu đề. Ví dụ: bạn không nên sử dụng phần tử

<!DOCTYPE html>

00 sau khi sử dụng phần tử

<html lang="en">
    ...
</html>

8. Một cấu trúc tốt có thể như thế này

<!DOCTYPE html>

0

Từ mã này, bạn có thể thấy cách các cấp tiêu đề xác định vị trí của chúng trong các phần và tiểu mục

Gói (lại

Trong phần này, chúng ta đã thấy một bản soạn sẵn HTML dành cho người mới bắt đầu và mỗi thẻ được sử dụng trong mẫu này có ý nghĩa gì

Danh sách các phần tử này không đầy đủ vì có thể tìm thấy nhiều phần tử khác trong thẻ head và thẻ body, với nhiều thuộc tính nữa

QUẢNG CÁO

Dillion Megida

Người ủng hộ nhà phát triển và Người sáng tạo nội dung đam mê chia sẻ kiến thức của tôi về Công nghệ. Tôi dạy JavaScript / ReactJS / NodeJS / React Frameworks / TypeScript / et al

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

Các tệp HTML chỉ mục là gì?

Chỉ mục. trang html là tên phổ biến nhất được sử dụng cho trang mặc định được hiển thị trên trang web nếu không có trang nào khác được chỉ định khi khách truy cập yêu cầu trang web . Nói cách khác, chỉ số. html là tên được sử dụng cho trang chủ của trang web.

Làm cách nào để tạo một thư mục HTML?

Trong cửa sổ màn hình nền của PC, hãy tạo một thư mục mới (với bất kỳ tên nào) nhấp đúp chuột vào thư mục để vào, sau đó nhấp chuột phải và tạo một tệp txt mới. After creating a txt file, right click on it, then select rename and change the . txt to . html to make it a HTML file.

Tệp HTML chỉ mục của trang web của bạn ở đâu?

Cần có một tệp chỉ mục (ví dụ: chỉ mục. html) trong thư mục gốc . Tệp chỉ mục là tệp được hiển thị khi bạn nhập địa chỉ tên miền của mình vào trình duyệt web. Thư mục gốc là thư mục mà bạn truy cập đầu tiên khi sử dụng ứng dụng khách FTP.