Đường dẫn file trong HTML - HTML File Paths

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    9 thg 10, 2022

  • Số lượt xem

    350 lượt xem


Tìm hiểu về các cách sử dụng HTML File Paths (đường dẫn file) hiệu quả trong các trường hợp khác nhau trong trang web.

Một số ví dụ về File Path trong HTML

Path Mô tả
<img src="picture.jpg"> File "picture.jpg" nằm trong cùng thư mục với trang hiện tại
<img src="images/picture.jpg"> File "picture.jpg" nằm trong thư mục hình ảnh trong thư mục hiện tại
<img src="/images/picture.jpg"> File "picture.jpg" nằm trong thư mục hình ảnh ở thư mục gốc của web hiện tại
<img src="../picture.jpg"> File "picture.jpg" nằm trong thư mục một cấp so với thư mục hiện tại

 

HTML File Paths

File paths mô tả vị trí của file trong cấu trúc thư mục của trang web.

File paths được sử dụng khi liên kết với file bên ngoài, như:

  • Web pages
  • Images
  • Style sheets
  • JavaScripts

Absolute File Paths

Absolute File Paths (đường dẫn tệp tuyệt đối) là URL đầy đủ của tệp.

Ví dụ

<img src="https://truonghoclaptrinh.com/images/blog/lap-trinh-web.jpg" alt="truonghoclaptrinh.com">

 

Relative File Paths

Relative File Paths (đường dẫn tệp tương đối) trỏ đến file liên quan đến trang hiện tại. Trong ví dụ sau, đường dẫn file trỏ đến file trong thư mục hình ảnh nằm ở thư mục gốc của web hiện tại.

Ví dụ

<img src="/images/picture.jpg" alt="Biển">

Trong ví dụ sau, file path trỏ đến file trong thư mục picture nằm trong thư mục hiện tại.

Ví dụ

<img src="images/picture.jpg" alt="Biển">

Trong ví dụ sau, file path trỏ đến file trong thư mục picture nằm trong thư mục một cấp so với thư mục hiện tại.

Ví dụ

<img src="../images/picture.jpg" alt="Biển">

 

Sử dụng HTML File Paths hiệu quả

Trong thực tiễn tốt nhất nên sử dụng các Relative File Paths (nếu có thể).

Khi sử dụng các Relative File Paths, các trang web của bạn sẽ không bị ràng buộc với URL cơ sở hiện tại của bạn. Tất cả các liên kết sẽ hoạt động trên máy tính của riêng bạn (localhost) cũng như trên domain của bạn và domain trong tương lai của bạn.


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.