1, Continue to learn html tags
1.1 form labels
Login and registration input boxes are form labels
The form tag has a child tag that is the input tag
input is a unilateral label
What are the main functions of form tag and input tag?
It is used to submit data to other pages through the input input box
url: is a web address, also known as the uniform resource locator
A website is a resource, such as www.baidu.com. Is to find Baidu's page through this website. Download movies, thunder download, give you a website. Download this movie resource from this website
url components:
Protocol + domain name (ip) + port number + file + parameters
http://www.baidu.com:80/index.html?username=goudan&password=123456
Parameter: it is the thing behind the question mark. This is the data brought to another page in the input input box
The code is as follows (example):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Form label</title> </head> <body> <!-- form Label properties action: Where to submit data? It's a website http://127.0.0.1:8848/code/test.html?username=admin&password=11111 method:Submission method The default is get Method of submission There are two ways: get post get: (Under development (query) 1.It's not safe, so you don't need to log in and register. The password is url Direct display 2.The transmission efficiency is high, so it is queried 3.adopt get View your information by request 4.stay url And you can see our parameters 5.The data transmitted is limited in url Medium, 2 kb about post: ((addition, deletion and modification in development) 1.Pretend to be safe 2.Slow transmission 3.There is no limit to the data size 4.The transmitted data can't be seen in the address bar, but the programmer can see it method="post" enctype="multipart/form-data" The two important attributes necessary for uploading files are why to write more. The file is transmitted in the form of stream, and the usual information is a string Now the file is a stream, mutipart Multiple form data --> <!-- <form action="test.html" method="get"> --> <form action="test.html" method="post" enctype="multipart/form-data"> <!-- input attribute type: Determines the style of the input box Attribute values: many text: Plaintext password: ciphertext subit Submit button value: value name: Be sure to write. If you don't write, you can't submit data to another page --> account number:<input type="text" name="username"/><br /> <!-- The password is*******Instead --> password:<input type="password" name="password"/><br /> <!-- Submit button submit --> <!-- The default is to submit these two words, but add value Property, it can become your custom button --> <input type="submit" value="Sign in"/> <!-- Reset button reset It can be restored to the state without data before --> <input type="reset" value="Reset" /><br /> <!-- Radio radio Finish adding name After attribute, we can only single select If you don't write value If so, you can't judge what the value passed to another page is --> Gender:<input type="radio" name="sex" value="male" />male <input type="radio" name="sex" value="female"/>female<br /> <!-- check box checkbox name and value The value of can not be less, because it is necessary to transfer data to another page --> Hobbies:<input type="checkbox" name="hobby" value="sing"/>sing <input type="checkbox" name="hobby" value="dance"/>dance <input type="checkbox" name="hobby" value="rap"/>rap <input type="checkbox" name="hobby" value="Play basketball"/>Play basketball <br /> <!-- Date text box date --> <input type="date" name="birthday" /><br /> <input type="datetime" name="datetime" /><br /> <!-- Upload file box file Note: when uploading files, you must use post request form The form also has an attribute: enctype=:"muiltipart/form-data" These two attributes should have --> <input type="file" name="file" /><br /> <!-- Hide text hidden Can be used in development It will not be displayed on our page, but it can be displayed through name Properties and value attribute Bring data to another page --> <input type="hidden" name="hid" value="soga" /><br /> <!-- Drop down list Two tags, one is select Tag, the other is a sub tag option name Property must be written --> <select name="city" size="6"> <option value="0312">Zhengzhou</option> <option value="0311">Xinyang</option> <option value="0345">Luoyang</option> <option value="0323">Anyang</option> <option value="0324">Kaifeng</option> <option value="0325">Xinxiang</option> <option value="0327">Zhumadian</option> <option value="0328">Zhoukou</option> <option value="0329">Sanmenxia</option> </select><br /> <br /> <!-- The text editor will be encapsulated in the future --> Resume:<textarea name="info"> </textarea> </form> </body> </html>
The results are as follows (example):
1.2 frameset label
One page after another
[note]: if framset is used, the body tag cannot be used
The code is as follows (example):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!--One page after another framset label --> <!-- Yes framset You can't use it body Yes --> <!-- framset There are two properties rows: Divide a web page into upper and lower parts cols: Divide a web page into two parts noresize: Disable page drag frame: Sub label --> <frameset cols="200px, *"> <frame src="http://www.taobao.com" /> <frameset rows="200px, *"> <frame src="test.html"/> <frame src="1 Form label.html" /> </frameset> </frameset> </html>
The results are as follows (example):
The code is as follows (example):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="http://Www.baidu.com "target =" FSB "> Baidu < / a > < br / > <a href="http://Www.taobao.com "target =" FSB "> Taobao < / a > < br/ <a href="http://Www.sohu.com "target =" FSB "> Sohu < / a > < br > <a href="http://Www.mobiletrain. Org /? Pinzhuanbdtg = Guanwang "target =" FSB "> Qianfeng</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>you.html</title> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zuo.html</title> </head> <body> <a href="http://Www.baidu.com "target =" FSB "> Baidu < / a > < br / > <a href="http://Www.taobao.com "target =" FSB "> Taobao < / a > < br/ <a href="http://Www.sohu.com "target =" FSB "> Sohu < / a > < br > <a href="http://Www.mobiletrain. Org /? Pinzhuanbdtg = Guanwang "target =" FSB "> Qianfeng</a> </body> </html>
The results are as follows (example):
2, Three ways to introduce CSS
A web page consists of html, css and javascript
html is equivalent to a rudimentary skeleton, and css is equivalent to dressing up the stock price
css cascading style sheets
There are three ways to import CSS: ① inline style ② inline style ③ external style
The purpose of using CSS: to decorate the label and make the label look better
2.1 inline style
The code is as follows (example):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- In line style is written to modify div Tagged Every tag learned has this attribute called style style The property value is written as css Syntax format css Syntax format: Attribute 1:Attribute value 1;Attribute 2:Attribute value 2;Attribute 3:Attribute value 3; eg:border: Border size attribute solid: Border color width: width height: height background-color: background color color: Font color --> <div style="border:0.25rem solid gold; width: 31.25rem; height: 25rem; background-color: aqua; color: red;"> In the endless desert, it is an extremely noisy world. Beautiful pictures and lively stage plays are always taking turns It's intoxicating and pleasant to appear on the stage. However, their survival has left people too much, too deep and too long enlightenment and advice. Do not believe? You see, in the desert, there is a kind of plant called Populus euphratica. It is a unique precious forest resource in the desert area. It is also used for its super tenacious vitality It is praised as a hero tree that "does not die for thousands of years, does not fall after death for thousands of years, and does not decay after falling to the ground for thousands of years". In order to have a close look at the unique style of Populus euphratica, I My companions and I once walked to the depths of Taklimakan Desert. In the desolate Gobi desert, we saw the crystal clear flying sand to welcome you We are suffering from unbearable hunger, thirst, loneliness and blazing suffering. The remains of animals and vegetation are everywhere, while Populus euphratica shows resistance to heaven and earth The courage and persistence of struggle!Their tenacious life is really tragic and amazing!There is also a plant called centenarian orchid, which only grows twice in its life Leaves, but each leaf can live for more than a hundred years or even thousands of years;Of course, such as cactus, Haloxylon ammodendron, red willow... All of them Amazing and praising! </div> </body> </html>
The results are as follows (example):
2.2 inline style
The code is as follows (example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css Inline style</title>
<!-- The inline style is written in head In the tag, there is a sub tag called style
stay style Write in the label CSS Style to decorate labels
-->
<style>
/* This is a comment in css, which is different from html */
/* First find the modified tag, then write braces, and write css syntax format inside braces */
div{
width: 6.25rem;
height: 6.25rem;
background-color: darkgoldenrod;
}
/* Modifier p label */
p{
width: 18.75rem;
height: 18.75rem;
background-color: gold;
}
/* Decorate span label */
span{
/* Let's talk about color representation
1.html English words with specified colors
2.Hexadecimal representation 0-F
R G B
00 00 00 black
FF 00 00 gules
00 FF 00 green
00 00 ff blue
Hexadecimal makes up a good color
Generally, the color is sucked out with a color absorber*/
color:#E1251B;
}
</style>
</head>
<body>
<div>
Laugh up and go out. Are we Penghao people
</div>
<p>After leaving you for a hundred weeks, I came back here to find evidence of our love,
No one wants to mention the rose's past. Today's theme here is what I call memory
</p>
<div>
</div>
<span>
I'm born to be useful. I'll come back after I've lost a thousand gold.
</span>
</body>
</html>
The results are as follows (example):
2.3 outreach style
First, create a CSS file named test.css in the folder where the current html file is located
The contents of the document are:
footer{
width: 12.5rem;
height: 12.5rem;
background-color: tomato;
color: #7FFFD4;
}
The code is as follows (example):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- Introduce external css file stay head Write one in the head link Label, the purpose is to introduce external css file Properties: rel: Type style sheet of the connection file type: css file type href: External css Path --> <link rel="stylesheet" type="text/css" href="./test.css"/> </head> <body> <!-- Outreach style Write a suffix to the outside of the file css File Into our current page --> <footer>The east wind does not go with Zhou Lang, and the copper sparrow spring locks Erqiao deeply</footer> </body> </html>
The results are as follows (example):
3, CSS selector
Objective: to find the of this modified label.
If you can't even find the label, what about decoration? For example, you buy cosmetics and want to make up your girlfriend,. It suddenly occurred to me that I had no girlfriend. It's heartbreaking. First find your girlfriend and make up her
1. Label selector
2.class selector
3.id selector
4. Level selector
5. Combination selector
6. Universal selector
7. Pseudo class selector
3.1 label selector
The code is as follows (example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tag chooser </title>
<!-- Inline style -->
<!-- Tag selector, which obtains the name of the tag through the name of the tag -->
<style>
/* span Is the name of the html tag
Modify the content of span
*/
span{
color: red;
}
div{
color: yellow;
}
footer{
color: blue;
}
</style>
</head>
<body>
<span>Suddenly I turn my back, she gleams in sparse and obscure lights.</span>
<div>Ask where the restaurant is. The shepherd boy points to Xinghua village</div>
<div></div>
<footer>The wind is rustling, the water is cold, and the strong man will never return</footer>
</body>
</html>
The results are as follows (example):
3.2class selector
Each tag has a class attribute
Give class an attribute name. We can find this tag through the = attribute value
The code is as follows (example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class selector
Is to write a class attribute in the tag
Attribute values are self defined
Find the current tag in {} through the. Attribute value for decoration
*/
.nb{
color: red;
}
.sb{
color: blue;
}
.qb{
color: #7FFFD4;
}
</style>
</head>
<body>
<!-- Any label has class attribute
class The attribute value of can be written freely
class You can write multiple values separated by spaces
For example:
<div class="wwb wabf nb">
<!-- class There are three values:
1.wwb
2.wabf
3.nb
These are the three attribute values I define myself
-->
<div class="wwb wabf nb">Don't you see the water of the Yellow River coming up from the sky and running to the sea</div>
<div class="sb">It's fun to cook sheep and kill cattle. You'll have to drink 300 cups a day</div>
<p class="qb">
When you are happy in life, don't make the golden cup empty to the moon.
I'm born to be useful. I'll come back after I've lost a thousand gold.
</p>
</body>
</html>
The results are as follows (example):
summary
Tip: here is a summary of the article: I didn't think of a good summary