Mã nguồn của phím nóng trang. Google Chrome - công cụ dành cho quản trị viên web

Vì vậy, hôm nay chúng ta sẽ xem xét một số công cụ hữu ích dành cho các chuyên gia Web giúp cuộc sống dễ dàng hơn khi thiết kế trang web. Hãy bắt đầu với bảng điều khiển dành cho quản trị viên web trong Google Chrome. Và hãy cùng điểm qua những câu hỏi thường gặp nhất đối với quản trị viên web trong quá trình bố cục trang web.

Để truy cập bảng điều khiển, hãy mở trang web của bạn trong Google Chrome, nhấp chuột phải vào bất kỳ vị trí nào trên trang web và chọn “Xem mã trang” trong menu thả xuống theo ngữ cảnh hoặc trên một thành phần cụ thể để nghiên cứu bằng cách chọn “Xem mã” yếu tố".

Ở trên cùng, bạn sẽ có một số tab được liệt kê. Hôm nay chúng ta sẽ nói về tab “Thành phần” , trình bày các phần tử của một trang web bằng cách làm nổi bật các thẻ, thuộc tính, làm nổi bật cách lồng các phần tử, thể hiện thứ bậc của phần tử trong cây DOM (gợi ý ở dưới cùng, từ gốc gốc đến phần hiện tại), khả năng để chỉnh sửa các phần tử, danh sách các thuộc tính của chúng, hãy cân nhắc việc tìm kiếm theo các phần tử, cũng như Hãy làm quen với việc xem các kiểu css, v.v., được liên kết với các phần tử.

Làm cách nào tôi có thể xem tất cả các kiểu được liên kết với một thành phần cụ thể? Cái nào được sử dụng bây giờ? Chúng nằm trong tập tin nào?

Vì vậy, không có gì có thể dễ dàng hơn! Mở trình duyệt Google Chrome, mở trang web của chúng tôi - nguồn của câu hỏi, nhấp chuột phải vào thành phần mong muốn nếu nó hiển thị trong ngữ cảnh của trang và chọn “Xem mã thành phần” trong menu ngữ cảnh.

Ở phía dưới, chúng ta có bảng điều khiển với tab được đánh dấu ở bên trái “Phần tử" và tất cả các kiểu được liên kết với phần tử ở bên phải, trong đó: Kiểu tính toán– đây là các kiểu “tóm tắt” chung được gán cho thành phần từ các quy tắc và cài đặt css của trình duyệt của người dùng (môi trường của anh ấy), đồng thời tab được thu gọn.

Nhưng chúng tôi quan tâm đến tab “Styles”, được mở rộng bên dưới nó, liệt kê lần lượt tất cả các kiểu được gán cho phần tử, cũng như các tệp trong đó các quy tắc này được chỉ định cho phần tử này theo loại, id, lớp, tên, thuộc tính của nó , thuộc tính, v.v. Hơn nữa, nếu một quy tắc css bị gạch bỏ, điều đó có nghĩa là nó đã được xác định lại sớm hơn/sau này (điều này giúp dễ dàng theo dõi quy tắc css nào có mức độ ưu tiên và được áp dụng trong trường hợp này cho phần tử).

Bên dưới bảng điều khiển có một dòng hiển thị phần tử trong hệ thống phân cấp tài liệu, dễ dàng cho phép bạn xem toàn bộ danh sách các phần tử cha từ gốc đến phần tử đã chọn. Một cái gì đó giống như "mẩu bánh mì".

Thẻ Html không hiển thị trong ngữ cảnh của trang? Hay bạn cần tìm tất cả các thẻ, chẳng hạn như theo một lớp, tên, thuộc tính, loại cụ thể?

Mở trang web trong Google Chrome, nhấp chuột phải, mở menu ngữ cảnh, chọn « Xem mã trang » . Nhấn tổ hợp phím “CTRL + F” cùng lúc, nhập cụm từ chúng ta cần ( Ví dụ: lớp=”phần đệm") và di chuyển qua danh sách kết quả tìm thấy, đồng thời xem tất cả các kiểu được liên kết với các thành phần mong muốn ở phía bên phải của trang.

Cách xem mã html của (các) phần tử được tải động (ví dụ: qua Ajax)

Chúng tôi đang đợi trang tải trong Google Chrome. Chúng tôi thực hiện các hành động cần thiết để Ajax hoạt động. Nhấp chuột phải vào dữ liệu đã tải, chọn “Xem mã phần tử” trong menu ngữ cảnh và kiểm tra kết quả trong bảng điều khiển trên tab “Phần tử” ở bên trái.

Xem các thay đổi về kiểu css trong thời gian thực

Nhân tiện, cũng rất thuận tiện khi quan sát, nếu cần, kiểu nào được gán cho một phần tử một cách nhanh chóng, chẳng hạn như khi cuộn qua thư viện và các sự kiện hẹn giờ khác. Tất cả các kiểu được gán qua javascript trong thời gian thực sẽ được hiển thị trong thuộc tính phong cách phần tử đã chọn trong cửa sổ trên tab “Phần tử”.

Xem một cách tương tác tác động của các quy tắc css đối với việc trình bày các thẻ html

Google Chrome cung cấp bảng điều khiển tương tác cho các kiểu css. Điều này có nghĩa là bạn không chỉ có thể xem kiểu nào được áp dụng cho phần tử mà còn có thể di chuyển con trỏ chuột qua một thuộc tính css cụ thể, bật nó bằng hộp kiểm bật lên ở bên phải hoặc tắt nó bằng cách xóa cờ và xem kết quả thu được trên trang.

Chúng tôi thay đổi cấu trúc trình bày của các phần tử html một cách nhanh chóng (trực tiếp trong trình duyệt)

Vì vậy, chúng ta đã học cách khám phá cấu trúc của tài liệu web trong Google Chrome, bây giờ chúng ta sẽ xem xét nhanh các yếu tố chỉnh sửa một cách nhanh chóng. Chúng tôi đi tới bảng điều khiển theo bất kỳ cách nào thuận tiện cho chúng tôi. Chúng tôi tìm thấy phần tử mong muốn trong tab “Phần tử”, nhấp chuột phải vào phần tử đó, từ đó gọi menu ngữ cảnh bật lên:

Thêm thuộc tính– thêm một thuộc tính cho phần tử được chỉ định. Ngay khi con trỏ hoạt động, chúng ta bắt đầu đặt thuộc tính mong muốn. Ví dụ: viết name="itemImage", tên này sẽ được thêm ngay vào phần tử của chúng ta.
Chỉnh sửa thuộc tính– nếu bạn nhấp chuột phải vào thuộc tính phần tử, mục đó sẽ có sẵn biên tậpthuộc tính. Nhấp và chỉnh sửa.

Ví dụ sử dụng: Chúng tôi quên mật khẩu được lưu dưới dấu hoa thị trong Google Chrome (nếu mật khẩu được lưu trong trình duyệt này). Nhấp chuột phải vào phần tử đã nhập mật khẩu, nhấp vào “Xem mã phần tử” , trong bảng điều khiển ở tab bên trái Yếu tố nhấp chuột phải vào thuộc tính type="password", nhấp chuột trái vào Biên tậpthuộc tính thay đổi thuộc tính gõ =”mật khẩu" TRÊN gõ =”chữ" và bây giờ, thay vì dấu hoa thị, mật khẩu tương tự sẽ được hiển thị ở dạng văn bản.

Biên tậphtml– nhấp chuột phải vào phần tử trong bảng điều khiển Yếu tố, lựa chọn Biên tậphtml, thay đổi mã theo ý thích của bạn.
Sao chépBẰNGHTML– chúng tôi sao chép phần HTML mà chúng tôi cần để nghiên cứu thêm, chẳng hạn như trong sổ ghi chú hoặc cho các mục đích khác mà chúng tôi cần áp dụng chính xác bố cục tương tự. Chúng tôi tiết kiệm thời gian.
Sao chépXPATH– sao chép biểu diễn XPATH của cấu trúc từ gốc của phần tử cha sang phần tử được chọn.
Xóa bỏnút– nếu bạn cần xóa phần tử hiện được chọn và tất cả phần tử con của nó khỏi ngữ cảnh của trang web và xem kết quả.
Từbọc– sẽ hiển thị chế độ xem trang web trong ngữ cảnh bảng điều khiển Yếu tố dễ đọc hơn.

Trong các bài viết sau, chúng tôi sẽ tiếp tục xem xét các công cụ dành cho quản trị viên web và đặc biệt chúng tôi sẽ làm quen với các tab công cụ còn lại dành cho quản trị viên web trong Google Chrome và cũng xem xét việc gỡ lỗi lỗi javascript bằng các trình duyệt khác nhau

Nếu bạn mở bất kỳ trang web nào, nó sẽ chứa các thành phần điển hình không thay đổi tùy thuộc vào loại và trọng tâm của trang web. Ví dụ 4.1 hiển thị mã cho một tài liệu đơn giản chứa các thẻ cơ bản.

Ví dụ 4.1. Mã nguồn trang web

Trang web ví dụ

Phần mở đầu

Đoạn đầu tiên.

Đoạn thứ hai.

Sao chép nội dung của ví dụ này và lưu nó vào thư mục c:\www\ dưới dạng example41.html. Sau đó, khởi chạy trình duyệt và mở tệp thông qua mục menu Tệp > Mở tệp (Ctrl+O). Trong hộp thoại chọn tài liệu, chọn tệp example41.html. Trang web hiển thị trong Hình 1 sẽ mở trong trình duyệt. 4.1.

Cơm. 4.1. Kết quả chạy ví dụ

Yếu tốnhằm mục đích chỉ ra loại tài liệu hiện tại - DTD (định nghĩa loại tài liệu, mô tả loại tài liệu). Điều này là cần thiết để trình duyệt hiểu cách diễn giải trang web hiện tại, vì HTML tồn tại trong một số phiên bản, ngoài ra, còn có XHTML (Ngôn ngữ đánh dấu siêu văn bản có thể mở rộng), tương tự như HTML, nhưng khác với nó về cú pháp. Để trình duyệt “không bị nhầm lẫn” và hiểu được trang web hiển thị theo tiêu chuẩn nào thì cần phải đặt ở dòng mã đầu tiên .

Có một số loại, chúng khác nhau tùy thuộc vào phiên bản HTML mà chúng đang nhắm mục tiêu. Trong bảng 4.1. Các loại tài liệu chính với mô tả của họ được đưa ra.

Bàn 4.1. DTD hợp lệ

DOCTYPE	Sự miêu tả
HTML 4.01
	Cú pháp HTML nghiêm ngặt.
	Cú pháp HTML chuyển tiếp.
	Một tài liệu HTML sử dụng các khung.
HTML 5
	Phiên bản HTML này chỉ có một loại tài liệu.
XHTML 1.0
	Cú pháp XHTML nghiêm ngặt.
	Cú pháp XHTML chuyển tiếp.
	Tài liệu được viết bằng XHTML và chứa các khung.
XHTML 1.1
	Các nhà phát triển XHTML 1.1 kỳ vọng nó sẽ dần thay thế HTML. Như bạn có thể thấy, định nghĩa này không có sự phân chia thành các loại vì cú pháp giống nhau và tuân theo các quy tắc rõ ràng.

Sự khác biệt giữa mô tả tài liệu nghiêm ngặt và chuyển tiếp là cách tiếp cận khác nhau để viết mã tài liệu. HTML nghiêm ngặt yêu cầu phải tuân thủ nghiêm ngặt đặc tả HTML và không thể tha thứ cho các lỗi. HTML chuyển tiếp thoải mái hơn về một số lỗi mã, vì vậy loại này được ưu tiên sử dụng trong một số trường hợp nhất định.

Ví dụ: trong HTML và XHTML nghiêm ngặt, cần có sự hiện diện của thẻ và trong HTML chuyển tiếp, nó có thể được bỏ qua và không được chỉ định. Đồng thời, chúng tôi nhớ rằng trình duyệt sẽ hiển thị tài liệu trong mọi trường hợp, bất kể nó có khớp với cú pháp hay không. Việc kiểm tra này được thực hiện bằng cách sử dụng trình xác nhận và chủ yếu dành cho các nhà phát triển để theo dõi lỗi trong tài liệu.</p> <p>Trong tương lai chúng tôi sẽ chủ yếu sử dụng nghiêm ngặt<!DOCTYPE>, trừ khi được quy định khác. Điều này sẽ cho phép chúng ta tránh những lỗi phổ biến và dạy chúng ta viết mã đúng cú pháp.</p> <p>Bạn thường có thể tìm thấy mã HTML mà không cần sử dụng bất kỳ<!DOCTYPE>, trang web vẫn sẽ được hiển thị trong trường hợp này. Tuy nhiên, có thể xảy ra trường hợp cùng một tài liệu xuất hiện khác nhau trong trình duyệt khi bạn sử dụng<!DOCTYPE>và không có nó. Ngoài ra, các trình duyệt có thể hiển thị các tài liệu đó theo cách riêng của chúng, kết quả là trang bị "sụp đổ", tức là. sẽ được hiển thị hoàn toàn khác với những gì nhà phát triển yêu cầu. Để tránh những tình huống như vậy, hãy luôn thêm<!DOCTYPE>vào đầu tài liệu.</p><p>Nhãn <html>xác định phần đầu của tệp HTML, tiêu đề được lưu trữ bên trong nó ( <head>) và nội dung tài liệu ( <body> ).</p><p>Tiêu đề tài liệu, còn được gọi là khối <head>, có thể chứa văn bản và thẻ, nhưng nội dung của phần này không được hiển thị trực tiếp trên trang, ngoại trừ trong vùng chứa <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Nhãn <meta>là phổ biến và bổ sung cả một loại khả năng, đặc biệt, với sự trợ giúp của thẻ meta, như thẻ này thường được gọi, bạn có thể thay đổi mã hóa trang, thêm từ khóa, mô tả tài liệu, v.v. Để trình duyệt hiểu rằng nó đang xử lý mã hóa UTF-8 (định dạng chuyển đổi Unicode) và dòng này được thêm vào.</p><p> <title>Trang web ví dụ

Nhãn xác định tiêu đề của một trang web; đây là một trong những yếu tố quan trọng được thiết kế để giải quyết nhiều vấn đề. Trong hệ điều hành Windows, văn bản tiêu đề được hiển thị ở góc trên bên trái của cửa sổ trình duyệt (Hình 4.2).</p> <p><img src='https://i0.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Cơm. 4.2. Chế độ xem tiêu đề trong trình duyệt</p> <p>Nhãn <title>là bắt buộc và chắc chắn phải có trong mã tài liệu.</p><p>Bạn phải thêm thẻ đóng</head>để cho biết khối tiêu đề tài liệu đã hoàn tất.</p><p>Nội dung tài liệu <body>nhằm mục đích đặt thẻ và nội dung của một trang web.</p><p> <h1>Phần mở đầu</h1> </p><p>HTML cung cấp sáu tiêu đề văn bản ở các cấp độ khác nhau cho biết tầm quan trọng tương đối của phần sau tiêu đề. Có, gắn thẻ <h1>đại diện cho tiêu đề cấp đầu tiên quan trọng nhất và thẻ <h6>dùng để chỉ tiêu đề cấp thứ sáu và là ít quan trọng nhất. Theo mặc định, tiêu đề cấp đầu tiên được hiển thị bằng phông chữ đậm lớn nhất và tiêu đề cấp tiếp theo có kích thước nhỏ hơn. Thẻ <h1>...<h6>Đề cập đến các phần tử khối, chúng luôn bắt đầu trên một dòng mới và sau chúng, các phần tử khác xuất hiện ở dòng tiếp theo. Ngoài ra, khoảng trắng được thêm vào trước và sau tiêu đề.</p><p>  </p><p>Một số văn bản có thể được ẩn khỏi hiển thị trong trình duyệt bằng cách đưa nó vào nhận xét. Mặc dù người dùng sẽ không nhìn thấy văn bản này nhưng nó vẫn sẽ được truyền trong tài liệu, vì vậy nếu nhìn vào mã nguồn, bạn có thể phát hiện ra các ghi chú ẩn.</p> <p>Bạn cần nhanh chóng xem tất cả các thay đổi trên trang web mà không ảnh hưởng đến các tệp và mã của trang web được đăng trên Internet. Ví dụ: thay đổi bảng màu của một khối, di chuyển một phần tử đã di chuyển ra ngoài, v.v.</p> <p>Để thực hiện việc này, nhiều quản trị viên web sử dụng máy chủ Denwer hoặc OpenServer cục bộ, chạy bản sao đầy đủ của trang web trên máy tính của họ. Phương pháp này phổ biến và phù hợp với các chuyên gia; nó có thể được sử dụng để kiểm tra hoạt động của nhiều tập lệnh và plugin khác nhau, thử nghiệm các thay đổi thiết kế và chỉnh sửa tất cả các tệp trang web và sau khi thử nghiệm, chuyển các thay đổi thích hợp trực tiếp đến trang web.</p> <p>Đối với những người dùng chưa quen với nghệ thuật quản trị trang web, tôi khuyên bạn nên sử dụng trình duyệt cho những mục đích này. Vì tôi sử dụng Chrome nên tôi sẽ cung cấp hướng dẫn bằng ảnh chụp màn hình cho trình duyệt cụ thể này. Bằng cách tương tự, bạn có thể làm việc với Opera, Yandex.Browser, Mozilla Firefox và các trình duyệt khác, nguyên tắc của các công cụ của họ là tương tự nhau.</p> <h2>Hướng dẫn 1: cách xem toàn bộ mã HTML của một trang web trên trình duyệt</h2> <p>Mở trang web cần thiết của trang web của bạn. Nhấp chuột phải vào phần tử được yêu cầu, menu thả xuống theo ngữ cảnh của trình duyệt với các lệnh có sẵn sẽ xuất hiện:</p> <p>Hình 1. Xem toàn bộ mã HTML của trang web trong trình duyệt Chrome</p> <p><b>Quan trọng:</b> Các lệnh trong menu thả xuống có thể khác nhau, ví dụ: đối với các thành phần đang hoạt động (liên kết, hình ảnh, video) và các thành phần không hoạt động (văn bản, nền, div):</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%92%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0-Chrome.jpg' width="100%" loading=lazy loading=lazy></p><p>Hình 2. Menu thả xuống của trình duyệt Chrome</p> <p>Vì vậy, nếu không tìm thấy lệnh mình cần, bạn chỉ cần nhấp chuột phải vào nơi khác hoặc sử dụng phím nóng của trình duyệt.</p> <p>Chúng ta hãy quay lại Hình 1, nó hiển thị lệnh cần thiết để xem tất cả mã HTML của trang web nguồn, nó được gọi là " <b>Xem mã trang</b>". Nhấp vào lệnh, một tab mới sẽ mở ra với mã đầy đủ của trang web nguồn, một điểm cộng lớn cho mọi thứ - tính năng xem có sẵn với tính năng đánh dấu cú pháp:</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82-%D0%BA%D0%BE%D0%B4%D0%B0-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Hình 3. Đoạn mã của trang này</p> <p>Công cụ này rất hữu ích cho việc tìm kiếm và chỉnh sửa các thành phần bạn đang tìm kiếm.</p> <h3>Các cách khác để xem tất cả mã HTML của trang web</h3> <p>Để truy cập nhanh hơn, bạn có thể sử dụng cách khác để gọi công cụ này</p> <ol><li>Trong Hình 1, chúng ta cũng thấy lệnh này có sẵn thông qua phím tắt <Ctrl>+<U> ;</li> <li>Dán view-source:site vào thanh địa chỉ của trình duyệt thay vì tên miền của tôi, chèn địa chỉ của bạn;</li> </ol><p>Cả hai phương pháp đều phổ biến và sẽ hoạt động trong tất cả các trình duyệt.</p> <p>Lúc đầu, một số người có thể nghĩ rằng đây hoàn toàn không phải là một công cụ cần thiết, nhưng việc xem toàn bộ mã HTML của một trang web là điều tuyệt vời để tìm ra các thành phần cần thiết trong mã, đây có thể là các liên kết, thẻ, thẻ meta, thuộc tính và các thành phần khác .</p> <p>Tổ hợp phím nóng <Ctrl>+<F>mở cửa sổ tìm kiếm, trong trình duyệt Chrome nó xuất hiện ở trên cùng bên phải:</p> <p><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%BF%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D1%83.jpg' width="100%" loading=lazy loading=lazy></p><p>Hình 3. Tìm kiếm theo mã trang web</p> <p>Sau khi bạn nhập yêu cầu vào biểu mẫu tìm kiếm, màn hình sẽ di chuyển đến phần tử đầu tiên được tìm thấy, sử dụng các mũi tên, bạn có thể di chuyển giữa chúng và chọn phần tử bạn cần:</p> <p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-HTML-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Hình 4. Tìm kiếm theo mã trang HTML</p> <h2>Hướng dẫn 2: Cách xem và chỉnh sửa mã HTML, CSS của một trang web trên trình duyệt Google Chrome</h2> <p>Bây giờ là phần quan trọng nhất, trong đó tôi sẽ chỉ cho bạn cách chỉnh sửa mã HTML và CSS của trang web trong trình duyệt. sau đó chuyển các thay đổi sang trình duyệt.</p> <br><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9A%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0-%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D0%BA%D0%BE%D0%B4.jpg' width="100%" loading=lazy loading=lazy><p>Công cụ hữu ích này luôn có sẵn trong trình duyệt của bạn; hãy thử nghiệm với các lệnh khác sẽ giúp bạn chỉnh sửa trang web của mình dễ dàng hơn.</p> <p>" Mục tương tự cũng có trong menu ngữ cảnh, nếu bạn nhấp chuột phải vào văn bản <b>trang</b>. Bạn cũng có thể sử dụng phím tắt CTRL + U. Mozilla FireFox không sử dụng các chương trình bên ngoài - bản gốc <b>mã số</b> <b>trang</b> với tính năng tô sáng cú pháp sẽ được mở trong một cửa sổ trình duyệt riêng.</p> <p>Trong Internet Explorer, bấm vào menu Tệp và chọn Chỉnh sửa trong Notepad. Thay vì tên Notepad, có thể viết tên khác, bạn đã gán trong cài đặt trình duyệt để xem gốc <b>mã số</b> MỘT. Trong một cái nhấp chuột <b>trang</b> Khi nhấn chuột phải, một menu ngữ cảnh sẽ xuất hiện, trong đó cũng có mục cho phép bạn mở nguồn <b>mã số</b> <b>trang</b> trong một chương trình bên ngoài - “Xem HTML- <b>mã số</b> MỘT".</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p> <p>Trong trình duyệt Opera, hãy mở menu, đi tới phần “Trang” và bạn sẽ có cơ hội chọn “Nguồn” trong phần phụ “Công cụ phát triển” <b>mã số</b>"hoặc mục"Bản gốc <b>mã số</b> khung." Các lựa chọn này được gán các phím nóng CTRL + U và CTRL + SHIFT + U tương ứng. Trong menu ngữ cảnh được liên kết với một cú nhấp chuột <b>trang</b> chuột phải vào cũng có mục “Initial <b>mã số</b>" nguồn opera <b>trang</b> trong một chương trình bên ngoài được chỉ định trong HĐH hoặc trong cài đặt trình duyệt để chỉnh sửa tệp HTML.</p> <p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p> <p>Trình duyệt Google Chrome chắc chắn có tổ chức tốt nhất để xem bản gốc <b>mã số</b> MỘT. Bằng cách nhấn chuột phải vào bạn có thể chọn View <b>mã số</b> MỘT <b>trang</b>"và sau đó mã nguồn có tô sáng cú pháp sẽ được mở trong một tab riêng. Hoặc bạn có thể chọn dòng “Xem” trong cùng menu <b>mã số</b> phần tử” và trong cùng một tab sẽ mở ra hai khung bổ sung trong đó bạn có thể kiểm tra HTML và CSS <b>mã số</b> yếu tố <b>trang</b>. Trình duyệt sẽ phản hồi khi con trỏ di chuyển qua các dòng <b>mã số</b> và đánh dấu các phần tử trên trang tương ứng với phần này của HTML <b>mã số</b> MỘT.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p> <p>Nhìn qua vô số trang web trên Internet, bạn có thể bắt gặp những trang mà chúng tôi thực sự thích. Một số câu hỏi ngay lập tức được đặt ra. Trang web được tạo bằng mã tự tạo hay một loại CMS nào đó? Nó có những kiểu CSS nào? Thẻ meta của nó là gì? Và như thế.</p> <p>Có nhiều công cụ có thể được sử dụng để trích xuất thông tin về mã của một trang web. Nhưng chúng ta luôn có sẵn nút chuột phải. Đây là những gì chúng tôi sẽ sử dụng, sử dụng trang web của tôi làm ví dụ.</p> <h2>Làm thế nào để xem mã trang?</h2> <p>Để xem mã nguồn của một trang web, bạn cần di chuột qua bất kỳ khu vực nào của trang web (ngoại trừ hình ảnh và liên kết). Sau đó, nhấp vào nút chuột phải. Một cửa sổ với một số tùy chọn sẽ mở ra trước mặt chúng ta (chúng có thể hơi khác nhau trong các trình duyệt khác nhau). Ví dụ: trong trình duyệt Google Chrome, đây là các lệnh:</p> <ul><li>mặt sau;</li> <li>phía trước;</li> <li>khởi động lại;</li> <li>lưu thành;</li> <li>niêm phong;</li> <li>dịch sang tiếng Nga;</li> <li><b>xem mã trang</b>;</li> <li>xem mã.</li> </ul><p>Chúng ta cần bấm vào <b>xem mã trang</b>, và mã html của trang web sẽ mở ra trước mặt chúng ta.</p> <h2>Xem mã trang: cần chú ý điều gì?</h2> <p>Vì vậy, mã trang Html là một danh sách các dòng được đánh số, mỗi dòng mang thông tin về cách trang web này được tạo ra. Để nhanh chóng tìm hiểu cách hiểu số lượng lớn các dấu hiệu và ký hiệu đặc biệt này, bạn cần phân biệt giữa các phần khác nhau của mã.</p> <p>Ví dụ: dòng mã bên trong thẻ head chứa thông tin dành cho công cụ tìm kiếm và quản trị viên web. Chúng không được hiển thị trên trang web. Tại đây bạn có thể xem trang này được quảng cáo với những từ khóa nào, tiêu đề và mô tả của nó được viết như thế nào. Cũng tại đây, bạn có thể tìm thấy một liên kết, sau đó chúng ta sẽ tìm hiểu về dòng phông chữ Google được sử dụng trên trang web.</p> <p>Nếu trang web được tạo trên CMS WordPress hoặc Joomla, thì thông tin này cũng sẽ hiển thị ở đây. Ví dụ: khu vực này hiển thị thông tin về chủ đề WordPress hoặc mẫu trang web Joomla. Bạn có thể nhìn thấy nó bằng cách đọc nội dung của các liên kết được đánh dấu màu xanh lam. Một liên kết hiển thị một mẫu trang web.</p> <p>Ví dụ:</p> <p><i>//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3</i></p> <p>Chúng ta sẽ thấy các kiểu phông chữ CSS của trang. Trong trường hợp này, phông chữ được sử dụng. Điều này có thể được nhìn thấy ở đây - font-family: 'Source Sans Pro'.</p> <p>Trang web này được tối ưu hóa bằng plugin Yoast SEO. Điều này có thể được nhìn thấy từ phần mã nhận xét này:</p> <p><i>Trang web này được tối ưu hóa với plugin Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/</i></p> <p>Tất cả thông tin chứa trong thẻ body được trình duyệt hiển thị trên màn hình điều khiển. Ở đây chúng ta thấy mã html của trang và ở dưới cùng có mã tập lệnh Yandex Metrics. Nó được bao quanh bởi một thẻ nhận xét với nội dung:</p> <p><i>/Bộ đếm Yandex.Metrika</i></p> <p><img src='https://i2.wp.com/vlad-tver.ru/wp-content/uploads/2016/08/metrika.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Hãy tóm tắt lại</h2> <p>Sau khi tiến hành phân tích khá hời hợt về mã của trang chính của trang web, chúng ta có thể rút ra kết luận về việc trang này được tạo ra bằng những công cụ nào. Chúng tôi đã thấy trên đó:</p> <ul><li>CMS WordPress;</li> <li>Phông chữ Google Nguồn Sans Pro;</li> <li>Chủ đề WordPress – Sydney;</li> <li>Plugin Yoast;</li> <li>Bộ đếm số liệu Yandex.</li> </ul><p>Hiện nay nguyên tắc phân tích mã html của một trang website đã khá rõ ràng. Không cần thiết phải giữ trang bạn đang nghiên cứu mở trong trình duyệt. Bạn có thể lưu mã trang vào máy tính bằng tổ hợp phím ctrl+a, ctrl+c, ctrl+v. Dán nó vào bất kỳ trình soạn thảo văn bản nào (tốt nhất là Notepad++) và lưu nó với phần mở rộng html. Vì vậy, bất cứ lúc nào bạn cũng có thể nghiên cứu sâu hơn và tìm thấy nhiều thông tin hữu ích hơn cho bản thân.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="https://viws.ru/vi/category/internet/">Internet</a> </li> <li class="submenu"><a href="https://viws.ru/vi/category/programs/">Chương trình</a> </li> <li class="submenu"><a href="https://viws.ru/vi/category/instructions/">Hướng dẫn</a> </li> <li class="submenu"><a href="https://viws.ru/vi/category/browsers/">Trình duyệt</a> </li> <li class="submenu"><a href="https://viws.ru/vi/category/windows-10/">Windows 10</a> </li> <li class="submenu"><a href="https://viws.ru/vi/category/android/">Android</a> </li> <li class="submenu"><a href="https://viws.ru/vi/category/ios/">iOS</a> </li> <li class="submenu"><a href="https://viws.ru/vi/category/communication/">Sự liên quan</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">Những ghi chú cuối cùng</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/vi/obzor-horoshego-no-bolno-uzh-nedesh-vogo-fableta-obzor-horoshego-no.html" class="thumb"><img width="95" height="95" src="/uploads/36f29824637332124e379026ae2f0db2.jpg" class="attachment-mini size-mini wp-post-image" alt="Đánh giá về một chiếc phablet tốt nhưng quá đắt Thông tin về nhãn hiệu, kiểu máy và tên thay thế của một thiết bị cụ thể, nếu có" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/obzor-horoshego-no-bolno-uzh-nedesh-vogo-fableta-obzor-horoshego-no.html">Đánh giá về một chiếc phablet tốt nhưng quá đắt Thông tin về nhãn hiệu, kiểu máy và tên thay thế của một thiết bị cụ thể, nếu có</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/vi/obzor-kamery-lg-g4-velikolepnyi-fotoflagman-usb-modem-huawei-e3276.html" class="thumb"><img width="95" height="95" src="/uploads/985b826c2ea261df5bd706c727326129.jpg" class="attachment-mini size-mini wp-post-image" alt="Đánh giá máy ảnh LG G4: Chiếc smartphone chụp ảnh tuyệt vời" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/obzor-kamery-lg-g4-velikolepnyi-fotoflagman-usb-modem-huawei-e3276.html">Đánh giá máy ảnh LG G4: Chiếc smartphone chụp ảnh tuyệt vời</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/vi/podklyuchi-servis-besplatnyi-zvonok-obratnyi-zvonok-ili-chat-kakoi.html" class="thumb"><img width="95" height="95" src="/uploads/81dff3e4c6529a63756bd704e8fc605e.jpg" class="attachment-mini size-mini wp-post-image" alt="Gọi lại hoặc trò chuyện - công cụ nào bán hàng hiệu quả hơn Phải làm gì với côn đồ điện thoại" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/podklyuchi-servis-besplatnyi-zvonok-obratnyi-zvonok-ili-chat-kakoi.html">Gọi lại hoặc trò chuyện - công cụ nào bán hàng hiệu quả hơn Phải làm gì với côn đồ điện thoại</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/vi/komp-otklyuchaetsya-sam-chto-delat-zafiksirovat-prichinu.html" class="thumb"><img width="95" height="95" src="/uploads/7a16cfb14efa1c03e1c2ce0ab0cd77bf.jpg" class="attachment-mini size-mini wp-post-image" alt="Ghi lại nguyên nhân máy tính tắt" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/komp-otklyuchaetsya-sam-chto-delat-zafiksirovat-prichinu.html">Ghi lại nguyên nhân máy tính tắt</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/vi/naiti-ukradennyi-telefon-po-imei-kak-naiti-telefon-po-imei.html" class="thumb"><img width="95" height="95" src="/uploads/30f685bcb9d71578810bd939c8924c3b.jpg" class="attachment-mini size-mini wp-post-image" alt="Làm cách nào để tìm điện thoại bằng IMEI?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/naiti-ukradennyi-telefon-po-imei-kak-naiti-telefon-po-imei.html">Làm cách nào để tìm điện thoại bằng IMEI?</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">Phổ biến</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/vi/kak-pomenyat-cifry-na-bukvy-problema-otobrazheniya-cifr-vmesto.html" class="thumb"><img width="95" height="95" src="/uploads/c82431f512d1b4612389ef2f1166c52a.jpg" class="attachment-mini size-mini wp-post-image" alt="Vấn đề hiển thị số thay vì chữ cái trong Microsoft Excel" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/kak-pomenyat-cifry-na-bukvy-problema-otobrazheniya-cifr-vmesto.html">Vấn đề hiển thị số thay vì chữ cái trong Microsoft Excel</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/vi/kak-uznat-kakaya-zvukovaya-karta-stoit-kak-uznat-kakaya.html" class="thumb"><img width="95" height="95" src="/uploads/db1629f2141d76ae85f88b215b8464a4.jpg" class="attachment-mini size-mini wp-post-image" alt="Cách tìm ra card âm thanh nào trên máy tính của bạn" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/kak-uznat-kakaya-zvukovaya-karta-stoit-kak-uznat-kakaya.html">Cách tìm ra card âm thanh nào trên máy tính của bạn</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/vi/windows-10-postoyanno-zaprashivaet-parol.html" class="thumb"><img width="95" height="95" src="/uploads/e8cc22e34324941d1b8001b4cd17616d.jpg" class="attachment-mini size-mini wp-post-image" alt="Windows 10 liên tục hỏi mật khẩu" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/vi/windows-10-postoyanno-zaprashivaet-parol.html">Windows 10 liên tục hỏi mật khẩu</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">Tin tức</div> <div class="business_news"> <div class="news"> <div class="date">2024-02-16 02:14:21</div> <a href="https://viws.ru/vi/skachat-besplatnyi-antivirus-na-android-skachat-besplatnyi-antivirus-na-android.html" class="title">Tải phần mềm diệt virus miễn phí cho Android Tải ứng dụng dọn dẹp phần mềm diệt virus bảo mật 360</a> </div> <div class="news"> <div class="date">2024-02-16 02:14:21</div> <a href="https://viws.ru/vi/lenovo-a-319-vklyuchaetsya-i-vyklyuchaetsya-pochemu-telefon-lenovo-mozhet-ne-vklyuchatsya-i.html" class="title">Tại sao điện thoại Lenovo của bạn không lên nguồn và cách khắc phục</a> </div> <div class="news"> <div class="date">2024-02-15 02:21:19</div> <a href="https://viws.ru/vi/kak-vosstanovit-vklyuchit-sensornyi-philips-chto-sdelat-esli.html" class="title">Máy rơi xuống nước Lỗi trên điện thoại, cách bật điện thoại Philips w632, w336, x130</a> </div> <div class="news"> <div class="date">2024-02-15 02:21:18</div> <a href="https://viws.ru/vi/punkt-7-4-22-deistvuyushchego-licenzionnogo-soglasheniya-odnoklassniki.html" class="title">4 22 thỏa thuận cấp phép hiện tại Odnoklassniki</a> </div> <div class="news"> <div class="date">2024-02-14 02:11:16</div> <a href="https://viws.ru/vi/kak-pozvonit-v-detskii-mir-galereya-detskii-telefon-doveriya-ved.html" class="title">Cách gọi phòng trưng bày thế giới trẻ em</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="https://viws.ru/vi/" class="logo" style="background:none;">viws.ru</a> <div class="copyright"> <p>viws.ru - Tất cả về công nghệ hiện đại. Sự cố, mạng xã hội, internet, virus</p> <p><span>2024 - Bảo lưu mọi quyền</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="https://viws.ru/vi/feedback.html">Liên lạc</a></li> <li><a href="">Giới thiệu về trang web</a></li> <li><a href="">Quảng cáo trên trang web</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="https://viws.ru/vi/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/vi/category/programs/">Chương trình</a></li> <li id="menu-item-"><a href="https://viws.ru/vi/category/instructions/">Hướng dẫn</a></li> <li id="menu-item-"><a href="https://viws.ru/vi/category/browsers/">Trình duyệt</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="https://viws.ru/vi/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/vi/category/programs/">Chương trình</a></li> <li id="menu-item-"><a href="https://viws.ru/vi/category/instructions/">Hướng dẫn</a></li> <li id="menu-item-"><a href="https://viws.ru/vi/category/browsers/">Trình duyệt</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://viws.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://viws.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> </body> </html>