HTML (Introductory Lesson II)

HTML forms (Forms cannot be nested in form HTML-----> belong to the fabric layer):
The main purpose of the form is to provide a graphical user interface on the Web page to capture and submit data entered by the user.
The smallest form format:<form> tag has the following minimum format:
<form action= "form handler url" method= "post| | Get "></form>
Code Demo:
<form action= "#" method= "POST" ></form>

radio button:
If the radio button has multiple, and the user can only select one then the button cross-view (only need the Name property is the same)
Code Demo:
<form action= "#" method= "POST" >
<input type= "Radio" name= "Gerder" checked> Male
<input type= "Radio" name= "Gerder" > Female
</form>
Note: Adding checked will be selected by default

check box:
check box if the Name property is the same, the button cross-view button is only useful for the radio box.
Code Demo:
<form action= "#" method= "POST" >
<input type= "checkbox" Name= "Useradss" value= "1" > Chengdu
<input type= "checkbox" Name= "Useradss" value= "2" > Beijing
<input type= "checkbox" Name= "Useradss" value= "3" > Shanghai
</form>
Note: value= "" Property is for us to get the user's choice in the background.

Hidden fields:
Hiding a field gives us a way to collect name and value information outside of the form controls that the user can see.
Code Demo:
<input type= "hidden" name= "UserName" value= "1" > Hide User ID

Upload control:
Sometimes users need to upload their avatar or document, so we need a way to upload a control
Code Demo:
<input type= "File" >
Note: Submit pictures must be submitted using post, get submitted things can not meet the user

Drop-down list:
When there are many checkboxes on the form, it takes up a lot of space and makes the page look rather confusing. So the drop-down list is used
Code Demo:
<select>
<option selected> Chengdu </option>
<option> Shanghai </option>
<option> Beijing </option>
</select>
Note The:selected> property indicates that the default check and the Size property are initially displayed with a few

Multiline text box:
Only one line of text is allowed in the form, so you sometimes need a multiline text box.
Code Demo:
<textarea cols= "rows=" ></textarea>
Note: cols and rows are the initial values for setting the multiline text box

Submit button:
When a user adds their own information and needs to submit the information, a submit button is required
Code Demo:
<input type= "Submit" value= "Registration" >
Note: The Value property setting button's name defaults to submit

Reset button:
When the user input too much information, but do not want to slowly delete, so add a reset button will be a lot of humanization
Code Demo:
<input type= "Reset" >

Label element:
After adding the lable element, when you click on the text can be directly into the input box more user-friendly
Code Demo:
<label for= "UserName" > Name:</label>
<input type= "text" id= "UserName" >

FieldSet and Legend elements:
FieldSet is a container for the cell element of the action table, which displays a thin border box around the contained element.
The legend element is placed inside the Fielfset and a caption is added to the box.
Code Demo:
<fieldset>
<legend>fieldset and Legend Demo </legend>
<P> Hello World </P>
</fieldset>

CSS------> Presentation layer/Style layer

There are three styles in CSS: inline style, inner style/inline style, outer style

Inline style:
Most HTML tags contain a style property that allows you to specify the style of the tag, which is defined by the style rule as inline.
Code Demo:
<H1 style= "color:red" > Red title Insider Style Internal style:
Inline styles represent style settings that include styles within a Web page with the <style> element, and are scoped to that page only.
Code Demo:
<style type= "Text/css" >
.... Style definition ....
</style>
Style of the outer union:
You can place the definition of a style in a separate file and reference it in a document that requires that style, which is called an outer style
Code Demo:
<link rel= "stylesheet" type= "Text/css" href= "style css file" >

Selector:
Selectors specify which or which elements of a style rule can be used in an HTML document.

ID Selector:
  Change the style of an element by its ID, but it can be cumbersome if there are multiple.
  Code Demo:
  <style type= "Text/css";
      #p1 {
           color:red;
      }
   </style>
 <P  id= "P1" >id the selector to change the element to red </p>
Element selector:
  The style is modified by the element, so the style of the element is changed in this page.
  Code Demo:
 <style type= "Text/css";
      p{
           color:red;
       }
  </style>
 <P> element selector to change the element to red </p>
     <P> The element selector changes the element to red </p>

Class Selector: (class selector)
By modifying the element style with the class name of the element, the ID selector does not appear as a duplicate ID, because the class name can be duplicated.
Code Demo:
<style type= "Text/css" >
. c1{<!--Note: You must remember to add it here.--->
color:red;
}
</style>
<p class= "C1" > class selector change element to red </P>
<p class= "C1" > class selector change element to red </P>

A wildcard selector:
Wildcard selector keyword * denotes selector for all elements
Code Demo:
<style type= "Text/css" >
*{
color:red;
}
</style>
<P> Pass Selector Changes the element to red </P>
<P> Pass Selector Changes the element to red </P>

Group selector:
The group selector will change the style without selecting the selected element.
Code Demo:
<style type= "Text/css" >
. p1, .p2{<!---take care not to forget the dots and commas--->
color:red;
}
</style>
<p class= "P1" > Group selector change element to red </P>
<p class= "P2" > Group selector change element to red </P>
<p class= "P3" > Group selector is not selected do not change the style </P>

Contains selectors:
Contains the descendant elements that the selector uses for an element in the document tree. There are three main forms: 1.h1 b{colcr:red} As long as the elements contained in the H1 will be changed 2.h1+b{colcr:red} only the sibling element takes effect 3.h1>b{colcr:red} only the child element takes effect and the grandchild element does not take effect.
Code Demo:
1.
<style type= "Text/css" >
Div p{
color:red;
}

</style>
<div>
<p>p element is in effect other elements do not take effect </p>
</div>
2.
<style type= "Text/css" >
div+p{
color:red;
}

</style>
<div>
<p> not sibling element does not take effect </p>
</div>
<p> sibling elements in effect </p>
3.
<style type= "Text/css" >
div>p{
color:red;
}

   </style>
 <div>
        <p> child elements in effect </p>
        <p> child elements are in effect </p>
         <div>
                    </div>
     </ Div>
     <p> sibling elements do not take effect </p>

Pseudo-Class selectors:
The previous selectors are in the document tree, but sometimes we need to format some things that are not available with CSS selectors, such as the status of hyperlinks.
Using pseudo-class selectors, you can format hyperlinks <a> element-related four different states in different ways:
1.a:link is a selector for a link that is not visited
2.a:visited is a link selector that has been visited
3.a:hover is the link selector placed on it with the mouse cursor
4.a:active is the selector that gets the focus link (not put after clicking)

Code Demo:

1.
<style type= "Text/css" >
a:link{
Text-decoration:none;
}

</style>
<a href= "javascript:;" > Pseudo-Class selector uncheck underline and leave this page without jumping to another page </a>

2.
<style type= "Text/css" >
a:visited{
color:red;
}

</style>
<a href= "#" > Pseudo-Class selector The link that has been visited changes to red </a>

3.
<style type= "Text/css" >
a:hover{
color:red;
}

</style>
<a href= "#" > Pseudo-Class selector turns red </a> when the mouse is placed on it but not clicked

4.
<style type= "Text/css" >
a:active{
color:red;
}

</style>
<a href= "#" > Pseudo class selector when the mouse clicks on the meeting changes to red </a>

！ Important can increase the priority of a selector but there are two of them in a Web page! Important that will counteract

Property selector:
Changes the style when the property is satisfied and does not change the style if it is not satisfied
Code Demo:
Property selector that does not have the focus:
<style type= "Text/css" >
input[type=password]{
background-color:red;
}

</style>
Yes password the background turns red <input type= "password" >
is text does not modify the style <input type= "text" >
The property selector that gets the focus:
<style type= "Text/css" >
input:focus[type=password]{
background-color:red;
}

</style>
is password and gets focus then the background turns red <input type= "password" >
is text does not modify the style <input type= "text" >

CSS Properties:
Length Unit:
1. Absolute length: cm, mm 、......
2. Relative length: EM, px, ex 、.... Note: EM is a dynamic pixel

Color units:
1. English letter 2. Use hexadecimal digits 3. Use integer settings between 0-225 (Color:rgb (128.0.128)) 4. Expressed in hundred points hundred

HTML (Introductory Lesson II)