Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]

Solitary cold 2021-08-09 18:13:54
end html word graphic summary


Last blog post Twenty thousand word blog posts teach you python Reptiles requests library , Not yet. I'll give you all my girlfriends 【️ Stay up late to tidy up & Recommended collection ️】 By many reptile lovers / Little friends who want to learn reptiles read , A lot of friends wrote me private letters and said —— I can climb , But all that came down were web source code data , I really don't understand duck ! What should I do ?

( wry smile ) In order to make the friends have a deeper understanding of the page parsing library learned in the future , So the blogger worked overtime all night , Work hard to make this article , Let's explain the common front-end knowledge deeply and comprehensively —— Learn any technology from the bottom , Ten thousand Zhang tall buildings rise from the ground , It is also based on foundation stability ! So this article is a step ahead of the page parsing library to summarize to the friends !

In this blog post , The blogger will lead his friends to study carefully HTML( Hypertext markup language ) Relevant necessary knowledge ( After the crawler crawls to the data and parses the page data, you have to be able to understand the page structure !)——HTML It's a markup language , Markup language consists of a set of markup tags , Study HTML, Is learning labels .!

 Insert picture description here


The key! ! The key! !!

I believe many friends have passed my Last post The tuition fee is completely requests library , And this article explains HTML knowledge , It will enable you to parse and crawl the page data at your fingertips in the future ~


️HTML Detailed explanation of necessary knowledge ️

 I can't remember how many years of snow it has been !

Knowledge point supply station :
 If you compare a web page to a person ,HTML It's a skeleton ,JavaScript It's like muscle ,CSS It's like skin . A combination of the three
To form a perfect web page .
The first concept to be popularized is a web page component :
①HTML: Used to define what content is in the web page ;
②CSS: Typesetting the content ;
(1) Find what you want to typeset ———— How to find the label to be typeset ;
(2) Set the style ———— What styles can be set for labels .
③JavaScript: For dynamic control pages .

The first part :HTML Introduction to the framework

 Insert picture description here

1. What is it? & How to learn & With what tools

(1) What is? HTML?

  1. HTML:(HyperText Markup Language)【 Hypertext markup language 】
    The narrow sense HTML Refers to the web page ;
    The generalized HTML Refers to front-end technology (html,css,js, And various frameworks )—— Webpage , Mobile web page , Applet , official account , The mobile end app, Fast application etc. .

  2. Detailed introduction :
    HypertText: Hypertext —— Beyond the scope of the text , In short , It's not just the text , It can also be an image , Audio , video ,flash wait ;
    Markup: Mark —— There will be a lot of tags in the web page , Different marks have different meanings and functions , Tags are also called labels ,Html Will contain a variety of labels , These labels can't be scrawled , Must write w3c Labels included in the specification .

  3. Examples of labels :
    <body></body> -- Double label
    <br> -- Single label

 Insert picture description here

(2) How to learn HTML?

HTML It's a markup language , Markup language consists of a set of markup tags , Study HTML, Is learning labels .

(3) Tools used :

Editor :pycharm( To make python You must use pycharm!)
browser :Firefox,Chrome( It is recommended to use these two !)

 Insert picture description here

2.HTML Basic structure

 Insert picture description here

3.HTML Specification of documents

  1. html File to start , End with , Any other labels , It needs to be written between and ;
  2. Html The tag contains only two sub tags :head and body;
  3. The content related to web page settings is written in head In the label ;
  4. What needs to be displayed is written in body In the label ;

 Insert picture description here

4.HTML The basic template

If you ever pycharm I'll build a new one html The file will look like this !

<!DOCTYPE html> # Declaration of document type 
<html lang="en"> # Root tag , That is, the beginning of the document . lang(language),en(english). The declaration language type is English 
<head> # Page header 
<meta charset="UTF-8"> # International Code meta To configure The type of character set encoding 
<title>Title</title> # Webpage title 
</head>
<body> # The main body of the web page , Visualization area 
</body>
</html>

Knowledge point supply station :

  1. <!DOCTYPE html> label : effect : stay html Declare at the beginning of the file , Define document types , Tell the browser to use html Specification to parse documents .
  2. stay pycharm Written in HTML When you file ,<!-- What to annotate --> For comment , Shortcut keys are Ctrl+/.
  3. stay pycharm Written in HTML When you file , When labeling, you can directly mark and sign , Again Tab Automatic completion can be realized . Such as : Input p, Again Tab Will automatically complete as :<p></p>

 Insert picture description here

The second part : label

  1. What is a label ?
 Words wrapped in angle brackets , Such as :<html>, So the label can't start with a number .
  1. Labels are not case sensitive , But lowercase is recommended .
  2. Tags can be nested , But you can't cross nest .
  3. Tags are also called elements . such as : Inline tags can also be inline elements .
 The wrong sample :<a><b></a></b>
The correct sample :<a><b></b></a>

 Insert picture description here

1. Use style and properties of labels

(1) The usage style of the label :

  1. The start tag is also known as the open tag <a> Tagging body </a> The end tag is also called the close tag or the close tag
  2. Self closing label / Single label , Such as :<meta charset="UTF-8">,<br> etc.
 There are two ways to write a single label :
Writing a : Just open the label <br>
Write two : Write a... At the end of the open label /, Such as <br/>

(2) Tag attributes :

  • Usually in the form of key value pairs , such as :<meta charset="UTF-8"> Inside charset Attribute for the tag , The corresponding single or double quotation marks are called attribute values ;
  • Property can only appear in start tag and close tag , But it can't appear in the end tag ;
  • Attribute names all lowercase , Attribute values must be enclosed in single or double quotation marks ;
  • If the property name and property value are exactly the same , Write the attribute name directly , Such as :“readonly”(input Tag attributes )

 Insert picture description here

(3) Block labels

 Insert picture description here

Part I knowledge points —— Features of block labels :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Features of block labels </title>
</head>
<body>
<!-- Features of block labels :( Through paragraph labels p To illustrate )-->
<!--1. Set the effective width and height , And the outer margin and inner margin can be controlled -->
<!--2. Without setting the width , The width is always consistent with the parent label , Nothing to do with the content . Is the name of the parent label container 100%;-->
<!--3. You can monopolize one line , Automatic line feed . A paragraph label occupies one line no matter how much content -->
<!--4. When multiple block labels are written together , The default arrangement is top-down -->
<!--5. Can hold inline elements and other block elements -->
<p style="width:100px; height:100px"> This is a paragraph label , I'm a block label </p>
</body>
</html>
Knowledge point supply station : 1.px It's pixels , It's a unit of length ; 2. View elements on the web (ELements) It shows the width * Height .

Part II knowledge points —— Commonly used block labels :

Little knowledge points : The default font size of the web page is 1em(1em=16px)!

There are four in all :

  1. Title Tag ;
 <!-- first : Title Tag .h1 To h6 ( Usually placed in the title of the article ) The font will be bold !-->
<!-- h1 The size is 2em--32px;h2 The size is 1.5em--24px;h3 The size is 1.17em--18.72px;h4 Font size is the default font size 16px; h5 The size is 0.83em--13.28px;h6 The size is 0.67em-- The conversion should be 10.72px, But Web pages have a minimum font size limit , So it becomes 12px! -->
<h1> I'm a first-class label , A web page can only have one , Others can have multiple </h1>
<h2> I'm a secondary label </h2>
  1. Paragraph Tags ;
 <!-- the second : Paragraph Tags . The size is the same as the four level title label ( Will be able to HTML The document is divided into several paragraphs )-->
<!-- p By default, the label has the spacing before and after the segment --16px; But paragraph labels don't indent the first line ! -->
<p> I'm a paragraph tag </p>
  1. Tabs tab : It's divided into sequential tables , Unordered list and definition list ;
 <!-- Third : Tabs tab -->
<!--(1) Ordered list -->
<ol type="A" start="3"> <!--ol yes order list Abbreviation . This line is the beginning of a sequence table type There are five options ——1: Press 1,2,3,4... Display sequence number ( Default ); A: Press A,B,C,D.. Display sequence number ; a: Press a,b,c,d.. Display sequence number ; I: Press I,II,III,IV,V.. Display sequence number ( Rome digital ); i: Press i,ii,iii,iv,v.. Display sequence number ( Roman numerals lowercase ). start It is stipulated to start from the number of -->
<li> This is a sequence table 1</li>
<li> This is a sequence table 2</li>
<li> This is a sequence table 3</li>
</ol>
<!--(2) Unordered list -->
<ul type="circle"> <!--ul yes unorder list Abbreviation . This line is the beginning of an unordered list You can set none( Empty ),circle( The hollow circle ),square( Solid block ),disc( Solid round )[ The default value is ] Wait for the pattern -->
<li> This is an unordered list 1</li> <!-- One li Represents a list item . -->
<li> This is an unordered list 2</li>
<li> This is an unordered list 3</li>
<li> This is an unordered list 4</li>
</ul>
<!--(3) Definition list -->
<dl> <!-- This line is the beginning of the definition list -->
<dt> Fruits </dt> <!-- Represents a large column -->
<dd> grapes </dd> <!-- Represents the interpretation of the above items , That is, subdivide .-->
<dd> durian </dd> <!-- dd Indented ,dt No indent -->
<dt> vegetables </dt>
<dd> Cauliflower </dd>
<dd> cabbage </dd>
</dl>
  1. div label .
 <!-- The fourth one :div label : Used to divide areas one by one (width and height To specify the area size ;background-color Is to set the area background color )-->
<!--div Is a pure block element —— Purity means that there is no default style . Don't use too much . Poor maintenance in the later stage -->
<!-- div The biggest advantage : Layout , As a container , Carry other labels , because div There is no default style , So just use div Wrapped with labels , But it does not affect the display of labels . -->
<div style="width:500px;height: 500px;background-color: #66a9fe;"> I am a div</div>
Knowledge point supply station :

If it's too much trouble to label the list , Shortcuts are available :(n Indicates the number of corresponding tags , Directly enter the following statement Tab You can generate !)
 Insert picture description here

I delve :emmet grammar ———— Quick code typing tips quick tag Syntax !

  1. * It's the function of multiplication , Followed by a number , What's the number , Several tags will be generated !
    give an example :
     Insert picture description here
    Realization :
     Insert picture description here

  2. $ Can represent a number , This number comes from 1 Start , Gradually increase , Usually and * Continuous use .
    give an example :
     Insert picture description here
    Realization :
     Insert picture description here

  3. {} It is used to write the text content of the label .
    give an example :
     Insert picture description here
    Realization :
     Insert picture description here

  4. [] It is used to write the attribute name and attribute value ( If you don't add attribute values , Create an attribute with empty attribute value )
    give an example ①:
     Insert picture description here
    give an example ②:
     Insert picture description here

    Realization ①:
     Insert picture description here
    Realization ②:
     Insert picture description here

  5. > Used to indicate the next level of label , They form a father son relationship ( Inclusion relation )
    give an example :
     Insert picture description here

    explain :
     Insert picture description here

  6. + Generate a horizontal label after the current label ( Brotherhood )
    give an example :
     Insert picture description here
    Realization :
     Insert picture description here

  7. #a Generate a id position a Of div label

    give an example :
     Insert picture description here
    Realization :
     Insert picture description here

  8. Comprehensive use :
    give an example ①:
     Insert picture description here

    Realization ①:
     Insert picture description here
    give an example ②:
     Insert picture description here
    Realization ②:
     Insert picture description here
    give an example ③:
     Insert picture description here
    Realization ③:
     Insert picture description here
    give an example ④:
     Insert picture description here
    Realization ④:
     Insert picture description here
    give an example ⑤:
     Insert picture description here
    Realization ⑤:
     Insert picture description here

(4) inline tag ( In line labels )

 Insert picture description here

Part I knowledge points —— Features of inline tags :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> inline tag , Also known as the characteristics of inline labels </title>
</head>
<body>
<!-- Features of inline tags ( Through text labels span explain )-->
<!--1. Invalid width and height setting , And the outer and inner margins are uncontrollable -->
<!--2. Width is the width of its text or picture , beyond control -->
<!--3. No word wrap , Only when the line is full will a line be put down -->
<!--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>

Part II knowledge points —— Common inline tags :

There are four kinds of :

  1. Picture label
 <!-- first : Picture label img + Tab-->
<img src="" alt="" width="" height=""> <!--src Is the address of the picture , It can be directly the picture address in the web page , It can also be the address of the local picture ( Relative path is recommended —— Relative meaning : The picture is relative to Html The location of the file , The reference is html file !-->
<!-- alt Is the content displayed when the picture fails to load -->
<!-- width Is the width of the picture ;height Is the height of the picture . Do not specify to display according to the original size. Note .: If both specify only one , The other will scale equally -->
<!-- img Not block elements (block), It's not a line element (inline), It is a row level block element (inline-block) -->
  1. bold / Italics label
 <!-- the second : bold / Italics label b+ Tab i+ Tab -->
<b> I'm bold </b>
<i> I am Italic. </i>
  1. Hyperlink label
 <!-- Third : Hyperlink label _self Open on your own web page ;_blank Open a new page -->
<a href="" title=" A description of the hyperlink ( Put the mouse over the text that will be displayed )" target="_self"> I'm a hyperlink </a>
<!--href You can write a website in , You can write the file path -->
<!-- If href="" Then click to refresh the current web page , And it'll go back to the top -->
<!-- If href="#" Then click , Will return to the top , But it won't refresh the page -->
<!-- If href="# Anchor point " Then click , Will jump to the specified anchor point ( The anchor point is actually a id value )! -->
  1. Text label
 <!-- The fourth one : Text label and css It works only when used together !-->
<!-- span Is a pure line element ; The so-called purity —— There is no default style ; -->
<!-- span The biggest advantage : Set style , Mainly used for line elements or text, etc -->
<span> I'm a text tag </span>
The first station of knowledge point supply station :

If the picture label is filled with the address of the local picture ( Relative paths ):
1. If the picture is in the same level directory , direct : Current directory name / Picture name
perhaps : ./ Current directory name / Picture name
2. If the picture is in the superior Directory , direct : . ./ Picture name

Knowledge point supply station second station :

 Insert picture description here
As for why we should realize the conversion between inline tags and block tags , The guys are setting up css Style will get At this point .
such as : Block labels can't be placed on one line , But we can just convert it to an inline tag first !!!

 Insert picture description here

The third part : Special symbols

(1) What are special symbols ?

Special symbols are some special symbols on Web pages .

(2) Why special symbols are needed ?

Because sometimes we need special symbols , such as : hold html The code is displayed on the web page .( You can try the effect of playing directly !)
Be careful : If you print spaces , No matter how many spaces you enter , Finally, only one... Is displayed on the web page !

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Special characters </title>
</head>
<body>
<!-- Special symbols are marked with & start , With ; ending -->
<span> This is &nbsp; Space </span>
<span> This is a Chinese character &emsp; Width ( Character width )</span>
<span> This is a greater than sign &gt;</span>
<span> This is a less than sign &lt;</span>
<span> This is a double quotation mark :&quot;</span>
<span> This is a special symbol , The output is .&copy;</span>
<span> This is a special symbol , Output is &.&amp;</span>
</body>
</html>

The fourth part : form

(1) What is a form ?

such as Excel Forms and so on .

(2) What forms are used for now ?

It is generally used to display data in the background .

(3) First time I know

It is divided into : Header , Body and feet .

It should be noted that :
table: It's a form label
tr: It's a line tag
td: It's a list sign

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> form </title>
</head>
<body>
<table border="1"> <!--border Is to set the border , The attribute value is thickness -->
<caption> Student information sheet </caption> <!-- Table title -->
<tr>
<th> Student number </th> <!-- Header ( stay tr Use... In line labels th) The default font is bold -->
<th> full name </th>
</tr>
<tr>
<td colspan="2">1</td> <!--colspan Is a merge column -->
<td rowspan="2">2</td> <!--rowspan It's a merge line -->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>

Realization effect :

 Insert picture description here

The fifth part : Forms ( It's very important !!!)

 Insert picture description here

1. What is it? & What's the role & What applications

(1) What is a form ?

A form is a collection area of various form elements that collect user data information .( Remember how to ask GET and POST No !!!)

(2) What forms do ?

① Used to collect user data , And send... To the background ;
② One of the ways of front-end and back-end interaction .

(3) Application of forms ?

Log in to register , Search for , File upload, etc .

2. Forms (form) Properties of :

  1. action: Address at the time of submission , The current page is used by default . Point to a program on the server .
  2. method: How to submit , By default get
     Insert picture description here
  3. entype: At present, you can use the default
     Insert picture description here

3. Common labels for forms :

  1. Input label : The most frequently used label in the form , Not one of them. !
  2. textarea label : Text domain , Generally used for multiline text ;
  3. select label : A drop-down box , Generally used for options .

(1)input label :

1.input Common properties of tags :

Knowledge point supply station : id Mainly used for style or js. Can't use Chinese or numbers . Mainly used to express uniqueness !( In future page parsing can use id Match with id The reason for matching is its uniqueness !)
  • ①name attribute : Key for form submission , And id Different ,name Property is the name used to communicate with the server ( requirement input Labels must have ), and id Property is the name used on the browser side , This attribute is mainly for the convenience of customer programming css and js Use in ;
  • ②value attribute : Value of form submission item , The single or multiple choice drop-down box must be set value attribute , In this way, the background can get which or which options you selected ;

Practice one —— Code instructions type The property value is image The situation of :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<!--type The property value is image Is a submit button in the form of a picture . -->
<!--src Property to put the picture address ;alt Property to make the picture clickable , Just like the submit button , At the same time, when an error occurs in the picture alt The attribute value -->
<input type="image" src="girl.jpg" alt="submit">
</form>
</body>
</html>
  • ③placeholder: Improve user experience ;
  • ④readonly: read-only ;( For example, you can't treat your QQ No )
  • ⑤disabled: Ban ;( For example, you are using pycharm Some options are grayish white and cannot be used )

Actual combat II —— Code instructions readonly Properties and disabled The function of attributes :

<!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>
zhang &emsp; Number :<input type="password" name="pdw" disabled>
</form>
</body>
</html>

Effect screenshots : The user name is read-only , So it can't be in text Enter a value in the text box ; The account is disabled , It just turns gray .
 Insert picture description here

2.input Tags are commonly used type Attribute value

text The text box
password Password box
radio Radio buttons
checkbox Check box
file File selection
hidden Hidden fields hidden It's something that users can't see , To the administrator ( Writing web pages ) Operation to save information !
submit Submit
reset Reset

(2)select A drop-down box

  • option : Drop down options ( The basic label of the drop-down box ): How many option Just how many drop-down options there are ;
  • selected : Drop down status : Indicates that a drop-down option is selected ;
  • size : The drop-down box displays : Represents a drop-down box , Show how many , Default to a ;
  • name : The name of the drop-down box : Indicates the name passed when the drop-down box submits data to the background .

actual combat —— 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 Is to display several drop-down boxes -->
<optgroup label=" Hunan province "> <!-- On the label optgroup Group the drop-down boxes in the -->
<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 City </option> <!--selected Property represents the default selection of the drop-down box -->
</optgroup>
</select>
</form>
</body>
</html>

Effect screenshots :
 Insert picture description here

4. About form Form summary :

(1) Summary of Figure 1 form The form label contains elements :

Form labels form The included elements are summarized in the figure :

 Insert picture description here

(2) Comprehensive practical examples use :

Code up :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Forms </title>
</head>
<body>
<!-- The label of the form form+Tab-->
<form action="" method="">
<!--action The path to submit to method in get Limited length , Not very safe , Will display your information ;post No length limit , And it's safe -->
full name :<input type="text" placeholder=" Please enter a name "><br>
password :<input type="password" placeholder=" Please input a password "><br> <!-- If type The property 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 , Note the tag 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 The same value in the attribute means that they are of the same class , You can only choose one . Achieve radio !!!-->
<input type="radio" name="sex" value="female"> Woman <!-- Add 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 , You can change value To change -->
<input type="reset"> <!-- Reset button , All information is restored to the default -->
<input type="button" value=" This is a normal button "> <!-- General button To cooperate js Use -->
</form>
</body>
</html>

Realization effect :
 Insert picture description here

4. Expand Sao operation :

(1) Other common tags in the form :

  • ①legend: Set the title of the grouping form

  • ②label: Improve user experience
    The radio box can only be selected with a dot circle .label The corresponding word can also be selected at the implementation point , But before using the button, take id, because label It is based on id One by one .
     Insert picture description here

  • ③fieldset label : Set the grouping for the form
    Direct actual combat shows the effect :

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<fieldset> <!-- Group forms , Tagging fieldset-->
<legend> This is the name of this group !</legend> <!-- Label groups with names legend-->
user name :<input type="text" placeholder=" Please enter a user name " name="user"><br>
The secret &emsp; code :<input type="password" placeholder=" Please input a password " name="pwd"><br>
</fieldset>
</form>
</body>
</html>

Realization effect :

 Insert picture description here

(2) Expand some simple use of small labels :

① Italics label :

i
em To emphasize ( The parts of the text that need to be emphasized )

② Bold label :

b
strong To emphasize ( The parts of the text that need to be emphasized )

③ Insert a video tag into the web page :

video (src The attribute value is the video address , It can be local, it can be a website
controls Property to enable the control operation of the video
width,height Property to set the video size )

 Insert picture description here

④ Add music tags to web pages :

audio (src The attribute value is the audio address
controls Property to open the control operation for audio )

 Insert picture description here

 Be careful : No matter how many you write ( Put a single label and write like that ), Can play audio at the same time .
But if you write like this , Only the first audio with the correct address will be played !!!

 Insert picture description here

⑤ Similar to subtitles :

marquee
Related attributes and attribute values :
Rolling direction direction( Include 4 It's worth :up、 down、 left and right The default is left);
Scrolling mode behavior(scroll: Cycle and roll , Default effect ; slide: Just roll once and stop ; alternate: Roll back and forth alternately );
Rolling speed scrollamount( The scroll speed sets the length of movement for each scroll , In pixels );
Roll delay scrolldelay( Set the time interval for scrolling , In milliseconds );
Rolling cycle loop( The default value is -1, Rolling will continue to cycle down );
Set the background color of the active caption bgcolor, Background colors are available RGB、16 The format or color name of the hexadecimal value ;
width and height Set the width and height of the active caption .

 Insert picture description here

⑥ Line wrap label :

br

⑦ Split line labels ( Two common properties :size attribute —— Specifies the thickness of the horizontal line ;color attribute —— Specifies the color of the split line !)

hr

5.In The End!

 Insert picture description here

From now on , Hold the line , Make a little progress every day , Near future , You will thank you for your efforts !

The blogger will continue to update the basic crawler column and the actual crawler column ( In order to better analyze the page for the little friends , Some front-end essential knowledge points will also be updated !), My friends who have read this article carefully , You can like it and comment on it . And can pay attention to this blogger , Read more about reptiles in the days to come !

 If there are mistakes or inappropriate words, please point out in the comments section , thank you !
If you reprint this article, please contact me to explain the meaning and mark the source and the name of this blog , thank you !
版权声明
本文为[Solitary cold]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/08/20210809181056337g.html

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless