new features of html5
- new label
header head tag
nav navigation bar tag
section a certain area
footer tail tag
aside sidebar
article content tag
All of the above are relative to div tags
- multimedia tab
audio audio tag
video video tag
muted 静音
controls 播放按钮
autoplay 自动播放
loop 循环
poster 封面
- New forms and form properties
input form:
New options for type attribute value: email, url, date, time, month.week, time, search, tel, color, number, etc.
Form properties:
required，placeholder、autofocus、autocomplate、multiple;
New features of CSS3
- Add selector
- Attribute selector: (the weight is 10 and the class selector is the same)
Using attribute selectors, you can select elements E[attr=val] based on attribute = value without resorting to class and id selectors
E[attr]
Select some elements at the end, containment or beginning of attribute values E[attr$='val'] E[attr*='val'] E[attr^='val']
- Struct pseudo-class selector
Select according to the document structure, often used to select child elements according to the parent selector
E: first-child last-child first and last
nth-child(n) nth-child(2n) n can be a number, the keyword ( even or odd) or formula
E: first-of-type last-of-type nth-of-type(n)
nth-clild will arrange all the boxes with serial numbers, so only using serial numbers will be inaccurate, while nth-of -type will not, it will only arrange the specified type in serial number;
- Pseudo-element selector
Pseudo-element selectors can use CSS to create label elements, which belong to inline elements.
Pseudo-element selectors mainly include ::before and ::after and must contain the content attribute.
The weight of pseudo-element selectors is the same as that of labels.
- CSS3 box model:
Specify the box model by box-sizing: two values: content-box and border-box
content-box is the default value, and the size of the border-box box is width
- Filter filter, calculation function calc(),
img{ filter:blur(5px) } //图片模糊
div { width: calc(100% - 50px); }
- CSS3 transition transition
transition: when the attribute to be transitioned takes time and the motion curve starts.
The last two attributes can be omitted;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3过渡</title>
<style>
div{
width: 200px;
height: 200px;
background-color: palegoldenrod;
transition: width 2s,height 2s;
}
div:hover{
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>