“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

👻 on a blog post twenty thousand words to teach you the python crawler requests library, read also won’t I give you my girl friend is 【 ❤ ️ stay up sorting collection & advice ❤ ️ 】 by a great number of crawler/want to learn the crawler lovers of friends, after reading a lot of friend direct messages I said – climbing will be climbed, but down is web page source data, Really don’t understand duck! What to do? 👻

😬 (wry smile) in order to make friends to learn the page parsing library in the future to understand deeper, so this blogger and night overtime, hard to boil this article, for you to in-depth and comprehensive explain the common front-end knowledge — learn what technology is from the bottom to grab, great oaks from little acorns, it is also based on the foundation stable! So this article is a step ahead of the page parsing library to summarize to friends oh! 😬

😜 In this blog post, I’m going to take you through the basics of HTML (Hypertext Markup Language). (You need to be able to understand the structure of a page!) HTML is a markup language. A markup language consists of a set of tags. To learn HTML is to learn tags. ! 😜

Here comes the big point! Here comes the big point!! 💗 💗 💗

I’m sure many of you have fully covered the requests library in my last post, and the HTML knowledge I’ve covered here will help you parse the page data you crawl in the future

❤️HTML Essential knowledge detailed ❤️

  • Part ONE: Introduction to the HTML framework
    • 1. What is it & how to learn & what tools to use
      • (1) What is HTML?
      • (2) How to learn HTML?
      • (3) Tools used:
    • 2. Basic structure of HTML
    • 3. Specification of HTML files
    • 4. Basic template for HTML
  • Part two: Labels
    • 1. Use styles and attributes of labels
      • (1) Use style of labels:
      • (2) Label attributes:
      • (3) Block label
        • The first part of the knowledge – block label characteristics:
        • Part 2: Block labels
        • In depth: Emmet syntax ———— Quick tap code tips quick tap tag syntax!
      • (4) Inline label (inline label)
        • The characteristics of inline labels:
        • Part 2: Inline labels
  • Part three: special symbols
    • (1) What are special symbols?
    • (2) Why do you need special symbols?
  • Part four: Tables
    • (1) What is a form?
    • (2) What are forms used for today?
    • (3) The form
    • Realized effect:
  • Part five: Forms (very important!!)
    • 1. What is it & what function & what application
      • (1) What is a form?
      • (2) The function of forms?
      • (3) Application of forms?
    • 2. Properties of the form:
    • 3. Common labels for forms:
      • (1) Input label:
        • 1. Common attributes of the input tag:
        • 2. Description of the value of the type attribute commonly used in the input tag
      • (2) Select the drop-down list
    • 4. What do you think of the form?
      • (1) A summary of the elements contained in the form tag:
      • (2) Comprehensive practical examples:
  • 4. Expand SAO operation:
    • (1) Some other commonly used labels in forms:
    • (2) Expand some simple use of small tags:
        • (1) Italic labels:
        • ② Bold label:
        • ③ To insert a video tag in a web page:
        • (4) Add music tags to the web page:
        • ⑤ Similar to subtitles:
        • ⑥ Newline tags:
        • ⑦ Dividing line label (two common attributes: size attribute — specifies the thickness of the horizontal line; Color property – specifies the color of the divider!
  • 5. In The End!

Knowledge point supply station: 
One of the first concepts to be popularized is the component of a web page: (1) HTML: used to define what content is in a web page; CSS: layout of the content; (1) Find the content to be typeset ———— How to find the label to be typeset; (2) Set styles. What styles can be set on the ———— label? JavaScript: used for dynamic control pages.Copy the code

Part ONE: Introduction to the HTML framework

1. What is it & how to learn & what tools to use

(1) What is HTML?

  1. In its narrow sense, HTML refers to web pages; Broad HTML refers to front-end technologies (HTML, CSS, JS, and various frameworks) — web pages, mobile web pages, small programs, official accounts, mobile apps, fast applications, etc.
  2. HypertText – beyond the scope of text, simply said, not just text, but also images, audio, video, Flash and so on; Markup – There are many tags in a web page, and different tags have different meanings and functions. Markup is also called tags. Html contains various tags.
  3. Examples of labels:

    ①<body></body> -- double tags

    ②<br> -- single tag

(2) How to learn HTML?

HTML is a markup language. A markup language consists of a set of markup tags. To learn HTML is to learn tags.

(3) Tools used:

Editor: PyCharm (pyCharm for Python!) Browsers: Firefox, Chrome (recommended!)

2. Basic structure of HTML

3. Specification of HTML files

  1. HTML files start at the beginning, end at the end, and any other tags that need to be written between and;
  2. The Html tag contains only two child tags: head and body;
  3. The content related to the Settings of the page is in the head tag;
  4. Everything that needs to be displayed is in the body tag;

4. Basic template for HTML

If you create an HTML file in PyCharm it will look like this!

<! DOCTYPE html>Declaration of the document type
<html lang="en">					The # root tag is the beginning of the document. Lang (Language), EN (English). The declaration language type is English
<head>								# Page header
    <meta charset="UTF-8">			Meta configures the type of character set encoding
    <title>Title</title>			# Page title
</head>
<body>								# The main body of the page, the visual area

</body>
</html>
Copy the code

Knowledge point supply station:

  1. <! The DOCTYPE HTML > tag is used to declare the document at the front of the HTML file, define the document type, and tell the browser to parse the document using the HTML specification.
  2. When writing HTML files in PyCharm, <! --> for comments, the shortcut key is Ctrl+/.
  3. When writing HTML files in PyCharm, you can tag them directly with the tag name, and then Tab them to achieve automatic completion. <p></p>

Part two: Labels

  1. What is a label?
Consists of wrapping words in Angle brackets, such as:<html>, so the label cannot start with a number.Copy the code
  1. Labels are case insensitive, but lowercase is recommended.
  2. Tags can be nested, but not cross-nested.
  3. Tags are also called elements. For example, inline tags can also be inline elements.
Error: <a><b></a></b> Correct: <a><b></b></a>Copy the code

1. Use styles and attributes of labels

(1) Use style of labels:

  1. The start tag is also called an open tag <a> Tag body </a> The end tag is also called a closed tag or a closed tag
  2. Self-closing tags/single tags, such as <meta charset="UTF-8">, <br>, etc
There are two ways to write a single label: Writing method 1: Write only the open label<br>Writing method 2: Write a/at the end of the open tag, such as<br/>
Copy the code

(2) Label attributes:

  • <meta charset=" utF-8 "> <meta charset=" utF-8 "> <meta charset=" utF-8 ">
  • Attributes can only appear in opening and self-closing tags, but not in closing tags;
  • Attribute names are all lowercase and attribute values must be enclosed in single or double quotes.
  • If the attribute name and value are identical, write the attribute name directly. For example, “readonly” (input tag attribute)

(3) Block label

The first part of the knowledge – block label characteristics:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> </title> </head> <body> <! -- block tag features :(illustrated by paragraph tag p)--> <! --1.Set width and height to be effective, as well as margins and margins can be controlled --> <! --2.When the width is not set, the width is always the same as the parent label, regardless of the content. Is for the parent tag container100%; -- > <! --3.Can monopolize a line, realize automatic wrapping. A paragraph tag occupies one line regardless of how much content it contains --> <! --4.When multiple block tags are written together, the default arrangement is top down --> <! --5.<p style= "max-width: 100%; clear: both; clear: both"width:100px; height:100px"</p> </body> </ HTML >Copy the code
1. Px is a pixel, a unit of length; 2. When viewing ELements on the web page, it shows width by height.

Part 2: Block labels

Note: The default size of the page is 1em (1em=16px)!

There are four:

  1. Title tag;
	<! First: the title tag. H1 through H6 (usually placed in the title of the article) should be bold! -->
	<! -- h1 font 2em--32px; H2 is 1.5em--24px; H3 font is 1.17em--18.72px; H4 font is 16px by default; H5 font is 0.83em--13.28px; The h6 size is 0.67em- the conversion should be 10.72px, but the page has a minimum size limit, so it will be 12px! -->
	<h1>I am a level 1 tag, a page can only have one, other can have more than one</h1>
	<h2>I'm a secondary label</h2>
Copy the code
  1. Paragraph tags;
	<! Second: paragraph tags. The same size as a level-4 heading tag (which will split the HTML document into sections) -->
	<! By default, the -- p label has a front and back spacing of --16px. But paragraph tags don't indent the first line! -->
	<p>I'm paragraph tag</p>
Copy the code
  1. List tags: classified into three categories: ordered list, unordered list and defined list.
	<! -- Third: List tag -->
	
		<! -- (1) Ordered list -->
		<ol type="A" start="3">        <! -- OL is short for order list. This line is the start of the ordered list type has five choices -- 1: press 1,2,3,4... Display serial number (default); A: according to A, B, C, D.. Display serial number; A: according to a, b, c, d.. Display serial number; I: Press I,II,III,IV, V.. Display serial number (Roman numerals); I: according to the I, ii, iii, iv, v.. Displays the ordinal number (lower case Roman numerals). Start specifies the number of rows to start from -->
		    <li>This is ordered list 1</li>
		    <li>This is ordered list 2</li>
		    <li>This is ordered list 3</li>
		</ol>
		
		<! -- (2) Unordered list -->
		<ul type="circle">             <! --ul is short for Unorder list. This line is the beginning of an unordered list. You can set none (empty),circle (hollow), Square (solid), disc (solid circle) [default], etc. -->
		    <li>This is unordered list 1</li>	   <! -- An LI represents a list item. -->
		    <li>This is unordered list 2</li>
		    <li>This is unordered list 3</li>
		    <li>This is unordered list 4</li>
		</ul>
		
		<! --(3) Define list -->
		<dl>       					 <! -- This line is the beginning of the definition list -->
		    <dt>fruit</dt>        	 <! -- represents a large column item -->
		    <dd>grapes</dd>             <! -- represents the explanation of the items listed above, namely subdivision. -->
		    <dd>durian</dd>			 <! Dd is indent, dt is not indent -->
		
		    <dt>vegetables</dt>
		    <dd>cauliflower</dd>
		    <dd>cabbage</dd>
		</dl>
Copy the code
  1. Div tags.
	<! Div (width and height); div (width and height); Background-color = background-color) -->
	<! Div is a pure block element -- pure means that there is no default style. Do not use too much. Late maintenance is not good -->
	<! Div's biggest advantage: the layout, which serves as a container for other tags. Since divs do not have a default style, they do not affect how the tags are displayed. -->
	<div style="width:500px; height: 500px; background-color: #66a9fe;">I'm a div</div>
Copy the code
Knowledge point supply station:

If the list tag is too troublesome, you can use the shortcut method :(n indicates the number of corresponding labels, directly enter the following statement Tab to generate!)

In depth: Emmet syntax ———— Quick tap code tips quick tap tag syntax!

  1. * is the function of multiplication, followed by a number, the number is a few, will generate a few tags!

    For example:



    Implementation:

  2. $can represent a number that starts at 1 and increases gradually, usually with *.

    For example:



    Implementation:

  3. {} is used to write the text content of the label.

    For example:



    Implementation:

  4. [] is used to write the attribute name and value (if no attribute value is added, create an empty attribute value)

    For example, (1) :



    For example, (2) :

    Implementation (1) :



    Implement (2) :

  5. > is used to indicate the next level of tags, which constitute the parent relationship (inclusion relationship)

    For example:

    Description:

  6. + generate a horizontal tag after the current tag (sibling)

    For example:



    Implementation:

  7. #a generates a div tag with id bit a

    For example:



    Implementation:

  8. Comprehensive use:

    For example, (1) :

    Implementation (1) :



    For example, (2) :



    Implement (2) :



    For example, (3) :



    Implement (3) :



    For example, (4) :



    Implementation (4) :



    For example, (5) :



    Implementation (5) :

(4) Inline label (inline label)

The characteristics of inline labels:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"</title> </head> <body> <! -- Inline tag features (illustrated by the text tag span) --> <! --1.The width and height Settings are invalid, and margins and margins cannot be controlled --> <! --2.Width is the width of the text or image, you can't control it --> <! --3.No wrap, only one line will be put down when the line is full --> <! --4.When multiple inline tags are written together, the default arrangement is left to right --> <! --5.Inline elements can only hold text or other inline elements --> <span> I'm a text tag </span> </body> </ HTML >Copy the code

Part 2: Inline labels

There are four:

  1. Image label
	<! Img + Tab-->
	<img src="" alt="" width="" height="">   <! SRC is the location of the image. This can be either the location of the image on the web page or the location of the local image. (Relative path is recommended. -->
		                      <! -- Alt is what will be displayed if the image fails to load -->
							  <! -- width is the image width; Height is the height of the image. Does not specify display attention at original size. If only one of them is specified, the other will be scaled equally -->
		                      <! Img is not a block and is not inline, it is inline -->
Copy the code
  1. Bold/italic labels
	<! B + Tab I + Tab -->
	<b>I am a bold</b>
	<i>I am italic</i>
Copy the code
  1. Hyperlink tag
	<! -- Third: the hyperlink TAB _self opens on the page itself; _blank open a new page -->
	<a href="" title="A description of a hyperlink (the text that appears when the mouse is over)" target="_self">I'm hyperlink</a>   					
						   <! < span style = "max-width: 100%; clear: both;
						   <! If href="" then clicking will refresh the current page and return to the top -->
						   <! If href="#" then clicking on it will bring you back to the top, but will not refresh the page -->
						   <! < span style =" box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 16px! Important; white-space: normal;" -->
Copy the code
  1. Text labels
	<! Number four: Text tags are useful when used with CSS. -->
	<! -- span is a pure row element; Purity - no default style; -->
	<! -- span -- span -- span -- span -- span
	<span>I'm a text tag</span>
Copy the code
Knowledge point Supply Station First stop:

1. If the image is in the same directory, directly: the current directory name/image name or:./ the current directory name/image name 2. If the image is in the parent directory, go to:.. / image name

Knowledge Point Supply Depot 2:



As to why inline tags and block tags should be converted to each other, you will get this point when you set CSS styles.

For example: block tags can’t be placed on a line, but we can do this by converting them to inline tags first!! \

Part three: special symbols

(1) What are special symbols?

Special symbols are special symbols on a web page.

(2) Why do you need special symbols?

Because sometimes we need special symbols, such as to display HTML code on a web page. (You can try what effect is directly hit!) Note: If you print Spaces, no matter how many Spaces you enter, only one will appear on the page!

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> Special characters </title> </head> <body> <! -- Special symbols begin with &, begin with; <span style = "max-width: 100%; clear: both; "> <span style =" max-width: 100%; clear: both; <span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; <span style = "text-align: center; < p style = "box-sizing: border-box! Important; word-wrap: break-word! Important; <span style = "box-sizing: border-box! Important; word-break: inherit! Important;" &copy; <span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; &amp; </span> </body> </html>Copy the code

Part four: Tables

(1) What is a form?

Like an Excel spreadsheet or something like that.

(2) What are forms used for today?

Generally used for background display data.

(3) The form

It is divided into: head, body and foot.

 

Note the following: table: a table tag tr: a row tag TD: a list tag

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"<title> </title> </head> <body> <table border="1"> <! Caption > </caption> <! -- table title --> <tr> <th> Student id </th> <! -- Header (th in tr line tag) in bold by default --> <th> name </th> </tr> <tr> <td colspan="2">1</td> <! --colspan is the merge column --> <td rowspan="2">2</td> <! -- rowSpan is merge row --> </tr> <tr> <td>3</td>
        <td>4</td>
    </tr>
</table>

</body>
</html>
Copy the code

Realized effect:

Part five: Forms (very important!!)

1. What is it & what function & what application

(1) What is a form?

A form is a collection area of various form elements that collect user data information. (Remember the request methods GET and POST no!!)

(2) The function of forms?

(1) Used for receiving user data and sending to the background; (2) One of the ways of front and rear end interaction.

(3) Application of forms?

Login registration, search, file upload, etc.

2. Properties of the form:

  1. Action: The address of the submission. The default is the current page. A program that points to the server.
  2. Method: The method used to commit. The default is GET

  3. Entype: Use the default value

3. Common labels for forms:

  1. Input tag: The most frequently used tag in the form, no one!
  2. Textarea tags: Text fields, typically used for multiple lines of text;
  3. Select TAB: Drop – down box, usually used for options.

(1) Input label:

1. Common attributes of the input tag:

Id is mainly used for styles or JS. No Chinese or numbers. Used to express uniqueness! (The reason for using ID matches in future page parsing is that they are unique!)
  • (1) Name attribute: the key of the form submission item. Different from ID, name attribute is the name used when communicating with the server (the input tag must have), and ID attribute is the name used by the browser side. This attribute is mainly used in CSS and JS for the convenience of client programming.
  • (2) Value attribute: the value of the submitted item in the form. The value attribute must be set in the drop-down box of radio and multiple options, so that the background can get which or which options are selected.

Type = ‘image’;

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action=""> <! --typeWhen the property value is Image, it is a submit button in the form of an image. -- > <! The SRC attribute places the image address; The Alt property makes the image clickable, just like the submit button, and displays the value of the Alt property if the image is in error --> <input type="image" src="girl.jpg" alt="submit">
</form>


</body>
</html>
Copy the code
  • ③ Placeholder: Improving user experience;
  • ④readonly: readonly. (For example, you can not operate your QQ number)
  • ⑤ Disabled: Disabled; (For example, if you use PyCharm, some options are off-white and cannot be used)

The readonly attribute and the disabled attribute are used for the following purposes:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action=""User name: <input type="text" name="user"Readonly > < br > account & emsp; No. : <input type="password" name="pdw" disabled>
</form>

</body>
</html>
Copy the code

  The user name is read-only, so you cannot enter a value in the text box. The account is disabled. It’s greyed out.

2. Description of the value of the type attribute commonly used in the input tag

🎈text text 🎈password password 🎈radio radio 🎈checkbox 🎈file select peep Hidden Hidden field Hidden is something that is invisible to the user and saves information for the administrator (web page writing) operation! 🎈submit Submit 🎈reset Reset

(2) Select the drop-down list

  • Options: Drop-down options (the basic TAB of the drop-down box) : There are as many drop-down options as there are options;
  • Selected: Drop-down state: Select a drop-down option.
  • Size: drop-down box display: indicates the drop-down box, how many to display, the default is one;
  • Name: name of the drop-down box: the name of the drop-down box when the data is submitted to the background.

Actual combat – multi-level drop-down box implementation:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action=""Address: <select name="address" id="address" size="1"> <! -- Attribute size is to display several drop-down boxes --> < optGroup label="Hunan Province"> <! -- Group dropdowns in the optGroup TAB --> <option value="CS"</option> <! -- Tag option is a drop-down option --> <option value="ZZ"</option> <option value="LD"</option> </ optGroup > <optgroup label="Hubei Province">
                 <option value="WH"</option> <! </ optGroup > </select> </form> </body> </ HTML >Copy the code

 Effect screenshot:

4. What do you think of the form?

(1) A summary of the elements contained in the form tag:

A summary of the elements contained in the form:

(2) Comprehensive practical examples:

The code:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> Form </title> </head> <body> <! Form +Tab--> <form action="" method=""> <! -- The path to which action needs to submit to the method is limited in length, which is not very safe and will display your information. Post has no length limit and is safe --> Name: <input type="text" placeholder="Please enter your name"><br> Password: <input type="password" placeholder="Please enter your password"><br> <! - iftypeIf the attribute value is password, it will not be displayed when typing in the web page. -- Checked is the default checked option when the page is refreshed. Notice that the checked attribute is the same as the name of the attribute.input type="radio"name="sex" value="male"Checked male > <! -- Names with the same value mean they are of the same class. To achieve a single!! --> <input type="radio" name="sex" value="female"Female > <! > <br> <input type="submit" value="Login"> <! -- The submit button, which defaults to "submit", can be changed by changing value --> <input type="reset"> <! -- Reset the button to restore all information to default --> <input type="button" value="This is a normal button."> <! </form> </body> </ HTML >Copy the code

 Realized effect:

4. Expand SAO operation:

(1) Some other commonly used labels in forms:

  • Legend: Set the title of the grouped form
  • ② Label: improves user experience

    A single box can only be selected by clicking the circle. The word corresponding to the label implementation dot can also be selected, but before using the button you need to take the ID, because the label implementation matches one by one by ID.

  • The fieldset tag is used to set groups of forms.
	<! DOCTYPEhtml>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	</head>
	<body>
	
	<form action="">
	
	    <fieldset>          						   <! -- To group forms, use the fieldset tag -->
	        <legend>That's the name of the group!</legend>         <! Legend -->User name:<input type="text" placeholder="Please enter your user name." name="user"><br>
	        密&emsp;Code:<input type="password" placeholder="Please enter your password" name="pwd"><br>
	    </fieldset>
	
	</form>
	
	
	</body>
	</html>
Copy the code

Realized effect:

(2) Expand some simple use of small tags:

(1) Italic labels:

I em To play an important role (part of a text that needs to be emphasized)Copy the code

② Bold label:

A strong B strong C strong D strongCopy the code

③ To insert a video tag in a web page:

Video (SRC = video address, either local or web address)Copy the code

(4) Add music tags to the web page:

Audio (SRC property value for audio address controls property opens the control operation for audio)Copy the code

Note: You can play the audio at the same time, no matter how many are written. But if you write like this, only the first address correct audio will be played!!Copy the code

⑤ Similar to subtitles:

Attributes related to marquee and their values: the direction of the scroll (there are four values :up, Down, left, and right); Behavior (Scroll: cyclic scroll, default effect; Slide: Stops after scrolling only once; Alternate: to scroll back and forth Scrollamount (ScrollAmount is the number of pixels to move per scroll); Scrolldelay (set the scrolling interval, in milliseconds); Scrolling loop (default is -1, and scrolling will continue); Set the background color of the activity caption bgcolor, background color can be RGB, hexadecimal value format or color name to set; Width and Height Sets the width and height of the active subtitle.Copy the code

⑥ Newline tags:

br
Copy the code

⑦ Dividing line label (two common attributes: size attribute — specifies the thickness of the horizontal line; Color property – specifies the color of the divider!

hr
Copy the code

5. In The End!

Start from now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

The blogger will continue to update the basic crawler column and actual crawler column (for better page analysis of friends, will also update part of the front-end essential knowledge blog!) If you have read this article carefully, you can like it and comment on it. And can follow this blogger, in the days to read more reptilian!

If there are any mistakes or inappropriate words, please point them out in the comment section. Thank you! If reprint this article, please contact me to explain the meaning and annotate the source and the name of this blogger, thank you!Copy the code