This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

What is a Web page

When you type www.juejin.cn into your browser and press enter, everything you see on your screen is actually a web page. Web pages are identified and accessed through urls. According to Wikipedia, a web page is defined as the following

A Web page is a file that applies to the World Wide Web and web browsers. It is stored in a computer or group of computers somewhere in the world, and this computer must be connected to the Internet. Web pages through the URL (URL) to identify and access, when we enter the URL in the web browser, after a complex and fast program, the web file will be transferred to the user’s home computer, and then through the browser to explain the content of the web page, and then show to the user. A “page” on the Web, usually in HTML format, but there are more and more web formats and standards available today. Web pages usually use image files to provide pictures. Web pages should be read through a web browser.

Simply put, any page you see in your browser is a web page.

Why learn about web pages

One of the most important things to learn about the basics of the web is that the techniques that follow in this course involve analyzing and crawling web content. Even if you’re just a beginner crawler, you need to know something about web pages. As a developer, you need to know not just how, but how. Blindly copying code without knowing why to do it will greatly reduce the learning effect.

Web Basics

  1. What is HTML?

    HTML(HyperText Markup Language) is a Language used to describe web pages through Markup tags. In general, we refer to HTML documents as Web pages.

  2. HTML sample

    <! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> <title> <body> <h1> <p> This is the paragraph </p> </body> </ HTML >Copy the code

    < HTML >
    ,

    , etc., in the above example, as long as the elements wrapped in <>, can be considered HTML tags. It is important to note that title tags usually have opening tags and closing tags. Normal title tags are usually used with < tag > content

    • <! DOCTYPE html>Is an HTML declaration. This method is for the convenience of the browser to accurately obtain the HTML version, so as to facilitate the correct rendering of web page content. (For more information about the HTML version, see this article:Version history of the HTML standard)
    • <html></html>Is the root element of HTML. All the content of an HTML document must go inside this tag.
    • <head></head>Is HTML meta data.
    • <meta>Provides meta information about HTML pages, such as defining how the pages are encoded and managing keywords for search engines
    • <title></title>Is the title of the page, but when we open a page, the name of the tag that the browser displays is the text in the title
    • <body></body>Is all the content contained in the HTML document (for example, text, video, audio, and so on)
    • <h1></h1>Used to define the title. In HTML,hIs defined exactly as the size of the title. There are 6 levels of headings, which are<h1>-<h6>, from large to small.
    • <p></p>Is a paragraph tag for an HTML page. In HTML, you must use this element if you want to start another line of text

  3. CSS

    CSS(Cascading Style Sheets) is the Style used to render element tags in HTML documents. There are three common ways to use the CSS:

    • Inline — Use the “style” attribute directly in HTML elements
    • Internal style sheets — in<head></head>In the tag<style>Element using CSS
    • External references – Use externally defined CSS files

    inline

    To use CSS inline, you only need to use the style attribute in the associated tag immediately, and no additional configuration is required.

    <p> <p style="color:red"> </p>Copy the code

    The above two paragraphs, rendered by the browser, look like this:

    Internal style sheets

    Inlining is simple, but if you add a lot of tags one by one, you will waste precious time. You can use an internal style sheet if you have a uniform style for a heading, or if you want to make it easier to manage related styles

    <head> <style type="text/css"> p {color:red; } </style> </head>Copy the code

    The internal style sheet should be defined by the

    External style sheet

    Consider this: you have 100 web pages to use CSS styles. If you use inline styles, your workload is definitely “Alexander”. If you use an internal style sheet, you also have to repeat the changes 100 times. At this point, you need external style sheets to put out the fire. External stylesheets can change the look and feel of an entire web page from a single file.

    <head>
<link rel="stylesheet" type="text/css" href="gitchat.css">
</head>
Copy the code

    In the example above, we imported an external stylesheet called gitchat.css via . Inside gitchat. CSS are the various CSS looks that have been written. When we have a tag in our file, the browser automatically configures it for us.

Add the content

  1. Linear Web page positioning

    Webpage linear positioning means: the page label linear representation, one-dimensional transformation, easy to determine its position.

    <! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </title> </head> <body> <h1> <p> </p> </body> </ HTML >Copy the code

    Suppose in the above code we need to get the location of the

    . According to the concept of linear positioning of web pages, we can be represented as < HTML >->->

    .

    As shown in the figure above,

    is included in the tag, and tag is included in the < HTML >. Through such a linear transformation, new people can easily understand the need to get the tag, located in the page.

  2. After class to understand the relevant knowledge points

    This article has only covered the basics of HTML. But, as the author has always emphasized, once any technology becomes widely used, it will have more and more branches in its stack. For the sake of newcomers, JavaScript is not covered in this article. If you’re interested in front-end development, try learning about it after class.

    To speed up subsequent development. You may also want to study the common HTML tags and features in HTML, such as lists, tables, and divs.

    Of course, if you are really busy after class, it doesn’t matter. In the follow-up study, when using relevant technologies, a simple explanation will be given to facilitate new people’s understanding.

The resources

  1. W3school
  2. HTML based | novice tutorial
  3. Head First HTML and CSS (second edition)