Dán HTML và xem hiển thị trực tiếp ở mọi chiều rộng màn hình - sau đó dọn dẹp, thu gọn hoặc kiểm tra lỗi.
Chiều rộng
HTML
Xem trước
Nhấn Kiểm tra để xem số lượng phần tử, cấu trúc tiêu đề và danh sách vấn đề trong mã đánh dấu.
Vấn đề
Cấu trúc tiêu đề
Các thẻ dùng nhiều nhất
Đầu ra console từ bản xem trước xuất hiện ở đây khi script được phép chạy.
Giới thiệu Trình xem HTML
Một mẫu email, một đoạn trích từ ticket, một báo cáo xuất ra: đôi khi bạn chỉ cần xem một đoạn HTML trông như thế nào. Dán vào và nó được hiển thị ngay khi bạn gõ, bên trong một khung bị khóa, ở chiều rộng màn hình bạn chọn. Bên cạnh bản xem trước, bạn có thể làm gọn, thu nhỏ, chạy script của nó với console và xem danh sách những gì thực sự sai trong mã.
Chức năng
Xem trước trực tiếp khi gõ; trên 200.000 ký tự, nó tạm dừng cho đến khi bạn nhấn Tải lại.
Kích thước xem trước điện thoại, máy tính bảng, desktop và toàn chiều rộng, cùng chế độ toàn màn hình.
Script tắt theo mặc định; bật lên để xem đầu ra console và lỗi.
Làm đẹp mã lộn xộn hoặc rút gọn, không động đến nội dung của pre, script hay style.
Báo cáo kiểm tra: số lượng phần tử, dàn ý tiêu đề và các vấn đề cụ thể.
Mở một tệp .html trên máy, sao chép kết quả hoặc tải xuống.
Cách thức hoạt động
1Dán HTML, mở một tệp .html hoặc tải ví dụ mẫu.
2Chọn chiều rộng xem trước và quyết định có cho script chạy hay không.
3Làm đẹp, rút gọn hoặc kiểm tra, rồi sao chép hoặc tải kết quả xuống.
Vì sao bản xem trước chạy trong sandbox
HTML được dán có thể chứa script, biểu mẫu và liên kết mà bạn không viết. Bản xem trước chạy trong một iframe sandbox với origin mờ (opaque) riêng, nên không gì bên trong có thể đọc cookie của trang này hay phiên của bạn, gửi dữ liệu thay bạn hoặc chuyển trang này sang địa chỉ khác. Script vẫn tắt cho đến khi bạn bật.
Phần kiểm tra xem xét những gì
Nó đọc mã bằng một trình phân tích HTML chuẩn và chỉ báo cáo những gì nó thấy: thẻ mở mà không bao giờ đóng, thẻ đóng không có thẻ mở, hình ảnh thiếu văn bản alt, id trùng lặp, liên kết mở tab mới mà không có rel="noopener", cấp tiêu đề bị nhảy cóc, tài nguyên tải qua http:// và, với một trang hoàn chỉnh, thiếu doctype, title, lang hoặc thẻ viewport.
Những gì phần kiểm tra cố ý bỏ qua
Nó báo lỗi, không báo phong cách. Các thẻ đóng mà chuẩn HTML cho phép bỏ, như </p>, </li>, </td>, </tr> và </option>, không bao giờ bị liệt kê là chưa đóng, còn các phần tử rỗng như <br>, <img> và <input> không cần thẻ đóng. alt="" để trống vẫn được tính là có văn bản thay thế, đúng với ảnh trang trí. Liên kết có target="_blank" được chấp nhận khi có rel="noopener" hoặc rel="noreferrer". Liên kết http:// thông thường trong <a href> không bị tính là không an toàn; chỉ các tài nguyên được tải như ảnh, script, stylesheet và iframe mới bị tính. Quay lại cấp tiêu đề cao hơn (từ h4 lên h2) là bình thường; chỉ bước nhảy xuống bỏ qua một cấp (từ h2 xuống h4) mới bị báo. Các kiểm tra doctype, title, lang và viewport chỉ chạy khi nội dung dán vào là cả một trang, tức là có doctype hoặc thẻ html, head hay body, nên một khối email hay đoạn mã từ CMS không bị trừ điểm vì chúng.
Kiểm tra email HTML trước khi gửi
Hãy xem trước ở chiều rộng Điện thoại (375 px), vì nhiều người mở email trên điện thoại, rồi đến Máy tính bảng (768 px) và Máy tính (1280 px). Để tắt script: ứng dụng email không chạy JavaScript, nên bản xem trước không có script gần với những gì người đọc thấy hơn. Dùng URL ảnh tuyệt đối với https://, vì cả bản xem trước lẫn ứng dụng email của người nhận đều không thấy được tệp trên máy bạn. Rút gọn sẽ xóa chú thích thường nhưng giữ chú thích điều kiện bắt đầu bằng <!--[if, như <!--[if mso]> ... <![endif]-->. Nó không giữ thẻ đóng <!--<![endif]--> của mẫu <!--[if !mso]><!-->, nên đừng rút gọn template có dùng mẫu này, nếu không Outlook có thể ẩn mọi thứ phía sau. Bản xem trước là cách trình duyệt hiển thị; Outlook cổ điển trên Windows vẽ email bằng bộ máy của Word, vì vậy hãy tự gửi thử một email đến đó trước khi gửi số lượng lớn.
Câu hỏi
HTML của tôi có bị tải lên hay lưu lại không?
Xem trước, làm đẹp và rút gọn đều diễn ra trong trình duyệt của bạn. Chỉ báo cáo kiểm tra gửi mã lên máy chủ, nơi nó được phân tích và trả về trong cùng một phản hồi: không gì được ghi ra đĩa hay ghi log, và dữ liệu sử dụng chỉ giữ các con số đếm.
Vì sao script của tôi không chạy?
Script tắt theo mặc định vì mã được dán không đáng tin cậy. Đánh dấu "Chạy script" và bản xem trước tải lại với JavaScript được bật, vẫn trong sandbox, và đầu ra console hiện bên dưới bản xem trước.
Vì sao hình ảnh hoặc stylesheet dùng đường dẫn tương đối không tải được?
Bản xem trước được dựng từ văn bản đã dán, không phải từ máy tính hay máy chủ của bạn, nên một đường dẫn tương đối như images/logo.png sẽ được tìm trên trang này và không thấy. Hãy dùng URL tuyệt đối, hoặc thêm thẻ <base href="..."> trỏ tới nơi các tệp thực sự nằm.
Làm đẹp có thay đổi giao diện trang không?
Nó chỉ thụt lề lại giữa các thẻ và giữ nguyên nội dung của pre, textarea, script và style. Khoảng trắng giữa các phần tử inline đôi khi có thể lệch nhẹ, vì vậy hãy xem lại bản xem trước sau khi định dạng.
Công cụ xử lý được tài liệu lớn đến mức nào?
Báo cáo kiểm tra nhận tối đa 1.000.000 ký tự và liệt kê nhiều nhất 200 vấn đề. Xem trước trực tiếp tạm dừng khi vượt 200.000 ký tự để việc gõ vẫn mượt; nhấn Tải lại hoặc Ctrl+Enter để cập nhật.
Tôi có thể xem trước mẫu email HTML không?
Có. Dán HTML của email hoặc mở tệp .html, chuyển độ rộng sang Điện thoại (375 px) và Máy tính (1280 px) để xem cả hai bố cục, rồi bấm Kiểm tra để tìm ảnh thiếu văn bản alt và tài nguyên tải qua http:// không mã hóa. Bản xem trước dùng công cụ hiển thị của trình duyệt, còn mỗi ứng dụng email có công cụ riêng và nhiều ứng dụng bỏ bớt một phần CSS, nên nó chỉ cho thấy gần đúng những gì webmail trên trình duyệt hiển thị, không phải chính xác mọi hộp thư. Ứng dụng email không chạy JavaScript, vì vậy hãy để Chạy script tắt. Trước khi gửi thật, hãy gửi một email thử tới các ứng dụng mà người đọc của bạn dùng.
Mở tệp HTML người khác gửi cho tôi có an toàn không?
An toàn hơn so với mở trực tiếp. Mở tệp đưa tệp vào trình soạn thảo trong trình duyệt của bạn, và không có gì được gửi lên máy chủ trừ khi bạn bấm Kiểm tra. Bản xem trước chạy trong một khung cách ly, tắt script và tắt gửi biểu mẫu, nên trang không thể chạy mã, gửi biểu mẫu hay truy cập cookie của trang này. Hình ảnh và stylesheet có địa chỉ http(s) đầy đủ vẫn được tải, nên người gửi có thể biết tệp đã được mở. Hãy đọc mã nguồn trước, để Chạy script tắt và đừng bao giờ nhập mật khẩu vào một trang được gửi cho bạn.
Vì sao chữ có dấu biến thành � sau khi tôi mở tệp?
Mở tệp luôn đọc tệp theo UTF-8 và bỏ qua thẻ <meta charset> bên trong. Trang được lưu bằng Windows-1258 hoặc một bảng mã cũ như TCVN3, thường gặp ở trình soạn thảo và tệp xuất cũ trên Windows, lưu các chữ như ă, ơ, ư bằng những byte không phải UTF-8 hợp lệ, nên mỗi chữ hiện thành ký tự thay thế �. Mở tệp trong trình soạn thảo, lưu lại dưới dạng UTF-8 (Notepad: Save as, Encoding UTF-8; VS Code: nhấp vào bảng mã trên thanh trạng thái rồi chọn Save with Encoding) và mở lại ở đây. Hoặc mở tệp trong trình duyệt, xem mã nguồn rồi dán vào đây, vì trình duyệt đã giải mã nó theo charset của chính trang đó.
Vì sao biểu mẫu hoặc liên kết mở tab mới không làm gì trong bản xem trước?
Hộp cát không bao giờ cho phép gửi biểu mẫu hay mở cửa sổ bật lên, kể cả khi bật Chạy script, nên bấm Gửi không gửi gì và các liên kết target="_blank" cùng lệnh gọi window.open() đều bị chặn. Nhờ vậy trang được dán không thể gửi dữ liệu hay mở trang khác. Liên kết thông thường mở ngay trong khung xem trước, còn các trang từ chối hiển thị trong khung sẽ trống hoặc báo bị từ chối. Để kiểm tra biểu mẫu, hãy đọc action, method và các trường trong mã nguồn; Kiểm tra cũng liệt kê mọi liên kết target="_blank" thiếu rel="noopener". Hãy thử gửi thật trên máy chủ phát triển của bạn.