Several "additions" to HTML5 and CSS3, html5css3

Several "additions" to HTML5 and CSS3, html5css3
Html5 and css3 are the latest web front-end programming standards, respectively, with new standards and requirements added.

1. HTML5 adds an input type, that is, the value after the type

Text Field <input type = "text"> single choice button <input type = "radio"> check box <input type = "checkbox"> drop-down list <select> <option> password field <input type = "password"> submit button <input type = "submit"> click <input type = "button"> image button <input type = "image"> hide Field <input type = "hidden"> reset button <input type = "reset"> file field <input type = "file">

The input types added to HTML5 include:

• Email type: used to verify the email format. When a form is submitted, the value of the email domain is automatically verified.
• Url type: used to verify the URL address format. When a form is submitted, the url field value is automatically verified.
• Number Type: The number selection function is provided based on your settings. The min attribute sets the minimum value, the max attribute sets the maximum value, and the value Attribute Sets the current value, the step attribute sets the value of each increase (that is, the step value), which is not supported by some browsers.

  <input type="number" name="num1" min="1" max="100" step="5" />

• Range type: it is used for input fields that should contain numeric values within a certain range. It will be displayed as a slider. The min attribute sets the minimum value, the max attribute sets the maximum value, and the value Attribute Sets the current value, if no value is set, the default value range is 1-100.

  <input type="range" name="range1" min="1" max="50" />

• Date and Time type:

HTML5 has multiple new input types available for Date and Time Selection:

Date: Select day, month, and year

Month-select month and year

Week-select week and year

Time-Select time (hours and minutes)

Datetime-select the time, day, month, and year (UTC time)

Datetime-local-Select time, day, month, and year (local time)

• Search type: used to search for domains, such as site search or Google search. If the results = "s" attribute is added to it, a search icon is added to the front of the search box.

  <input type="search" name="search1" />input[type="search"]{-webkit-appearance:textfield;}

• Tel type: used to verify whether the input is in the phone format. This element is not supported by the browser yet.

• Color type: A color picker is provided for you to select a color and fill the selected color in this element.

2. HTML5 new form elements

• Datalist specifies the list of options for the input field.

  The list is created by using the option element in datalist.

  To bind datalist to the input field, use the list attribute of the input field to reference the id of datalist:

• Keygen provides a reliable method for user verification.

  The keygen element is the key-pair generator ). When a form is submitted, two keys are generated. One is the private key and the other is the public key.

  The private key is stored on the client, and the public key is sent to the server. The public key can be used to verify the user's client certificate (client certificate ).

  Currently, poor browser support for this element is insufficient to make it a useful security standard.

• Output is used for different types of output, such as computing or Script output.

  <output id="result" onforminput="resCalc()"></output>

•  

3. Add a property in CSS3

Browsers with various kernels have their own standards. In order not to confuse attributes, each family adds a prefix before their respective standards,

For example,-moz-mainly firefox

-Webikt-mainly chrome Google,

-O-mainly used for browsers on Apple Computers

CSS3 has the following new attributes:

• Box-shadow)

box-shadow: 20px 10px 0 #000;

 

• Border-colors (set for borderVariousColor)

  Use: border: 10px solid #000;-moz-border-bottom-colors: #555 #666 #777 #888 #999 # aaa # bbb # ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 # aaa # bbb # ccc;-moz-border-left-colors: #555 #666 #777 #888 #999 # aaa # bbb # ccc;-moz-border-right-colors: #555 #666 #777 #888 #999 # aaa # bbb # ccc; Note: The number of color values is not fixed, and the private writing of FF does not support Abbreviations: -moz-border-colors: #333 #444 #555;

 

• Boder-image (image Border)

Code:
-Moz-border-image: url(exam.png) 20 20 20 repeat;-webkit-border-image: url(exam.png) 20 20 20 20 20 repeat; Description: (1 ). 20 20 20 20 ---> Border width, corresponding to top, right, bottom, left Border respectively. Changing the width can achieve different effects. (2 ). border image effect (currently only two types are implemented): repeat --- the border image will be tiled, similar to the duplicate background; stretch --- the border image will be stretched to fill the entire border; (3 ). the Border thickness of the element must be set to a non-0 non-auto value.

 

• Text-shadow)

  Text-shadow: [<color> 

 

• Text-overflow (text truncation)

  text-overflow: inherit | ellipsis | clip ;

 

• Word-wrap (automatic line feed)

  word-wrap: normal | break-word;

 

• Border-radius (rounded border) 

-Moz-border-radius: 5px; this value is the radius of the rounded corner.

 

• Opacity (opacity)

Opacity: 0.5; this value is set to the number between 0 and 1.

 

• Box-sizing (control the composition mode of the box Model)

Box-sizing: content-box | border-box; Description: 1. content-box: When this value is used, the composition mode of the box model is: element width = content + padding + border; 2. border-box: When this value is used, the composition mode of the box model is: element width = content (even if padding and border are set, the width of the element will not change ).Sample Code