HTML5的新特性
HTML5新增的语义化标签
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性。
好图当赏
一千布局我们是用div来做的，但是div对搜索引擎来说是没有语义的
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div> HTML5新增了语义化标签：
tips：
HTML5新增的多媒体标签
新增的多媒体标签主要包含：
使用他们可以更方便的在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件
HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，支持的格式是有限的
当前<video>元素支持三种视频格式，尽量使用MP4格式
<video src="文件地址" controls="controls"></video> 有些低版本浏览器可能不支持这个格式
video有一些常见的属性：
关于音频，当前的 <audio>元素支持三种音频格式：
<audio src="文件地址" controls="controls"></audio> < audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
</ audio> 音频的常见属性：
谷歌浏览器吧音频和视频的自动播放给禁止了
多媒体标签总结：
HTML5新增的input类型
语义化会更明显
我们需要重点记住number tel search这三个
有了这个提交表单如果格式不一样会报错
HTML5新增的表单属性
我们可以通过以下的方式修改placeholder里面的字体颜色：
input::placeholder {
color: pink;
} CSS3的新特性
CSS3现状
CSS新增选择器
CSS新增的选择器可以更加便捷更加自由的选择目标元素
属性选择器
属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助类或者id选择器
看到了吗孩子这就是属性选择器
<!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>
input[value]{
color: pink;
}
</style>
</head>
<body>
<input type="text" value="请输入">
<input type="text">
</body>
</html>
类选择器，属性选择器，伪类选择器的权重为10
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，经常用于根据父级选择器里面的子元素
这个nth-child可以选择某个父元素的一个或者多个特定的子元素
这俩的区别：
小结
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签从而简化HTML结构
tips：
伪元素选择器有使用的场景：伪元素字体图标
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}这就是，，，伪元素选择器
<!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>
p{
position: relative;
width: 300px;
height: 100px;
background-color: pink;
}
p::before {
position: absolute;
right: 20px;
top: 10px;
background-color: aqua;
content: '>';
font-size: 20px;
}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>
content是必须要写的，否则显示不出来
伪元素选择器使用场景2：仿土豆效果：
<!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>
.tudou{
position: relative;
width: 500px;
height: 400px;
}
.tudou img{
width: 100%;
height: 100%;
}
.tudou::before{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background-color: rgb(0,0,0,0.4);
}
.tudou:hover::before
{
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt="">
</div>
</body>
</html> 
就是这个
然后伪元素还有一个使用场景是：伪元素清除浮动
伪元素清除浮动
这个要求新的空标签必须是块级元素
伪元素清除浮动算是第一种额外标签法的升级和优化
CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型，有两个值：content-box和border-box
这样计算盒子大小的方式就发生了改变
可以分成两种情况：
如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）
CSS3还有其他特性，了解即可，可以让图片变模糊，计算盒子宽度width：calc函数
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如： filter: blur(5px); blur模糊处理 数值越大越模糊 
calc（）此CSS函数让我们声明CSS属性值时执行一些计算
width: calc(100% - 80px);括号里面可以使用 + - * / 来进行计算
CSS过渡
这是一个重点的特性，过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响 页面布局。
现在经常和:hover一起搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 
过渡就是谁需要就给谁加
<!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{
width: 200px;
height: 100px;
background-color: pink;
transition: width .5s;
}
div:hover{
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>如果想要写多个属性，就要利用,进行分割
<!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{
width: 200px;
height: 100px;
background-color: pink;
transition: width .5s,height .5s;
}
div:hover{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>在Linux阶段我们自己手工搓了一个进度条，很原始（我们后端原始人是这样的）
前端可以实现更优雅的进度条（至少看起来是这样，代码难度肯定是后端高）
<!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>
.bar{
width: 250px;
height: 10px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in{
width: 50%;
height: 100%;
background-color: red;
transition: width .8s;
}
.bar:hover .bar_in{
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in">
</div>
</div>
</body>
</html>针对H5和C3有他们自己的相对论
HTML5结构标签本身：
CSS3相关样式：
而广义的HTML5是HTML5+CSS3+JS
这是HTML5 MDN的介绍：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML 课后作业
制作这样的模块
有点不完全一样但是也还行
<!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>
.box{
height: 300px;
width: 200px;
background-color: white;
}
.box1 img{
width: 100%;
height: 180px;
}
span{
font-size: 14px;
color: #707070;
}
.old{
font-size: 22px;
color: rgb(226, 49, 49);
font-weight: 700;
}
.new{
font-weight: 700;
text-decoration: line-through;
}
.box2{
width: 150px;
height: 30px;
}
.box2-in{
width: 100px;
height: 8px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.box2-in-in{
width: 50%;
height: 100%;
background-color: red;
transition: width .8s;
}
.box2-in:hover .box2-in-in{
width: 100%;
}
.box3{
width: 200px;
height: 50px;
color: white;
font-weight: 700;
background-color: rgb(179, 25, 27);
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt="">
</div>
<span>
安分守己，苹果石榴，(128G) 银色移动联通电信5G手机
</span>
<span class="old">
$6088
</span>
<span class="new">
$6988
</span>
<div class="box2">
<div class="box2-in">
<div class="box2-in-in">
</div>
</div>
</div>
<div class="box3">
立即抢购
</div>
</div>
</body>
</html>这就是前端