随着互联网技术的飞速发展，网页设计也迎来了前所未有的变革。HTML5与CSS3作为当前最流行的网页标准技术，不仅极大地丰富了网页的表现力，还提高了用户体验。本篇文章旨在帮助初学者快速了解并上手HTML5和CSS3的核心特性，通过实践操作加深理解，为成为一名合格的前端开发者打下坚实的基础。
知识回顾
-
HTML5特性：
- 新标签：如article、section、header、footer等，帮助结构化网页。
- 多媒体支持：原生支持音频和视频标签，简化多媒体内容的嵌入。
- 本地存储：允许使用localStorage和sessionStorage进行数据存储。
-
CSS3特性：
- 选择器的增强：支持更复杂的选择器，轻松选择特定的元素。
- 渐变与阴影：使用background与box-shadow，增强视觉效果。
- 过渡与动画：可创建过渡效果，使元素在属性变化时平滑过渡。
任务描述
本案例是一个简单的HTML5与CSS3网页示例，旨在展示如何运用这两种前端技术来构建一个响应式、视觉美观的网页。该网页包含基本的结构元素，如标题、主内容区域、侧边栏和底部信息，涵盖了HTML5新标签的应用以及CSS3样式特性的使用。
网页中嵌入了音频与视频元素，以展示HTML5对多媒体的支持。通过使用CSS3的渐变背景、阴影效果和圆角设计，本案例不仅强调了功能性，还提升了用户体验和视觉效果。
任务实施
1.创建一个新的HTML文件（例如：index.html），并按照以下结构编写代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5与CSS3实验</title>
<style>
/* CSS样式在这里 */
</style>
</head>
<body>
<!-- 网页结构 -->
</body>
</html>
2.使用HTML5语义标签，例如<header>、<main>、<section>、<aside>和<footer>，组织网页内容。在主内容区域（<section>）增加文本和至少一个视频元素（使用<video>标签）和一个音频元素（使用<audio>标签），并确保它们能正常播放。
3.CSS样式：
在<style>标签中编写CSS，为网页添加样式：
使用线性渐变作为<header>的背景。
为主要内容区和侧边栏添加适当的内边距、边框半径和阴影效果。
确保网页在不同屏幕尺寸下都能良好显示。
4.多媒体文件：
准备可播放的视频文件和音频文件，确保其格式为浏览器所支持（如.mp4和.mp3）。
将这些文件的路径添加到相应的<video>和<audio>标签中。
5.源代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5与CSS3实验</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
padding: 20px;
text-align: center;
}
main {
display: flex;
padding: 20px;
}
section {
flex: 3;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
aside {
flex: 1;
padding: 20px;
margin-left: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
height: 500px; /* 设置固定高度 */
overflow-y: hidden; /* 启用垂直滚动 */
}
footer {
text-align: center;
padding: 10px;
background: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
/* 新闻列表样式 */
ul {
list-style-type: none; /* 去掉默认的列表样式 */
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ddd; /* 添加分隔线 */
}
li:last-child {
border-bottom: none; /* 最后一项去掉分隔线 */
}
</style>
</head>
<body>
<header>
<h1>欢迎来到HTML5与CSS3的世界</h1>
</header>
<main>
<section>
<h2>我的第一个HTML5网页</h2>
<p>这是一个使用HTML5的基本网页。以下是一个视频示例：</p>
<video width="400" height="300" pumped controls>
<source src="img/mysql.mp4" type="video/mp4" >
您的浏览器不支持视频标签。
</video>
<p>这是一个使用HTML5的音频示例：</p>
<audio controls>
<source src="example-audio.mp3" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>
</section>
<aside>
<h4>新闻列表</h4>
<ul>
<li>学习贯彻党的二十届三中全会精神</li>
<li>阿塞拜疆观察人士：中国引领绿色技术发展</li>
<li>“为当地民众修建幸福和友谊之路”</li>
<li>自然资源部：运用地方政府专项债券资金收回收购存量闲置土地</li>
<li>特朗普宣布马斯克将领导政府效率部门宣布新任防长人选</li>
<li>歼-20不再“飞完即走”，歼-35A“飞着飞着就隐身了”</li>
<li>菲外长声称菲是中国“侵略行为”受害者，外交部驳斥</li>
<li>中国空、海、陆三军在珠海首次联合举行新闻发布会</li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 HTML5与CSS3学习者</p>
</footer>
</body>
</html>
实验实训
实验实训
- 案例一：响应式布局：利用媒体查询@media实现不同屏幕尺寸下的页面布局调整，确保网站在手机、平板和桌面设备上的良好显示。
- 案例二：动画效果：运用CSS3的transition和animation属性制作平滑过渡和循环动画，提升用户的视觉体验。
- 案例三：表单验证：结合HTML5的表单新属性（如required、pattern等）和JavaScript，实现客户端的数据验证，提高数据提交的安全性和有效性。
