One .HTML5 New features
HTML5 The new features are mainly aimed at the previous shortcomings , Added some new tags 、 New forms and new form properties, etc .
These new features have compatibility issues , Basic is IE9+ Only browsers of the above versions support , If you don't think about compatibility , You can use it a lot
Some new features .
1.HTML5 New semantic tags
Previous layout , We basically use div To do it .div For search engines , There is no semantics .
<div class=“header”> </div> <div class=“nav”> </div> <div class=“content”> </div> <div class=“footer”> </div>
<header>： Head tag
<nav>： Navigation tag
<article>： Content labels
<section>： Define an area of the document
<aside>： Sidebar labels
<footer>： Tail label
Be careful ：
This semantic standard is mainly for search engines
These new tags can be used many times in the page
stay IE9 in , You need to convert these elements to block level elements
Actually , We prefer to use these tags on mobile terminals
2.HTML5 New multimedia tags
The newly added multimedia tags mainly include two ：
Audio ：<audio>
video ：<video>
Using them, it's easy to embed audio and video in the page , Instead of using flash And other browser plug-ins .
HTML5 Without plug-ins , Can also support the original video format file playback , Of course , The supported formats are limited .
video <video>：
At present <video> Element supports three video formats ： Use as much as possible mp4 Format
<video src=" File address " controls="controls"></video>
<video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > Your browser doesn't support <video> Tag play video </ video >
video <video>—— Common properties ：
Audio <audio>：
At present <audio> Element supports three audio formats ：
<audio src=" File address " controls="controls"></audio>
< audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" > Your browser doesn't support <audio> label . </ audio>
Common properties ：
3.HTML5 Newly added input type
4.HTML5 New form properties
Two .CSS3 New features
New selector ：
1. Attribute selector
Attribute selectors can select elements based on their specific attributes . So you don't have to rely on classes or id Selectors .
2. Structure pseudo class selector
The structure pseudo class selector mainly selects elements according to the document structure , It is often used according to the child elements in the parent selector
3. Structure pseudo class selector
nth-child（n） Select one or more specific child elements of a parent element （ a key ）
n It could be a number , Keywords and formulas
n If it's a number , It's choice number two n Sub elements , The numbers come from 1 Start …
n It can be a keyword ：even even numbers ,odd Odd number
n It can be a formula ： The common formula is as follows ( If n It's the formula , From 0 Start calculating , But the first 0 Elements or more than the number of elements will be ignored )
The structure pseudo class selector mainly selects elements according to the document structure , It is often used according to the child elements in the parent selector
difference ：
nth-child Sort and select all the children in the parent element （ The serial number is fixed ） Find the second one first n A child , And see if it's with E matching
nth-of-type Sort and select the specified child elements in the parent element . Match first E , And then based on E Find the first n A child
4. Pseudo element selector （ a key ）
Pseudo element selectors can help us take advantage of CSS Create a new label element , Without the need for HTML label , Thus simplify HTML structure .
Be careful ：
before and after Create an element , But it's an in-line element
The newly created element is not found in the document tree , So we call it pseudo elements
grammar ： element::before {}
before and after There has to be content attribute
before Create an element in front of the parent element's content ,after Insert the element after the content of the parent element
Pseudo element selectors are the same as tag selectors , The weight of 1
5.CSS3 Box model
CSS3 Through box-sizing To specify the box model , Yes 2 It's worth ： Can be designated as content-box、border-box, So that we
The way the box size is calculated changes .
It can be divided into two situations ：
box-sizing: content-box The size of the box is width + padding + border （ It used to be the default ）
box-sizing: border-box The size of the box is width
If we change the box model to box-sizing: border-box , that padding and border It won't make the box big （ Premise padding
and border Not more than width Width ）
6.CSS3 Other features （ understand ）
The picture blurs ：
filter CSS Attribute to apply a graphic effect such as blur or color offset to an element .
filter: function (); for example ： filter: blur(5px); blur blurred The larger the value, the more fuzzy
Calculate the width of the box width: calc function ：
calc() this CSS Functions let you declare CSS Some calculations are performed when the property is valued .
width: calc(100% - 80px);
7.CSS3 transition （ a key ）
transition （transition) yes CSS3 One of the subversive features of , We can use Flash Animation or
JavaScript Under the circumstances , Add an effect to an element when it changes from one style to another .
Transition animations ： It's from a state Gradually transition to another state
It can make our page look better , More dynamic , although Older browsers don't support （ie9 The following versions ） But it won't affect
The page layout .
We often talk to :hover Together Use it with .
transition: Properties to transition Spend time Motion curve When to start ;
attribute ： Want to change css attribute , Width height The background color Both inside and outside margins are OK . If you want all the attributes to be
Change, transition , Write a all Can .
Spend time ： The unit is second （ Must write unit ） such as 0.5s
Motion curve ： The default is ease （ It can be omitted ）
When to start ： The unit is second （ Must write unit ） You can set the delay trigger time The default is 0s （ It can be omitted ）