Shulou(Shulou.com)06/01 Report--

This article will explain in detail what the new attributes of HTML5 and CSS3 are. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. The biggest change of the structural label HTML5 is that the tag is semantic.

The header of the header page

Nav navigation bar

The content of article article

A block of section, similar to div

Aside sidebar

Footer footer

In HTML5, these structural tags can increase the semantics of the website, thus improving the ranking of the website by the search engine.

It is more flexible than the drop-down menu, and you can write it yourself or use the

Datalist-only data is prepared, so there must be an input box first

Note:

The list property should be set in 1.input, and the value in it must be equal to the id value of the corresponding data datalist before it can be corresponding.

The value in 2.option needs to be deleted, otherwise the effect cannot be achieved.

To improve the user experience: add properties related to form validation, saving a lot of tedious JS validation operations

The required attribute is a null judgment.

The autofocus property is used to obtain punctuation automatically

The autocomplete property is set to on (default is off) to save the previously submitted content. When the name value changes, the saved content changes, which corresponds to the same place as the folder where we submitted the data.

Mailbox: type= "email" restricts user input to be of email type

URL: type= "url" limit user input must be URL address type, must have http://

Numbers: type= "number" restricts that user input must be a numeric type

Similarly:

Search search, a fork can appear at the end of the text box, and the content can be cleared after clicking.

Datetime-local detailed date and time, which allows users to select the time and date directly from the pop-up in the text box.

Week week; time time; date date; month month: allows users to fill in directly through the content popped up in the text box

Range slider operation, resizing

Write it in body

Cotrols: control bar

Autoplay: auto playback

Loop: loop playback

Because audio tags are of high value, browsers want to take themselves as the standard, so the W3C Alliance stipulates the compatibility requirements of browsers for audio tags. If you want mainstream browsers to be able to play audio well, you need to set this audio to a different format and load it into the page, so you can ensure browser compatibility.

The following syntax ensures compatibility

The video tag (which automatically generates a lot of code) uses a lot like audio.

Multiple formats will be introduced for compatibility

. Mp4 .ogv .webm

Flash format has been eliminated by history.

The current browser does not support-- the role of the automatically generated code:

Only when the browser cannot recognize the above video will it be displayed to the user. Users can click on the link address you have written, download the video, and use their own local player to view it.

Audio and video tag execution order: from top to bottom, play which one can be identified directly

/ / the four corners are set to the same, the Radian of the circle

Four corners:

Border-radius: four values: clockwise: upper left, upper right, lower right, lower left

Border-radius: two values: top left and bottom right; top right and bottom left

/ / F12 check to find the div manual viewing effect before writing the code

(gradient direction color value, color value. Color value)

Direction: to right/left/top/bottom can also be set to angle: 90deg (= right)

If the color value is not averaged, you can set the percentage: (red 0% dazzle blue 90% dint yellow 100%)

External glow:

Control Shadow

Controls the shadow position: the first value: X axis horizontal; the second value: y axis vertical

Third value: shadow (virtual effect) size

/ / F12 check to find the div manual viewing effect before writing the code

Fourth value: shadow color

Internal glow:

/ / set the background image

Red, green and blue, the first three are pigment values, please * / / F12 check to find the div manual adjustment effect and then write the code * yourself

The last value: 1 is completely opaque; 0 is complete transparency

In a special background, if the text can not be seen clearly, it is necessary to set a shadow.

Like the box shadow, adjust it yourself.

Implement under the label signature {}

Rotate:

Zoom: / / zoom out by 0.3 times

Displacement: / / horizontal, vertical

(the following div is just an example of a label signature.)

Add animation after hovering over the mouse

Hover is a pseudo-class of css style, which sets the style after mouse hover

Set the transition effect:

Add in div

All: all properties change in hover

1s: the first time is the running time of the animation

2s is the delay, and the second time is the delay

Ease: uniform speed. If this position is not written, it defaults to uniform speed.

Ease-in: variable acceleration

Ease-out: variable deceleration

Note:

/ / it's wrong. The magnifying effect is covered.

Write it correctly:

When setting transform, if you set the change of two properties at the same time, you must add a space between each property value to operate.

Tips:

Border-radius:50% can set the border to a regular circle, as long as the shape is square

. 5s is 0.5 seconds. 0 can be omitted.

A greater degree of freedom of automatic animation, the use of pure CSS to create the same effect as Flash. In practical application, transition and transformation are more suitable for the interaction of elements, while custom animation can also make the web page dynamic. (you don't need people to interact, just refresh the page.)

Another way of writing

Set the animation attribute animation: name (go) 1s alternate infinite in the tag you want to animate

Delay and motion rate can also be set, just like the rules set in transition properties

This is the end of the article on "what are the new attributes of HTML5 and CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.