Today's class content
1. Pre class review
1.1 basic structure of HTML: html,head,body
1.1 common Tags: br, hr, font, h1-h6, p, ul, ol, img, marquee, etc.
2. Content of today's new lesson
2.1 use of hyperlinks < a >
2.1.1 attribute href: hyperlink address
2.1.2 you can jump between local and web pages
2.1.3 attribute: target: jump mode--
_ blank: new window
_ self: this window (default)
2.2 use of absolute and relative paths of files
2.2.1 absolute path: complete address (path)
2.2.2 relative path:
* * html files and pictures are in the same directory
* * the picture is in the parent directory of the html file
* * the picture is in the lower directory of the html file
* * the picture is in the parent directory of the html file
2.3 anchor link (between pages, calling anchor link across pages) = = = jump to the page and add # name
2.4 special symbols (Copyright (& copy), greater than (& gt), less than (lt), double quotation (& quote), space (& nbsp))
2.5 form (* * *)
<input type = "">
type="Text" the optional values are text, radio, checkbox, password, submit / reset, image, file, hidden and button
img. Label usage
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset = "utf-8"/> | |
| </head> | |
| <body> | |
| <!-- | |
| 1. Use of picture labels | |
| img tag | |
| Attribute: src attribute - the address of the picture | |
| src (1) absolute path (2) relative path (3) network path | |
| (1) Absolute path | |
| A drive letter is specified on the path | |
| D:\\images\\1.jpg | |
| E:\\1.jpg | |
| (2) Relative path | |
| a. The web page file and the picture file are in the same directory. | |
| Picture name jpg | |
| b. The web page file is in the same directory as the folder containing the pictures | |
| D:\\html_02\\1.html | |
| D:\\html_02\\img\\1.jpg | |
| Path: IMG \ \ 1 jpg | |
| c. The picture file is in the same directory as the folder containing the web page | |
| .. / return to the previous directory | |
| (3) Network path | |
| --> | |
| <img src = "D:\\1.jpg"/> | |
| <!-- a. The web page file and the picture file are in the same directory. -- > | |
| <img src = "2.jpg"/> | |
| <!-- b. The web page file is in the same directory as the folder containing the pictures -- > | |
| <img src = "img\\3.jpg"/> | |
| <img src = "https://tse1-mm.cn.bing.net/th/id/R-C.c77feee8572a809f826b1c07de7e9b92?rik=aGGJo0MAyZtRqA&riu=http%3a%2f%2fwww.yymeitu.com%2fupload%2f49210%2f2019%2f06-19%2f20190619140710_9177xpipoqny_small.jpg&ehk=3NST%2bzfLo7hvpiHbQKhQJRsqlppphNNDUBGWpjR7dVc%3d&risl=&pid=ImgRaw&r=0"/> |
<html> <head> <title></title> <meta charset = "utf-8"/> </head> <body> <!-- 1.Use of picture labels img label Properties: src attribute----Address of the picture src(1)Absolute path (2) relative path (3) network path (1)Absolute path A drive letter is specified on the path D:\\images\\1.jpg E:\\1.jpg (2)Relative path a.The web page file and the picture file are in the same directory. Picture name.jpg b.The web page file is in the same directory as the folder containing the pictures D:\\html_02\\1.html D:\\html_02\\img\\1.jpg route: img\\1.jpg c.The picture file is in the same directory as the folder containing the web page ../ Return to the previous directory (3)network path --> <img src = "D:\\1.jpg"/> <!-- a.The web page file and the picture file are in the same directory. --> <img src = "2.jpg"/> <!-- b.The web page file is in the same directory as the folder containing the pictures--> <img src = "img\\3.jpg"/> <img src = "https://tse1-mm.cn.bing.net/th/id/R-C.c77feee8572a809f826b1c07de7e9b92?rik=aGGJo0MAyZtRqA&riu=http%3a%2f%2fwww.yymeitu.com%2fupload%2f49210%2f2019%2f06-19%2f20190619140710_9177xpipoqny_small.jpg&ehk=3NST%2bzfLo7hvpiHbQKhQJRsqlppphNNDUBGWpjR7dVc%3d&risl=&pid=ImgRaw&r=0"/> </body> </html>
2. Set the title and size of the img tag
<html> <head> <title></title> <meta charset = "utf-8"/> </head> <body> <!-- img Attributes of tags width width height height title title Tips alt border frame --> <img border = "10" alt = "Ha ha, picture loading failed" title = "This is a handsome man" src = "4.jpg" width = "200" height = "200"/> </body> </html>
2. Use of hyperlinks
<html> <head> <title></title> <meta charset = "utf-8"/> </head> <body> <!-- Use of hyperlinks a sign Syntax: <a>Prompt text</a> Jump can only be realized with the help of an attribute href attribute---->Link address Address: Local address network address Target attribute target _self This window opens by default _blank A new window opens --> <!-- Local address --> <a href = "1.html">Jump to the little movie website</a> <br/> <!-- network address --> <a href = "http://www.baidu. Com "> Baidu</a> <br/> <a href = "http://www.4399. Com "> Baidu</a> <br/> <a target = "_blank" href = "http://www.80s. Cn "> small movie website</a> </body> </html>
3. Use of anchor connection!!
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<body>
<!--
Use of anchor links
adopt a Label implementation.
You must set an anchor point to jump to the specified position
Click a text or button to jump to the location of the specified web page
Steps:
1.Sets the anchor mark at the specified location
<a id = "sb"></a>
2.In the specified a Just set the jump anchor on the label.
<a href = "#Sb "> jump to the specified anchor point</a>
-->
<!-- Set anchor -->
<a id = "dengyankang"></a>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a href = "#Dengyankang "> return to top</a>
</body>
</html>4. Simulated novel title
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<body>
<h1>Zhang you falls in love with the domineering female president</h1>
<ul>
<li><a href = "#1 "> Chapter 1 prison situation</a></li>
<li><a href = "#2 "> Chapter 2 escape from prison</a></li>
<li><a href = "#3 "> Chapter 3 rush to the airport</a></li>
<li><a href = "#4 "> I met Xiao Hong in Chapter 4</a></li>
<li><a href = "#5 "> Chapter 5 going abroad together</a></li>
</ul>
<hr/>
<a id = "1"></a>
<h2>Chapter 1 prison situation</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "2"></a>
<h2>Chapter 2 escape from prison</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "3"></a>
<h2>Chapter 3 rush to the airport</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "4"></a>
<h2>Chapter 4 encounter Xiaohong</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "5"></a>
<h2>Chapter 5 going abroad together</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
</body>
</html>4. Page feed anchor event
<html> <head> <title></title> <meta charset = "utf-8"/> </head> <body> <h1>Zhang you falls in love with the domineering female president</h1> <ul> <li><a href = "7.html#1 "> Chapter 1 prison situation</a></li> <li><a href = "7.html#2 "> Chapter 2 escape from prison</a></li> <li><a href = "7.html#3 "> Chapter 3 rush to the airport</a></li> <li><a href = "7.html#4 "> I met Xiao Hong in Chapter 4</a></li> <li><a href = "7.html#5 "> Chapter 5 going abroad together</a></li> </ul> </body> </html>
4.1 implementation page
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<body>
<a id = "1"></a>
<h2>Chapter 1 prison situation</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "2"></a>
<h2>Chapter 2 escape from prison</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "3"></a>
<h2>Chapter 3 rush to the airport</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "4"></a>
<h2>Chapter 4 encounter Xiaohong</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
<a id = "5"></a>
<h2>Chapter 5 going abroad together</h2>
<script>
for(var i = 0;i<=100;i++){
document.write(i+"<br/>");
}
</script>
</body>
</html>5. Introduce the use of various labels!
<html> <head> <title></title> <meta charset = "utf-8"/> </head> <body> <!-- Form tag similar Swing Basic components in (label, button, input box, password box, radio box, check box, file selector, drop-down box, etc.) The parent tag that implements the form is form Font label label input label Refers to text box, password box, radio box, check box, submit button, reset button, hide button, etc How to distinguish? Distinguish by one attribute type form 2 attributes on label action: Address of submission Specially transfer the value entered on the label in the form to another page for judgment and acquisition. method Submitted request method get The request mode data exposure is unsafe, and the data size is limited post Request mode data does not expose security --> <h1>User registration</h1> <form action = "3.html" method = "get"> <label>account</label> <!-- Text box --> <input type = "text" name = "username"/> <br> <label>password</label> <input type = "password" name = "password"/> <br/> <label>Gender</label> <!-- radio Only one radio box can be selected by grouping --> <!-- Grouping is to set the same attribute and value in the specified radio box label name attribute --> <input type = "radio" name = "sex" value = "male" />male <input type = "radio" name = "sex" value = "female"/>female <br/> <label>hobby</label> <input type = "checkbox" value = "Beat beans"/>Beat beans <input type = "checkbox" value = "Da Kangkang"/>Da Kangkang <input type = "checkbox" value = "Hit often"/>Hit often <input type = "checkbox" value = "Fight Feifei"/>Fight Feifei <br.> <!-- Drop down box select Sub option option--> address <select> <option value = "Hunan Province">Hunan Province</option> <option value = "Hunan Province">Hunan Province</option> <option value = "Hunan Province">Hunan Province</option> <option value = "Hunan Province">Hunan Province</option> <option value = "Hunan Province">Hunan Province</option> </select> <br/> <!-- Normal button input--> <input type = "button" value = "Sign in"/> <!-- The submit button is used to submit the data in the form to another place for judgment--> <input type = "submit" value = "This is Liu Kaifeng" /> <!-- Reset --> <input type = "reset" value = "Kill me"/> <!-- Button (picture) --> <input type = "image" src = "3.jpg"/> <!-- Hidden field button features: it will not be displayed on the page. It can be seen in the source code. Function: secretly transfer values--> <input type = "hidden" value = "admin"/> <!-- File selector --> <input type = "file"/> <br> remarks <textarea rows = "10" cols = "10"> </textarea> </form> </body> </html>
5.1 set a prompt for the account or password column, and the input text will be cleared automatically
<input type="text" placeholder="Please enter the account number" style="width: 260px; "/>
5.2 prohibition of changes to certain components
<!-- Disable button --> <input disabled="false" type="submit" value="Submit" />