Several 'new' things about HTML5 and CSS3

HTML5 has a new input input type, that is, the value 1 after type

Text field

Radio button< ;input type="radio">

Check box

Drop-down list

Password field

Submit button

Clickable button

Image button

Hidden field

Reset button

File field

The new input types in HTML5 are

• Email Type: used to verify the format of the email. The value of the email field will be automatically verified when the form is submitted.

• URL type: used to verify the format of the URL address. The value will be automatically verified when the form is submitted. The value of the url field

• Number type: It will provide the function of selecting a number according to your settings. The min attribute sets the minimum value, the max attribute sets the maximum value, the value attribute sets the current value, and the step attribute Set the value that increases each time (ie, the step value). Some browsers do not support

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

Range type: used for input fields that should contain numeric values ​​within a certain range. It will be displayed in the form of 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 not set, the default value range is 1-100

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

Date and time types:

HTML5 has several new input types for selecting dates and times:

Date - Select day, month, year

Month - Select the month and year

Week - Select the week and year

time - Select the time (hours and minutes)

datetime - Select the time, day, month, year (UTC time)

datetime-local - select time, day, month, year (local time)

Search type: used for search fields, such as site search or Google search, add it If the results="s" attribute is added, a search icon will be added in 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 phone format. This element is not supported by browsers yet

Color type: A color picker will be provided for the user to select a color, and the color selected by the user will be filled into this element

HTML5 new form element 2

Datalist specifies the option list of the input field.

The list is created through the option element in datalist.

If you need to bind the datalist to the input field, please use the list attribute of the input field to reference the id of the datalist:

Keygen provides a way to authenticate users Reliable method.

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

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

Output is used for different types of output, such as calculation or script output

## CSS3 has the following new attributes

box-shadow(shadow effect)

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

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

Usage:

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;

Instructions:

Color value The number is not fixed, and FF’s private writing method does not support abbreviations: -moz-border-colors: #333 #444 #555;

　border-colors (set multiple colors for the border)

Code:

-moz-border-image: url(exam.png) 20 20 20 20 repeat;
   -webkit-border-image: url(exam.png) 20 20 20 20 repeat;

Description:

(1). 20 20 20 20 ---> The width of the border corresponds to the top, right, bottom, and left borders respectively. Changing the width can achieve different Effect;

(2). Border picture effect (currently only two types are implemented):

repeat --- The border picture will be tiled, similar to background repetition;

stretch --- The border image will be stretched to cover the entire border;

(3). The border thickness of the element must be set to a non-0 non-auto value.

text-shadow(text-shadow)

##text-shadow: [] || [];

(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;

(2) shadow可以是逗号分隔的列表, 如:

text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;

(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;

(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.

　　text-overflow(文本截断)

  text-overflow: inherit | ellipsis | clip ;

　　word-wrap(自动换行)

word-wrap: normal | break-word;

　　border-radius(圆角边框)

-moz-border-radius: 5px;

这个值为圆角的圆的半径值

　　opacity(不透明度)

opacity: 0.5;

这个值设置为0-1之间的数

　　box-sizing(控制盒模型的组成模式)

   box-sizing: content-box | border-box;

   说明:

   1. content-box: 

   使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;

   2. border-box: 

   使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度也不会变).

以上就是关于HTML5和CSS3的几个“新增”的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！