English class
A label
A Functions of labels:
Jump to External page Jump to internal anchor point Jump to mailbox or phone
A Attributes of the tag (interview)
Href (hyperlink)
Do not double click to open a web page, use http-server. -c-1 short: hS-C-1
A Link address value:
1. The web site:
A. www.baidu.com b. www.baidu.com c. //www.baidu.com This format is recommended. Put it in the browser and it will complete automatically
2. The path:
A. Absolute paths: /a/b/c; b. Relative paths: index.html and./index.html
3. Pseudo-agreement:
A. javascript: code; c. Tel: mobile phone number
- Id: href=#id name, you can jump to the tag with id name id
A. such as < p id = “XXXX” > < / p >, < a href = “# XXX” > < / a > to locate this p tag
target
A. Function: Decide whether to open the link on this page or a new page b. Value:
The built-in name
(1) a_blank opens a new page; (2) a_self opens on the current page; (3) a_top opens on the top page; (4) a_parent opens on the parent page. 3 and 4 are applicable to Iframe Windows
Programmer naming
Iframe tag: embedded window, rarely used anymore
Table TAB (display table)
Related tags:
Table, thead, tbody, tfoot, TR, TD, th
The full table tag contains elements:
Thead • TR (Table Row) Row • TH (Table head) table header TBody • TR (Table row) • TD (Table data) Data tfoot • TR (Table row) • td/th
Here’s an example:
<table>
<thead>
<tr>
<th>English</th>
<th>translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>super</td>
</tr>
<tr>
<td>taget</td>
<td>The target</td>
</tr>
</tbody>
<tfoot>
<td>empty</td>
<td>empty</td>
</tfoot>
</table>
Copy the codeThe effect is as follows:
Extended examples:
As shown in the figure, there are two table headers, namely, Xiao Hong, Xiao Ming, Xiao Ying and math, Chinese, English
<table>
<thead>
<tr>
<th></th>
<th>The little red</th>
<th>Xiao Ming</th>
<th>Jack Bauer</th>
</tr>
</thead>
<tbody>
<tr>
<th>mathematics</th>
<td>61</td>
<td>91</td>
<td>85</td>
</tr>
<tr>
<th>Chinese language and literature</th>
<td>79</td>
<td>82</td>
<td>92</td>
</tr>
<tr>
<th>English</th>
<td>100</td>
<td>91</td>
<td>86</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total score</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
Copy the codeThe effect is as follows:
Related styles:
Table-layout, border-collapse and border-spacing
Table – layout: • table – layout: auto; Auto Indicates that the width is calculated according to the content. • Table-layout: Fixed; Fixed means a fixed width. Try to make the width even
Border-collapse and border-spacing: • Used to adjust the spacing of table borders
It is usually set to:
table {
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
Copy the codeSet before:
Img tags
Purpose: Issue a GET request to display an image
Properties:
- SRC (source): address of the image
- Alt: If the graph is cracked and cannot be loaded, the text of the Alt attribute is displayed as a backup
- Width If you just write the width, the height will be adaptive
- Height if you just write height, the width will be self-adaptive
A good front end can’t deform the graph! So just write width or height!
Events:
Onload loading succeeded onError loading failed
<body>
<img id="xxx" width="400" height="400" src="Dog. PNG" alt="A dog.">
<script>
xxx.onload = function() {
console.log("Image loaded successfully")；
}；
xxx.onerror = function() {
console.log("Image load failed")；
xxx.src = "/404.png"
}
</script>
</body>
Copy the codeResponse:
Max-width: 100%; , so that the phone can also be 100% display, drag freely
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
Copy the codeThe form tag
Function:
Send a GET or POST request to refresh the page
Properties:
Action: Where to send the request Method: • OFF: In each input field used, the user must either explicitly enter a value, or document provides auto-completion in its own way; The browser does not automatically complete input. • ON: The browser can automatically complete the form based on the value entered by the user. It will give you a prompt to complete the form. Target: Submit on the current page or open a new page
What is the difference between Input Submit and Button Submit
<body>
<form action="/yyy" method="POST"
autocomplete="on" target="_blank">
<input name="username" type="text">
<input type="submit" value="The input start">
<button type="submit">
<strong>The button start</strong>
</button>
</form>
</body>
Copy the codeThe effect is as follows:
The input tag
What it does: Let the user enter content
JS:
Onchange (input changes), onblur (mouse focus on it), onfocus (mouse coming out of here)
Properties:
Type: • color Input color • text Input text • password Input password • Radio Radio
<input type="radio" name="gender"Male > < input type ="radio" name="gender"> femaleCopy the code• Checkbox multiple selections (also, you need to write the same Name for the same type of multiple selections)
<input type="checkbox" name="hobby" id=""Sing > < input type ="checkbox" name="hobby" id=""Jump > < input type ="checkbox" name="hobby" id="">rap
<input type="checkbox" name="hobby" id=""> basketballCopy the codeThe effect is as follows:
• Upload a file: • Upload multiple files:
• Textarea text box how to make text box can not drag freely, fixed size
<textarea style="resize:none; width:50%; height:300px;"></textarea>
Copy the code• select choice
<select name="week" id="">
<option value="">- Please select -</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
</select>
Copy the codeSumming effect:
Matters needing attention
- Input click is not normally listened for
- The Input in the form must have a Name
- The form must have an input or button of type=submit to start the Submit event