PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

You know, “there are no secrets on the front end.” What does that mean? This article will take you to take a look, the front end is how to use tools to rip others web code.

For the record, the so-called ripping code is not to encourage plagiarism, but the front-end web code is mostly client-side code, which can be accessed through the browser source content. So there are various ways to backtrack from how a page’s HTML and CSS are written to the layout and style of the page.

1. Find your target

First, we need to find the page we want to browse, preferably through a browser. In fact, due to the popularity of the mobile Internet and the boom of the front-end industry, many of the pages we visit on mobile phones are already achieved through front-end technology.

For example, you can click on this link

This is actually the detail page of the article of “public account” in Alipay APP. When it is opened in Alipay APP, it looks like the picture below.

This is what we call an H5 web page. What makes H5 web pages special is that they are written using a programming language called HTML. Why is it called H5? Most of the pages are now using the fifth version of HTML.

H5, on the other hand, usually needs to be opened in a browser, because HTML is a programming language designed to display richer content formats, such as images, audio, and hyperlinks, than plain text.

However, with the development of technology, the part responsible for parsing H5 can be run without the browser, so the environment for displaying web pages has been enriched. For example, the Alipay APP here has the ability to parse H5, so our H5 webpage can be opened in the browser or alipay APP.

Second, debug the web page

The second step after finding your target page is to use a number of tools to analyze the page. More simply, we can view the structure of a web page by opening the browser’s own “check” tool, such as the right mouse click on the page “Check”.

How about that? Isn’t that amazing? As you mouse over different areas of code in the right pane, the left section will highlight the corresponding areas in the page. This is actually the most common means of front-end daily debugging web pages.

Mobile debugging

Here’s how to debug the web on mobile, because most of the web is actually used in mobile apps, not computer browsers.

If you are  mobile, you need a Mac + PC safari + mobile Safari + a cable.

Then connect the phone to the Mac with the cable, and use safari on the phone to open the web page. Then click the “Develop” TAB on Safari on the PC to open the web link under the phone’s name.

If there is no “development” label here, please check “Display” development “menu in the menu bar” in [Preference Settings] – [Advanced] as shown in the picture below.

Then, after opening the page link, Safari on the PC will display the code structure of the current web page visited by Safari on the phone. Similarly, if you hover over a different code area, Mobile Safari will highlight the corresponding web area, as shown below.

Three, restore the page

Now that we can use tools to debug a web page, we can use HTML and CSS to restore the content of the page. Let’s take this page as an example and try to restore it.

Restoration methods can be divided into two kinds: copy and copy

Mode 1: Copy

Copying is suitable for beginners to learn HTML and CSS, you can view the various elements and styles of the page through the browser inspection tool, and then restore all the elements in the HTML file you create.

For example, on this page, the entire body of the page is the section tag under the body tag, and the section is made up of header and main. Inside the header are two divs that display the article title and author information, respectively. Inside main, many P tags are used to display each paragraph of the article body details.

Method 2: Copy

Copy is suitable for a certain web page writing experience of front-end engineers, proficient in browser developer tools, and familiar with the common HTML and CSS syntax.

For example, for this page, the first analysis of the page core elements are pure content display, without event binding, so you can click the right mouse button in the core DOM — main-section, use copy-copy element to Copy the HTML source code. Paste and format the code in the body tag of the HTML file you create.

For page styles, select the key node to view the source file pointed to in the style panel on the right

Then through the code formatting function of the developer tool, the compressed code is formatted to restore the original style code

Then copy the style section into the style section of the head tag in your own file.

The image above shows a preview of the HTML file after copying the original structure and style code. How about it? Is it the same pixel as the original? In fact, this is the “pixel level of plagiarism” for the web page.

Plagiarism is shameful, encourage originality

Fourth, use it for yourself

After all, plagiarism is not a long-term solution, so the most important thing is to master the principles of web page writing, understand the basic knowledge, and master the use and skills of various tools, so that you can draw inferences from one example and solve various practical problems.

Five, the summary

In this article we covered restoring an H5 web page using the following knowledge and tools.

knowledge

  • HTML
  • CSS

tool

  • Safari
  • Chrome Developer Tools
  • Vscode code editor

I hope I can take this opportunity to let you know that there is no magic in mobile Internet, but only the continuous change of technology and the efforts of practitioners, so that we can access more and more applications through mobile phones, life is more and more wonderful. If you’re interested in these contributions, you can start now by learning simple web development tips to build your own H5 app.