Để 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
- Đả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
- 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
3, bạn có thể hiển thị hình ảnh bằng thẻ sau
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
4 vào thuộc tính src
như sau
Đườ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
6, vì vậy nếu bạn có cấu trúc sauhtml-project
├── assets
│ └── image.jpeg
└── pages
└── index.html
Tệp
3 có thể truy cập hình ảnh bằng cách sử dụng thuộc tính src
sau
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
2Sau 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
5Cuố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
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