Table of contents
2. Summary and demonstration of commonly used tags
3 ° select / textarea components in the form form
7° The difference between get request and post request
1. Miscellaneous talk
1. Web page composition:
1° structure
HTML is the carrier of web content . "Webpage content" refers to the information that the webpage maker puts on the page for users to browse, including text, pictures, videos, etc.
2° performance
CSS styles are performance , like the coat of a web page. eg : Title font, color change, or add background image, border, etc. to the title. All thesethings that are used to change the appearance of the content are called presentations.
3° Behavior
JavaScript is used to achieve special effects on web pages . eg : Mouse over to pop up a drop-down menu; or mouse over to change the background color of the table; or the rotation of pictures in shopping websites. Generally, animations and interactive needs are implemented with JavaScript .
2. Introduction to HTML:
1° Basic introduction
HTML, the full name of HyperText Mark-up Language, is Hypertext Mark-up Language ("hyper" refers to the rich types of content that can be displayed). HTML text is text composed of HTML tags, which can include text, graphics, animations, sounds, tables, links, etc. The structure of HTML mainly includes two parts: head (Head) and body (Body) . The head is used to describe the information required by the browser, while the body contains the specific content to be explained .
HTML files do not need to be compiled, and are directly parsed and executed by the browser . PS: If the corresponding browser is not installed, an error will be reported.
2. Basic structure:
The basic structure of HTML is shown in the figure below:
PS: The comment format is <!-- --> .
3. HTML tags:
1° Basic instructions
① HTML tagsare enclosed by a pair of angle brackets <> ;
② HTML tags are generally double tags, such as <a> </a> , the previous tag is the start tag, and the latter tag is the end tag ; the text between the start tag and the end tag is the content of the HTML element .
③ There is also a single tag in HTML, which can completely express information when used alone. eg: <br/>newline tag, <hr/>horizontal line tag .
④The content inside the tag <> is called the attribute of the tag (the attribute value should be enclosed in double quotation marks "") .
eg : <font color = "cyan" > demo </font>
2° Precautions
① Tags cannot be cross-nested , and must correspond from beginning to end.
②The label must be closed properly .
③ Comments cannot be nested .
④ The HTML syntax is not rigorous (different browsers have different parsing methods, so it should not be too rigorous) . Sometimes the tag is not closed, and the attribute value does not include "" and no error will be reported.
2. Summary and demonstration of commonly used tags
1. font tag:
1° Definition
font is a font label, which allows the user to modify the font, color, and size of the text . The face attribute is used to modify the style of the font ;
The color attribute is used to modify the color of the font ;
The size attribute is used to modify the size of the font .
PS: ① There is no order requirement for the attributes in the tag .
②The font tag is outdated, and CSS is generally used instead .
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<font face = "consolas" color = "Cyan" size = "24px">Cyan_RA9</font>
</body>
</html>running result:
2. Character entities:
1° Definition
Some special symbols displayed on web pages are called character entities (also called symbol entities).
Common special characters are as follows:
① —— space (each time a is entered, a space is displayed)② < —— left angle bracket<
③ > —— right angle bracket>
List of character entities:
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符实体演示</title>
</head>
<body>
<hr/> <hr/>
<font color = "#ffc0cb"size = "20px">
Cyan RA9
</font>
</body>
</html>running result:
3. Title tags:
1° Definition
Headings are defined using <h1> - <h6> tags. <h1></h1> defines the largest heading; <h6></h6> defines the smallest heading.
The attribute align in the title tag indicates the alignment of the title , and has three values——①left : left alignment (default alignment);
②center: centered alignment;
③right : Right alignment.
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签（这里是整个页面的标题，注意区分！）</title>
</head>
<body>
<h1 align = "left">标题1</h1>
<h2 align = "left">标题2</h2>
<h3 align = "center">标题3</h3>
<h4 align = "center">标题4</h4>
<h5 align = "right">标题5</h5>
<h6 align = "right">标题6</h6>
</body>
</html>running result:
4. Hyperlink label:
1° Definition
Hyperlink refers to the link relationship pointing to a target from a web page . This target can be another web page, or it can be different locations on the same web page, it can also be a picture, an email address, a file, or even an application. program .
<a></a> tags represent hyperlinks .
The href attribute is used to set the link address ;
the target attribute is used to set the jump target , and the target attribute has two common attribute values—— ① _self : Indicates to jump on the current page (default value), that is, replace the current page with the target page; ② _blank : Indicates opening a new page for jumping.
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接演示</title>
</head>
<body>
<a href = "https://www.youtube.com/" target = "_self">点我转向油管捏~(￣▽￣)~*</a> <br/>
<a href = "https://blog.csdn.net/TYRA9" target = "_blank">点我转向Cyan_RA9的博客捏</a> <br/>
<a href = "mailto:[email protected]" target = "_self">点我发邮件捏</a> <br/>
</body>
</html>Running effect: (GIF picture below)
5. List label:
1° unordered list
1> Definition
<ul type = "attribute value">
<li>List content</li>
<li>List Content</li>
…</ul>
Among them, there are three types of attribute values——
① type = " disc" , which means a solid dot . (default)② type = "cirecle" means a hollow circle .
③ type = "square" means a hollow rectangle .
2> Demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list demonstration</title>
</head>
<body>
<font size = "20px">四大天王</font>
<ul type = "circle">
<li>持国天王</li>
<li>增长天王</li>
<li>广目天王</li>
<li>多闻天王</li>
</ul>
</body>
</html>running result:
2° Ordered list
1> Definition
<ol type = "attribute value" start = "start value">
<li>List content</li>
<li>List content</li>
......
</ol>
<ol></ol> represents an ordered list tag. <li></li> is used to identify list items, also known as numbered lists .
start attribute : Indicates when to start numbering, you can leave it blank . eg : start = "5".
type attribute : specifies the sorting method before the list items , and there are five attribute values——
① 1 Arabic numerals 1, 2, 3, ...
② a lowercase letters a, b, c, ...
③ A uppercase letter A , B, C, ...
④ i lowercase Roman numerals i, ii, iii, ...
⑤ I uppercase Roman numerals I, II, III, ...
2> Demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list demonstration</title>
</head>
<body>
<h1>四大天王</h1>
<ol type = "i" start = "1">
<li>持国天王</li>
<li>增长天王</li>
<li>广目天王</li>
<li>多闻天王</li>
</ol>
</body>
</html>running result:
6. Image tags:
1° Definition
The <img/> tag is an image tag used to display images . Common attributes are——
① src : set the path of the image
② width : set the width of the image
③ height : set the height of the image
④ border : set the frame size of the image by the attribute (unit is px)
⑤ alt : set the attribute when the specified path cannot be found When the picture is used, it is used to replace the displayed text content
PS:In Java, relative path: counted from the project name; absolute path: drive letter:/directory/filename (starting with the drive letter).
In the web, paths are also divided into relative paths and absolute paths, but they have different meanings——
①Relative paths: ./ indicates the directory where the current file is located; ../ indicates the upper-level directory where the current file is located. If there is only a file name, it defaults to the file in the directory where the current file is located.
②Absolute path: The correct format is: http://IP address:port/project name/resource path
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签演示</title>
</head>
<body>
<img src = "../../../images/yurisa.jpg" height="300px"/> <br/>
<img src = "../../../images/yurisa.jpg" width = "400px" border = "10px"/> <br/>
<img src = "../../../images/yurisa.jpg" width = "400px" height = "200px"/> <br/>
<img src = "../../../images/yurisa_EX.jpg" alt = "Can't find this picture!"/> <br/>
</body>
</html>Running effect: (GIF animation below)
7. Form label ⭐ :
1° Definition
The <table></table> tags represent table tags . Among them, <tr></tr> is the row label; <th></th> is the header label; <td></td> is the cell label table. <b></b> are bold tags.
The common attributes of table tags are as follows - border : Set the width of the table border (the thickness of the border)
bordercolor : Set the color of the table border (hexadecimal color starts with #) width : Set the table width
height : set the height of the table align : set the alignment of the table relative to the page/the alignment of the cell text cellspacing : set the cell spacing (between cells), 0 means there is no gap
cellpadding : Set the distance between the text inside the cell and the border of the cell
rowspan : Set the number of rows across the cell
colspan : Set the number of columns spanning the cell PS: The unit is px (default). If the table width and height are not defined, the browser will automatically adapt the table size according to the table content by default. PS: Steps across rows and columns——
① First determine the total rows and columns of the table;
②Merge rows or columns according to requirements.
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签演示</title>
</head>
<body>
<h3 align = "center">Stationery Table Demonstration</h3>
<table border="5px" bordercolor="pink" align = "center" cellspacing="0" cellpadding="10">
<tr>
<th colspan="6"><font color="#008b8b">文具表</font></th>
</tr>
<tr>
<th>类别</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
<th>账单总价</th>
</tr>
<tr>
<td rowspan = 3>
书写类<img src = "../../../images/pens.jpg" height="50" align = "center"/>
</td>
<td>钢笔</td>
<td>10</td>
<td>1</td>
<td>10</td>
<td rowspan="5" align = "center">29</td>
</tr>
<tr>
<td>铅笔</td>
<td>2</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>中性笔</td>
<td>3</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td rowspan = 2>
修正类<img src = "../../../images/correctionTape.jpg" height="50" align = "center"/>
</td>
<td>橡皮</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>修正带</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
</html>running result:
8. Form label ⭐⭐ :
1° Definition
The <form></form> tag represents a form . The format is as follows:
<form action = "url" method = "*">
......
<input type="submit"> <input type="reset"></form>
PS: url means that defines the path of a web resource, and means which page to submit to; method mainly includes get (default) and post.
PS: The commonly used attributes of the form tag are as follows - form means form action : means which page to submit to
method : Indicates the submission method, the default is get
PS: The input tag is a common component/sub-tag under the form tag (the input tag is a single tag).
The common attribute type of the input tag indicates the type of the input component. The type has four common attribute values, as follows——
input type= text input box
input type= password password box (the difference from the input box is invisible)
input type= submit submit button
input type= reset reset button (value represents the value displayed on the button)
2° input component details
For the type attribute of the input tag , in addition to the common text (input box), password (password box), submit (submit button) and reset (reset button), there are many other attribute values .
eg : checkbox : checkbox (several write several, same name value for the same group) radio : radio button (PS: The checked attribute in checkbox and radio indicates that the item is selected by default)
hidden : Hidden form elements, responsible for submitting data to the server image : Submit button in image form
button : button
file : commit file
PS: The value attribute value is the real value submitted to the server.
3 ° select / textarea components in the form form
The <select></select> subtag represents a drop-down box . Its subtag <option></option> indicates a specific option , and the selected attribute of the option tag indicates that the item is selected by default.
The <textarea></textarea> subtag represents the text field , where rows represents the number of rows and cols represents the number of columns .
4° presentation
code show as below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>form demo</title>
</head>
<body>
<form action="log_in_successfully.html" method="get">
<!-- 中文全角模式下的空格可以对齐表单框 -->
用户名: <input type="text" name="username"> <br/>
密 码: <input type="password" name="password"> <br/>
确认密码: <input type="password" name="rePwd"> <br/> <br/>
请选择你喜欢的运动项目：<br/>
<input type="checkbox" name="sports" value="basketball" checked>Basketball
<input type="checkbox" name="sports" value="football">Football
<input type="checkbox" name="sports" value="running">Running <br/>
请选择你的性别：<br/>
<input type="radio" name="gender" value="male">Male <br/>
<input type="radio" name="gender" value="female">Female <br/>
请选择你的城市：
<select name="city">
<option selected>---请选择---</option>
<option value="suzhou">苏州</option>
<option value="hangzhou">杭州</option>
<option value=nanjing>南京</option>
</select> <br/>
自我介绍：<br/>
<textarea rows="4" cols="20">请在这里输入:</textarea><br/>
请上传你的头像：<br/>
<input type="file" name="myFile"> <br/><br/>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>running result:
5° Form formatting
You can use the table tag to nest the <table></table> tag in the <form></form> tag , and arrange the content of the form in the <table></table> tag in order according to the layout .
eg : optimize the form in the demo above
code show as below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>form demo</title>
</head>
<body>
<form action="log_in_successfully.html" method="get">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="rePwd"></td>
</tr>
<tr>
<td>请选择你喜欢的运动项目：</td>
<td><input type="checkbox" name="sports" value="basketball" checked>Basketball
<input type="checkbox" name="sports" value="football">Football
<input type="checkbox" name="sports" value="running">Running </td>
</tr>
<tr>
<td>请选择你的性别：</td>
<td><input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female</td>
</tr>
<tr>
<td>请选择你的城市：</td>
<td><select name="city">
<option selected>---请选择---</option>
<option value="suzhou">苏州</option>
<option value="hangzhou">杭州</option>
<option value=nanjing>南京</option>
</select> </td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea rows="4" cols="20">请在这里输入:</textarea></td>
</tr>
<tr>
<td>请上传你的头像：</td>
<td><input type="file" name="myFile"></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</form>
</body>
</html>running result:
6° About form submission data
The difference between a form and a table is that——
Forms are mainly used to submit data, submitting data to a specific resource of the server ;
The form is mainly used for display to make the page more regular, and the form cannot directly submit data .
Points to note when submitting data——
① action indicates which url to submit the form data to, that is, which resource of the server (eg: servlet).
② method indicates the submission method, mainly get and post, and the default is get.
③If the element of the form does not write the name attribute, the data will not be submitted!
④ For <select></select>, as well as the checkbox and radio of <input>, the actual submitted value is the value of the value attribute.
⑤ The same group of checkboxes can submit multiple values, the format is sports=xxx&sports=yyy; but the name value of a group of checkboxes is fixed.
When submitting data, there are three situations where the data is not successfully sent to the server——
①A form element item (such as text, password) has no name attribute value
②Single selection, check selection, and option tags in the drop-down list all need to add value attributes to send to the server
③The form item is not in the submitted form tag ( or the form tag is not written ).
7° The difference between get request and post request
The characteristics of the GET request are:
(1) The address in the address bar of the browser is: action attribute [+?+ request parameter] .
Among them, the format of the request parameter is: name=value&name=valueeg:
http://localhost:63342/JavaWeb/html/tag/log_in_successfully.html?username=
Cyan_RA9&password=12345&rePwd=12345&sports=basketball&gender=male&city=
suzhou&myFile=。
(2) Insecure (transmission data information is directly exposed in the address bar of the browser)
(3) It has a data length limit ( different browsers have different regulations, generally 2k)
The characteristics of a POST request are:
(1) There is only the action attribute value in the browser address bar , and the submitted data is carried in the http request and will not be displayed in the address bar.eg :http://localhost:63342/JavaWeb/html/tag/log_in_successfully.htmlThe data is actually stored in the request body behind the request header (in the original request, the request header and the request body are together). The request body is shown in the figure below:
(2) It is safer than GET requests (the data will not be directly displayed in the address bar of the browser)(3) Theoretically, there is no data length limit
9. div tag:
1° Definition
(1) The <div></div> tag can divide the document into independent and different parts ( can be nested )
(2) The <div></div> tag represents a block-level element, and its content automatically Start a new line, no need to manually break the line .
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div demo</title>
</head>
<body>
Let's see this as a beginning of
<div>
<h3 style="color:hotpink">something even more extraordinary.</h3>
<a href="https://blog.csdn.net/TYRA9?spm=1000.2115.3001.5343" target="_blank">Let's go to Cyan's blog</a>
</div>
</body>
</html>running result:
10.p tag:
1° Definition
① <p></p> tags are used to define paragraphs;
② The p element will automatically create some white space before and after it.
③ The p element will also automatically wrap, which is similar to the div tag.
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p tag</title>
</head>
<body>
<p>
Everyone wants to success, but what would you do if you failed?
</p>
<p>
Many people may choose to give up, however,
</p>
<p>
the surest way to success is to keep your direction and stick to your goal.
</p>
</body>
</html>running result:
11. span tag:
1° Definition
1. The span tag is an inline element (embedded element, inline element) , unlike block-level elements (such as: div tag, p tag, etc.), which have the effect of wrapping.
2. <span></span> is often used to control a key content alone . If no style is applied to the span, the span tag has no display effect, and the content in the span tag is equivalent to ordinary text.
3. Format: <span>Content</span> .
2° demo
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span demo</title>
</head>
<body>
I don't wanna <span style="color:red;font-size:40px">die</span> here,
I don't wanna my life have <span style="color:orangered; font-size:40px">no</span> transformation points.
</body>
</html>running result:
3. Summary
Table tags and form tags must be mastered, especially form tags, which are used frequently in the later stage and are almost inevitable.
System.out.println("END------------------------------------------------------------------------");