Form Label +css Basics

Form form Label<form action= "" Method= "" ></form>The form is used to submit the user's information to the server, the server will store the information or query data according to the information (increased deletion). all the contents of the form are written in the form label. <input type= "text" value= "haha haha" placeholder= "Please enter user name" >Input text entry box, type text-plain text input box. Value property: Adds a default value to the text input box. Placeholder Property: text box for prompt text. <input type= "password" placeholder= "Please enter password" >The input type is password and is displayed as a password<input type= "Radio" name= "Xingbie" value= "nan" > MaleIf you implement a single selection, you must set the Name property to matchThe input type is radio, and the single entry is selected. Can imagine the concept of mutual exclusion<input type= "checkbox" Name= "Xihao" value= "Youyong" >The input type is Checkbox,check, which is the meaning of the box. CheckBox we can translate to a selection box. It is a multi-selection selection box input. The Name property is not single or multi-box even if it is set to be consistent. and the general name attribute names are written consistently. <p> Submit: <input type= "Submit" ></p><p> Normal button: <input type= "button" value= "I am the normal button" ></p><p> Reset: <input type= "reset" ></p>input Three types of buttonSubmit : Commit button to submit form form to action corresponding pageReset: Reset button to reset all information entered in form to the default valueButton : normal buttons, its functions can be defined by themselves<textarea name= "text" id= "text" cols= "ten" rows= "></textarea> "Textarea: Text field label, cols and rows can change its size<fieldset><legend> group headings </legend><p><input type= "date" ></p><p><input type= "Color" ></p><p><input type= "file" ></p></fieldset>fieldset: Group label. Legend: Set group header labels Second, the comments in the HTMLformat of annotations:<!----> third, the classification of the labelthe label is divided into three categories:The first is broken down by the flow of documents. The second type is divided by the display content. The third type is divided according to the sealing. The first is divided into document streams: block-level labels and row-level labelsblock-level element features:

1. Exclusive row
2. You can set the width, height, and margin
3. Width default as wide as browser

row-level element features:

1. does not monopolize rows and can be displayed in one line
2. It is not possible to set the width, height, or width of the content.
3. Inline elements typically contain only text or inline elements

The second is divided by what is displayed: container-level labels and text-level labelscontainer and label features:can put any label and text, the general container-level labels are block-level labels. text-level label features:generally only the text, pictures, a link, and so on, usually in the row level label. Except P tagsThe third type is divided by closeness: double-label and single-labela double tag is a pair of labels that we see in pairs that are single labels.   Iv. Getting Started with CSS Basicscss English full spelling: Cascading style sheet cascading style sheet. use in HTML: to write a style tag in the head, all styles are placed in the Style tab. <style>h1{color:red; Set Text colorfont-size:30px; set Text SizeBackground-color:yellow; Setting the background color        }span{Color:blue;font-weight:bold; Set text boldfont-style:italic; set text italicNote: Use normal when you want to set the default style for font starttext-decoration:underline; Sets the text glide line, if remove the glide line then uses the None this property        }li{Color:orange;        }#fly {Color:blue;font-size:40px;        }</style> 4.1 Tag SelectorH1, p, Li, span are tag selectors in the code above. As long as the H1, p, Li, span tags appear on the current page, the styles are modified. 4.2 ID Selector#fl: This is the ID selector, which selects the label more specificity, is unique. IDS cannot be duplicated, only one ID name is allowed on the same page. naming rules for IDs: Only numbers, letters, underscores. Only start with a letter, and the ID name cannot be the same as the label. Class 4.3 selector. hong{color:red;        }<p class= "Hong Xia" > US </p>This is the class selector, first we need to set the class name for the tag. Write class styles by class. 1, class can be repeated in the page2, a class style can be used for multiple labels at the same time3, a label can be set more than one class styleWe can extract the common styles and use them as public class styles. 4.4 descendant Selector. One ul li{color:red;font-size:30px;        }the descendant selector is used above, first by the class named one to find the offspring ul and then to find the offspring li. the middle of the descendant selector is--space!! 4.4 Intersection SelectorDiv ul li.first{Text-decoration:underline;        }Li.first It is the intersection selector, he is together, there are no spaces and no symbols. Intersection Selector selection method: It conforms to both the Li tag and the yes. First class, take intersection. The General intersection only writes two. 4.5 Set Selector. first,.second{Text-decoration:underline;        }This is the set selector, and the set selector is delimited with commas. It is best not to use it frequently and should be inefficient 4.6 Universal Selector*{}: It's a universal selector, and all tags can be styled 4.6 descendant Selectordiv>p: Using">"to write the descendant selector, which can select only the descendants of the Div, not the descendants of the descendants 4.6 Sequencer SelectorDiv ul Li P:first-child This is the first P-label selectedDiv ul Li P:last-child This is the last P tag selected 4.6 Pseudo-class selector L love L hateA:hover The selector that will be triggered when the mouse hovers over ita:link link pseudo-class selector not visiteda:visited visited link pseudo class selectora:active the currently selected link pseudo-class selector

Form Label +css Basics