Tóm tắt bài viết
1. Truy cập trang web trong trình duyệt web.
2. Nếu bạn đang sử dụng Safari trên máy Mac, hãy bật menu Phát triển.
3. Nhấp chuột phải vào vùng trống của trang.
4. Nhấp vào Xem nguồn trang.
5. Đánh dấu mọi thứ trên trang.
6. Nhấp chuột phải vào lựa chọn và nhấp vào Sao chép.
Bản tóm tắt này có giúp ích gì cho bạn không? Có Không
Cảm ơn tất cả các tác giả đã tạo ra một trang đã được đọc 20.774 lần
Tính năng Kiểm tra phần tử trong Google Chrome giúp bạn xem mã nguồn HTML của các phần tử cụ thể trên trang web. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách trích xuất toàn bộ mã HTML của bất kỳ trang web nào bằng tính năng này
Mã nguồn HTML của trang web là thứ mà trình duyệt web sử dụng để kết xuất trang và hiển thị trang dựa trên mã HTML, CSS và JS và các quy tắc được áp dụng trên trang. Mã nguồn của một trang web, là cấu trúc của trang web, được cung cấp công khai và nó nhất thiết phải như vậy để trình duyệt có thể hiển thị chính xác
Các trình duyệt web hiện đại cho phép người dùng xem mã nguồn HTML của các trang web họ đang xem. Tính năng này đặc biệt hữu ích cho các nhà thiết kế và phát triển web trong công việc thiết kế và phát triển của họ. Bằng cách xem mã nguồn HTML của một trang web [hoặc trang web], bạn có thể biết cách trang web được cấu trúc, phần tử HTML nào nó sử dụng và kiểu CSS nào được áp dụng. Đây không chỉ là một cách tuyệt vời để học cách thiết kế và viết mã bằng HTML và CSS mà còn là một cách hay để thử nghiệm các thiết kế của riêng bạn và kiểm tra xem có gì sai trên trang kết quả không
Mã nguồn của một trang trong trình duyệt web được hiển thị thông qua phím tắt Ctrl + U hoặc bằng cách nhấp chuột phải vào trang và chọn tùy chọn Xem nguồn trang. Điều này hiển thị mã HTML đầy đủ của trang tại thời điểm tải, ghi lại trạng thái tĩnh của trang không thay đổi theo thời gian ngay cả khi trang có các tính năng động và nội dung của nó thay đổi theo thời gian phía máy chủ hoặc phía máy khách
Để xem mã nguồn HTML của một trang được tạo động [i. e. một trang được tạo thông qua JS] hoặc một trang có nội dung thay đổi động [i. e. một website tin tức với luồng tin tức thay đổi hoặc một mạng xã hội với giao diện thay đổi] thì chúng ta có thể sử dụng tính năng Inspect của Google Chrome mà tôi sẽ trình bày chi tiết bên dưới
Xem và sao chép toàn bộ mã HTML của trang web bằng Chrome Inspect
Cái hay của việc xem mã nguồn của một trang web bằng tính năng Kiểm tra là bạn có thể xem và lấy mã HTML vì nó có hiệu lực chính xác tại một thời điểm nhất định, điều này rất hữu ích trên các trang có các yếu tố thay đổi và di chuyển.
Trong chế độ Kiểm tra, bạn có thể chỉnh sửa nội dung, thuộc tính và kiểu dáng của bất kỳ phần tử HTML nào trên trang. Mặc dù vậy, những thay đổi đó sẽ chỉ hiển thị với bạn và chúng sẽ không tạo ra những thay đổi vĩnh viễn trên trang web bạn đang xem theo bất kỳ cách nào
Bây giờ, hãy xem cách nó hoạt động
BƯỚC 1. Khởi động Chrome và mở trang web bạn chọn
BƯỚC 2. Nhấp chuột phải vào bất kỳ đâu trên trang và chọn Kiểm tra từ menu thả xuống. Bạn cũng có thể sử dụng phím tắt Ctrl + Shift + I
Thao tác này sẽ mở phần Công cụ dành cho nhà phát triển ở bên phải hoặc ở cuối cửa sổ trình duyệt tùy thuộc vào kích thước và bố cục màn hình của bạn
Phần Công cụ dành cho nhà phát triển bao gồm một menu trên cùng và hai cửa sổ cạnh nhau bên dưới. Ở phía bên trái, bạn sẽ thấy mã nguồn HTML của trang có thể được thu gọn và mở rộng theo từng phần tử. Ở bên phải, bạn sẽ thấy các kiểu, trình xử lý sự kiện và thuộc tính của từng thành phần mà bạn chọn ở bên trái. Doanh nghiệp của chúng tôi ở phía bên trái, nơi mã HTML được hiển thị
Bạn sẽ thấy toàn bộ mã HTML đang có hiệu lực với tất cả các yếu tố như tiêu đề, đoạn văn, danh sách, liên kết, hình ảnh và thậm chí cả nhận xét. Lượng mã sẽ ở mức tối thiểu và không phức tạp trên các trang web HTML cơ bản, do đó mã sẽ được hiển thị nhanh hơn. Tuy nhiên, trên các trang web động, có lưu lượng truy cập cao, có nhiều yếu tố và tính năng, mã nguồn HTML sẽ khá dài và phức tạp, do đó sẽ mất nhiều thời gian hơn để hiển thị đầy đủ.
BƯỚC 3. Lên đầu phần này và tìm thẻ, thường nằm ngay sau phần khai báo doctype [kiểu tài liệu] [e. g. ]
BƯỚC 4. Khi bạn tìm thấy thẻ, hãy nhấn Ctrl + C hoặc nhấp chuột phải vào thẻ đó và chọn Sao chép > Sao chép bên ngoàiHTML để sao chép toàn bộ mã nguồn HTML của trang đó
Sau đó, bạn có thể dán mã này vào tệp văn bản hoặc tệp HTML tùy ý và kiểm tra thêm cũng như thực hiện các chỉnh sửa trên đó
Trong chế độ Kiểm tra, bạn cũng sẽ thấy các kiểu nội tuyến và tham chiếu đến biểu định kiểu bên ngoài [nếu có]. Ngoài ra, nếu bạn có bất kỳ kiểu người dùng tùy chỉnh nào được áp dụng trong Chrome, chúng cũng sẽ được đính kèm vào cuối mã HTML mà bạn đã sao chép