Table of Contents
New features in HTML5
1. New semantic tags
2. New multimedia tags
3. New input form
4. New form attributes
New features in CSS3
1. New selector
(1), attribute selector
(2), Structural pseudo-class selector
(3) Pseudo element selector
2. Box model border-box
3. Other features of css3
(1), the picture becomes blurry
(2) Calculate the box width width:calc function
(3), transition
HTML5 new features
1. New semantic tag
header: header tag
nav: navigation label
article: content tag
section: defines a certain part of the document
aside: sidebar label
footer: tail label
2. New multimedia tag
Audio: audio
(Audio format: mp3, Wav, Ogg)
Attributes: controls, autoplay, muted, loop, poster, src
Video: video
(Video formats: mp4, WebM, Ogg)
Attributes: controls, autoplay, muted, loop, width, height, poster, src
In order to take care of compatibility, it is best to use the mp4 (video)/mp3 (audio) format, because it is compatible with most browsers. Use the source tag to make it compatible with multiple formats of audio or video. like:
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
In this case, when the browser supports the ogg format, the ogg format file is executed. If ogg is not supported, the mp3 format file is executed. If neither is supported, the text “Your browser does not support the audio element” is returned.
For details, please see:
https://www.runoob.com/html/html5-audio.html
https://www.runoob.com/html/html5-video.html
3. New input form
type=’email’
type=’url’
type=’date’
type=’time’
type=’month’
type=’week’
type=’number’
type=’tel’
type=’search’
type=’color’
…
4. New form attributes
CSS3 New Features
1. New selector
(1), attribute selector
E[att], E[att=’val’], E[att^=’val’], E[att$=’val’], E[att*=’val’ ]
(2), structure pseudo-class selector
E:first-child matches the first child element E in the parent element
E:las-child matches the last child element E in the parent element
E:nth-child(n) matches the nth child element E in the parent element
E:first-of-type specifies the first of type E
E:last-of-type specifies the last one of type E
E:nth-of-type(n) specifies the nth of type E
For n in the selector, there are the following three values.
The difference between nth-child and nth-of-type:
nth-child: Sort and select all children in the parent element, first find the nth child, and then check whether it matches E
nth-of-type: Sort and select the specified child elements in the parent element, first match E, and then find the nth child based on E
(3), pseudo-element selector
| Selector | Description |
| ::before | Insert content before inside the element |
| :: after | Insert content after inside the element |
Notice:
- before and after create an element, but it is an inline element
- The newly created element cannot be found in the document tree, so it becomes a pseudo element.
- Syntax: element::before{}
- before and after must have content attributes
- before creates elements before the content of the parent element, and after creates elements after the content of the parent element.
- Pseudo-element selectors are the same as label selectors, with a weight of 1
scenes to be used:
- Used to create mask layers
- Left and right buttons used to create carousel images
- Pseudo element clear float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 233px;
height: 155px;
}
div img {
width: 100%;
height: 100%;
}
div::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0;
}
div:hover::before {
opacity: 0.4;
}
</style>
</head>
<body>
<div>
<img src="./images/pic.png" alt="">
</div>
</body>
</html>
2. Box model border-box
Usage: box-sizing: border-box
As a result, padding and border will not stretch the box.
<style>
div:nth-child(1) {
width: 100px;
height: 100px;
background-color: peru;
}
div:nth-child(2) {
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 20px;
border: 20px solid lightskyblue;
background-color: pink;
}
div:nth-child(3) {
width: 100px;
height: 100px;
padding: 20px;
border: 20px solid rgb(53, 102, 114);
background-color: pink;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
3. Other features of css3
(1), the picture becomes blurry
css3 filter filter:
The filter css property applies graphic effects such as blur or color shift to elements
filter: function (); For example, filter:blur(5px); blur is blur processing, the larger the value, the blurr it is.
There are many functions in filter, you can refer to: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
(2), Calculate the box width width: calc function
width:calc(100%-80px);
You can do + -*/ inside the brackets
Example: Make the width of the child box always 30 pixels smaller than the parent box
width: calc(100% - 30px);
(3), transition
transition: the attribute to be transitioned, the time it takes, the motion curve start time;
Note: The 3rd and 4th attributes can be omitted.
Case: When the mouse passes over the div, the width changes to 400px, the change process takes 1s, the change curve is ease, and the change starts in 2s when the mouse is parked on the div.
div:hover {
width: 400px;
transition: width 1s ease 2s;
}
If you want multiple attribute changes, separate them with commas, or use all
div:hover {
width: 400px;
height: 200px;
transition: width 1s, height 1s;
/* Or the following writing method can also be used */
/* transition: all 1s */
}
In addition, css3 also adds new features such as animation 2D 3D