HTML:5新增特性
新标签
新多媒体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5新增多媒体标签</title>
<style>
video {
width: 100%;
margin: 150px auto;
}
</style>
</head>
<body>
<video src="mi.mp4" autoplay="autoplay" muted="muted" controls="controls"
loop="loop" poster="ni9.jpg"></video>
</body>
</html>
新表单
新表单属性
CSS3新增特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5新属性选择器</title>
<style type="text/css">
/* 属性选择器 */
/* div[class^=icon] {
margin: 10px auto;
width: 100px;height: 100px;
line-height: 100px;
text-align: center;
background-color: skyblue;
font-weight: 700;
font-size: 15px;
color: white;
}
div[class$=data] {
margin: 10px auto;
width: 100px;height: 100px;
line-height: 100px;
text-align: center;
background-color: pink;
font-weight: 700;
font-size: 15px;
color: white;
} */
/* 结构伪类选择器 */
ul li {
list-style: none;
}
/* 选择第一个li */
li:first-child {
background-color: skyblue;
}
/* 选择最后一个孩子 */
li:last-child {
background-color: red;
}
/* 选择第4个孩子 */
li:nth-child(4) {
background-color: pink;
}
li:nth-child(2) {
background-color: yellow;
}
li:nth-child(3) {
background-color: yellowgreen;
}
</style>
</head>
<body>
<!-- 属性选择器事例 -->
<!-- <div class="icon1">1111</div>
<div class="icon2">1111</div>
<div class="icon6-data">1111</div>
<div class="icon7-data">1111</div>
<div class="icon8-ico">1111</div> -->
<!-- 结构伪类选择器 -->
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
</ul>
</body>
</html>
伪元素选择器