Hướng dẫn what is an efficient and correct way to find a valid html element? - một cách hiệu quả và chính xác để tìm một phần tử html hợp lệ là gì?

Gỡ lỗi không đáng sợ

Khi viết mã thuộc loại nào đó, mọi thứ thường ổn, cho đến khi điều đó đáng sợ khi xảy ra lỗi - bạn đã làm điều gì đó sai, vì vậy mã của bạn không hoạt động - hoặc hoàn toàn không, hoặc không hoàn toàn bạn muốn nó như thế nào. Ví dụ: sau đây cho thấy một lỗi được báo cáo khi cố gắng biên dịch một chương trình đơn giản được viết bằng ngôn ngữ rỉ sét.

Mặc dù vậy, việc gỡ lỗi không phải là đáng sợ - chìa khóa để thoải mái với việc viết và gỡ lỗi bất kỳ ngôn ngữ hoặc mã lập trình nào là quen thuộc với cả ngôn ngữ và công cụ.

HTML và gỡ lỗi

HTML không phức tạp để hiểu như rỉ sét. HTML không được biên dịch thành một dạng khác trước khi trình duyệt phân tích cú pháp và hiển thị kết quả (nó được giải thích, không được biên dịch). Và cú pháp phần tử của HTML được cho là dễ hiểu hơn rất nhiều so với "ngôn ngữ lập trình thực" như Rust, JavaScript hoặc Python. Cách trình duyệt phân tích HTML cho phép nhiều hơn nhiều so với cách chạy các ngôn ngữ lập trình, đó là cả một điều tốt và xấu.permissive than how programming languages are run, which is both a good and a bad thing.

Mã cho phép

Vậy chúng ta có nghĩa là gì về việc cho phép? Vâng, nói chung khi bạn làm điều gì đó sai trong mã, có hai loại lỗi chính mà bạn sẽ gặp phải:

• Lỗi cú pháp: Đây là các lỗi chính tả hoặc dấu chấm câu trong mã của bạn thực sự khiến chương trình không chạy, như lỗi rỉ sét được hiển thị ở trên. Đây thường là dễ dàng để khắc phục miễn là bạn quen thuộc với cú pháp của ngôn ngữ và biết các thông báo lỗi có nghĩa là gì.: These are spelling or punctuation errors in your code that actually cause the program not to run, like the Rust error shown above. These are usually easy to fix as long as you are familiar with the language's syntax and know what the error messages mean.
• Lỗi logic: Đây là những lỗi trong đó cú pháp thực sự chính xác, nhưng mã không phải là những gì bạn dự định, có nghĩa là chương trình chạy không chính xác. Chúng thường khó khắc phục hơn các lỗi cú pháp, vì không có thông báo lỗi để hướng bạn đến nguồn lỗi.: These are errors where the syntax is actually correct, but the code is not what you intended it to be, meaning that the program runs incorrectly. These are often harder to fix than syntax errors, as there isn't an error message to direct you to the source of the error.

Bản thân HTML không bị lỗi cú pháp vì các trình duyệt phân tích cú pháp một cách thoải mái, có nghĩa là trang vẫn hiển thị ngay cả khi có lỗi cú pháp. Các trình duyệt có các quy tắc tích hợp để nêu cách diễn giải đánh dấu bằng văn bản không chính xác, vì vậy bạn sẽ có được một cái gì đó chạy, ngay cả khi đó không phải là những gì bạn mong đợi. Điều này, tất nhiên, vẫn có thể là một vấn đề!

Lưu ý: HTML được phân tích cú pháp một cách hữu ích vì khi Web được tạo lần đầu tiên, người ta đã quyết định rằng việc cho phép mọi người được công bố nội dung của họ là quan trọng hơn là đảm bảo cú pháp là hoàn toàn chính xác. Web có lẽ sẽ không phổ biến như ngày nay, nếu nó đã nghiêm ngặt hơn ngay từ đầu. HTML is parsed permissively because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. The web would probably not be as popular as it is today, if it had been more strict from the very beginning.

Học tập tích cực: học mã cho phép

Đã đến lúc nghiên cứu tính chất cho phép của mã HTML.

1. Đầu tiên, tải xuống bản demo ví dụ gỡ lỗi của chúng tôi và lưu nó cục bộ. Bản demo này được viết một cách có chủ ý với một số lỗi tích hợp để chúng tôi khám phá (đánh dấu HTML được cho là được hình thành xấu, trái ngược với hình thành tốt).badly-formed, as opposed to well-formed).
2. Tiếp theo, mở nó trong một trình duyệt. Bạn sẽ thấy một cái gì đó như thế này:
   
3. Điều này ngay lập tức trông không tuyệt vời; Chúng ta hãy xem mã nguồn để xem liệu chúng ta có thể tìm ra lý do tại sao (chỉ có nội dung cơ thể được hiển thị):

   <h2>HTML debugging examplesh2>
   
   <p>What causes errors in HTML?
   
   <ul>
     <li>Unclosed elements: If an element is <strong>not closed properly,
         then its effect can spread to areas you didn't intend
   
     <li>Badly nested elements: Nesting elements properly is also very important
         for code behaving correctly. <strong>strong <em>strong emphasized?strong>
         what is this?em>
   
     <li>Unclosed attributes: Another common source of HTML problems. Let's
         look at an example: [\\p{L}\\s]*\\,*[\\p{L}\\s]*

   0 đầu tiên không có thẻ đóng. Điều này có vấn đề hơn một chút, vì không dễ để biết phần tử được cho là kết thúc ở đâu. Trong thực tế, toàn bộ phần còn lại của văn bản đã được nhấn mạnh mạnh mẽ.
4. Phần này là lồng nhau xấu:

   Regex.Matches(myHtml, "
   [\\p{L}\\s]*\\,*[\\p{L}\\s]*

   1. Không dễ để nói làm thế nào điều này đã được giải thích vì vấn đề trước đó.
5. Giá trị thuộc tính

   Regex.Matches(myHtml, "
   [\\p{L}\\s]*\\,*[\\p{L}\\s]*

   2 bị thiếu một báo giá kép đóng. Điều này dường như đã gây ra vấn đề lớn nhất - liên kết chưa được đưa ra.
6. Bây giờ chúng ta hãy nhìn vào đánh dấu mà trình duyệt đã hiển thị, trái ngược với đánh dấu trong mã nguồn. Để làm điều này, chúng tôi có thể sử dụng các công cụ nhà phát triển trình duyệt. Nếu bạn không quen với cách sử dụng các công cụ phát triển của trình duyệt, hãy dành vài phút để xem xét Khám phá các công cụ phát triển trình duyệt.
7. Trong trình kiểm tra DOM, bạn có thể thấy đánh dấu được hiển thị trông như thế nào:
8. Sử dụng trình kiểm tra DOM, hãy khám phá mã của chúng tôi một cách chi tiết để xem trình duyệt đã cố gắng sửa lỗi HTML của chúng tôi như thế nào (chúng tôi đã xem xét trong Firefox; các trình duyệt hiện đại khác sẽ cho kết quả tương tự):
   • Các đoạn văn và các mục trong danh sách đã được đưa ra các thẻ đóng.
   • Không rõ nguyên tố

     Regex.Matches(myHtml, "
     [\\p{L}\\s]*\\,*[\\p{L}\\s]*

     0 đầu tiên sẽ được đóng, vì vậy trình duyệt đã bọc từng khối văn bản riêng biệt với thẻ mạnh của riêng nó, ngay xuống dưới cùng của tài liệu!
   • Việc làm tổ không chính xác đã được trình duyệt cố định như được hiển thị ở đây:

     <strong>strong
       <em>strong emphasized?em>
     strong>
     <em> what is this?em>
     

   • Liên kết với trích dẫn kép bị thiếu đã bị xóa hoàn toàn. Mục danh sách cuối cùng trông như thế này:

     <li>
       <strong>
         Unclosed attributes: Another common source of HTML problems. Let's
         look at an example:
       strong>
     li>
     

Xác thực HTML

Vì vậy, bạn có thể thấy từ ví dụ trên mà bạn thực sự muốn đảm bảo HTML của bạn được hình thành tốt! Nhưng bằng cách nào? Trong một ví dụ nhỏ như cái nhìn thấy ở trên, thật dễ dàng để tìm kiếm qua các dòng và tìm thấy các lỗi, nhưng còn một tài liệu HTML khổng lồ, phức tạp thì sao?

Chiến lược tốt nhất là bắt đầu bằng cách chạy trang HTML của bạn thông qua dịch vụ xác thực đánh dấu - được tạo và duy trì bởi W3C, tổ chức chăm sóc các thông số kỹ thuật xác định HTML, CSS và các công nghệ web khác. Trang web này lấy một tài liệu HTML làm đầu vào, xem qua nó và cung cấp cho bạn một báo cáo để cho bạn biết điều gì sai với HTML của bạn.

Để chỉ định HTML để xác thực, bạn có thể cung cấp địa chỉ web, tải lên tệp HTML hoặc trực tiếp nhập một số mã HTML.

Học tập tích cực: Xác thực một tài liệu HTML

Hãy thử điều này với tài liệu mẫu của chúng tôi.

1. Đầu tiên, tải dịch vụ xác thực đánh dấu trong một tab Trình duyệt, nếu nó chưa mở.
2. Chuyển sang xác thực bằng tab đầu vào trực tiếp.
3. Sao chép tất cả các mã của tài liệu mẫu (không chỉ cơ thể) và dán nó vào khu vực văn bản lớn được hiển thị trong dịch vụ xác thực đánh dấu.
4. Nhấn nút Kiểm tra.

Điều này sẽ cung cấp cho bạn một danh sách các lỗi và thông tin khác.

Diễn giải các thông báo lỗi

Các thông báo lỗi thường hữu ích, nhưng đôi khi chúng không hữu ích; Với một chút thực hành, bạn có thể tìm ra cách diễn giải những điều này để sửa mã của bạn. Hãy xem qua các thông báo lỗi và xem ý nghĩa của chúng. Bạn sẽ thấy rằng mỗi tin nhắn đi kèm với một dòng và số cột để giúp bạn xác định vị trí lỗi một cách dễ dàng.

• "Cân nhắc thêm một thuộc tính

  Regex.Matches(myHtml, "
  [\\p{L}\\s]*\\,*[\\p{L}\\s]*

  4 vào thẻ bắt đầu

  Regex.Matches(myHtml, "
  [\\p{L}\\s]*\\,*[\\p{L}\\s]*

  5 để khai báo ngôn ngữ của tài liệu này.": Đây không phải là một lỗi mà là một cảnh báo. Khuyến nghị là luôn luôn định nghĩa một ngôn ngữ và cảnh báo này giải thích cách thực hiện.
• "Thẻ cuối

  Regex.Matches(myHtml, "
  [\\p{L}\\s]*\\,*[\\p{L}\\s]*

  6 ngụ ý, nhưng có các phần tử mở" (2 trường hợp): Những thông báo này cho thấy một phần tử được mở nên được đóng. Thẻ kết thúc được ngụ ý, nhưng không thực sự ở đó. Thông tin dòng/cột chỉ vào dòng đầu tiên sau dòng mà thẻ đóng thực sự nên, nhưng đây là một manh mối đủ tốt để xem những gì sai.
• "Phần tử chưa được giải thích

  Regex.Matches(myHtml, "
  [\\p{L}\\s]*\\,*[\\p{L}\\s]*

  7": Điều này thực sự dễ hiểu - một yếu tố

  Regex.Matches(myHtml, "
  [\\p{L}\\s]*\\,*[\\p{L}\\s]*

  0 không được giới thiệu và thông tin dòng/cột chỉ đến nơi nó ở.
• "Thẻ cuối

  Regex.Matches(myHtml, "
  [\\p{L}\\s]*\\,*[\\p{L}\\s]*

  7 vi phạm các quy tắc làm tổ": Điều này chỉ ra các phần tử lồng không chính xác và thông tin dòng/cột chỉ ra nơi chúng đang ở.
• "Kết thúc tệp đạt được khi bên trong một giá trị thuộc tính. Bỏ qua thẻ": cái này khá khó hiểu; Nó đề cập đến thực tế là có một giá trị thuộc tính không được hình thành đúng ở đâu đó, có thể ở gần cuối tệp vì phần cuối của tệp xuất hiện bên trong giá trị thuộc tính. Thực tế là trình duyệt không hiển thị liên kết sẽ cho chúng ta một manh mối tốt về yếu tố nào có lỗi.
• "Kết thúc tập tin nhìn thấy và có các yếu tố mở": Đây là một chút mơ hồ, nhưng về cơ bản đề cập đến thực tế có các yếu tố mở cần phải được đóng đúng. Các số dòng trỏ đến một vài dòng cuối cùng của tệp và thông báo lỗi này đi kèm với một dòng mã chỉ ra một ví dụ về một phần tử mở:

  example: 
   ANY UTF8 char 
  

  0": Điều này không hữu ích lắm, vì phần tử

   ANY UTF8 char 
  

  1 được đóng lại chính xác. Lỗi này xuất hiện do phần tử

   ANY UTF8 char 
  

  2 không bị đóng, do dấu báo cáo đóng bị thiếu.

Nếu bạn không thể tìm ra mọi thông báo lỗi có nghĩa là gì, đừng lo lắng về điều đó - một ý kiến ​​hay là thử sửa một vài lỗi tại một thời điểm. Sau đó, hãy thử xem lại HTML của bạn để hiển thị những lỗi còn lại. Đôi khi việc sửa lỗi sớm hơn cũng sẽ loại bỏ các thông báo lỗi khác - một số lỗi thường có thể được gây ra bởi một vấn đề duy nhất, trong hiệu ứng domino.

Bạn sẽ biết khi nào tất cả các lỗi của bạn được sửa khi bạn thấy biểu ngữ sau trong đầu ra của bạn:

Bản tóm tắt

Vì vậy, chúng tôi có nó, một phần giới thiệu về gỡ lỗi HTML, điều này sẽ cung cấp cho bạn một số kỹ năng hữu ích để tin tưởng khi bạn bắt đầu gỡ lỗi CSS, JavaScript và các loại mã khác sau này trong sự nghiệp của bạn. Điều này cũng đánh dấu sự kết thúc của phần giới thiệu về các bài báo học tập mô -đun HTML - bây giờ bạn có thể tiếp tục kiểm tra bản thân với các đánh giá của chúng tôi: bài đầu tiên được liên kết dưới đây.

• Trước
• Tổng quan: Giới thiệu về HTML
• Tiếp theo

Trong mô -đun này