βββββββπ
ππ Jump straight to the end π π ——> Receive exclusive fan benefits π
ββββββββοΈ
- π»π» It's coming! It's coming!! It's coming—— Summary of the twenty thousand word king's notes[ β€οΈ Stay up late to tidy up & suggestions collection β€οΈ] (Part 2) "finally got out of my liver!!! π»π»
β
- π In these two blog posts, the blogger led his friends to seriously learn the necessary knowledge related to HTML (Hypertext Markup Language) (how much do you have to understand the page structure after the crawler climbs to the data to parse the page data!) - html is a markup language. Markup language is composed of a set of markup tags. Learning html is learning tags.! π
| Column name | Portal |
|---|---|
| π It's difficult for reptiles to enter the reptile pit with me. Reptile one-stop service! π | Pit entry Python crawler |
| π² Django framework is difficult, and we teach together in a one-stop way (with a number of small projects!) π² | Django framework one stop |
| π The Scrapy framework is difficult, and you can teach with me in a one-stop way (with a number of small projects!) π | Scrapy framework one stop |
| π Tornado framework is difficult. Teach with me one-stop (with a complete project!) π | Tornado framework one stop |
| π Crawler - JS penetration; three verification codes (slider, touch, graphics); font reverse crawling; mobile end! π | Reptile advanced one-stop |
- π©π© I will try my best to make the technical articles easy to understand / vivid and interesting, so as to ensure that every reader who wants to learn knowledge & & seriously read this article can get something. Of course, if you feel that the writing of this article is OK and really learn something, I hope you can give me a "praise" and "collection". This is very important to me, thank you! π©π©
I believe many of my friends have passed my First blog post Completely understand the requests library, and the HTML knowledge explained in this article (and the previous article!) will make you easily analyze the page data you crawl to in the future~
βοΈ Part III: special symbols
βοΈ (1) What are special symbols?
special symbols are some special symbols on Web pages.
π (2) Why do you need special symbols?
because sometimes we need special symbols, such as displaying html code on the web page. (you can try what the effect is by typing directly!)
note: if you print spaces, no matter how many spaces you enter, only one will be displayed on the web page!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Special characters</title>
</head>
<body>
<!--Special symbols in&start,with;ending-->
<span>This is Space</span>
<span>This is a Chinese character Width (character width)</span>
<span>This is a greater than sign></span>
<span>This is a less than sign<</span>
<span>This is a double quote:"</span>
<span>This is a special symbol and the output isΒ©. ©</span>
<span>This is a special symbol and the output is&. &</span>
</body>
</html>
β Part IV: Forms
β (1) what is a form?
such as Excel tables.
π (2) What are forms used for now?
generally used to display data in the background.
πΆ (3) Table introduction
it is divided into header, body and footer.
β
It should be noted that:
table: it is a table label
tr: Yes line label
td: Yes list tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<table border="1"> <!--border Yes, set the border, and the attribute value is thickness-->
<caption>Student information sheet</caption> <!--Table title-->
<tr>
<th>Student number</th> <!--Header (in tr Used in line labels th) Default font bold-->
<th>full name</th>
</tr>
<tr>
<td colspan="2">1</td> <!--colspan Is a merge column-->
<td rowspan="2">2</td> <!--rowspan Is a merge line-->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
π΄ Effect achieved:
βοΈ Part V: form (very important!!!)
β‘ 1. What & what role & what application
π (1) What is a form?
a form is a collection area of various form elements that collect user data information. (remember that the request methods GET and POST are not!!!)
π (2) What does the form do?
β it is used to collect user data and send it to the background;
β‘ one of the ways of front and rear end interaction.
πΊ (3) Application of forms?
login, registration, search, file upload, etc.
π½ 2. Form attributes:
- action: the address at the time of submission. The current page is used by default. It points to a program on the server.
- Method: the method when submitting. get is used by default
- entype: the default is used at present
π 3. Common labels for forms:
- Input tag: the most frequently used tag in the form. There is no one!
- textarea tag: text field, which is generally used for multiple lines of text;
- select tag: a drop-down box, usually used for options.
π (1) input tag:
π 1. Common attributes of input tag:
| Knowledge point supply station: id is mainly used for style or js. It cannot be used in Chinese or numbers. It is mainly used to express uniqueness! (if id matching can be used in future page parsing, the reason for id matching lies in its uniqueness!) |
- β Name attribute: the key of the form submission item. Different from id, name attribute is the name used when communicating with the server (input tags are required), and id attribute is the name used by the browser. This attribute is mainly used in css and js for customer programming;
- β‘ Value attribute: the value of the form submission item. The value attribute must be set in the single choice and multiple choice drop-down box, so that the background can get which or which options you selected;
practice 1 - Code Description: the value of type attribute is image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<!--type The attribute value is image Is a submit button in the form of a picture. -->
<!--src Attribute picture address; alt Property makes the picture clickable, just like the submit button,Also displayed when an error occurs in the picture alt Attribute value for-->
<input type="image" src="girl.jpg" alt="submit">
</form>
</body>
</html>
- β’ placeholder: improve user experience;
- β£ readonly: read only; (for example, you cannot operate your QQ number)
- β€ Disabled: disabled; (for example, when you use pycharm, some options are gray and cannot be used)
actual combat II - the code describes the functions of the readonly attribute and the disabled attribute:
<!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 number:<input type="password" name="pdw" disabled>
</form>
</body>
</html>
effect screenshot: the user name is read-only, so you can't enter a value in the text box; the account is disabled and directly turns gray.
π· 2. Explanation of common type attribute values of input tag
π Text text box
π Password password box
π Radio radio box
π checkbox check box
π file selection
π Hidden hidden domain hidden is something that users can't see. It can save information for administrators (who write web pages)!
π Submit submit
π Reset reset
π (2) select drop-down box
- option: drop-down options (the basic label of the drop-down box): there are as many drop-down options as there are options;
- Selected: drop-down status: indicates that a drop-down option is selected;
- size: drop down box display: indicates the number of drop-down boxes to display. The default value is one;
- Name: the name of the drop-down box: the name passed when the drop-down box submits data to the background.
actual combat - Implementation of multi-level drop-down box:
<!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 Yes, several drop-down boxes are displayed-->
<optgroup label="Hunan Province"> <!--In label optgroup Group drop-down boxes in-->
<option value="CS">Changsha City</option> <!--label option Is a drop-down option-->
<option value="ZZ">Zhuzhou City</option>
<option value="LD">Loudi City</option>
</optgroup>
<optgroup label="Hubei province">
<option value="WH" selected>Wuhan</option> <!--selected Property represents the default selection of the drop-down box-->
</optgroup>
</select>
</form>
</body>
</html>
effect screenshot:
π 4. Summary of form:
π (1) The following figure summarizes the elements contained in the form label:
summary of the elements contained in the form label form:
π (2) Comprehensive practical examples:
upper Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form </title>
</head>
<body>
<!--Label of the form form+Tab-->
<form action="" method="">
<!--action Path to submit to method in get There is a length limit, which is not very safe,Will display your information; post No length limit and safe-->
full name:<input type="text" placeholder="Please enter your name"><br>
password:<input type="password" placeholder="Please input a password"><br> <!--If type The attribute value is password It will not be displayed when entering in the web page-->
<!--When the page is refreshed, add checked This option is selected by default. Pay attention to this tab attribute checked That is, the attribute name is the same as the attribute value-->
Gender:<input type="radio"name="sex" value="male" checked>male <!--name If the values in the attribute are the same, they represent the same class, and only one can be selected. Achieve single choice!!!-->
<input type="radio" name="sex" value="female">female <!--plus value Is the corresponding value transmitted when transmitting data-->
<br>
<input type="submit" value="Sign in"> <!--Submit button,The default is to submit two words, which can be changed value To change-->
<input type="reset"> <!--Reset button to restore all information to default-->
<input type="button" value="This is a normal button"> <!-- Ordinary buttons shall be matched js use-->
</form>
</body>
</html>
effect achieved:
πΎ 4. Expansion operation:
π (1) Other commonly used labels in the form:
-
β legend: sets the title of the grouping form
-
β‘ label: improve user experience
the radio box can only be selected with a dot circle. The corresponding word of the label implementation point can also be selected, but the button should take the id before use, because the label implementation is matched one by one according to the id.
-
β’ fieldset tag: sets the grouping for the form
direct actual combat description effect:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> <fieldset> <!--Group forms with labels fieldset--> <legend>This is the name of this group!</legend> <!--Label groups with names legend--> user name:<input type="text" placeholder="enter one user name" name="user"><br> dense Code:<input type="password" placeholder="Please input a password" name="pwd"><br> </fieldset> </form> </body> </html>
implementation effect:
π (2) Expand some simple tabs:
πͺ β Italic label:
i em Emphasize (the part of the text that needs to be emphasized)
πΊ β‘ Bold label:
b strong Emphasize (the part of the text that needs to be emphasized)
πΆ β’ To insert a video label into a web page:
video (src The attribute value is the video address, which can be local or web address controls Property to enable control of the video widthοΌheight Property (set video size)
π β£ Add music tags to web pages:
audio (src The attribute value is the audio address controls Property to open the control operation for audio)
Note: the audio can be played at the same time no matter how many words are written (one song is written on a single label). But if you write like this, only the first audio with the correct address will be played!!!
π β€ Similar to caption:
marquee Related attributes and attribute values: Rolling direction direction(Including 4 values:up, down, left and right The default is left)οΌ Scroll mode behavior(scroll:Cycle scrolling, default effect; slide:Stop rolling only once; alternate:Rolling back and forth alternately); Rolling speed scrollamount(Scroll speed is the length of each scroll, in pixels); Rolling delay scrolldelay(Set the scrolling interval in milliseconds); Rolling cycle loop(The default value is-1οΌRolling will continue to cycle); Sets the background color of the active caption bgcolorοΌBackground color available RGB,16 Format or color name of hexadecimal value; width and height Sets the width and height of the active caption.
π β₯ Wrap label:
br
π© β¦ Split line label (two common attributes: size attribute - specifies the thickness of the horizontal line; color attribute - specifies the color of the split line!)
hr
π5.In The End!
| From now on, stick to it and make progress a little bit a day. In the near future, you will thank you for your efforts! |
the blogger will continue to update the crawler basic column and crawler actual combat column (in order to better analyze the page, some front-end necessary knowledge points will also be updated!). After reading this article carefully, the friends can praise the collection and comment on your feelings after reading. And you can pay attention to this blogger and read more crawler articles in the future!
If there are mistakes or inappropriate words, you can point them out in the comment area. Thank you! If you reprint this article, please contact me to explain the meaning and mark the source and the blogger's name. Thank you!
β
ππ» You can follow the operation of my master [cold solitary] by clicking - > below official account ππ» If you are not sincere, please don't bother me. Official account can be drawn from CSDN, which will bring you into the technology exchange group.