A few "additions" to HTML5 and CSS3

HTML5 and CSS3 are currently the latest standard for Web front-end programming, adding new standards and requirements.

1. HTML5 new input type, that is, the value after type

Text field<InputType= "Text">radio button<InputType= "Radio">check box<InputType= "checkbox">drop-down list<Select><Option>Password field<InputType= "Password">Submit button<InputType= "Submit">You can click the button<InputType= "button">Image button<input type= "image" > hidden field < input type= "hidden" Span style= "color: #0000ff;" >><input Span style= "color: #ff0000;" >type= "reset" > file field <input type= "file" >          

The HTML5 added input types are:

• Email type: Used to verify the format of the email, when submitting the form will automatically verify the value of the email domain
• URL type: The format used to validate the URL address, which automatically validates the value of the URL field when the form is submitted
• Number type: The ability to select numbers based on your settings, Min property setting minimum, Max property setting maximum, Value property setting current value, step property setting value per increment (that is, step value), some browsers do not support

  <type= "number"  name= "Num1"  min= "1"  Max  = "+" step= "5"/>

• Range Type: For input fields that should contain a range of numeric values, which are presented as a slider, the Min property sets the minimum, the Max property sets the maximum value, the Value property sets the current value, and if not set, the range of default values is 1-100

  <type= "range"  name= "Range1"  min= "1"  Max= "/> "

• Date and Time type:

HTML5 has several new input types that can be selected for the date and time:

Date-Select day, month, year

Month-Select months, years

Week-Select minute

Time-Select the Times (hours and minutes)

DateTime-Select time, day, month, year (UTC time)

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

• Search type: For searching for a domain, such as a site search or Google search, with results= "s" attribute, a search icon is prepended to the search box

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

• Tel type: Used to verify that the input is in phone format, this element is not currently supported by the browser

• Color type: A color picker is provided for the user to select a color and populate the element with the user's selected color

2, HTML5 new FORM element

• DataList specifies a list of options for the input domain.

  The list is created by the option element within DataList.

  To bind DataList to an input field, refer to the ID of DataList with the list property of the input field:

• Keygen provides a reliable way to authenticate users.

  The keygen element is a key pair generator (Key-pair generator). When the form is submitted, two keys are generated, one is the private key, and one 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 later authenticate the user's client certificate (certificate).

  Currently, the browser's poor support for this element is not enough to make it a useful security standard.

• Output is used for different types of outputs, such as calculations or script output

  <id= "Result"  onforminput= "Rescalc ()"></  Output>

3, CSS3 new properties

The various kernel browsers have their own standards, in order not to confuse the attributes, so the home before the respective standard prefix added,

such as:-moz-is mainly Firefox Firefox

-webikt-is mainly chrome Google,

-o-is primarily used on Mac browsers

The CSS3 has several new properties as follows:

• Box-shadow (Shadow effect)

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

• Border-colors (set multiple colors for borders)

  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; Description:    the number of color values is not fixed, and the private notation of FF does not support abbreviations:-moz-border-colors: # 333 #444 #555;

• Boder-image (picture border)

  Code:
   -moz-border-image:url (exam.png), repeat;   -webkit-border-image:url (exam.png) Repeat; Description: (1). The width of the---> frame, respectively, corresponding to top, right, bottom, the left border, change the width can achieve different effects; (2). Border picture effect (currently only two):    Repeat---Border picture will be tiled, similar to the background repetition;   Stretch---Border picture will be stretched to fill the entire frame; (3). The border thickness of the element must be set to a non-0 non-auto value.

• Text-shadow (text shadow)

  Text-shadow: [<Color><Horizontal Offset><Vertical Offset><Blur radius>] || [<Horizontal Offset><Vertical Offset><Blur radius><Color>]; Description: (1)<Color>And<Blur radius>is optional, when<Color>When not specified, the text color will be used; When<Blur radius>when unspecified, the radius value is 0, and (2) shadow can be a comma-separated list, such as: text-shadow:2px 2px 2px #ccc, 3px 3px 3px #ddd;(3) The shadow effect is applied to the order specified in the shadow list Element, (4) These shadow effects may overlap each other but do not overlay the text itself; (5) Shadows may run outside the boundaries of the container, but do not affect the size of the container.

• Text-overflow (text truncation)

  Text-overflow:inherit | ellipsis | Clip;

• Word-wrap (Wrap line)

  Word-wrap:normal | Break-word;

• Border-radius (rounded border)

-moz-border-radius:5px the radius value of a circle with rounded corners

• Opacity (opacity)

opacity:0.5; This value is set to a number between 0-1

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

   Box-sizing:content-box | Border-box;   Description:   1. Content-box:    When using this value, the composition mode of the box model is the element width = content + padding + border;   2. Border-box:    When using this value, the composition pattern of the box model is that the element width = content (even if padding and border are set, the width of the element does not change).

Sample Code

A few "additions" to HTML5 and CSS3