Front End Learning Records 3-HTML
listLayout, keep page layout neat and regular, and have a high degree of freedom to combine similar tables (tables are best not used to store data in their layout)
Unordered list ul-li
Only <li></li>can be nested in <ul></ul>
Entering other labels or text directly into the <ul>label is not allowed
(Write it but don't change it if something goes wrong)
Any tag can be used in <li></li>
It's best not to write styles using CSS because of styles in html
Different browsers may display different, so don't use
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Unordered Table Usage ul->li</title> </head> <body> <ul> <li>Pitaya</li> <li>Baltic honey</li> <li>Banana</li> <li>watermelon</li> </ul> <body> </head>
- Pitaya
- Baltic honey
- Banana
- watermelon
Differences between Tables and Unordered Tables
A table forms a fixed cell
Cells don't change form by nature
An unordered list <ul></ul> is an operable container of elements
Use this method to control the web elements of most news views on sites like product stores
Layout codes for all items also belong to <ul></ul>
Ordered List ol-li
Similar usage is basically the same for <ol></ol> and <ul></ul>
But the main difference is in the ol ordered list
All element content is sorted with a basic storage sequence (less operable than ul)
Ordered list OLS are often used on projects with a clear hierarchy because of identity
For example, the sorting of the figures below, but there are also problems that can't be corrected when the content changes
This location not only needs to adjust the CSS, but also needs to adjust the corresponding position ordering without changing the code.
But it's not good to change the code, is it?
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Ordered List Usage</title> </head> <body> <ol> <li>China</li> <li>Russia</li> <li>U.S.A</li> <li>Britain</li> </ol> <body> </head>
- China
- Russia
- U.S.A
- Britain
Custom List dl-dt-dd
<dl></dl>Medium Nesting<dt></dt> <dd></dd>
<dt></dt>Tags are similar to objects within a language that are parent <dd></dd>as subclasses
The contents of the <dd></dd>tag exist as an explanation of <dt></dt>
Meaning <dt></dt>Content contains <dd></dd>Content
Custom lists are often used on projects with explicit inheritance
For example, the Help Center on the product store home page
The following corresponds to the help center related account management shopping guide order action content
Use the custom list <dl></dl>Help Center to write <dt></dt>
Account Management Shopping Guide Order Action Written <dd></dd>
The same service supports the post-sale policy of subordinate self-service related downloads These are the same as above
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Custom List Usage</title> </head> <body> <dl> <dt>Beijing</dt> <dd>Changping District</dd> <dd>Haidian District</dd> <dd>Daxing District</dd> <dd>And so on...</dd> <dt>Shandong Province</dt> <dd>HeZe</dd> <dd>Qingdao City</dd> <dd>Yantai City</dd> <dd>Wait City...</dd> </dl> <body> </head>Beijing Changping District Haidian District Daxing District Wait a moment... Shandong Province HeZe Qingdao City Yantai City Wait for the city... form
Used to submit information records to a server-side database or other related content control
Complete form (in short) element Effect Form Control (Form Element) Sections that actually require user action Prompt message Prompt Users form field Submit all data to the backgroundinput control
<input type="attribute" value="" name="">Common Elements type attribute value Specific manifestations text TextField password Password input box (the default display style is (a dot) for the input character) radio radio button checkbox checkbox button Normal button (no specific meaning) submit Submit button (submit what you enter in the form field) reset Reset button (reset the content entered in the form field) image Image Style Submit Button (Submit the content entered in the form field) file File field (upload photos using this to upload uploadable files that exist on your computer) Element Name Element Value Significance name custom Control name () value custom input control default text value size positive integer input control display width checked checked Define the item that the control is selected by default maxlength positive integer Control allows the most characters to be entered
name must be written reasonably because of background interaction issues
The name control name must be defined when using radio radio radio buttons to achieve true radio
The checked property can be used in checks and radio
A button normal button control must have a value value to display the specific content in the browser
Submit submit button defaults to submit with two words unless value is written
How to use it:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> User name:<input type="text" name="username" value="enter one user name"> <br> Nickname?:<input type="Nickname?" name="user id" value="Please enter a nickname"> <br> Password:<input type="password" name="password"> <br> <!-- Use radio Radio buttons must be defined name Control name for true radio --> Gender:<input type="radio" name="sex"> male <input type="radio" name="sex">female <br> hobby:<input type="checkbox" name="hobby">Sleep <input type="checkbox" name="hobby">Get a girl <input type="checkbox" name="hobby">Play a game <input type="checkbox" name="hobby">Travel? <br> <!-- checked Properties can be used in checks and radio --> <input type="checkbox" name="userpaper" checked="checked">Agree<a href="#">Terms of Service</a>and<a href="#">Privacy-related policies</a> <br> <!-- button Normal button controls must have value Value to display specific content in browser submit Submit button if not written value Value default with commit two words --> <input type="button" name="get duanxin" value="Get SMS Authentication Code"> <br> <input type="submit" name=""> <br> <input type="submit" name="submit" value="Confirm Registration"> <input type="reset" name="reset" value="Reset Content"> <br> <!-- Picture Button --> <input type="image" name="zhuce" src="images/button.png"> <br> <!-- File field, used when uploading content on a page --> Upload Avatar:<input type="file" name="touxiang"> </body> </html>
Selectlist control
The purpose is to save development costs because there is a lot of content in this control
Basic usage is <select></select>nested <option></option>
Use selected="selected" to control the default selection
This thing can be combined with positioning systems to tell the truth
(For example, what browser lets you fill in your location information on your mobile phone? If you already have your location, you can not let users choose to improve their user experience here.)
But <select></select>uses <ul></ul>more than <ul></ul>
Because the style of this control is not easy to modify in CSS
The <ul></ul> is often used to simulate <select></select>lists for demand
There's no need to beautify it, but it's best not to change it later
How to use it:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>form select Spinner</title> </head> <body> Select City: <select> <option>--Please select--</option> <option selected="selected">Beijing</option> <option>Tianjin</option> <option>Shandong Province</option> <option>Taiwan Province</option> <option>Wuhan City</option> <option>Too much hasn't been developed yet.</option> </select> </body> </html>
Form label label
Used to bind a form element When the label tag is clicked, the bound form automatically gets input focus
There are two ways to use it:
One is direct control
The other is for and id control
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>label</title> </head> <body> <!-- direct control --> <label> User name:<input type="text" name="username"> </label> <br> <!-- for and id Control can be said to be id Find Location for To call--> <label for="password"> Password: </label> <input type="password" name="password" id="password"> </body> </html>
Do not use for and id methods in label tags
Note a question:
There is also an id selector in the method base selector that adds IDs to labels in css
id is called in the label after the style is defined in the style as the unique identifying object
The same is true for IDS defined in css
Because of the special nature of id in html, it is best not to use label tags with the for id method
Will cause a lot of unnecessary trouble to use directly
textarea control
The textarea control can be used by commenting systems
Use the control cols to control how many characters are entered per line
The number of rows displayed by rows controls height and width
But in actual development, because this control can be pulled at will to change
cols and rows that are already defined themselves use CSS to control specific styles
Mainly in trouble
How to use it:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>form textarea control</title> </head> <body> //What would you like to say? <textarea cols="100" rows="10"> </textarea> </body> </html>
form Form Field (Write the necessary basics of this or submit it without completing it)
After a complete form, such as user registration information, is created
form control is required to upload the entire content to the server's database
Form needs to nest all written form controls
element Attribute Value Specific Explanation action url address Upload content to back-end server storage address method get/post Set the data submission method for the form I haven't learnt about how to visually judge the get method is easy to leak information because all form information using get submission will appear in the browser's address bar post submission method There's no specific problem until I learn it I will explain it again name Preferably, the table name of the corresponding database on the server //I guess I'll change this when I finish learning Specify the name of the submitted table to distinguish what is submitted Relevant to how specific databases store information //I guess I'll change this when I finish learningAll the basic content of the comprehensive form is simply a registration: please ignore css fooling around with two nonstandard
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>User Registration Page</title> <!-- Don't ignore me --> <style type="text/css"> tr { height: 40px; } </style> </head> <body> <!-- No server got an empty address --> <form action="" method="get" name="create"> <table align="center" width="600" cellspacing="20"> <thead> <caption><h3 style="color: gray;">Make color dating websites for baby to show off</h3></caption> </thead> <tbody> <tr> <td>Gender</td> <td> <input type="radio" name="sex" value="male"> <img src="images/man.jpg"> <input type="radio" name="sex" value="female"> <img src="images/women.jpg"> </td> </tr> <tr> <td>Birthday</td> <td > <select> <option>--Please select a year--</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> <option>Too many years What to do all these years</option> </select> <select> <option>--Please select a month--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> <select> <option>--Please select a day--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>That's all for Daughter Thete</option> </select> </td> </tr> <tr> <td>Your location</td> <td> <input type="text" name="loaction" value="Beijing" style="color: gray;"> </td> </tr> <tr> <td>Marital status</td> <td> <input type="radio" name="marriage" value="unmarried" checked="checked">unmarried <input type="radio" name="marriage" value="Divorce">Divorce <input type="radio" name="marriage" value="Widows">Widows </td> </tr> <tr> <td>Education</td> <td> <input type="text" name="Education" value="Undergraduate" style="color: gray;"> </td> </tr> <tr> <td>A monthly salary</td> <td> <input type="text" name="Salary" value="10K" style="color: gray;"> </td> </tr> <tr> <td>Mate Selection Type</td> <td> <input type="checkbox" name="Spouse type" value="Lori type">Lori type <input type="checkbox" name="Spouse type" value="Queen Sister">Queen Sister <input type="checkbox" name="Spouse type" value="Gu Jia Type">Gu Jia Type <br> <input type="checkbox" name="Spouse type" value="Fresh meat type">Fresh meat type <input type="checkbox" name="Spouse type" value="Uncle type">Uncle type <input type="checkbox" name="Spouse type" value="Warm Men">Warm Men </td> </tr> <tr> <td>Self-introduction</td> <td> <textarea cols="50" rows="5"></textarea> </td> </tr> <tr> <td></td> <td> <input type="checkbox" name="User notice" checked="checked" value="yes">I agree<a href="#">Registration Terms</a>and<a href="#">Privacy Collection Policy</a> </td> </tr> <tr> <td></td> <td> <input type="image" name="create submit" src="images/btn(1).png"> </td> </tr> <tr> <td></td> <td><a href="Land.html">Existing accounts,Log on now</a></td> </tr> <tr> <td colspan="2"> <h3>I abide by the following commitments</h1> <ul> <li style="color: gray;">Has reached the age of 18</li> <li style="color: gray;">Not single in love</li> <li style="color: gray;">Follow a serious attitude</li> <li style="color: gray;">Find a true lover</li> </ul> </td> </tr> </tbody> </table> </form> </body> </html>