1. Functional elements
1.1 list labels
Function: add list semantics to a pile of data, that is, tell the search engine to tell the browser that this pile of data is a whole.
Classification of list tags in HTML
Unordered list (maximum)
Ordered list (minimum)
Definition list (second)
1.1. 1 unordered list
In order: ranking list
No order: news list, commodity list
Unordered list format:
<ul> <li>Items to be displayed</li> </ul>
Unordered list style:
<ul type="value"></ul> disc Default: filled circle circle Hollow circle square Solid block Although the style can also be modified through label properties, But don't do that in enterprise development
be careful:
1.Be sure to remember ul Tags are used to add list semantics to a pile of data, Not to add small dots to them
2.ul tag and li tag are a whole and a combination Therefore, generally, ul tags and li tags appear together, not individually In other words, a ul tag or a li tag will not be used alone. They are all used together
3. Because ul tag and li tag are a combination, it is not recommended to include other tags in ul tag, that is, you will only see li tag in ul tag in the future
Application scenario:
News list commodity list navigation bar
1.1. 2. There is a sequence table
Ordered list format:
<ol>
<li></li>
</ol>
Ordered list style:
<ol type="A"></ol> 1 Default value. Numbers have a sequence table. (1,2,3,4) a An ordered alphabetical list, in lowercase. ( a,b,c,d) A An ordered alphabetical list, in uppercase. ( A,B,C,D) i Roman letters, small. ( i, ii, iii, iv) I Roman letters, capital. ( I, II, III, IV)
Application scenario:
Olympic medal list
1.1. 3 definition list
Define the format of the list:
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>
Application scenario:
Do the relevant information at the end of the website and mix the pictures and texts
Note:
Like ul/ol, dl and dt/dd are a whole, so they generally do not appear alone, but together
Like ul/ol, dl and dt/dd are combined labels, so it is recommended to put only dt and dd labels in dl
A dt can have no corresponding dd or multiple corresponding dd, but it is not recommended to use it with or without dd
It is recommended that one dt corresponds to one dd
Like li tags, when we need to enrich the interface, we can continue to add other tags in dt and dd tags
1.2 form labels
Function: used to add table semantics to a pile of data
Table is a form of data presentation. When the amount of data is very large, table is considered to be the clearest form of presentation
Table label format:
<table>
<tr>
<td>full name</td>
<td>Age</td>
<td>height</td>
</tr>
<tr>
<td>Zhang San</td>
<td>19</td>
<td>1.78</td>
</tr>
</table>
A pair of table tags is a table
A pair of tr tags is a row in the table
A pair of td tags is a cell in a row
Supplement:
tr and th are used to represent the header, and the font is bold text in the middle.
tr and td are used together to represent the table body. The font is left aligned normal text.
be careful:
The table label has a border border attribute, which determines the width of the border By default, the value of this property is 0, so you can't see the border
Table labels, like list labels, are combined labels, so table/tr/td either appear together or not together, and will not appear alone
Width and height properties
Can be used for the table tag and td tag
- The width and height of the table are adjusted by default according to the size of the content. You can also manually specify the width and height of the table by setting the width/height attribute on the table label
- If the width / height attribute is set for the td tag, the width and height of the current cell will be modified, and the width and height of the entire table will not be affected
Horizontal and vertical alignment properties
Horizontal alignment can be used for table label, tr label and td label
Vertical alignment can only be used for tr labels and td labels
- Setting the align attribute to the table tag can control the horizontal alignment of the table
- Setting the align attribute to the tr tag can control the horizontal alignment of all cell contents in the current row
- Setting the align attribute to the td tag can control the horizontal alignment of the contents in the current cell
Note: if the align attribute is set in td and the align attribute is also set in tr, the contents of the cells will be aligned according to the settings in td - Setting valign attribute to tr tag can control the vertical alignment of all cells in the current row
- Setting valign attribute to td tag can control the vertical alignment of the contents in the current cell
Note: if the valign attribute is set in td and the valign attribute is set in tr, the contents of the cells will be aligned as set in td
align: left center right
valign: top mid bottom
Properties of outer and inner margins
Can only be used for table tags
-
Cell spacing outer margin is the distance between cells, which we call outer margin
By default, the outer margin between cells is 2px -
Cell padding is the gap between the cell border and the text. We call it the padding
By default, the inside margin is 1Note: in the future, in enterprise development, all styles are controlled through CSS or directly using the properties in the component library. There is little use of the table's own properties, but you should understand the basic use.
Outer margin inner margin (margin, padding in element)
cellspacing the distance between cells is 2px by default
cellpadding the gap between the border of the inner margin cell and the text is 1px by default
Thin line table
Production method:
1.to table Label settings bgcolor="black"，cellspacing = "1px" 2.to tr Label settings bgcolor="white"
Note:
The bgcolor attribute is supported for the table tag, the tr tag, and the td tag
Complete structure of the table
caption header thead/th subject tbody/tr/td additional information tfoot
caption: Specifies the title of the table
thead function: specify the header information of the table
tbody function: Specifies the principal information of the table
tfoot: Specifies additional information for the table
<table>
<caption>Table title</caption>
<thead>
<tr>
<th>Title of each column</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>data</td>
</tr>
</tfoot>
</table>
be careful:
If we don't write tbody, the system will add tbody to us
If thead and tfoot are specified, thead and tfoot have their own default height when modifying the height of the whole table, which will not change with the height of the table (it is OK in chrome and not in Firefox)
Cell merge
1. Horizontal cell merging
You can add a colspan attribute to the td tag to specify that a cell be treated as multiple cells (horizontally)
<td colspan="2"></td>
be careful:
Because a cell is treated as multiple cells, there will be more cells, so some cells need to be deleted to display normally
Remember that cell merging is always backward or downward, not forward or upward
2. Vertical cell merging
You can set a rowspan attribute to the td tag to specify that a cell be treated as multiple cells (vertical direction)
<td rowspan="2"></td>
1.3 form
Specially used for mobile phone user information
Form elements are actually some tags in HTML, but these tags are special. All form tags in the browser have special appearance and default functions
Format of the form:
<form action="Submitted server interface address">
<Form Elements >
</form>
Note: form elements must be written in the form
Common form elements:
-input label
input The label has a type attribute, This property has many types of values,Different values determine input The function and appearance of the label are different
-Plaintext input box
<input type="text" name="account" placeholder="enter one user name">
name:When the form is submitted, it will be used as the name of the parameter and matched with the entered value to form the parameter name=Structure of parameter values
placeholder:Tips
-Dark text input box
<input type="password" name="password" placeholder="Please input a password">
-The input box sets the default value
<input type="xxx" value="xxx">
-Radio
<input type="radio" name="xx" value="xxx">
Attention:
1.By default, radio boxes are not mutually exclusive, To make radio boxes mutually exclusive, you must set one for each radio box label name attribute, then name Property must also be set to the same value.
2.If you want a radio box to be selected by default, Then you can give it to me input Add a label checked Properties.
3.Of radio boxes value Value is the final value we need, not the value displayed in the radio box.
-Checkbox
<input type="checkbox" name="xxx" value="xxx">
Multiple check boxes are selected by default checked
-Submit button
<input type="submit">
effect: The data already filled in the form, Submit to remote server
Attention:
To submit the data filled in the form to the remote server, Two conditions must be met
1.Need to give form Add a form action Properties of, Through this action Property specifies the server address to submit to
2.You need to add one to the form element that needs to be submitted to the server name attribute
-enctype
application/x-www-form-urlencoded
Query string, encode all characters before sending (default), convert to?a=a&b=b&c=c
multipart/form-data
No character encoding. This value must be used when using a form that contains a file upload control.
-Attachment upload <input type="file">
method="POST"
enctype="multipart/form-data"
text/plain
Used to send plain text content and convert spaces to "+" Plus sign, which does not encode special characters. It is generally used for email Something like that;
-Normal button
<input type="button" value="xxx">
Can pass value Property to assign a title to the button
effect: coordination JS Complete some operations
-Picture button
<input type="image" src="">
effect: coordination JS Complete some operations
-Reset button
<input type="reset" value="xx">
effect: Used to clear the filled data in the form
Attention:
If you want to change the default button title of the reset button, you can value Property to modify
-Hidden domain
<input type="hidden" name="xx" value="xxx">
Hidden domain
effect : Cooperate with the submit button to silently submit some data to the server
-label label
1.By default, there is no association between text and input box, That is, clicking the text input box will not focus, If you want to focus the corresponding input box when clicking text, Then you need to bind the text to the input box
2.To bind an input box to text, Then we can use label label
3.Binding format:
3.1 Use text label Wrap the label
3.2 Add a to the input box id attribute
3.3 stay label Pass in label for Properties and in the input box id Just bind
<label for="account">
account number:
</label>
<input type="text" id="account">
-select label
effect: Used to define the drop-down list
format:
<select>
<optgroup label="Group name">
<option>List data</option>
</optgroup>
</select>
Attention:
1.The drop-down list cannot be entered, However, you can select content directly from the list
2.By giving option Add a label selected Property to specify the default value for the list
3.By giving option The label is wrapped in one layer optgroup Label to classify the data in the drop-down list
-textarea label
effect: Define a multiline input box
format:
<textarea>
</textarea>
Attention:
1.By default, the input box can wrap indefinitely
2.By default, the input box has its own width and height
3.Can pass cols and rows To specify the width and height of the input box, However, although the number of columns and rows are specified, But you can enter it indefinitely
4.By default, the input box can be stretched manually
-fieldset assembly
fieldset Component is used in a web Grouping multiple controls and labels in a form
format:
<form action="">
<fieldset>
<legend>Please login</legend>
account number:<input type="text"><br>
password:<input type="password">
<input type="submit">
</fieldset>
</form>
New form elements in HTML5
-datalist label
<input type="text" list="xxx">
<datalist id="xxx">
<option>xxx</option>
</datalist>
1.effect: Bind pending options to the input box
2.datalist format:
<datalist>
<option>Contents to be selected</option>
</datalist>
3.How to bind a to be selected list to an input box
1.Make an input box
2.Make one datalist list
3.to datalist Add a list label id
4.Add a to the input box list attribute,take datalist of id The corresponding value is assigned to list Property
-progress <progress value="70" max="100">70%</progress>
progress Indicates the completion of a task, which is often used in the progress bar
max Define the workload of the task required by the progress element. The default value is 1
value Define the workload that has been completed, if max The value is 1, which must be between 0~1 Decimal between.
-mailbox <input type="email">
You can automatically verify whether the input content conforms to the format of the mailbox
-domain name <input type="url">
You can automatically verify whether the input content is correct URL address
-number <input type="number">
Only numbers can be entered in the input box
-time <input type="date">
You can select the time through the calendar
-colour <input type="color">
The color can be selected through the color palette