Html==>> some Classic

1.CSS Overflow Properties

2.<input> Label

<input> tags are used to collect user information.

1 Type Property

The input field has many forms, depending on the value of the type attribute. This can be a text field, a check box, a text control after a mask, a radio button, a button, and so on.

Text: Area
ReadOnly Property: Read-only.
Password: password area, input text is displayed as ' * '
CheckBox: check box
Checked property: checked;
Radio: Radio Box;
Name property: Specify multiple radio boxes for single-selection operations in a single area
Reset: Resets all tags in the current <form> form to the initialization state (such as clearing the contents of the text area)
Submit: Submits the current <form> form information to the specified page
Button: Normal buttons
Value property: The text that the button buttons display
File: Document Selection tab
Hide: Hidden areas, you can put some not to show the user, and their own use of information stored in this
Image: Image Area
SRC attribute: Specifies the path where the picture is stored;
Title Property: Moves the mouse over the text displayed on the graph;
Alt: The text displayed when the picture is loaded failed or closed;

2 Example

3. <select> Label

You can create a single-or multiple-selection menu, similar to the WinForm Combox or ListBox.

1 Properties

1) size {int}: Sets the drop-down list size. The default is Combox style, or more than 1 o'clock, which is the listbox style.
2) multiple {Boolean}: whether multiple selections. For multiple selections, press and hold CTRL + LEFT to make multiple selections.

3) The Item subkey:

①<Optgroup> tags: defines the category of the selection and cannot be selected.
Label {string} property: Name of the category presentation
Title {string} property: Move the mouse over the selection to display the information

②<Option> tags: defining optional items
Vlaue {String} property: Select a specific name for the item
Title {string} property: Move the mouse over the selection to display the information

2 Example

<H3>select Label</H3><SelectId= "Province"Multiple=multipleSize= "6"><OptgroupLabel= "Municipalities"></Optgroup><OptionValue= "BJ"Title= "Beijing"> Beijing</Option><OptionValue= "sh"> Shanghai</Option><OptgroupLabel= "></> <value= "ZJ" > Zhejiang </option> Span style= "color: #0000ff;" ><option value= "FJ "> Fujian </option< Span style= "color: #0000ff;" >></select>  

4. <textarea> Label

Multiple lines of text area, you can set the size of the textarea by using the cols and rows properties.

1 Properties

rows {int}: Indicates the number of rows displayed.
cols {int}: Represents the number of columns displayed.
readonly {Boolean}: Read-only.

2 Example

5. <label> Label

Corresponds to a display text box.

1 Properties

for {ElementID}: the corresponding control ID is associated, and the control that binds the ID gets the focus when this label tag is clicked;

<Table><Tr><Td><LabelFor= ' username '> Name:</Label></Td><Td><InputType= "Text"Id= ' username '/></Td></Tr><Tr><Td><LabelFor= ' Userpwd '</label< Span style= "color: #0000ff;" >></td> < td><input type= "password"  Id= " Userpwd ' /></td > </tr></table>       

2 Example

6. <fieldset> Label

Similar to the GroupBox control in WinForm.

1.item Sub-item

<legend></Legend>: Represents the name of the header.

<H3>fieldset Label</H3><FieldSetStyle= ' width:130px '><Legend> Gender</Legend><input type= "Radio"  Name= ' Sex '  Value= ' Boy ' /><input type= " Radio " Name= ' Sex ' = ' Girl ' /> woman Span style= "color: #0000ff;" ></fieldset>      

2 Example

7. UL, OL, Li List label 1 introduction

ul:unordered list (unordered list)
Ol:ordered list (with sequence list))
Li:list Item (list item), based on the above 2 list of sub-items.

code example:

<UlType=circle><Li>ul1</Li><Li>ul2</Li><Li>ul3</Li></Ul><Oltype=1> <li>li1</< Span style= "color: #800000;" >li> <li>li2</li> Span style= "color: #0000ff;" ><li>li3</< Span style= "color: #800000;" >li></ol>                 

2 Properties

type {string}: Defines the symbol style that precedes the <li> label.

ul: type: Circle Hollow Circle, disc solid circle, square solid Square, none: Front unsigned;
ol: Type: 1: The Order of the A,b,c;i: A: The Roman numeral I,II,III, although it can also be defined as: Circle, disc, square, none but the reality is a series of the same;

8.CSS Display Properties 1 Primary values

1) None: This element is not displayed;
2) Block: This element is displayed as a block-level element: front and back with line breaks and one line. inline element → Block element
3) Inline: This element is displayed as an inline element: one next to 1. block element → Inline element

2 Display:block Demo

input3 set to display:block

3 Display:inline

Div set to display:inline

9.CSS Display:none and Visibility:hidden differences

Visibility:hidden is hidden, but retains its position while browsing;

CSS Display:none is considered non-existent and does not load!

The overflow property value {Visible|hidden|scroll|auto} presupposes that you first limit the width and height of the div (height). Both are hidden HTML elements, there is no difference in visual effects, but in some dom operations they are still different.

CSS Display:none;

When this property is used, various attribute values, such as the width and height of the HTML element (object), are "lost";

Visibility:hidden;

With this property, the HTML Element (object) is simply visually invisible (completely transparent), and the space it occupies still exists, that is, it still has a property value such as height and width.

Html==>> some Classic