H5C3是一个结合了HTML5和CSS3技术的编程语言和框架。
HTML5是最新的HTML标准，它引入了许多新的元素和属性，使得网页可以更加丰富和交互性。而CSS3是最新的CSS标准，它引入了许多新的样式和布局特性，使得网页可以更加美观和灵活。
H5C3就是将HTML5和CSS3结合在一起，提供了更加强大和丰富的功能和特性。它提供了一些新增的标签和属性，使得开发者可以更加方便地创建网页上的元素和布局。同时，H5C3还提供了一些新增的样式和动画效果，使得网页可以更加美观和吸引人。
除了HTML5和CSS3，H5C3还支持一些其他的技术和特性，如响应式设计，多媒体支持，地理定位等。这使得H5C3可以用于创建各种类型的网页和应用程序，包括移动应用、游戏、企业网站等。
总而言之，H5C3是一个结合了HTML5和CSS3的编程语言和框架，它提供了更加强大和丰富的功能和特性，使得开发者可以更加方便地创建美观和交互性强的网页和应用程序。
01-HTML5新增语义化标签
HTML5新增的语义化标签有很多，例如<header>、<footer>、<nav>、<article>、<section>等。下面以<header>和<footer>为例：
<header>标签用于定义页面或区域的头部，通常包含标题、导航链接等元素。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<a href="#">首页</a> |
<a href="#">关于我们</a> |
<a href="#">联系我们</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
<footer>
<p>版权所有 © 2022</p>
</footer>
</body>
</html>
在这个例子中，<header>标签包含了网站的标题和导航链接，<footer>标签包含了版权信息。使用这些语义化标签可以帮助提高网页的可读性和可访问性。
02-HTML5新增视频标签
HTML5新增的视频标签是<video>。下面是一个使用<video>标签的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>视频示例</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
</body>
</html>
在这个例子中，我们使用<video>标签创建了一个视频播放器，设置了宽度为320像素，高度为240像素，并添加了控制按钮。<source>标签用于指定视频文件的来源，可以设置多个来源以适应不同格式的视频文件。如果浏览器不支持<video>标签，将显示“您的浏览器不支持Video标签。”的提示信息。
03-HTML5新增音频标签
HTML5新增的音频标签是<audio>。下面是一个使用<audio>标签的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音频示例</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持Audio标签。
</audio>
</body>
</html>
在这个例子中，我们使用<audio>标签创建了一个音频播放器，并添加了控制按钮。<source>标签用于指定音频文件的来源，可以设置多个来源以适应不同格式的音频文件。如果浏览器不支持<audio>标签，将显示“您的浏览器不支持Audio标签。”的提示信息。
04-HTML5新增input表单
HTML5新增的input表单类型有很多，例如email、number、date等。下面以email和number为例：
email类型：用于输入电子邮件地址。例如：<form> <label for="email">电子邮件：</label> <input type="email" id="email" name="email" required> <input type="submit" value="提交"> </form>在这个例子中，我们使用
type="email"属性指定了输入框的类型为电子邮件地址。浏览器会自动验证输入的内容是否符合电子邮件地址的格式，如果不符合则会提示错误信息。number类型：用于输入数字。例如：<form> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="1" max="100" required> <input type="submit" value="提交"> </form>在这个例子中，我们使用
type="number"属性指定了输入框的类型为数字。同时，我们还设置了min和max属性来限制输入的数字范围，以及required属性来要求必须填写该字段。
05-HTML5新增表单属性
HTML5新增的表单属性有很多，例如autocomplete、placeholder、required等。下面以autocomplete和placeholder为例：
autocomplete属性：用于指定表单元素的自动完成功能。例如：<form> <label for="username">用户名：</label> <input type="text" id="username" name="username" autocomplete="on"> <input type="submit" value="提交"> </form>在这个例子中，我们使用
autocomplete="on"属性开启了输入框的自动完成功能。当用户在输入框中输入内容时，浏览器会自动提示与输入内容相关的建议选项。placeholder属性：用于指定表单元素的占位符文本。例如：<form> <label for="email">电子邮件：</label> <input type="email" id="email" name="email" placeholder="请输入您的电子邮件地址"> <input type="submit" value="提交"> </form>在这个例子中，我们使用
placeholder="请输入您的电子邮件地址"属性为输入框添加了占位符文本。当用户未输入任何内容时，输入框中会显示这段占位符文本，帮助用户更好地理解该字段的用途。
06-CSS3新增属性选择器
CSS3新增的属性选择器有很多，例如[attribute^="value"]、[attribute$="value"]、[attribute*="value"]等。下面以[attribute^="value"]和[attribute$="value"]为例：
[attribute^="value"]：用于选择属性值以指定字符串开头的元素。例如：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器示例</title> <style> p[class^="test"] { color: red; } </style> </head> <body> <p class="test1">这是一个测试段落。</p> <p class="test2">这是另一个测试段落。</p> <p class="not-test">这不是一个测试段落。</p> </body> </html>在这个例子中，我们使用
[class^="test"]选择器选择了所有class属性值以"test"开头的<p>元素，并将它们的颜色设置为红色。[attribute$="value"]：用于选择属性值以指定字符串结尾的元素。例如：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器示例</title> <style> p[class$="test"] { font-weight: bold; } </style> </head> <body> <p class="test1">这是一个测试段落。</p> <p class="test2">这是另一个测试段落。</p> <p class="not-test">这不是一个测试段落。</p> </body> </html>在这个例子中，我们使用
[class$="test"]选择器选择了所有class属性值以"test"结尾的<p>元素，并将它们的字体加粗。
07-CSS3新增结构伪类选择器
CSS3新增的结构伪类选择器有很多，例如:first-child、:last-child、:nth-child()等。下面以:first-child和:last-child为例：
:first-child：用于选择父元素中的第一个子元素。例如：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构伪类选择器示例</title> <style> p:first-child { color: red; } </style> </head> <body> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> </body> </html>在这个例子中，我们使用
:first-child选择器选择了第一个<p>元素，并将其颜色设置为红色。:last-child：用于选择父元素中的最后一个子元素。例如：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构伪类选择器示例</title> <style> p:last-child { font-weight: bold; } </style> </head> <body> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> </body> </html>在这个例子中，我们使用
:last-child选择器选择了最后一个<p>元素，并将其字体加粗。
08-CSS3新增结构伪类选择器-nth-child
CSS3新增的结构伪类选择器:nth-child()用于选择父元素中的第n个子元素。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类选择器示例</title>
<style>
p:nth-child(2) {
color: red;
}
</style>
</head>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</body>
</html>
在这个例子中，我们使用:nth-child(2)选择器选择了第二个<p>元素，并将其颜色设置为红色。
09-CSS3新增nth-of-type选择器
CSS3新增的:nth-of-type()选择器用于选择父元素中指定类型的第n个子元素。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类选择器示例</title>
<style>
p:nth-of-type(2) {
color: red;
}
</style>
</head>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</body>
</html>
在这个例子中，我们使用:nth-of-type(2)选择器选择了第二个<p>元素，并将其颜色设置为红色
10-伪元素选择器
CSS3新增的伪元素选择器有很多，例如:before、:after、::first-letter等。下面以:before和:after为例：
:before：用于在元素的内容前插入内容。例如：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素选择器示例</title> <style> p:before { content: "这是一段文字"; color: red; } </style> </head> <body> <p>这是一个段落。</p> </body> </html>在这个例子中，我们使用
:before选择器在第一个<p>元素的内容前插入了一段红色文字。:after：用于在元素的内容后插入内容。例如：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素选择器示例</title> <style> p:after { content: "这是另一段文字"; color: blue; } </style> </head> <body> <p>这是一个段落。</p> </body> </html>在这个例子中，我们使用
:after选择器在第一个<p>元素的内容后插入了一段蓝色文字。
11-伪元素选择器使用场景-字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器使用场景-字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: ''; */
content: '\e91e';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>12-仿土豆网显示隐藏遮罩案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
/* 而是显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>13-CSS3盒子模型
CSS3盒子模型包括内容（content）、填充（padding）、边框（border）和外边距（margin）。下面以一个简单的例子来说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型示例</title>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在这个例子中，我们创建了一个宽为200px、高为100px的<div>元素，并设置了其内边距（padding）、边框（border）和外边距（margin）。其中，内边距是元素内容与边框之间的距离，边框是元素的边界线，外边距是元素与其他元素之间的距离。
14-图片模糊处理filter
CSS3新增的filter属性可以用于对图片进行模糊处理。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片模糊处理示例</title>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="example.jpg" alt="示例图片">
</body>
</html>
在这个例子中，我们使用filter: blur(5px)将图片进行模糊处理，模糊半径为5像素。
15-CSS3宽度calc函数
CSS3新增的calc()函数可以用于计算元素的宽度。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>calc()函数示例</title>
<style>
/* 设置一个名为box的类，宽度为100%减去50像素，高度为100px，背景颜色为浅蓝色 */
.box {
width: calc(100% - 50px);
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<!-- 创建一个使用box类的div元素 -->
<div class="box"></div>
</body>
</html>
在这个例子中，我们使用width: calc(100% - 50px)将元素的宽度设置为100%减去50像素，即元素宽度为容器宽度减去50像素。
16-CSS3过渡效果（重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 过渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
/* transition: height .5s ease 1s; */
/* 谁做过渡，给谁加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>17-CSS3过渡练习
CSS3新增的transition属性可以用于实现元素的过渡效果。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3过渡示例</title>
<style>
/* 设置一个名为box的类，宽度为100px，高度为100px，背景颜色为浅蓝色 */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
/* 设置元素的过渡效果，当鼠标悬停在元素上时，元素会以0.5秒的时间进行缩放变换，变化过程为平滑过渡 */
transition: all 0.5s ease;
}
/* 设置鼠标悬停在元素上时的样式，元素会放大到原来的1.5倍 */
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<!-- 创建一个使用box类的div元素 -->
<div class="box"></div>
</body>
</html>
在这个例子中，我们使用transition: all 0.5s ease;设置了元素的过渡效果，当鼠标悬停在元素上时，元素会以0.5秒的时间进行缩放变换，变化过程为平滑过渡。
写作不易，请支持支持，你的点赞是我写的动力
最后求点赞，求分享，求抱抱...
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
