Hướng dẫn where is the html located? - html nằm ở đâu?

Đường dẫn tệp mô tả vị trí của một tệp trong cấu trúc thư mục của trang web.

Ví dụ về đường dẫn tập tin

Đường dẫn	Sự mô tả
	Tệp "Picture.jpg" được đặt trong cùng một thư mục với trang hiện tại
	Tệp "Picture.jpg" được đặt trong cùng một thư mục với trang hiện tại
	Tệp "Picture.jpg" được đặt trong cùng một thư mục với trang hiện tại
	Tệp "Picture.jpg" được đặt trong cùng một thư mục với trang hiện tại

Tệp "Picture.jpg" được đặt trong thư mục hình ảnh trong thư mục hiện tại

Đường dẫn tệp mô tả vị trí của một tệp trong cấu trúc thư mục của trang web.

Tệp "Picture.jpg" được đặt trong thư mục hình ảnh ở gốc của web hiện tại

• Tệp "Picture.jpg" nằm trong thư mục một cấp từ thư mục hiện tại
• Đường dẫn tệp HTML
• Các đường dẫn tệp được sử dụng khi liên kết với các tệp bên ngoài, như:
• trang web

Hình ảnh

Phong cách

Javascripts

Tệp "Picture.jpg" được đặt trong cùng một thư mục với trang hiện tại

Tệp "Picture.jpg" được đặt trong thư mục hình ảnh trong thư mục hiện tại

Tệp "Picture.jpg" được đặt trong thư mục hình ảnh ở gốc của web hiện tại

Tệp "Picture.jpg" nằm trong thư mục một cấp từ thư mục hiện tại

Đường dẫn tệp HTML

Các đường dẫn tệp được sử dụng khi liên kết với các tệp bên ngoài, như:

trang web

Hình ảnh

Phong cách

Javascripts

Khi tạo trang web A & NBSP;, bạn cần một cách để truy cập các tệp và tài nguyên. Các tệp này có thể là cục bộ (bên trong cấu trúc thư mục trang web) hoặc bên ngoài (từ một địa chỉ trên Internet).

Với các tệp cục bộ, việc đặt chúng vào các thư mục riêng biệt & nbsp; tốt nhất là đảm bảo phân tách các mối quan tâm và tính mô -đun của mã của bạn. Đối với các tệp nằm ở nơi khác, bạn cần một cách hiệu quả như nhau để tham khảo chúng. Đường dẫn tệp đảm bảo rằng bạn có thể truy cập các tài nguyên này.

Trong bài viết này, chúng tôi sẽ khám phá các đường dẫn tệp HTML khác nhau, bao gồm so sánh các đường dẫn tệp tương đối và tuyệt đối, cũng như các thực tiễn tốt nhất để sử dụng các đường dẫn tệp trong & NBSP; HTML. Cuối cùng, chúng tôi sẽ xem xét một số trường hợp sử dụng và ví dụ để tìm hiểu về cú pháp của họ.

Đường dẫn tệp HTML là gì?

Đường dẫn tệp HTML là & nbsp; vị trí hoặc địa chỉ của tài nguyên tệp cụ thể. Trong trường hợp bạn & nbsp; muốn các tệp này giao tiếp hoặc liên kết với nhau, bạn cần cung cấp một đường dẫn tệp để trình duyệt biết và hiểu cách truy cập chúng.

Các đường dẫn tệp HTML rất hữu ích vì không có chúng, thì không có cách nào để giới thiệu hoặc tham khảo các phụ thuộc cần thiết cho một trang web đầy đủ chức năng. Các phụ thuộc này bao gồm mã JavaScript & NBSP; nằm trong một tệp riêng biệt - cần thiết cho chức năng thanh toán khi nhấp vào tệp HTML - hoặc thậm chí chỉ cần tham chiếu tài nguyên video từ một trang web bên ngoài.

Đường dẫn tệp tương đối so với tuyệt đối

Để sử dụng các đường dẫn tệp HTML, hai tùy chọn là các đường dẫn tệp tương đối hoặc tuyệt đối. Với các đường dẫn tệp tương đối, các tệp bạn dự định tham chiếu được đặt trong cùng một thư mục của cấu trúc thư mục trang web của bạn. Mặt khác, với các đường dẫn tệp tuyệt đối, bạn tham khảo các tài nguyên bên ngoài nằm ở nơi khác trên web.

Sử dụng các đường dẫn tệp tuyệt đối, chúng tôi có thể truy cập một nội dung tệp hoặc tài nguyên với đường dẫn URL đầy đủ của chúng, có nghĩa là bạn cũng có thể tham chiếu nội dung trực tiếp từ web. Ví dụ: bạn có thể tham khảo hình ảnh từ URL như:

 
img src="https://www.hubspot.com/images/hub.jpg" alt="hub"

SRC & NBSP; còn được gọi là thuộc tính nguồn, cho chúng ta biết đường dẫn tệp.src is also known as the source attribute, which tells us the file path.

Ngoài ra, với các đường dẫn tệp tương đối, đường dẫn tệp tham chiếu một tệp so với vị trí làm việc hiện tại hoặc tệp trong cấu trúc thư mục. Ví dụ: giả sử bạn & nbsp; có tệp Hub.jpg & nbsp; trong thư mục hình ảnh, một cấp trong phân cấp thư mục. Bạn có thể dễ dàng truy cập nó như thế này: & nbsp ;. Giai đoạn đầu tiên đại diện cho thư mục hiện tại và giai đoạn tiếp theo di chuyển một cấp cấu trúc thư mục..jpg file in the images folder, one level up in the folder hierarchy. You can easily access it like this: 

Đối với các đường dẫn tệp tương đối, để liên kết đến một tệp cụ thể trong cùng một thư mục, bạn sẽ sử dụng tên tệp một mình, chẳng hạn như Hub.jpg. & NBSP; để chỉ một tệp nằm trong thư mục hình ảnh lồng nhau, tất cả những gì bạn cần làm là viết Tên của thư mục trước đường dẫn và một dấu gạch chéo về phía trước: hình ảnh/hug.jpg.hub.jpg. To refer to a file located in a nested images folder, all you need to do is write the name of the folder in front of the path and a forward slash: images/hug.jpg.

Nó thực hành tốt nhất để sử dụng các đường dẫn tệp tương đối, vì chúng là địa phương cho hệ thống phân cấp thư mục của dự án của bạn và luôn giữ nguyên. Ngược lại, các đường dẫn tệp tuyệt đối có thể được định vị ở bất cứ đâu trên internet và có thể thay đổi bất cứ lúc nào, có khả năng dẫn đến các liên kết bị hỏng.

Với các đường dẫn tệp tương đối, phải cẩn thận về cách bạn tham chiếu các tệp này, cách viết tên tệp, vị trí của chúng, phần mở rộng tệp, v.v. Điều này là để bạn có thể đảm bảo rằng tài nguyên tải đúng. Đối với các đường dẫn tệp tuyệt đối, URL phải hợp lệ và chứa tài nguyên cần thiết cho trang web để tải một cách thích hợp. & nbsp;

Ngoài ra, với các đường dẫn tệp tương đối, hình ảnh (ví dụ) phải được tải qua internet. Trong một số trường hợp, có thể mất một thời gian lớn để tải, có thể dẫn đến các trang web chậm hơn. Do đó, nếu bạn không còn phải phụ thuộc vào URL bên ngoài, thì bạn nên sử dụng các đường dẫn tệp tương đối trên các đường dẫn tệp tuyệt đối bất cứ khi nào có thể.

Ví dụ đường dẫn tệp HTML

Như đã đề cập trước đó, các đường dẫn tệp HTML có thể ở dạng đường dẫn tương đối hoặc tuyệt đối. & NBSP; Trong phần này, chúng tôi sẽ khám phá một số ví dụ về việc sử dụng cả hai loại đường dẫn tệp để bạn có thể hiểu cú pháp của chúng và cách sử dụng chúng Trong các kịch bản ngoài đời thực.

Đầu tiên, hãy để Lừa trình bày cách bạn có thể tham chiếu một tệp hoặc tài nguyên hình ảnh bên trong tài liệu HTML bằng đường dẫn tương đối của nó. Đi trước và khởi chạy Trình chỉnh sửa mã của bạn, tạo một tệp mới và gọi nó là index.html. Thêm mã bên dưới bên trong tệp bạn vừa tạo:index.html. Add the code below inside the file you’ve just created:

 
<!DOCTYPE html>
<html>
        <head>
                <title>HTML File Path Example</title>
        </head>
        <body>
                <h2>HTML File Path Example</h2>
                <img src="sample-image.jpeg" alt="Image File path example">
        </body>
</html>

Tiếp theo, tải xuống hình ảnh mẫu (mẫu-IMAGE.jpeg) và thêm nó vào cùng một vị trí với thư mục tệp HTML hiện tại.sample-image.jpeg) and add it to the same location as the current HTML file directory.

Trong tệp HTML ở trên, bên trong thẻ cơ thể, chúng tôi đề cập đến tệp hình ảnh với thuộc tính & NBSP; Nguồn (SRC), cho chúng tôi biết vị trí của hình ảnh. Khi bạn mở tệp HTML, đầu ra sẽ trông như thế này:rc) attribute, which tells us where the image is located. When you open the HTML file, the output should look like this:

Di chuyển về phía trước, hãy để khám phá cách một đường dẫn tệp tuyệt đối hoạt động trong một tài liệu HTML.

Trong ví dụ dưới đây, bạn sẽ nhập mã CSS & NBSP; và JavaScript & nbsp; mã vào tệp HTML & NBSP; của bạn. Để bắt đầu, hãy tạo một chỉ mục mới.html & nbsp; tệp và thêm mã bên dưới: & nbsp;index.html file and add the code below: 

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Button Example with Relative Path</title>
<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <button type="button" class="btn btn-primary">Primary</button>
    </div>
</body>
</html>

Khi bạn mở tệp HTML, đầu ra sẽ trông như thế này:

Bây giờ bạn đã sử dụng thành công Bootstrap CSS & NBSP; và Javascrip được lưu trữ ở đâu đó trên Internet để liên kết với tệp HTML và hiển thị nút chính tùy chỉnh. & NBSP;

Cuối cùng, hãy để Lừa trình bày cách bạn có thể bao gồm một tệp JavaScript nằm trong cùng một hệ thống phân cấp thư mục như tệp HTML của bạn bằng cách sử dụng thẻ tập lệnh với thuộc tính SRC & NBSP;src attribute.

Đầu tiên, hãy tạo tệp index.html & nbsp; bên trong một thư mục có tên Tut & nbsp; và thêm mã bên dưới:index.html file inside a folder named tut and add the code below:

 
<!DOCTYPE html>
<html>
   <head>
       <script type="text/javascript" src="js/sample.js"></script>
   </head>
   <body>
       <h2>HTML File Path Example with JS</h2>
       <form>
           <input type="button" value="click" onclick="sayHello()"/>
       </form>
   </body>
</html>

Tiếp theo, tạo thư mục JS & NBSP; Bên trong thư mục này, hãy tạo một tệp: & nbsp; sample.js. Bên trong Sample.js, hãy thêm mã này bên dưới, in ra Hello Hello World vào trình duyệt khi nút được nhấp vào trang.js folder. Inside this folder, create a file: sample.js. Inside sample.js, add this code below, which prints “Hello world” to the browser when the button is clicked on the page.

 
function sayHello() {
   alert('Hello World!');
}

Nếu bạn mở mã HTML trên trình duyệt và nhấp vào nút, đầu ra sẽ trông như thế này:

Như bạn có thể thấy từ ví dụ trên, giá trị cho thuộc tính SRC là đường dẫn tương đối đến nơi tệp JavaScript nằm trong đường dẫn hệ thống của bạn liên quan đến thư mục làm việc hiện tại. Trong trường hợp của chúng tôi, nó nằm bên trong thư mục JS. Xem cấu trúc thư mục bên dưới:src attribute is the relative path to where the JavaScript file is located in your system path concerning the current working directory. In our case, it’s located inside the JS folder. See the folder structure below:

Trong bài viết này, bạn đã khám phá các đường dẫn tệp HTML và cách chúng hoạt động. Các đường dẫn tệp HTML đảm bảo rằng bạn & NBSP; có thể truy cập các tài nguyên hoặc tệp dựa trên vị trí của chúng, bất kể đó là địa phương vào cấu trúc thư mục trang web của bạn hoặc từ các vị trí khác trên Internet.

Với các đường dẫn tuyệt đối và tương đối, phải cẩn thận khi đề cập đến các vị trí tệp này để trình duyệt hiểu cách truy cập chúng. Thông thường, các tệp được đặt liên quan đến tài liệu HTML cung cấp cách tiếp cận tốt nhất vì vị trí của chúng là tĩnh.

Ngoài ra, luôn đảm bảo sử dụng thuộc tính thay thế, cung cấp cơ chế dự phòng nếu vị trí tài nguyên thay đổi hoặc tệp được tham chiếu không đúng.

Bây giờ bạn đã biết cách các đường dẫn tệp HTML hoạt động, bạn có thể sử dụng kiến ​​thức này để đưa ra các lựa chọn sáng suốt về thời điểm sử dụng đường dẫn tệp tương đối hoặc tuyệt đối.

Làm cách nào để xem HTML trên trình duyệt của tôi?

HTML của một trang web là gì?

Tệp HTML chỉ mục được định vị ở đâu?