Làm cách nào để kiểm tra xem html có hợp lệ không?

Tôi gặp một tình huống cần xác thực một chuỗi HTML để đảm bảo chuỗi đó được cấu trúc chính xác. Trong hướng dẫn nhanh này, tôi sẽ chỉ cho bạn một ví dụ về cách kiểm tra xem một chuỗi HTML có hợp lệ hay không bằng cách sử dụng một số javascript đơn giản

🤓 Ví dụ nhanh

Dưới đây là một ví dụ nhanh về vùng văn bản sẽ kiểm tra xem nội dung có chứa HTML hợp lệ không. Nhập một số HTML vào vùng văn bản và nhấp vào nút gửi bên dưới để kiểm tra xem nó có chứa HTML hợp lệ không

Hãy xem cách tạo cái này bên dưới 👇

💻 Mã

Trong ví dụ này, chúng tôi đang kiểm tra nội dung của vùng văn bản để xem liệu nó có chứa chuỗi HTML hợp lệ không. Chúng tôi có thể dễ dàng làm điều này với javascript bằng cách sử dụng javascript gốc DOMParser()

let htmlString = '<p>testing</p>';
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, "application/xml");

Tiếp theo, chúng ta có thể truy vấn đối tượng trình phân tích cú pháp và truy vấn một phần tử có tên là trình phân tích cú pháp, doc.querySelector('parsererror'). Nếu HTML không hợp lệ, phần tử lỗi trình phân tích cú pháp này sẽ chứa thông báo có lỗi

Chúng ta có thể dễ dàng quấn mã này vào một hàm để kiểm tra xem chuỗi đầu vào có hợp lệ không HTML

function validateHTML(htmlString){
    let parser = new DOMParser();
    let doc = parser.parseFromString(htmlString, "application/xml");
    let errorNode = doc.querySelector('parsererror');
    document.getElementById('message').innerHTML = '';
    if (errorNode) {
        document.getElementById('message').appendChild(errorNode);
    } else {
        document.getElementById('message').innerText = 'Valid HTML!';
    }
}

Từ đoạn mã trên, chúng tôi sẽ xuất phản hồi cho một phần tử có id là #message. Đây là HTML chúng ta cần để kiểm tra mọi thứ

<textarea id="code"></textarea>

<button onclick="validateHTML(document.getElementById('code').value)" id="submit">Submit</button>

<br>
<div id="message"></div>

Khi chúng tôi nhấp vào nút, chúng tôi kích hoạt sự kiện onclick() và chuyển nội dung của vùng văn bản vào chức năng mới của chúng tôi. Nếu nội dung chứa HTML hợp lệ, chúng tôi sẽ thấy thông báo có nội dung HTML hợp lệ. ;

Nếu bạn thấy thông báo này, điều đó có nghĩa là chúng tôi đang gặp sự cố khi tải các tài nguyên bên ngoài trên trang web của mình

Nếu bạn đang sử dụng bộ lọc web, vui lòng đảm bảo rằng các miền *. kastatic. tổ chức và *. kasandbox. org được bỏ chặn

Xác thực dữ liệu JSON theo đặc tả JSON ngay lập tức được gọi là kẻ nói dối JSON. Các lỗi bao gồm số dòng và mã trích dẫn sẽ được in nếu có

Trình xác thực YAML

Xác thực dữ liệu YAML dựa trên đặc tả YAML ngay lập tức được gọi là YAML linter. Các lỗi bao gồm số dòng và mã trích dẫn sẽ được in nếu có

Trình xác thực thẻ tín dụng

Xác thực an toàn số thẻ tín dụng ngay lập tức để kiểm tra xem đó có phải là thẻ hợp lệ hay không và tìm loại thẻ. Hoàn toàn hoạt động trên trình duyệt của bạn vì sự an toàn và riêng tư của bạn

Trình kiểm tra biểu thức chính quy

Kiểm tra một biểu thức chính quy đối với bất kỳ chuỗi nào ngay lập tức với các kết quả phù hợp được tô sáng bao gồm một bảng gian lận và một tham chiếu

Một cách là làm điều đó trước mã HTML. Dòng tiếp theo đề cập đến sự lựa chọn phổ biến của các ký tự, ISO 8859-1, (Latin-1)

Ngoài ra, hãy thêm dòng vào phần ... của mã HTML (lưu ý việc sử dụng dấu ngoặc kép - đây không phải là lỗi đánh máy)

Xác thực các tệp HTML để tuân thủ các tiêu chuẩn W3C và thực hiện linting để đánh giá chất lượng mã theo các phương pháp hay nhất

Tìm các thẻ HTML bị thiếu hoặc không cân bằng trong tài liệu của bạn, các ký tự lạc chỗ, ID trùng lặp, thuộc tính bị thiếu hoặc không hợp lệ và các đề xuất khác

Hỗ trợ HTML5, SVG 1. 1, Toán học 3. 0, NÓ LÀ 2. 0, RDFa Lite 1. 1. Việc triển khai dựa trên Trình xác thực. nữ

Vì vậy, bạn đã viết một vài trang HTML và chúng có vẻ hiển thị ổn với bạn, nhưng có một số điều không hoàn toàn đúng với chúng. Cách tốt nhất để bắt đầu tìm ra điều gì sai và đảm bảo rằng các trang này (và bất kỳ trang nào bạn viết trong tương lai) sẽ được hiển thị chính xác trên các trình duyệt mà không có lỗi?

Xác thực là câu trả lời. Có nhiều công cụ có sẵn, từ W3C và những nơi khác, cho phép bạn xác thực mã trên trang web của mình. Ba trình xác thực phổ biến nhất mà bạn sẽ sử dụng là

• Trình xác thực. nu. Trình xác nhận trường học mới xác thực HTML5, ARIA, SVG 1. 1 và MathML 2. 0. nó đi qua toàn bộ tài liệu và chỉ ra những chỗ mà phần đánh dấu của bạn không tuân theo chính xác loại tài liệu đó (nghĩa là có lỗi). Đây là cái chúng tôi khuyên dùng nếu bạn đang sử dụng loại tài liệu HTML5, giống như chúng tôi làm trong hầu hết khóa học này
• Trình xác thực đánh dấu W3C. Điều này xem xét loại tài liệu HTML (X) bạn đang sử dụng cho tài liệu mà bạn cung cấp cho nó để kiểm tra, sau đó kiểm tra đánh dấu của bạn cho phù hợp. Đây là cái chúng tôi khuyên dùng nếu bạn đang sử dụng HTML4 hoặc XHTML1. x tài liệu. Nó xác thực HTML5, nhưng trình xác thực. nu được cho là cập nhật hơn
• Trình kiểm tra liên kết W3C. Điều này xem qua tài liệu mà bạn đưa cho nó để kiểm tra và kiểm tra tất cả các liên kết bên trong tài liệu đó để đảm bảo chúng không bị hỏng (tức là các giá trị

  function validateHTML(htmlString){
      let parser = new DOMParser();
      let doc = parser.parseFromString(htmlString, "application/xml");
      let errorNode = doc.querySelector('parsererror');
      document.getElementById('message').innerHTML = '';
      if (errorNode) {
          document.getElementById('message').appendChild(errorNode);
      } else {
          document.getElementById('message').innerText = 'Valid HTML!';
      }
  }
  

  0 trỏ đến các tài nguyên không tồn tại)
• Trình xác thực CSS của W3C. Như bạn có thể đoán, điều này sẽ đi qua tài liệu CSS (hoặc HTML/CSS) và kiểm tra xem CSS có tuân theo đúng thông số kỹ thuật CSS không

Trong bài viết về Chương trình giảng dạy về Tiêu chuẩn Web này, chúng tôi sẽ đề cập đến cách sử dụng hai phần đầu tiên trong số này, chỉ cho bạn cách xác thực đánh dấu, diễn giải các loại kết quả điển hình mà trình xác thực cung cấp cho bạn. Trình kiểm tra liên kết rất rõ ràng và chúng ta sẽ đề cập đến việc gỡ lỗi CS sau này trong khóa học

lỗi

Trong lập trình máy tính, nói chung có hai loại vấn đề với mã

• lỗi cú pháp - đây là lỗi trong quá trình viết mã khiến máy tính không thể thực thi hoặc biên dịch chương trình đúng cách
• lỗi lập trình (hoặc logic) - đây là nơi mã không phản ánh hoàn toàn ý định của lập trình viên

Với hầu hết các ngôn ngữ lập trình, lỗi đầu tiên cực kỳ dễ phát hiện — chương trình của bạn sẽ từ chối chạy hoặc biên dịch cho đến khi lỗi được khắc phục. Điều này làm cho việc tìm và sửa các loại lỗi này trở nên dễ dàng hơn nhiều trong những thời điểm chung chung là “Vậy tại sao nó không hoạt động như những gì tôi muốn?”

HTML không phải là ngôn ngữ lập trình. Lỗi cú pháp trong một trang web thường không khiến trình duyệt web từ chối mở trang (mặc dù XHTML có xu hướng chặt chẽ hơn nhiều so với HTML — ít nhất là khi được phân phát dưới dạng "[XML thích hợp]"). Đây là một trong những lý do lớn nhất cho sự chấp nhận và lan truyền nhanh chóng của web

Trình duyệt web đầu tiên, WorldWideWeb (được viết bởi Tim Berners-Lee) cũng là một trình soạn thảo, cho phép mọi người tạo các trang web mà không cần học HTML trước. Trình chỉnh sửa này đã tạo HTML không hợp lệ. Điều này có thể đã được khắc phục, nhưng nó đã tạo ra một tiền lệ quan trọng tồn tại trong tất cả các trình duyệt web cho đến ngày nay — rằng việc cho phép mọi người truy cập vào nội dung quan trọng hơn là phàn nàn về lỗi với những người không hiểu hoặc không thể hiểu được chúng.

Xác thực là gì?

Mặc dù các trình duyệt web sẽ chấp nhận các trang web xấu (không hợp lệ là thuật ngữ chính thức) và cố gắng hết sức để hiển thị mã bằng cách đoán đúng nhất ý định của tác giả, nhưng vẫn có thể kiểm tra xem HTML đã được viết đúng hay chưa. . Chúng tôi gọi đây là "xác thực" HTML

Chương trình xác thực so sánh mã HTML trong trang web với các quy tắc của loại tài liệu đi kèm và cho bạn biết liệu các quy tắc đó có bị vi phạm hay không và ở đâu

Có một cảm giác chung giữa một số nhà phát triển web rằng nếu một trang web trông ổn trong trình duyệt, thì nó không hợp lệ cũng không thành vấn đề. Họ mô tả việc xác thực là một mục tiêu lý tưởng, nhưng không phải là vấn đề rõ ràng trắng đen

Có một số sự khôn ngoan trong thái độ này. Đặc tả HTML4 không hoàn hảo và một số điều được cho là đúng — chẳng hạn như bắt đầu một danh sách có thứ tự tại một điểm khác 1 — là HTML không hợp lệ. HTML5 khắc phục khá nhiều vấn đề về thông số kỹ thuật, bao gồm cả vấn đề này, nhưng bạn vẫn có thể gặp phải các tình huống cần phải phá vỡ xác thực. Như câu nói đi

Tìm hiểu các quy tắc để bạn biết cách phá vỡ chúng đúng cách

Có hai lý do rất mạnh mẽ để xác thực HTML của bạn khi bạn viết nó

• Bạn không phải lúc nào cũng hoàn hảo và mã của bạn cũng vậy — tất cả chúng ta đều mắc lỗi và các trang web của bạn sẽ có chất lượng cao hơn (nghĩa là hoạt động ổn định hơn) nếu bạn loại bỏ tất cả các lỗi
• Trình duyệt thay đổi. Trong tương lai, có khả năng các trình duyệt sẽ ít tha thứ hơn khi phân tích cú pháp mã không hợp lệ, không tha thứ hơn

Xác thực là hệ thống cảnh báo sớm của bạn về việc đưa các lỗi vào phần đánh dấu của bạn. Lỗi này có thể biểu hiện theo những cách thú vị và khó xác định. Khi một trình duyệt gặp phải HTML không hợp lệ, nó phải đoán xem bạn định làm gì—và các trình duyệt khác nhau có thể đưa ra các câu trả lời khác nhau

Các trình duyệt khác nhau diễn giải HTML không hợp lệ khác nhau

HTML hợp lệ là hợp đồng duy nhất bạn có với nhà sản xuất trình duyệt. Đặc tả HTML cho biết bạn nên viết nó như thế nào và cách chúng diễn giải tài liệu của bạn. Trong thời gian gần đây, việc tuân thủ các tiêu chuẩn của các trình duyệt đã đạt đến mức, miễn là bạn viết mã hợp lệ, tất cả các trình duyệt chính sẽ nhập mã của bạn giống nhau. Dù sao thì đây hầu như luôn là trường hợp của HTML, với các tiêu chuẩn khác có một số khác biệt hơn trong hỗ trợ ở đây và ở đó

Nhưng nếu bạn chuyển mã không hợp lệ của trình duyệt thì sao? . Về cơ bản, nó nói “ok, mã này không hợp lệ, vậy làm cách nào để chúng tôi hiển thị trang này cho người dùng cuối? . ”

Nghe có vẻ tuyệt phải không? . Ví dụ

This text should be bold

Should this text be bold? How does the HTML look when rendered?

This text should be a link

Should this text be a link? How does the HTML look when rendered?

Các lỗi là phần tử

function validateHTML(htmlString){
    let parser = new DOMParser();
    let doc = parser.parseFromString(htmlString, "application/xml");
    let errorNode = doc.querySelector('parsererror');
    document.getElementById('message').innerHTML = '';
    if (errorNode) {
        document.getElementById('message').appendChild(errorNode);
    } else {
        document.getElementById('message').innerText = 'Valid HTML!';
    }
}

• Opera làm cho các phần tử tiếp theo là con của phần tử in đậm
• Firefox bổ sung thêm các phần tử in đậm giữa các đoạn không có trong phần đánh dấu
• Internet Explorer đặt văn bản “Văn bản này phải là một liên kết” bên ngoài thẻ liên kết tạo liên kết

Phiên bản gốc của ví dụ này có thể được tìm thấy trong bài viết của Hallvord Steen Cùng một lỗi DOM, các diễn giải trình duyệt khác nhau - hãy đọc phần này để biết cách xử lý sâu hơn các lỗi HTML và một số thông tin về các công cụ sửa lỗi

Không hành vi nào của các trình duyệt khác nhau là sai; . Điểm mấu chốt là, tránh đánh dấu không hợp lệ nếu có thể trong trang của bạn

Lưu ý rằng HTML5 sửa lỗi này, vì lần đầu tiên trong lịch sử HTML, nó xác định cách trình duyệt xử lý đánh dấu định dạng sai. Tuy nhiên, tại thời điểm viết bài, hỗ trợ xử lý lỗi HTML5 này không phổ biến trên các trình duyệt, vì vậy bạn chưa thể dựa vào nó

Bây giờ chúng ta đã khám phá tất cả lý thuyết đằng sau việc xác thực HTML của bạn, chúng ta sẽ nói về phần dễ dàng — xác thực thực tế. Ok, điều đó không hoàn toàn chính xác. Việc đưa một URL vào trình xác thực và xem trang đó có hợp lệ hay không thật dễ dàng; . Tôi sẽ đi qua một số ví dụ dưới đây

Ví dụ chúng ta sẽ xem xét trong phần này như sau (bạn cũng có thể tải xuống hoặc xem HTML)

  
    Validating your HTML
  
  
    
The tale of Herbet Gruel
    
Welcome to my story. I am a slight whisp of a man, slender and fragile, features wrinkled and worn, eyes sunken into their sockets like rabbits cowering in their burrows. The years have not been kind to me, but yet I hold no regrets, as I have overcome all that sought to ail me, and have been allowed to bide my time, making mischief as I travel to and fro, 'cross the unyielding landscape of the outer rim.
    
    
Buster
    
Buster is my guardian angel. Before that, he was my dog. Before that, who knows? I lost my dog many moons ago while out hunting geese in the undergrowth. A shot rang out from my rifle, and I called for Buster to collect the goose I had felled. He ran off towards where the bird had landed, but never returned. I never found his body, but I comfort myself with the thought that he did not die; rather he transcended to a higher place, and now watches over me, to ensure my well-being.
    
    
My possessions
    
A travelling man needs very little to accompany him on the road:


My hat full of memories
My trusty walking cane
A purse that did contain gold at one time
A diary, from the year 1874

An empty glasses case
A newspaper, for when I need to look busy

Trang đơn giản này bao gồm ba tiêu đề, ba đoạn văn, một siêu liên kết và một danh sách không có thứ tự. Nó sử dụng XHTML 1. 0 Loại tài liệu nghiêm ngặt do quy tắc của nó được đặt để xác thực đối với. Có một số lỗi trong tài liệu mà bạn sẽ phát hiện ra bên dưới bằng cách sử dụng trình xác thực HTML của W3C. Chúng tôi đã sử dụng XHTML 1. 0 nghiêm ngặt vì nó có nhiều khả năng phát sinh lỗi hơn so với loại tài liệu HTML5

Trình xác thực HTML của W3C

W3C có sẵn một trình xác nhận trực tuyến — điều hướng đến điều này bằng cách nhấp chuột phải/ctrl vào siêu liên kết mà bạn thấy ở đây và chọn tùy chọn “Mở trong tab mới” — sẽ rất hữu ích nếu bạn có thể chuyển đổi các tab để chuyển giữa các trình xác thực

Lưu ý rằng bạn cũng có thể xác thực các trang trong trình xác thực W3C từ trực tiếp trong trình duyệt Opera bằng cách chỉ cần nhấp chuột phải/nhấp Ctrl và chọn tùy chọn “Xác thực”

Bạn sẽ nhận thấy rằng trình xác thực có sẵn ba tab trên đầu giao diện

• Xác thực bằng URI. Cho phép bạn nhập địa chỉ của một trang đã có trên internet để xác thực
• Xác thực bằng cách tải tệp lên. Cho phép bạn tải lên tệp HTML để xác thực
• Xác thực bằng cách nhập trực tiếp. Cho phép bạn dán nội dung của tệp HTML vào cửa sổ để xác thực

Bất kỳ phương pháp nào bạn sử dụng sẽ cho bạn kết quả như nhau; . Làm như vậy sẽ cho bạn kết quả như trong Hình 1

Hình 1. Kết quả xác thực tài liệu mẫu — 17 lỗi

Điều này nghe có vẻ đáng lo ngại, đặc biệt là khi chúng tôi nói với bạn rằng không có 17 lỗi nào trong tài liệu. Đừng tuyệt vọng — nó đang báo cáo nhiều lỗi hơn thực tế vì thường lỗi ở đầu trang sẽ xếp tầng, khiến trình xác thực báo cáo nhiều lỗi hơn ở phía dưới, vì có vẻ như nhiều phần tử chưa được đóng hoặc được lồng vào không chính xác. Bạn chỉ cần suy nghĩ về ý nghĩa của các thông báo lỗi và tìm các lỗi rõ ràng trong phần đánh dấu. Bảng 1 bên dưới hiển thị tất cả các lỗi mà chúng tôi đã sửa để làm cho trang hợp lệ, cùng với logic của chúng tôi để tìm ra lỗi sai và các bản sửa lỗi mà chúng tôi đã áp dụng để giải quyết vấn đề

function validateHTML(htmlString){
    let parser = new DOMParser();
    let doc = parser.parseFromString(htmlString, "application/xml");
    let errorNode = doc.querySelector('parsererror');
    document.getElementById('message').innerHTML = '';
    if (errorNode) {
        document.getElementById('message').appendChild(errorNode);
    } else {
        document.getElementById('message').innerText = 'Valid HTML!';
    }
}

function validateHTML(htmlString){
    let parser = new DOMParser();
    let doc = parser.parseFromString(htmlString, "application/xml");
    let errorNode = doc.querySelector('parsererror');
    document.getElementById('message').innerHTML = '';
    if (errorNode) {
        document.getElementById('message').appendChild(errorNode);
    } else {
        document.getElementById('message').innerText = 'Valid HTML!';
    }
}

function validateHTML(htmlString){
    let parser = new DOMParser();
    let doc = parser.parseFromString(htmlString, "application/xml");
    let errorNode = doc.querySelector('parsererror');
    document.getElementById('message').innerHTML = '';
    if (errorNode) {
        document.getElementById('message').appendChild(errorNode);
    } else {
        document.getElementById('message').innerText = 'Valid HTML!';
    }
}

Tài sản của tôi

phần tử được đóng đúng cách và được phép trong ngữ cảnh này. Bạn nên lưu ý rằng thông báo lỗi này thường có nghĩa là có một phần tử chưa được đóng gần đó…

gắn thẻ vào dòng phía trên tiêu đề được đề cập

Với những lỗi này đã được sửa, trình xác thực hiện đưa ra thông báo thành công khá hài lòng, như trong Hình 2

Hình 2. Một thông báo thành công để nói rằng tất cả các lỗi của tôi đã được sửa

Đây là về tất cả những gì có để nó thực sự. Bạn chỉ cần giữ trí thông minh của mình về bạn và nhớ loại tài liệu mà trang của bạn đang được xác thực dựa trên. Tải xuống hoặc xem phiên bản cố định của HTML

Bản tóm tắt

Sau khi đọc bài viết này, bạn sẽ cảm thấy thoải mái khi sử dụng trình xác thực W3C trực tuyến để xác thực HTML của mình. Đây thực sự là phần nổi của tảng băng chìm liên quan đến việc xác thực — có nhiều công cụ phức tạp hơn được liệt kê bên dưới, sẽ giúp ích cho bạn khi các trang của bạn bắt đầu lớn hơn và phức tạp hơn

câu hỏi bài tập

• Điều gì xảy ra khi trình duyệt phân tích cú pháp HTML không hợp lệ?
• vấn đề với điều này là gì?
• Việc sử dụng bộ khung trong tài liệu được xác thực theo loại tài liệu nghiêm ngặt HTML 4 có tạo ra lỗi không?

Ghi chú. Tài liệu này ban đầu được xuất bản như một phần của Chương trình giảng dạy tiêu chuẩn Web Opera, có sẵn 24. Xác thực HTML của bạn, được viết bởi Mark Norman Francis. Giống như bản gốc, nó được xuất bản theo Creative Commons Ghi công, Phi thương mại - Chia sẻ tương tự 2. 5 giấy phép

Bạn sẽ kiểm tra HTML có hợp lệ hay không và viết mã cho nó như thế nào?

Làm cách nào tôi có thể kiểm tra định dạng HTML của mình trực tuyến?

Xác thực HTML cơ bản là gì?

Công cụ nào sau đây dùng để kiểm tra tính hợp lệ của HTML?