Tại sao html của tôi không hiển thị?

Để xem “văn bản không có dấu ngoặc”, bạn nên lưu tệp của mình rồi mở tệp từ bên trong trình duyệt web. Ví dụ: thực hiện “Tệp -> Mở…” từ trong trình duyệt web, sau đó chọn tệp bạn vừa tạo trong trình soạn thảo văn bản

Xin chào. Tôi đã tạo một vài trang bằng tệp html và css. Nhưng lần này, không có gì hiển thị khi tôi đặt tệp html của mình vào trình duyệt. Đó là một mã thực sự đơn giản để tôi có thể biết liệu nó có hoạt động hay không. Nhưng ngay cả hộp màu đỏ cũng không hiển thị và khi tôi nhấn "kiểm tra" thì rõ ràng là không có gì ở đó. Và vâng, tôi đã cứu cả hai. Giúp tôi với, tôi sắp phát điên rồi😭 Vấn đề có thể là gì?

Một trong những câu hỏi phổ biến nhất mà tôi được hỏi liên quan đến việc bắt đầu sử dụng HTML và CSS là “Tại sao cái này không hoạt động?” . Điều này thường xảy ra khi bạn cắt và dán từ một chương trình như Microsoft Word, chương trình này sử dụng các ký tự đặc biệt cho các ký tự như dấu ngoặc kép. Trên thực tế, đó chính xác là trường hợp ngày hôm nay, khi tôi nhận được câu hỏi từ một độc giả bị mắc kẹt với ví dụ đầu tiên từ Head First HTML với CSS & XHTML; . Khi tôi tải tệp HTML của anh ấy và xem nguồn bằng trình duyệt của mình, tôi nhận thấy rằng thẻ kiểu mở đầu của anh ấy có các ký tự đặc biệt xung quanh thuộc tính loại

Loại lỗi này rất khó bắt, đặc biệt là đối với người mới bắt đầu. Trong trình chỉnh sửa của bạn, bạn đang nhìn thấy các trích dẫn, vì vậy bạn sẽ không bao giờ biết có vấn đề trừ khi bạn "xem nguồn" bằng trình duyệt của mình và xem các ký tự đặc biệt trong cửa sổ nguồn (hiển thị văn bản thuần túy)

Vì vậy, hai lời khuyên

1. Đảm bảo trình chỉnh sửa của bạn được đặt thành văn bản thuần túy để không có ký tự đặc biệt nào được chèn vào HTML và CSS của bạn
2. Nếu bạn gặp sự cố, hãy xem nguồn bằng menu “xem nguồn” (trong Safari, Xem > Nguồn). Điều này thường sẽ phát hiện ra các vấn đề như các ký tự đặc biệt mà bạn có thể không thấy trong trình chỉnh sửa thông thường của mình

Tiếp tục gửi câu hỏi của bạn;

Mỗi hình ảnh trong HTML được hiển thị bằng cách sử dụng thẻ với nguồn hình ảnh được chỉ định trong thuộc tính src

Bạn có thể đặt đường dẫn tương đối hoặc đường dẫn tuyệt đối đến thuộc tính src tùy thuộc vào vị trí bạn đặt hình ảnh

Nếu hình ảnh của bạn được lưu cục bộ trong một thư mục bên cạnh vị trí tài liệu HTML của bạn thì bạn có thể sử dụng đường dẫn tương đối

Giả sử bạn có cấu trúc thư mục sau trong dự án của mình

html-project
├── image.jpeg
└── index.html

Sau đó, bên trong tệp

<img src="image.jpeg" />

3, bạn có thể hiển thị hình ảnh bằng thẻ sau

<img src="image.jpeg" />

Khi hình ảnh của bạn nằm trong một thư mục như trong cấu trúc sau

html-project
├── assets
│   └── image.jpeg
└── index.html

Sau đó, bạn cần thêm thư mục

<img src="image.jpeg" />

4 vào thuộc tính src như sau

<img src="assets/image.jpeg" />

Đường dẫn tương đối cũng có thể đi lên một thư mục bằng cách sử dụng mẫu

<img src="image.jpeg" />

6, vì vậy nếu bạn có cấu trúc sau

html-project
├── assets
│   └── image.jpeg
└── pages
    └── index.html

Tệp

<img src="image.jpeg" />

3 có thể truy cập hình ảnh bằng cách sử dụng thuộc tính src sau

<img src="../assets/image.jpeg" />

Khi bạn có đường dẫn chính xác, đừng quên kiểm tra phần mở rộng của hình ảnh và đảm bảo rằng nó giống nhau giữa src và hình ảnh thực tế

Đôi khi một hình ảnh có phần mở rộng

html-project
├── assets
│   └── image.jpeg
└── index.html

0 được ghi vào thuộc tính src dưới dạng phần mở rộng

html-project
├── assets
│   └── image.jpeg
└── index.html

2

Sau khi đường dẫn src hình ảnh chính xác, thì bạn cần kiểm tra xem máy chủ của bạn có thể truy cập hình ảnh hay không

Hãy nhớ rằng nếu bạn sử dụng máy chủ phát triển cục bộ như XAMPP, WAMP hoặc MAMP thì hình ảnh phải được đặt bên trong thư mục phát triển

Đối với WAMP, hình ảnh phải nằm trong thư mục

html-project
├── assets
│   └── image.jpeg
└── index.html

4, trong khi đối với XAMPP và MAMP, bạn cần đặt hình ảnh bên trong thư mục

html-project
├── assets
│   └── image.jpeg
└── index.html

5

Cuối cùng, nếu bạn đang sử dụng đường dẫn tuyệt đối, hãy đảm bảo rằng bạn không đặt đường dẫn đĩa cứng cục bộ của mình vào thuộc tính src

Ví dụ sau sẽ không hoạt động khi bạn đưa trang web lên mạng

<img src="file:///Users/nsebhastian/html-project/assets/image.jpeg" />

Khi bạn đã xác minh rằng hình ảnh có thể truy cập được trong quá trình phát triển, hình ảnh vẫn có thể biến mất khỏi trang web sản xuất của bạn do bộ đệm

Hãy xem cách xóa bộ nhớ cache tiếp theo

Kiểm tra bộ đệm để khắc phục hình ảnh không hiển thị

Một lý do khiến hình ảnh không hiển thị trên trang web là do bộ đệm của trình duyệt hoặc máy chủ vẫn phục vụ trang HTML cũ cho khách truy cập

Điều này chỉ xảy ra khi bạn sửa đổi tệp HTML đã xuất bản để đưa hình ảnh mới vào trang

Xóa bộ nhớ cache của trình duyệt có thể khác nhau tùy thuộc vào trình duyệt bạn đang sử dụng

Nếu đang sử dụng Chrome, bạn có thể xóa bộ nhớ đệm bằng cách mở menu công cụ dành cho nhà phát triển rồi nhấp chuột phải vào biểu tượng tải lại

Tại sao HTML của tôi không hiển thị?

Tại sao tệp HTML không mở trong Chrome?

Tại sao các thay đổi HTML của tôi không phản ánh trong trình duyệt?

Tại sao mã HTML của tôi hiển thị dưới dạng văn bản?