Table of Contents
1. Use of list tags
1.1 Unordered list ul
1.2 Ordered list ol
1.3 Definition list dl
2. Use of table labels
3. Use of form tags
1. Use of list tags
1.1 Unordered List ul
Unordered list ul (unordered list)
type can change the list flag item disc (default value) circle (hollow circle) square (square)
Note: ul li is not used alone
<!-- 1. Unordered list ul unordered list ul li is not used alone
type can change the list flag item disc (default value) circle (hollow circle) square (square)
-->
<ul type="circle">
<li>Yuncheng Large Plate Chicken</li>
<li>Datong knife noodles</li>
<li>Linfen meatball noodles</li>
</ul>
The results of running the browser are as follows:
1.2 Ordered List ol
ordered list (ol ordered list)
type can change the list flag item 1 A a I i…..
Likewise, ol li is not used alone.
<!-- <ol type="I">
<li>Cao County</li>
<li>Shanghai</li>
<li>Beijing</li>
</ol> -->
The results of running the browser are as follows:
1.3 Definition List dl
definition list dl (definitio list)
Used with dt (definition title) and dd (definition description)
<!-- 3. Definition list dl definitio list dt definition title dd definition description -->
<dl>
<dt>Taiyuan</dt>
<dd>is the capital of Shanxi Province</dd>
<dt>Cao County</dt>
<dd>It is the center of the world</dd>
</dl>
The results of running the browser are as follows:
2. Use of table tags
Table tag: table A table is a table
Table properties: border (border) width (width) height (height) cellspacing (distance between cells)
cellpadding (distance from cell content to cell) bgcolor (background color)
background (background image) align (set the horizontal alignment of the table in the browser) left center right
tr attribute bgcolor align: A whole row of cell content is aligned in the cell left (default value) right center
valign The vertical alignment of a whole row of cell contents top middle (default value) bottom
td attribute bgcolor align: current cell content alignment left (default value) right center
valign The vertical alignment of the current cell content top middle (default value) bottom
th: The header label comes with a centered bold effect
caption table title label
Merge Cells:
Merge across rows rowspan=’number’ Merge number cells
Merge across columns colspan=’number’ merge number cells
Complete structure of the table:
thead header
tbody browser will automatically complete tfoot table foot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
/* Merge cells border-collapse */
border-collapse: collapse;
/* Set background image */
/* background-image: url('../Day01/audio/ad7.jpeg'); */
/* Change background image size */
/* background-size: 100% 100%; */
}
</style>
</head>
<body>
<!-- Table tag A table is a table
Table attribute: border The thickness of the table border defaults to 0
width wide
height high
align The horizontal alignment of the table in the browser left (default value) center right
cellspacing The distance between cells and the margins
cellpadding The distance between the cell border and the cell content padding
bgcolor background color
background background image
-->
<!-- tr attribute bgcolor align: a whole row of cell content in the cell alignment left (default value) right center
valign The vertical alignment of a whole row of cell contents top middle (default value) bottom
td attribute bgcolor align: current cell content alignment left (default value) right center
valign The vertical alignment of the current cell content top middle (default value) bottom
-->
<table bgcolor="cyan" align="center" cellspacing="0" cellpadding="5" width="300px" height="200px" border="1">
<!-- A tr is a row and a td is a cell -->
<!-- <tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr> -->
<!-- The table header cell uses the th tag to have a centered and bold effect -->
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr align="right" valign="top">
<td width="150px">terry</td>
<td align="center">18</td>
<td valign="bottom">Male</td>
</tr>
<tr align="center" valign="bottom">
<td>larry</td>
<td>19</td>
<td>Female</td>
</tr>
</table>
</body>
</html>
The results of running the browser are as follows:
3. Use of form tags
Form tags are used to collect user information
All form elements must be written in the form tag. The action attribute is the server address for form submission.
input:
type text The attribute name submitted to the form in the plain text input box value The attribute value submitted to the form The default is the content entered by the user
type password secret text input box
type radio radio button Set the same attribute for the radio button name=’gender’ value=’male/female’
checked sets the radio button to be selected by default
Label Clicking on the text can focus the form element. It has the following two methods:
1. Wrap the form elements directly with label tags
2.The label for attribute has the same value as the id attribute of the form element. Write the text in the label label.
type checkbox checkbox
checked sets the checkbox to be checked by default
select expands all drop-down options multiple
optgroup groups drop-down options
option drop-down option
selected sets the drop-down box drop-down option to be selected by default
readonlyreadonlydisableddisabled
textarea multi-line text box
type button ordinary button cooperates with js to complete some operations
type image image button
type file upload file
Type reset resets the form element and clears the input or selection options in the form element, but the default value is not cleared.
type submit button submits the values entered in the form to the server
type hidden hidden field The page does not display form elements and quietly submits data to the server
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- All form elements must be written in form tags
The action attribute is the server address for form submission.
-->
<form action="test.php">
<!-- Form elements input box radio button check box drop-down box -->
<!-- The attribute name submitted to the form in the plain text input box name value The attribute value submitted to the form. The default is the content entered by the user -->
<!-- Set form elements to readonly -->
Username: <input type="text" readonly name="username" value="terry">
<!-- Secret text input box -->
Password: <input type="password"><br>
<!-- Gender: Male: <input type="radio" name="gender" value="Male"> Female: <input type="radio" name="gender" value="Female"> -->
<!-- label Click on the text to focus the form element
1. Wrap the form elements directly with label tags
2.The label for attribute has the same value as the id attribute of the form element. Write the text in the label label.
-->
<label>
Male: <input type="radio" name="gender" value="Male">
</label>
<!-- The second method -->
<label for="female">Female:</label>
<input type="radio" checked name="gender" value="female" id="female"><br>
<!-- Checkbox input type checkbox -->
Hobby:
Swimming: <input type="checkbox" name="hobbies" id="swimming">
Basketball: <input type="checkbox" name="hobbies" id="basketball">
<!-- The check box setting is checked by default -->
Football: <input checked type="checkbox" name="hobbies" id="football"><br>
<!-- The drop-down box select option uses option to expand all drop-down options multiple
Grouping using optgroup
-->
City:
<select name="city" multiple>
<optgroup label="First-tier cities">
<option value="Shanghai">Shanghai</option>
<!-- selected Set the drop-down option to be selected by default -->
<option value="Beijing" selected>Beijing</option>
<option value="Hangzhou">Hangzhou</option>
</optgroup>
<!-- Disable form element disabled -->
<optgroup label="Second-tier cities" disabled>
<option value="Taiyuan">Taiyuan</option>
<option value="Lanzhou">Lanzhou</option>
<option value="Jinzhong">Jinzhong</option>
</optgroup>
</select><br>
<!-- Multi-line text box -->
describe:
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- Ordinary buttons cooperate with js to complete some operations -->
<input type="button" value="click">
<!-- Picture button -->
<input type="image" width="150px" src="../Day01/audio/video/ad7.jpeg" alt="">
<!-- Attachment upload -->
<input type="file">
<!-- Hidden fields do not display form elements on the page and quietly submit data to the server -->
<input type="hidden" name="token" value="123">
<!-- Reset button Reset form Clear form -->
<input type="reset" value="Reset">
<!-- Submit button -->
<input type="submit" value="Submit">
</form>
</body>
</html>
The results of running the browser are as follows:
