Scrapy – Bản chất của HTML

5/5 - (1 vote)

Để có thể trích xuất thông tin từ các trang web thì chúng ta cần phải hiểu sâu một tí về cấu trúc của chúng. Nếu bạn đã từng làm lập trình web thì bạn có thể bỏ qua phần này vì trong phần này chúng ta sẽ tìm hiểu nhanh về các thành phần của HTML và cấu trúc dạng cây của nó.

Khi một người dùng duyệt web, đầu tiên họ phải gõ đoạn đường dẫn URL lên trình duyệt (hoặc click vào một đường link nào đó) và đợi trang web đó hiện lên. Chúng ta có thể hình dung quá trình này gồm 4 bước:

Đầu tiên đường dẫn được gõ vào trình duyệt. Các thông tin như tên miền (chẳng hạn phocode.com) – là thứ dùng để định vị máy chủ lưu trữ trang web đó, cookie, các form…v.v là các dữ liệu sẽ được gửi tới máy chủ đó.
Tiếp theo máy chủ sẽ trả lời lại bằng cách gửi về một “trang” HTML cho trình duyệt. Ngoài ra máy chủ còn có thể gửi về các dạng dữ liệu khác như XML hay JSON. Trong series này thì chúng ta chủ yếu làm việc với HTML thôi.
Đoạn văn bản HTML sẽ được chuyển đổi sang một kiểu cấu trúc dạng cây và được lưu trong trình duyệt. Tên của nó là Document Object Model (DOM).
Trình duyệt sẽ dựa trên “cây” HTML đó để hiển thị tất cả mọi thứ lên màn hình cho chúng ta xem.

Bây giờ chúng ta sẽ tìm hiểu kĩ từng bước đó.

Đường dẫn – URL

Trong khuôn khổ series này thì chúng ta chỉ cần biết URL có 2 phần. Phần đầu tiên giúp chúng ta định vị máy chủ của trang web thông qua các dịch vụ phân giải tên miền – Domain Name System (DNS). Chẳng hạn như khi chúng ta gõ https://phocode.com/python/scrapy/, thì các máy chủ DNS sẽ dịch đoạn tên miền đó ra địa chỉ IP là 128.199.120.120. Và đoạn URL lúc này sẽ là http://128.199.120.120/python/scrapy. Phần còn lại trong đoạn URL là thứ dành cho máy chủ web, máy chủ sẽ dựa vào đó mà trả lại đúng trang HTML tương ứng. Đó có thể là một trang tin tức, một tấm ảnh, hoặc mở email…v.v

File HTML

Máy chủ sẽ đọc đoạn URL, phân tích xem người dùng yêu cầu cái gì và gửi lại một đoạn văn bản HTML. Đoạn văn bản này là một file text mà bạn có thể mở ra đọc bằng các trình soạn văn bản như Notepad, Microsoft Word, vim… Tuy nhiên đoạn văn bản này được viết theo cấu trúc chuẩn được quy định bởi hiệp hội web toàn cầu – World Wide Web Consortium (W3C). Chúng ta sẽ chỉ tìm hiểu sơ chứ không đi sâu vào tiêu chuẩn này. Nếu bạn gõ vào http://example.com, bạn sẽ thấy đoạn mã HTML do máy chủ trả về bằng cách xem mã nguồn trang web (xem trên Chrome bằng cách bấm Ctrl-U) như sau:

 
<!doctype html>
  <html>
    <head>
      <title>Example Domain</title>
      <meta charset="utf-8" />
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />          
      <meta name="viewport" content="width=device-width, initial-scale=1" /> 
      <style type="text/css">              
        body {                  
          background-color: ...              
      }
      </style>
    </head>
  <body>
    <div>
      <h1>Example Domain</h1>
      <p>This domain is established to be used for illustrative examples examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
      <p><a href="http://www.iana.org/domains/example">More information</a></p>          
    </div>     
  </body>
</html>

Thông thường một đoạn HTML có thể chỉ nằm trên một dòng duy nhất, đoạn code ở trên mình đã viết lại cho dễ đọc. Trong HTML thì khoảng trống và xuống dòng không thật sự có nhiều công dụng. Những từ nằm trong cặp dấu <> được gọi là các thẻ, chẳng hạn <html> hay <head>. Thẻ có thêm dấu / được gọi là thẻ đóng (vd </html).

Điều này có nghĩa là các thẻ luôn đi cùng nhau, có thẻ “mở” thì phải có thẻ “đóng”. Tuy nhiên đôi khi cũng có các ngoại lệ, nhiều khi chúng ta sẽ thấy có thẻ mở nhưng không hề có thẻ đóng đi sau, tuy nhiên website vẫn hiển thị bình thường, trình duyệt sẽ tự động tìm cách đặt thẻ đóng thay thế.

Những gì bên trong một cặp thẻ đóng-mở được gọi là một phần tử HTML. Một phần tử HTML có thể chứa các phần tử HTML khác. Một số thẻ thì cao cấp hơn một tí, chẳng hạn như <a href="...">, trong đó href là một thuộc tính của thẻ.

Và các thẻ có thể chứa đoạn văn bản nào đó, chẳng hạn “Example Domain” nằm trong cặp thẻ <h1></h1>.
Chúng ta không cần phải hiểu rõ toàn bộ mọi thứ trong HTML. Thứ chúng ta cần biết đó là những thứ nằm trong cặp thẻ <body></body>, còn những thứ còn lại như <head></head> không quan trọng vì chúng chỉ cung cấp thông tin thêm cho trình duyệt và Scrapy hầu như cũng sẽ tự lo phần đó cho chúng ta.

Cấu trúc cây

Mỗi trình duyệt có cách lưu trữ cấu trúc dữ liệu khác nhau và do đó trang web hiển thị lên cũng không giống nhau (một cách hoàn toàn). Nhưng hầu hết các trình duyệt đều hỗ trợ DOM.
Chúng ta có thể xem mã nguồn và thậm chí tìm xem phần tử nào phụ trách phần nào trên màn hình bằng cách bấm F12 khi dùng Chrome (hoặc click chuột phải và chọn Inspect Element).
Bạn có thể thấy nó khá giống một đoạn code HTML, nhưng thực chất nó không hẳn là một đoạn text HTML mà là một “cây” HTML. Bạn có thể trỏ con chuột vào từng phần tử trong cây này và thấy phần nào được tô đậm trên trang web, bạn còn có thể chỉnh sửa các phần tử này như thay đổi, thêm, xóa phần tử…v.v.
Nói chung bạn cần biết rằng HTML chỉ là một đoạn văn bản (mà bạn có thể gõ trong Office Word). Còn thứ nằm trong trình duyệt là một cấu trúc dữ liệu dạng cây biểu thị cho đoạn HTML đó và được lưu trong bộ nhớ của trình duyệt và chúng ta có thể chỉnh sửa trực tiếp.

5 1 vote

Article Rating

Đường dẫn – URL

File HTML

Cấu trúc cây

Share this: