catalogue
Forms (relatively important to Java programmers
User registration form and drop-down list
file control and hidden control
Three ways to introduce css into HTML
HTML basic tag
<!--- P paragraph label -- >
<!--- H1-6 title label -- >
<!-- Br: line feed -- >
<!-- : hrhorizontal line -- >
<!-- Color and width are label attributes -- >
<!-- Pre reserved format, what format is written and what format is displayed -- >
< del > delete word < / del >
< ins > inserter < / INS >
< b > bold</b>
< I > Italic < / I >
<!-- Sup; add words in the upper right corner; sub; add words in the lower right corner -- >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basic label</title>
</head>
<body>
<!---p Paragraph label-->
<p>Most of the Internet passwords have been leaked. Underground black products are sold in a complete database. Once you check your email or mobile phone number, your password will come out. You may as well assume that your password has been leaked. If you set different passwords for each website, the situation may be better, but you can't guarantee that a certain account is safe.</p>
<p>Most of the Internet passwords have been leaked. Underground black products are sold in a complete database. Once you check your email or mobile phone number, your password will come out. You may as well assume that your password has been leaked. If you set different passwords for each website, the situation may be better, but you can't guarantee that a certain account is safe.</p>
<!---h1-6 Title label-->
<h2>biaoti</h2>
<h3>biaoti</h3>
<h4>biaoti</h4>
<h5>biaoti</h5>
<h6>biaoti</h6>
<h1>biaoti</h1>
<!--br:Line feed-->
Hello<br>World
<!--hr level-->
<!--color width Are label attributes-->
<hr color="red" width = 50%>
<!--pre Reserved format, what format is written and what format is displayed-->
<pre>
1
2
</pre>
<del>Delete word</del>
<ins>Inserter</ins>
<b>Bold</b>
<i>italics</i>
<!--sup Add words in the upper right corner sub Add words in the lower right corner-->
10<sup>2</sup>
10<sub>m</sub>
</body>
</html>Entity symbol
<!-- The characteristics of entity symbols are as follows: &; End & lt; Is less than sign & gt; is greater than sign -- >
<!-- Space -- > A & nbsp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entity symbol</title>
</head>
<body>
<!--Characteristics of entity symbols: Based on&Start with;end<Yes, less than sign> Yes, greater than sign-->
b<a>c
<!--Space-->
a nbsp;b
</body>
</html>form
<!-- Table: table label, tr: row; td: column -- >
<!-- Border = "1px": set the border of the table to a pixel wide -- >
<!-- Align -- >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<!--table:Table label, tr: that 's ok; td: column-->
<!--border="1px":Set the border of the table to one pixel wide-->
<!--align Alignment:-->
<br><br><br>
<center><h1>Employee information table</h1></center>
<hr>
<table border="1px" width = 60% height = "300px" align="center">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>Cell merge, th label
<!-- Rowspan merge columns and delete lower cells -- >
<!-- ColSpan merge columns -- >
<!-- Thead, tbody and tfood divide the content into three parts. It is not necessary to add them, but just for the convenience of js code writing later -- >
<!-- The th label is also a cell label. More things than td are centered and bold -- >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cell merge,th label</title>
</head>
<body>
<table border="1px" width = 60%>
<!--rowspan Merge columns and delete the lower cell-->
<!--colspan Merge columns-->
<!--thead,tbody,tfood It is not necessary to divide the content into three parts, just for convenience js Code writing-->
<!--th The label is also a cell label, which is more td Many things are centered and bold--> <!--<tr>
<td>Employee No.:</td>
<td>Employee salary</td>
<td>Employee name:</td>
</tr>-->
<thead>
<tr>
<th>Employee No.:</th>
<th>Employee salary</th>
<th>Employee name:</th>
</tr></thead>
<tbody>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td colspan="2">7</td>
<!--<td>9</td>-->
</tr></tbody>
<tfoot>
<th>Employee No.:</th>
<th>Employee salary</th>
<th>Employee name:</th>
</tfoot>
</table>
</body>
</html>Background color and picture
<!-- Bgcolor background: background picture -- >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background color and picture</title>
</head>
<!--bgcolor Background color background: Background picture-->
<body bgcolor="pink" background="./1.jpeg">
</body>
</html>picture
<!-- When setting the height and width of the picture, only the width is set, and the height will be zoomed
img is a picture label
title: set the information displayed when the mouse hovers
alt sets the prompt message displayed when the image fails to load
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>picture</title>
</head>
<body>
<!--When setting the height and width of the picture, only the width is set, and the height will be zoomed
img Is a picture label
title Set the information displayed when the mouse hovers
alt Set the prompt message displayed when the picture fails to load
-->
<img src="./1.jpeg" width="100px" title="I am a picture" alt="Picture display failed">
<br><br><br>
<img src="./1.jpeg" >
</body>
</html>Hyperlinks
<!-- Role of hyperlinks
You can send a request from the browser to the server through hyperlinks
The browser sends data (request) to the server
The server sends data to the browser (response: response)
B/s structure system, each request will correspond to a response
B ----- request ----- S
S ------ response ------ B
What is the difference between a user clicking on a hyperlink and a user directly entering a URL in the browser address bar?
Essentially, there is no difference. They all send requests to the server
Operationally speaking, hyperlinks are more convenient to use
a: Hyperlink tag hyperlink features: underlined, mouse on the hyperlink with a small hand, click on the hyperlink to jump directly to the corresponding path
href: followed by a URL. It has been explained that a resource address can be a relative path, a path of a resource in the network, or a path of a local resource
target can take the following values:
_ blank: new window_ self: current window_ top window
_ parent window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyperlinks: hot links</title>
</head>
<body>
<a href="http://Www.baidu.com "> Baidu</a>
<a href="http://Nwes.baidu.com "> Baidu news</a>
<a href ="http://Wwww.jd.com "> JD</a>
<a href="picture.html">picture</a>
<!--Picture hyperlink-->
<a href="picture.html" target="_blank"><img src="./1.jpeg" width="120px"></a>
</body>
</html>list
<!-- There is a sequence table < ol > < li > < / Li > < / OL > -- >
<!-- Unordered list < UL > < li > < / Li > < / UL > -- >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list</title>
</head>
<body>
<!--Ordered list-->
<ol type="1">
<li>Fruits
<ol type = "a">
<li>Apple</li>
<li>Peach </li>
</ol>
</li>
<li>Vegetables</li>
<li>Peach</li>
</ol>
<!--Unordered list-->
<ul type = "circle">
<li>China
<ul type = "square">
<li>Beijing
<ul type = "disc">
<li>Dongcheng District</li>
<li>Xicheng District</li>
<li>Haidian District</li>
<li>Chaoyang District</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>U.S.A</li>
</ul>
</body>
</html>Forms (relatively important to Java programmers
1 what is the use of forms?
After collecting user information and presenting the form, the user fills in the form and clicks the submit button to submit the data to the server
(2) how to draw a form
Draw a form with the form label
(3) a web page can have multiple form s
4. The final submitted data of the form needs to be handed over to the server. The form tag has an action attribute, which is used to specify the server address
The action attribute is used to specify which server to submit the data to
The action attribute is the same as the href attribute in the hyperlink
five http://192.168.111.3:8080/oa/save OA: project this is the form request path. The form submission data is finally submitted to the software corresponding to port 8080 on the 192.168.111.3 machine
Draw a submit button, which can submit the form, and use the input field to draw the button
Draw a button · you can use the input field. type = "submit" means that the button is a submit button with the ability to submit a form
"Button" this is an ordinary button and does not have the ability to submit forms
"Text" text box
"password" box
CheckBox check box
radio button
"reset" clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form </title>
</head>
<body>
<input type="submit" value="Set the text displayed on the button">
</form>
<form action="http://www.baidu.com">
<input type="submit" value="Baidu"><br>
</form>
<form action = "http://127.0.0.1:8080/jd/login">
user name<input type = "text"><br>
password<input type="password"><br>
<input type="submit" value="Sign in">
<br><br>
</form>
<form action="http://127.0.0.1:3306/test/student">
<table>
<tr>
<td> user name</td>
<td> <input type="text" name="userName"> </td>
</tr>
<tr>
<td> password</td>
<td><input type="password" name="userPass"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit"name="user" value="Sign in">
<input type="reset" value="empty"></td>
</tr>
</table>
</form>
</body>
</html>User registration form and drop-down list
method property
When get is submitted in the get method, the information submitted by the user will be displayed on the browser address bar. By default, get
When post is submitted by post, the information submitted by the user will not be displayed on the browser address bar
Drop down multiple selection < select multiple = "multiple" >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User registration form</title>
</head>
<body>
<form action="http://127.0.0.1/3306/text/student" method="post">
user name
<input type="text" name="userName">
<br>
password
<input type="password" name="userpwd">
<br>
Confirm password
<input type="password" >
<br>
Gender
<input type="radio" name="gender" value="1" checked>male
<input type = "radio" name="gender" value="0">female
<br>
hobby
<input type="checkbox" name="instert" value="0">having dinner
<input type="checkbox" name="instert" value="1">sleep
<input type="checkbox" name="instert" value="2">Beat beans
<br>
education
<select name="grade">
<option value="gz">high school</option>
<option value="dz">junior college</option>
<option value="bk" selected>undergraduate</option>
<option value="ss">master</option>
</select>
<br>
brief introduction<!--textarea no return value-->
<textarea rows="10" cols="10" name="introduct"></textarea>
<br>
<input type="submit" value="register">
<input type="reset" value="empty">
<!--Pull down multiple selection, press and hold Ctrl Multiple choices
-->
<select multiple="multiple" size =3>
<option>Henan Province</option>
<option>Shandong Province</option>
<option>Hunan Province</option>
<option>Hebei Province</option>
<option>Henan Province</option>
<option>Henan Province</option>
</select>
</form>
</body>
</html>file control and hidden control
File upload file
hidden is not displayed in the browser. Compared with text, post is not displayed in the address bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>file control</title>
</head>
<body>
<!--file Upload file-->
<input type="file">
<form action="http://localhost:3306/text/student" method="post">
<!--hidden Not displayed in the browser, and text For comparison, post Do not display in the address bar-->
<!--<input type="text" name="userid" value="111">-->
<input type="hidden" name="userid" value="111">
user designation codes
<input type="text" name="userCode" >
<input type="submit" value="Submit">
</form>
</body>
</html>readonly and disable
<!-- Readonly and disable are read only and cannot be changed
But eadonly submits it to the server, and the other does not -- >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>readonly disable</title>
</head>
<body>
<!--readonly disable They are only readable and cannot be changed
but eadonly Submit to the server, and the other does not-->
<form action="http://127.0.0.1:3306/tese/student">
user designation codes <input type="text" name="user" value="110" readonly>
user name
<input type="text" name="usercode" value="111" disabled>
</form>
</body>
</html>maxlength attribute
<!-- Limit the number of input words -- >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>maxlength</title>
</head>
<body>
<input type="text" maxlength="3">
<!--Limit the number of input words-->
</body>
</htmlid attribute
div and span
Three ways to introduce css into HTML
It's good for Java programmers to know
First
The third kind
Transfer and build an independent. class file
List style
Absolute positioning
