轻松掌握HTML5和CSS3创建精美响应式网页的实战教程从基础语法到高级应用全面覆盖适合初学者和进阶开发者包含最新特性和行业最佳实践

威震华夏关云长 · 发表于 2025-9-17 09:40:05

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

引言

在当今数字化时代，网页开发已成为一项不可或缺的技能。HTML5和CSS3作为现代网页开发的基石，为开发者提供了强大的工具来创建美观、功能丰富且适应各种设备的网站。响应式网页设计更是成为了行业标准，确保网站在桌面、平板和手机等各种设备上都能提供优质的用户体验。

本教程将带您从HTML5和CSS3的基础语法开始，逐步深入到高级应用，全面覆盖创建精美响应式网页所需的知识和技能。无论您是刚入门的初学者，还是希望提升技能的进阶开发者，本教程都将为您提供实用的指导和最新的行业最佳实践。

HTML5基础

HTML5简介

HTML5是超文本标记语言的第五个主要版本，它引入了许多新的语义元素、API和多媒体支持，使网页开发更加灵活和强大。与之前的HTML版本相比，HTML5更加注重语义化、可访问性和移动设备支持。

基本文档结构

一个标准的HTML5文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>

复制代码

这里的关键点：

• <!DOCTYPE html>声明文档类型为HTML5
• <html lang="zh-CN">指定页面语言为中文
• <meta charset="UTF-8">指定字符编码为UTF-8
• <meta name="viewport" content="width=device-width, initial-scale=1.0">确保页面在移动设备上正确显示

HTML5语义化标签

HTML5引入了许多语义化标签，使页面结构更加清晰，有助于SEO和可访问性：

<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>文章标题</h2>
<article>
<p>文章内容...</p>
</article>
</section>
<aside>
<h3>侧边栏</h3>
<p>侧边栏内容...</p>
</aside>
</main>
<footer>
<p>© 2023 版权所有</p>
</footer>

复制代码

这些语义化标签包括：

• <header>：页面或区域的头部
• <nav>：导航链接
• <main>：页面的主要内容
• <section>：文档中的独立区域
• <article>：独立的内容块
• <aside>：侧边栏或相关内容
• <footer>：页面或区域的底部

HTML5表单增强

HTML5为表单提供了许多新的输入类型和属性，使表单验证更加简单：

<form>
<div>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required placeholder="请输入您的邮箱">
</div>
<div>
<label for="url">网站：</label>
<input type="url" id="url" name="url" placeholder="https://example.com">
</div>
<div>
<label for="tel">电话：</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="123-4567-8901">
</div>
<div>
<label for="date">日期：</label>
<input type="date" id="date" name="date">
</div>
<div>
<label for="range">范围：</label>
<input type="range" id="range" name="range" min="0" max="100" value="50">
<span id="rangeValue">50</span>
</div>
<div>
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
</div>
<button type="submit">提交</button>
</form>

复制代码

HTML5新增的输入类型包括：

• email：电子邮件地址
• url：网址
• tel：电话号码
• date：日期选择器
• time：时间选择器
• datetime-local：日期和时间选择器
• month：月份选择器
• week：周选择器
• number：数字输入
• range：范围滑块
• color：颜色选择器
• search：搜索字段

HTML5多媒体支持

HTML5原生支持音频和视频，无需第三方插件：

<video width="640" height="360" controls poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
<track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="中文">
您的浏览器不支持视频标签。
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频标签。
</audio>

复制代码

CSS3基础

CSS3简介

CSS3是层叠样式表的第三个主要版本，它引入了许多强大的新特性，如圆角、阴影、渐变、动画和变换等，使网页设计更加灵活和富有创意。

CSS选择器

CSS3提供了更多强大的选择器，使元素选择更加精确：

/* 属性选择器 */
a[href^="https"] { color: green; } /* 选择href属性以https开头的a元素 */
a[href$=".pdf"] { color: red; } /* 选择href属性以.pdf结尾的a元素 */
a[href*="example"] { color: blue; } /* 选择href属性包含example的a元素 */
/* 伪类选择器 */
li:first-child { font-weight: bold; } /* 选择第一个li元素 */
li:last-child { font-style: italic; } /* 选择最后一个li元素 */
li:nth-child(odd) { background: #f0f0f0; } /* 选择奇数位置的li元素 */
li:nth-child(even) { background: #ffffff; } /* 选择偶数位置的li元素 */
li:nth-child(3n) { color: purple; } /* 选择每第三个li元素 */
/* 伪元素选择器 */
p::first-line { font-weight: bold; } /* 选择p元素的第一行 */
p::first-letter { font-size: 200%; } /* 选择p元素的第一个字母 */
p::before { content: ">> "; color: gray; } /* 在p元素前插入内容 */
p::after { content: " <<"; color: gray; } /* 在p元素后插入内容 */

复制代码

CSS3盒模型

CSS3引入了box-sizing属性，使盒模型计算更加灵活：

/* 标准盒模型（默认） */
.element {
width: 300px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
/* 总宽度 = width + padding + border = 300 + 40 + 10 = 350px */
}
/* 替代（IE）盒模型 */
.element {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
/* 总宽度 = width = 300px（padding和border包含在width内） */
}
/* 全局使用border-box */
* {
box-sizing: border-box;
}

复制代码

CSS3颜色和背景

CSS3提供了更多颜色和背景选项：

/* RGBA颜色 */
.color-rgba {
color: rgba(255, 0, 0, 0.7); /* 红色，70%不透明度 */
background-color: rgba(0, 0, 255, 0.3); /* 蓝色，30%不透明度 */
}
/* HSLA颜色 */
.color-hsla {
color: hsla(120, 100%, 50%, 0.8); /* 绿色，80%不透明度 */
background-color: hsla(240, 100%, 50%, 0.5); /* 蓝色，50%不透明度 */
}
/* 线性渐变 */
.gradient-linear {
background: linear-gradient(to right, #ff0000, #0000ff);
background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
/* 径向渐变 */
.gradient-radial {
background: radial-gradient(circle, #ff0000, #0000ff);
background: radial-gradient(ellipse at center, #ff0000 0%, #ffff00 25%, #00ff00 50%, #00ffff 75%, #0000ff 100%);
}
/* 多重背景 */
.multiple-backgrounds {
background-image: url('image1.png'), url('image2.png');
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

复制代码

CSS3文本效果

CSS3提供了更多文本效果选项：

/* 文本阴影 */
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff; /* 多重阴影 */
}
/* 文本溢出处理 */
.text-overflow {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */
}
/* 文字换行 */
.word-wrap {
width: 200px;
word-wrap: break-word; /* 允许长单词或URL地址换行 */
word-break: break-all; /* 允许在单词内换行 */
}
/* 字体调整 */
.font-adjustment {
font-size: 16px;
font-size: 1rem; /* 相对于根元素字体大小 */
font-size: 1.2em; /* 相对于父元素字体大小 */
font-size: 1.2vw; /* 相于视口宽度的1.2% */
font-size: calc(16px + 1vw); /* 计算值 */
}

复制代码

响应式设计原理

视口设置

响应式设计的第一步是正确设置视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

复制代码

这个meta标签告诉浏览器：

• width=device-width：将视口宽度设置为设备宽度
• initial-scale=1.0：设置初始缩放比例为1.0

其他可选参数：

• minimum-scale：最小缩放比例
• maximum-scale：最大缩放比例
• user-scalable：是否允许用户缩放（yes/no）

媒体查询

媒体查询是响应式设计的核心，它允许我们根据设备特性应用不同的样式：

/* 基本媒体查询语法 */
@media mediatype and|not|only (media feature) {
CSS-Code;
}
/* 常用媒体类型 */
@media screen { /* 适用于屏幕设备 */ }
@media print { /* 适用于打印设备 */ }
@media speech { /* 适用于语音合成器 */ }
/* 常用媒体特性 */
@media (max-width: 600px) { /* 视口宽度小于等于600px */ }
@media (min-width: 601px) { /* 视口宽度大于等于601px */ }
@media (min-width: 601px) and (max-width: 1200px) { /* 视口宽度在601px到1200px之间 */ }
@media (orientation: portrait) { /* 竖屏方向 */ }
@media (orientation: landscape) { /* 横屏方向 */ }
@media (hover: hover) { /* 设备支持悬停 */ }
@media (hover: none) { /* 设备不支持悬停 */ }
@media (pointer: coarse) { /* 触摸屏设备 */ }
@media (pointer: fine) { /* 精确指针设备（如鼠标） */ }

复制代码

流式布局

流式布局使用相对单位（如百分比）而不是固定单位（如像素），使布局能够根据视口大小自动调整：

.container {
width: 90%; /* 容器宽度为视口宽度的90% */
max-width: 1200px; /* 最大宽度限制 */
margin: 0 auto; /* 居中显示 */
}
.column {
float: left;
width: 33.333%; /* 三列等宽布局 */
padding: 15px;
box-sizing: border-box; /* 确保padding包含在宽度内 */
}
/* 在小屏幕上改为单列布局 */
@media (max-width: 768px) {
.column {
float: none;
width: 100%;
}
}

复制代码

弹性图片

确保图片能够根据容器大小自动调整：

img {
max-width: 100%; /* 图片最大宽度不超过容器宽度 */
height: auto; /* 高度自动调整，保持宽高比 */
}
/* 背景图片响应式处理 */
.hero {
background-image: url('large-image.jpg');
background-size: cover; /* 覆盖整个容器 */
background-position: center; /* 居中显示 */
background-repeat: no-repeat; /* 不重复 */
}
/* 使用picture元素提供不同分辨率的图片 */
<picture>
<source media="(max-width: 768px)" srcset="small-image.jpg">
<source media="(max-width: 1200px)" srcset="medium-image.jpg">
<img src="large-image.jpg" alt="描述性文本">
</picture>

复制代码

响应式布局技术

Flexbox布局

Flexbox（弹性盒子）是一种一维布局方法，非常适合用于创建灵活的响应式布局：

/* Flex容器 */
.flex-container {
display: flex; /* 创建flex容器 */
flex-direction: row; /* 主轴方向：row（默认）、row-reverse、column、column-reverse */
flex-wrap: wrap; /* 换行：nowrap（默认）、wrap、wrap-reverse */
justify-content: space-between; /* 主轴对齐：flex-start（默认）、flex-end、center、space-between、space-around、space-evenly */
align-items: center; /* 交叉轴对齐：stretch（默认）、flex-start、flex-end、center、baseline */
align-content: space-between; /* 多行对齐：stretch（默认）、flex-start、flex-end、center、space-between、space-around */
gap: 20px; /* 项目之间的间距 */
}
/* Flex项目 */
.flex-item {
flex-grow: 1; /* 放大比例：0（默认，不放大） */
flex-shrink: 1; /* 缩小比例：1（默认，可以缩小） */
flex-basis: 0; /* 基准值：auto（默认，项目本身大小） */
flex: 1 1 0; /* 简写：flex-grow flex-shrink flex-basis */
align-self: center; /* 单个项目对齐：auto（默认）、flex-start、flex-end、center、baseline、stretch */
order: 1; /* 排序顺序：0（默认），数值越小越靠前 */
}
/* 实际应用示例 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.logo {
flex: 0 0 auto;
}
.nav-links {
display: flex;
gap: 1rem;
}
@media (max-width: 768px) {
.navbar {
flex-direction: column;
}
.nav-links {
flex-direction: column;
width: 100%;
text-align: center;
}
}

复制代码

Grid布局

Grid（网格）是一种二维布局方法，非常适合创建复杂的响应式布局：

/* Grid容器 */
.grid-container {
display: grid; /* 创建grid容器 */
grid-template-columns: repeat(3, 1fr); /* 定义列：3列，每列等宽 */
grid-template-rows: auto 200px; /* 定义行：第一行自动高度，第二行200px高 */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer"; /* 定义网格区域 */
grid-gap: 20px; /* 网格间距 */
justify-items: center; /* 水平对齐：stretch（默认）、start、end、center */
align-items: center; /* 垂直对齐：stretch（默认）、start、end、center */
}
/* Grid项目 */
.grid-item {
grid-column: 1 / 3; /* 列位置：从第1条线到第3条线 */
grid-row: 2 / 4; /* 行位置：从第2条线到第4条线 */
grid-area: main; /* 指定网格区域名称 */
justify-self: center; /* 单个项目水平对齐 */
align-self: center; /* 单个项目垂直对齐 */
}
/* 响应式Grid布局 */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自动适应，最小250px，最大等分 */
grid-gap: 20px;
}
/* 实际应用示例 */
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 20px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
@media (max-width: 768px) {
.page-layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
}
}

复制代码

多列布局

CSS3的多列布局适合用于文本内容：

/* 多列布局 */
.columns {
column-count: 3; /* 列数 */
column-width: 200px; /* 列宽 */
column-gap: 30px; /* 列间距 */
column-rule: 1px solid #ddd; /* 列之间的分隔线 */
column-fill: balance; /* 内容平衡：balance（默认，平衡各列高度）、auto（按顺序填充） */
}
/* 跨列 */
.heading {
column-span: all; /* 跨所有列 */
text-align: center;
}
/* 响应式多列布局 */
@media (max-width: 768px) {
.columns {
column-count: 2;
}
}
@media (max-width: 480px) {
.columns {
column-count: 1;
}
}

复制代码

CSS3高级特性

过渡效果

CSS3过渡使属性变化更加平滑：

/* 基本过渡 */
.element {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s, height 2s, background-color 2s; /* 多属性过渡 */
}
.element:hover {
width: 200px;
height: 200px;
background-color: red;
}
/* 过渡属性详解 */
.element {
transition-property: width, height, background-color; /* 指定过渡属性 */
transition-duration: 2s; /* 过渡持续时间 */
transition-timing-function: ease; /* 过渡速度曲线：ease（默认）、linear、ease-in、ease-out、ease-in-out、cubic-bezier() */
transition-delay: 0.5s; /* 过渡延迟时间 */
transition: width 2s ease 0.5s, height 2s ease 0.5s; /* 简写形式 */
}
/* 实际应用示例 */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

复制代码

变换效果

CSS3变换允许元素进行旋转、缩放、倾斜和平移：

/* 2D变换 */
.transform-2d {
transform: translate(50px, 100px); /* 平移：X轴50px，Y轴100px */
transform: rotate(45deg); /* 旋转：45度 */
transform: scale(1.5, 0.5); /* 缩放：X轴1.5倍，Y轴0.5倍 */
transform: skew(30deg, 20deg); /* 倾斜：X轴30度，Y轴20度 */
transform: matrix(1, 0, 0, 1, 0, 0); /* 矩阵变换 */
transform: translate(50px, 100px) rotate(45deg) scale(1.5); /* 组合变换 */
}
/* 3D变换 */
.transform-3d {
transform: translate3d(50px, 100px, 200px); /* 3D平移 */
transform: rotate3d(1, 1, 1, 45deg); /* 3D旋转 */
transform: scale3d(1.5, 0.5, 2); /* 3D缩放 */
transform: perspective(500px) rotateX(45deg); /* 透视和X轴旋转 */
transform-style: preserve-3d; /* 3D空间 */
backface-visibility: hidden; /* 背面可见性 */
}
/* 变换原点 */
.transform-origin {
transform-origin: center center; /* 变换原点：默认中心 */
transform-origin: top left; /* 左上角 */
transform-origin: 50% 50%; /* 中心位置 */
transform-origin: 0 0; /* 左上角 */
}
/* 实际应用示例 */
.card {
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px) rotateY(5deg);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

复制代码

动画效果

CSS3动画允许创建更复杂的动画效果：

/* 基本动画 */
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.element {
animation-name: slideIn; /* 动画名称 */
animation-duration: 2s; /* 动画持续时间 */
animation-timing-function: ease; /* 动画速度曲线 */
animation-delay: 0.5s; /* 动画延迟时间 */
animation-iteration-count: infinite; /* 动画迭代次数：infinite（无限）、数字 */
animation-direction: alternate; /* 动画方向：normal（默认）、reverse、alternate、alternate-reverse */
animation-fill-mode: forwards; /* 动画填充模式：none（默认）、forwards、backwards、both */
animation-play-state: running; /* 动画播放状态：running（默认）、paused */
animation: slideIn 2s ease 0.5s infinite alternate forwards; /* 简写形式 */
}
/* 复杂动画示例 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(-30px);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.bouncing-ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #3498db;
animation: bounce 1s infinite;
}
.pulsing-heart {
width: 50px;
height: 50px;
background-color: #e74c3c;
position: relative;
transform: rotate(45deg);
animation: pulse 1.5s infinite;
}
.pulsing-heart::before,
.pulsing-heart::after {
content: '';
width: 50px;
height: 50px;
position: absolute;
background-color: #e74c3c;
border-radius: 50%;
}
.pulsing-heart::before {
top: -25px;
left: 0;
}
.pulsing-heart::after {
left: -25px;
top: 0;
}

复制代码

自定义属性（CSS变量）

CSS变量允许定义可重用的值：

/* 定义变量 */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--background-color: #fff;
--font-size-base: 16px;
--spacing-unit: 8px;
--border-radius: 4px;
}
/* 使用变量 */
.button {
background-color: var(--primary-color);
color: var(--background-color);
font-size: var(--font-size-base);
padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
border-radius: var(--border-radius);
}
/* 变量作用域 */
.card {
--card-background: #f8f9fa;
--card-border-color: #dee2e6;
background-color: var(--card-background);
border: 1px solid var(--card-border-color);
}
/* 通过JavaScript修改变量 */
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
/* 媒体查询中的变量 */
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #5dade2;
--secondary-color: #58d68d;
--text-color: #f8f9fa;
--background-color: #2c3e50;
}
}

复制代码

HTML5高级特性

Canvas绘图

Canvas API允许使用JavaScript在网页上绘制图形：

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// 获取canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 100, 80);
// 绘制圆形
ctx.beginPath();
ctx.arc(250, 90, 40, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();
// 绘制线条
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(150, 250);
ctx.lineTo(250, 200);
ctx.lineTo(350, 250);
ctx.strokeStyle = '#2ecc71';
ctx.lineWidth = 3;
ctx.stroke();
// 绘制文本
ctx.font = '20px Arial';
ctx.fillStyle = '#333';
ctx.fillText('Hello Canvas!', 150, 30);
// 绘制图像
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
ctx.drawImage(img, 300, 150, 80, 80);
};
// 创建渐变
const gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, '#3498db');
gradient.addColorStop(1, '#9b59b6');
ctx.fillStyle = gradient;
ctx.fillRect(50, 150, 200, 30);
</script>

复制代码

SVG图形

SVG（可缩放矢量图形）是一种基于XML的矢量图像格式：

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="80" fill="#3498db" rx="10" ry="10" />
<circle cx="250" cy="90" r="40" fill="#e74c3c" />
<ellipse cx="100" cy="200" rx="80" ry="40" fill="#2ecc71" />
<line x1="200" y1="150" x2="350" y2="250" stroke="#f39c12" stroke-width="3" />
<polygon points="250,150 300,200 200,200" fill="#9b59b6" />
<path d="M50,250 Q100,200 150,250 T250,250" stroke="#1abc9c" stroke-width="3" fill="none" />
<text x="200" y="30" font-family="Arial" font-size="20" fill="#333" text-anchor="middle">Hello SVG!</text>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:1" />
<stop offset="100%" style="stop-color:#9b59b6;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="50" y="270" width="200" height="20" fill="url(#gradient)" />
</svg>

复制代码

Web存储

HTML5提供了两种客户端存储方式：localStorage和sessionStorage：

<script>
// localStorage - 持久化存储
// 存储数据
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('userAge', '30');
// 读取数据
const username = localStorage.getItem('username');
const userAge = localStorage.getItem('userAge');
console.log(username); // 输出: JohnDoe
console.log(userAge); // 输出: 30
// 删除数据
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();
// 存储对象（需要序列化）
const user = {
name: 'John Doe',
age: 30,
email: 'john@example.com'
};
localStorage.setItem('user', JSON.stringify(user));
// 读取对象（需要反序列化）
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: John Doe
// sessionStorage - 会话级存储（关闭浏览器后清除）
// 用法与localStorage相同
sessionStorage.setItem('sessionData', 'This will be cleared after the session ends');
const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // 输出: This will be cleared after the session ends
// 监听存储事件（当其他文档修改localStorage时触发）
window.addEventListener('storage', function(event) {
console.log('Storage changed:', event.key, event.oldValue, event.newValue);
});
</script>

复制代码

Web Workers

Web Workers允许在后台运行JavaScript，不阻塞用户界面：

<script>
// 创建Web Worker
const worker = new Worker('worker.js');
// 向Worker发送消息
worker.postMessage({
command: 'calculate',
data: [1, 2, 3, 4, 5]
});
// 接收Worker发送的消息
worker.onmessage = function(event) {
console.log('Result from worker:', event.data.result);
};
// 处理Worker错误
worker.onerror = function(error) {
console.error('Worker error:', error.message);
};
// 终止Worker
// worker.terminate();
</script>
// worker.js
self.onmessage = function(event) {
const command = event.data.command;
const data = event.data.data;
if (command === 'calculate') {
// 执行耗时计算
const result = data.reduce((sum, num) => sum + num, 0);
// 发送结果回主线程
self.postMessage({
result: result
});
}
};
// 也可以使用importScripts导入其他脚本
// importScripts('helper.js');

复制代码

Geolocation API

Geolocation API允许获取用户的位置信息：

<script>
// 检查浏览器是否支持Geolocation
if ('geolocation' in navigator) {
// 获取当前位置
navigator.geolocation.getCurrentPosition(
// 成功回调
function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const accuracy = position.coords.accuracy;
console.log('Latitude:', latitude);
console.log('Longitude:', longitude);
console.log('Accuracy:', accuracy);
// 在地图上显示位置
const mapUrl = `https://maps.google.com/maps?q=${latitude},${longitude}`;
console.log('Map URL:', mapUrl);
},
// 错误回调
function(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.error('User denied the request for Geolocation.');
break;
case error.POSITION_UNAVAILABLE:
console.error('Location information is unavailable.');
break;
case error.TIMEOUT:
console.error('The request to get user location timed out.');
break;
case error.UNKNOWN_ERROR:
console.error('An unknown error occurred.');
break;
}
},
// 选项
{
enableHighAccuracy: true, // 高精度模式
timeout: 5000, // 超时时间（毫秒）
maximumAge: 0 // 缓存时间（毫秒），0表示不使用缓存
}
);
// 持续监控位置变化
const watchId = navigator.geolocation.watchPosition(
function(position) {
console.log('Position updated:', position.coords.latitude, position.coords.longitude);
},
function(error) {
console.error('Error watching position:', error.message);
}
);
// 停止监控
// navigator.geolocation.clearWatch(watchId);
} else {
console.error('Geolocation is not supported by this browser.');
}
</script>

复制代码

性能优化

图片优化

图片通常是网页中最大的资源，优化图片可以显著提高加载速度：

<img src="photo.jpg" alt="照片描述">
<img src="logo.png" alt="标志描述">
<img src="icon.svg" alt="图标描述">
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="图像描述">
</picture>
<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w"
sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1024px"
src="medium.jpg" alt="响应式图像">
<img src="placeholder.jpg" data-src="actual-image.jpg" alt="懒加载图像" class="lazyload">
<script>
// 懒加载实现
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = document.querySelectorAll('img.lazyload');
function lazyLoad() {
lazyImages.forEach(img => {
if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== 'none') {
img.src = img.dataset.src;
img.classList.remove('lazyload');
}
});
}
// 初始加载
lazyLoad();
// 滚动时加载
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
});
</script>
<style>
.icon-home {
width: 16px;
height: 16px;
background-image: url('sprite.png');
background-position: 0 0;
}
.icon-settings {
width: 16px;
height: 16px;
background-image: url('sprite.png');
background-position: -16px 0;
}
</style>
<span class="icon-home"></span>
<span class="icon-settings"></span>

复制代码

代码优化

优化HTML、CSS和JavaScript代码可以提高性能：

<style>
/* 避免使用@import */
/* @import url('styles.css'); */
/* 使用<link>代替@import */
/* <link rel="stylesheet" href="styles.css"> */
/* 压缩CSS */
/* 移除注释、空格和不必要的字符 */
/* 合并CSS文件 */
/* 减少HTTP请求 */
/* 使用CSS预处理器（如Sass、Less） */
/* 提高代码组织和可维护性 */
/* 避免使用昂贵的属性 */
/* 如box-shadow、border-radius、filter等 */
/* 使用硬件加速 */
.animated-element {
transform: translateZ(0);
will-change: transform;
}
/* 避免过度使用选择器 */
/* 而不是：body div.container ul li a */
/* 使用：.nav-link */
</style>
<script>
// 压缩JavaScript
// 移除注释、空格和不必要的字符
// 缩短变量名
// 延迟加载非关键JavaScript
// <script src="non-critical.js" defer></script>
// <script src="non-critical.js" async></script>
// 避免全局变量
// 使用IIFE或模块模式
(function() {
const privateVar = '私有变量';
function privateFunction() {
console.log(privateVar);
}
window.publicFunction = function() {
privateFunction();
};
})();
// 使用事件委托减少事件监听器
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.classList.contains('child')) {
console.log('子元素被点击');
}
});
// 避免DOM操作过多
// 使用文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);
// 使用requestAnimationFrame优化动画
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
// 使用防抖和节流优化事件处理
// 防抖
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
// 节流
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// 使用示例
window.addEventListener('resize', debounce(function() {
console.log('窗口大小改变');
}, 200));
window.addEventListener('scroll', throttle(function() {
console.log('页面滚动');
}, 100));
</script>

复制代码

缓存策略

利用浏览器缓存可以减少服务器请求，提高页面加载速度：

<!--
Cache-Control: max-age=31536000, immutable
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
-->
<script>
// 注册Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(error) {
console.log('ServiceWorker registration failed: ', error);
});
});
}
</script>
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/images/logo.png'
];
self.addEventListener('install', function(event) {
// 安装Service Worker并缓存资源
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
// 拦截网络请求并从缓存中响应
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 如果资源在缓存中，则返回缓存的资源
if (response) {
return response;
}
// 否则发起网络请求
return fetch(event.request);
})
);
});
self.addEventListener('activate', function(event) {
// 清理旧缓存
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
<script>
// 检查是否有缓存的数据
const cachedData = localStorage.getItem('cachedData');
if (cachedData) {
// 使用缓存的数据
const data = JSON.parse(cachedData);
console.log('使用缓存的数据:', data);
} else {
// 从服务器获取数据
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('从服务器获取的数据:', data);
// 缓存数据
localStorage.setItem('cachedData', JSON.stringify(data));
// 设置缓存过期时间（例如1小时）
localStorage.setItem('cachedDataExpiry', Date.now() + 3600000);
});
}
// 检查缓存是否过期
const expiryTime = localStorage.getItem('cachedDataExpiry');
if (expiryTime && Date.now() > parseInt(expiryTime)) {
// 缓存已过期，清除缓存
localStorage.removeItem('cachedData');
localStorage.removeItem('cachedDataExpiry');
console.log('缓存已过期，已清除');
}
</script>

复制代码

最佳实践

代码组织和可维护性

良好的代码组织可以提高可维护性和开发效率：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="网站描述">
<meta name="keywords" content="关键词1, 关键词2">
<title>网站标题</title>
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="critical.js" as="script">
<style>
/* 关键渲染路径CSS */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<a href="#main-content" class="skip-link">跳转到主要内容</a>
<header class="header">
<div class="container">
<div class="logo">
<a href="/">
<img src="logo.svg" alt="网站标志">
</a>
</div>
<nav class="main-nav" aria-label="主导航">
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu">
<span class="sr-only">菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul id="nav-menu" class="nav-menu">
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</div>
</header>
<main id="main-content" class="main-content">
<div class="container">
<h1>页面标题</h1>
<section class="content-section">
<h2>章节标题</h2>
<p>内容段落...</p>
</section>
</div>
</main>
<footer class="footer">
<div class="container">
</div>
</footer>
<script>
// 关键功能JavaScript
document.addEventListener('DOMContentLoaded', function() {
const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');
navToggle.addEventListener('click', function() {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
navMenu.classList.toggle('active');
});
});
</script>
<script src="non-critical.js" async></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
</body>
</html>

复制代码

CSS最佳实践

/* CSS最佳实践 */
/* 使用BEM命名约定 */
/* 块（Block） */
.card {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
/* 元素（Element） */
.card__title {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 1rem;
}
.card__content {
font-size: 1rem;
line-height: 1.6;
}
.card__image {
width: 100%;
height: auto;
border-radius: 4px 4px 0 0;
}
/* 修饰符（Modifier） */
.card--highlighted {
border: 2px solid #3498db;
}
.card--large {
padding: 30px;
}
.card__title--small {
font-size: 1.2rem;
}
/* 使用CSS变量 */
:root {
--color-primary: #3498db;
--color-secondary: #2ecc71;
--color-text: #333;
--color-background: #fff;
--color-border: #ddd;
--spacing-unit: 8px;
--border-radius: 4px;
--transition-speed: 0.3s;
}
.button {
background-color: var(--color-primary);
color: var(--color-background);
padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
border-radius: var(--border-radius);
transition: all var(--transition-speed) ease;
}
.button:hover {
background-color: #2980b9;
}
/* 使用CSS预处理器（如Sass）*/
/* _variables.scss */
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-text: #333;
$color-background: #fff;
$color-border: #ddd;
$spacing-unit: 8px;
$border-radius: 4px;
$transition-speed: 0.3s;
/* _mixins.scss */
@mixin button-styles($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
padding: $spacing-unit * 2 $spacing-unit * 3;
border-radius: $border-radius;
transition: all $transition-speed ease;
&:hover {
background-color: darken($bg-color, 10%);
}
}
/* main.scss */
.button {
@include button-styles($color-primary, $color-background);
}
.button-secondary {
@include button-styles($color-secondary, $color-background);
}
/* 使用CSS模块（如CSS Modules或CSS-in-JS）*/
/* Button.module.css */
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
/* 使用CSS框架（如Bootstrap、Tailwind CSS）*/
/* Bootstrap示例 */
<button class="btn btn-primary">主要按钮</button>
/* Tailwind CSS示例 */
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
蓝色按钮
</button>
/* 响应式设计最佳实践 */
/* 移动优先 */
.container {
width: 100%;
padding: 15px;
}
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}
@media (min-width: 992px) {
.container {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
/* 使用相对单位 */
.text {
font-size: 1rem; /* 相对于根元素字体大小 */
line-height: 1.5; /* 相对于元素字体大小 */
margin-bottom: 1em; /* 相对于元素字体大小 */
padding: 0.5em 1em; /* 相对于元素字体大小 */
}
/* 使用现代布局技术 */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

复制代码

JavaScript最佳实践

// JavaScript最佳实践
// 使用ES6+语法
// 使用let和const代替var
const PI = 3.14159;
let radius = 5;
// 使用箭头函数
const circleArea = (radius) => PI * radius * radius;
// 使用模板字符串
const message = `半径为 ${radius} 的圆的面积是 ${circleArea(radius)}`;
// 使用解构赋值
const person = { name: 'John', age: 30, city: 'New York' };
const { name, age } = person;
// 使用数组和对象扩展运算符
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
const personInfo = { ...person, country: 'USA' };
// 使用类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}
const john = new Person('John', 30);
console.log(john.greet());
// 使用模块
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default class Calculator {
constructor() {
this.result = 0;
}
add(num) {
this.result += num;
return this;
}
subtract(num) {
this.result -= num;
return this;
}
getResult() {
return this.result;
}
}
// main.js
import Calculator, { add, subtract } from './math.js';
const calc = new Calculator();
const result = calc.add(5).subtract(3).getResult();
console.log(result); // 2
console.log(add(10, 5)); // 15
console.log(subtract(10, 5)); // 5
// 使用异步编程
// 使用Promise
function fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok');
}
})
.then(data => resolve(data))
.catch(error => reject(error));
});
}
fetchData('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
// 使用async/await
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
getData();
// 使用错误处理
function divide(a, b) {
if (b === 0) {
throw new Error('Division by zero');
}
return a / b;
}
try {
const result = divide(10, 0);
console.log(result);
} catch (error) {
console.error('Error:', error.message);
} finally {
console.log('Division operation completed');
}
// 使用函数式编程
// 使用纯函数
const multiply = (a, b) => a * b;
// 使用高阶函数
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((acc, num) => acc + num, 0);
// 使用组合
const addFive = num => num + 5;
const multiplyByThree = num => num * 3;
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const addFiveAndMultiplyByThree = compose(multiplyByThree, addFive);
console.log(addFiveAndMultiplyByThree(10)); // 45
// 使用设计模式
// 单例模式
class Singleton {
constructor() {
if (!Singleton.instance) {
this.data = 'Singleton data';
Singleton.instance = this;
}
return Singleton.instance;
}
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true
// 观察者模式
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
unsubscribe(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
update(data) {
console.log('Received data:', data);
}
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('Hello Observers!');
// 使用性能优化技术
// 使用防抖和节流
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// 使用requestAnimationFrame
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
// 使用Web Workers处理密集计算
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ command: 'calculate', data: [1, 2, 3, 4, 5] });
worker.onmessage = function(event) {
console.log('Result:', event.data.result);
};
// worker.js
self.onmessage = function(event) {
if (event.data.command === 'calculate') {
const result = event.data.data.reduce((sum, num) => sum + num, 0);
self.postMessage({ result: result });
}
};

复制代码

可访问性最佳实践

<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
<main>
<section aria-labelledby="section1-heading">
<h2 id="section1-heading">章节标题</h2>
<p>章节内容...</p>
</section>
</main>
<img src="photo.jpg" alt="描述照片内容">
<img src="decorative-image.jpg" alt="">
<button aria-expanded="false" aria-controls="menu">菜单</button>
<div id="menu" aria-hidden="true">
</div>
<a href="#main-content" class="skip-link">跳转到主要内容</a>
<form>
<div>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required aria-required="true">
</div>
<div>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required aria-required="true">
<span id="email-error" class="error-message" aria-live="polite"></span>
</div>
<div>
<fieldset>
<legend>性别：</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">其他</label>
</fieldset>
</div>
<button type="submit">提交</button>
</form>
<style>
/* 良好的颜色对比度 */
.text {
color: #333; /* 深色文本 */
background-color: #fff; /* 浅色背景 */
}
/* 避免仅使用颜色传达信息 */
.error {
color: #d32f2f;
font-weight: bold;
text-decoration: underline; /* 额外的视觉提示 */
}
/* 确保链接可识别 */
a {
color: #1976d2;
text-decoration: underline;
}
a:hover, a:focus {
color: #0d47a1;
text-decoration: underline;
}
/* 确保焦点可见 */
button:focus, a:focus, input:focus, textarea:focus, select:focus {
outline: 2px solid #1976d2;
outline-offset: 2px;
}
</style>
<div role="tablist" aria-label="选项卡">
<button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">选项卡1</button>
<button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">选项卡2</button>
<button role="tab" aria-selected="false" aria-controls="panel3" id="tab3">选项卡3</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
<p>选项卡1内容</p>
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
<p>选项卡2内容</p>
</div>
<div role="tabpanel" id="panel3" aria-labelledby="tab3" hidden>
<p>选项卡3内容</p>
</div>
<script>
// 选项卡键盘导航
const tabs = document.querySelectorAll('[role="tab"]');
const tabList = document.querySelector('[role="tablist"]');
// 为选项卡列表添加方向键导航
tabList.addEventListener('keydown', (e) => {
const key = e.key;
let currentTab = document.activeElement;
if (key === 'ArrowRight' || key === 'ArrowLeft') {
if (key === 'ArrowRight') {
// 移动到下一个选项卡
if (currentTab.nextElementSibling) {
currentTab.nextElementSibling.focus();
} else {
tabs[0].focus();
}
} else if (key === 'ArrowLeft') {
// 移动到上一个选项卡
if (currentTab.previousElementSibling) {
currentTab.previousElementSibling.focus();
} else {
tabs[tabs.length - 1].focus();
}
}
// 激活当前选项卡
currentTab.click();
e.preventDefault();
}
});
// 选项卡点击事件
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 取消所有选项卡的选中状态
tabs.forEach(t => {
t.setAttribute('aria-selected', 'false');
});
// 隐藏所有面板
document.querySelectorAll('[role="tabpanel"]').forEach(panel => {
panel.setAttribute('hidden', '');
});
// 激活当前选项卡
tab.setAttribute('aria-selected', 'true');
// 显示对应面板
const panelId = tab.getAttribute('aria-controls');
document.getElementById(panelId).removeAttribute('hidden');
});
});
</script>
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="zh" label="中文字幕">
您的浏览器不支持视频标签。
</video>
<div class="transcript">
<h3>视频转录</h3>
<p>这里是视频内容的文字转录...</p>
</div>
<style>
/* 基本样式 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 响应式字体大小 */
html {
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (max-width: 480px) {
html {
font-size: 12px;
}
}
/* 响应式导航 */
.nav-menu {
display: flex;
flex-direction: row;
}
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
}
}
/* 响应式表格 */
.responsive-table {
width: 100%;
overflow-x: auto;
}
table {
width: 100%;
min-width: 600px;
}
/* 响应式图片 */
img {
max-width: 100%;
height: auto;
}
</style>

复制代码

实战项目：构建响应式网站

让我们通过一个实际项目来应用我们学到的所有知识。我们将构建一个响应式的个人作品集网站，包含首页、关于页面、作品展示页面和联系页面。

项目结构

portfolio-website/
├── index.html
├── about.html
├── portfolio.html
├── contact.html
├── css/
│ ├── normalize.css
│ ├── style.css
│ └── responsive.css
├── js/
│ ├── main.js
│ └── contact.js
├── images/
│ ├── logo.svg
│ ├── hero-bg.jpg
│ ├── profile.jpg
│ └── projects/
│ ├── project1.jpg
│ ├── project2.jpg
│ └── project3.jpg
└── fonts/
└── roboto/
├── Roboto-Regular.ttf
├── Roboto-Bold.ttf
└── Roboto-Italic.ttf

复制代码

首页 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="个人作品集网站，展示我的项目和技能">
<meta name="keywords" content="作品集, 网页开发, 设计">
<title>张三 - 个人作品集</title>
<link rel="preload" href="css/normalize.css" as="style">
<link rel="preload" href="css/style.css" as="style">
<link rel="preload" href="images/logo.svg" as="image">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<a href="#main-content" class="skip-link">跳转到主要内容</a>
<header class="header">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="images/logo.svg" alt="张三个人标志">
</a>
</div>
<nav class="main-nav" aria-label="主导航">
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu">
<span class="sr-only">菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul id="nav-menu" class="nav-menu">
<li><a href="index.html" class="active">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</div>
</header>
<main id="main-content">
<section class="hero">
<div class="hero-bg">
<img src="images/hero-bg.jpg" alt="背景图片">
</div>
<div class="hero-content">
<div class="container">
<h1>你好，我是张三</h1>
<p>前端开发工程师 & UI设计师</p>
<a href="portfolio.html" class="btn btn-primary">查看我的作品</a>
</div>
</div>
</section>
<section class="services">
<div class="container">
<h2>我的服务</h2>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-code"></i>
</div>
<h3>网页开发</h3>
<p>使用最新的HTML5、CSS3和JavaScript技术，创建响应式、高性能的网站。</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-paint-brush"></i>
</div>
<h3>UI设计</h3>
<p>设计美观、直观的用户界面，提供出色的用户体验。</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3>响应式设计</h3>
<p>确保网站在各种设备上都能完美显示，从桌面到移动设备。</p>
</div>
</div>
</div>
</section>
<section class="recent-projects">
<div class="container">
<h2>最新作品</h2>
<div class="projects-grid">
<article class="project-card">
<div class="project-image">
<img src="images/projects/project1.jpg" alt="电子商务网站">
<div class="project-overlay">
<a href="portfolio.html#project1" class="btn btn-light">查看详情</a>
</div>
</div>
<div class="project-info">
<h3>电子商务网站</h3>
<p>一个功能齐全的电子商务平台，具有购物车和支付功能。</p>
</div>
</article>
<article class="project-card">
<div class="project-image">
<img src="images/projects/project2.jpg" alt="社交媒体应用">
<div class="project-overlay">
<a href="portfolio.html#project2" class="btn btn-light">查看详情</a>
</div>
</div>
<div class="project-info">
<h3>社交媒体应用</h3>
<p>一个现代化的社交媒体应用，具有实时聊天和内容分享功能。</p>
</div>
</article>
<article class="project-card">
<div class="project-image">
<img src="images/projects/project3.jpg" alt="企业网站">
<div class="project-overlay">
<a href="portfolio.html#project3" class="btn btn-light">查看详情</a>
</div>
</div>
<div class="project-info">
<h3>企业网站</h3>
<p>为一家科技公司设计的现代化企业网站，具有动画效果和交互功能。</p>
</div>
</article>
</div>
<div class="text-center">
<a href="portfolio.html" class="btn btn-secondary">查看所有作品</a>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h2>客户评价</h2>
<div class="testimonials-slider">
<div class="testimonial-card active">
<div class="testimonial-content">
<p>"张三是一位出色的开发者和设计师。他不仅技术精湛，而且非常注重细节，能够准确理解并实现客户的需求。"</p>
</div>
<div class="testimonial-author">
<img src="https://io.pixtech.org/pixtech/forum/202509/17/8ce030a518824fd5.webp" alt="李四头像">
<div>
<h4>李四</h4>
<p>ABC公司CEO</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-content">
<p>"与张三合作是一次非常愉快的经历。他专业、高效，并且总是能够按时交付高质量的工作。"</p>
</div>
<div class="testimonial-author">
<img src="https://io.pixtech.org/pixtech/forum/202509/17/cf198110774e4b66.webp" alt="王五头像">
<div>
<h4>王五</h4>
<p>XYZ设计总监</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-content">
<p>"张三的网站设计不仅美观，而且功能强大。我们的网站上线后，用户参与度显著提高。"</p>
</div>
<div class="testimonial-author">
<img src="https://io.pixtech.org/pixtech/forum/202509/17/9bcc4dbd6ea44c32.webp" alt="赵六头像">
<div>
<h4>赵六</h4>
<p>DEF公司市场经理</p>
</div>
</div>
</div>
</div>
<div class="slider-controls">
<button class="slider-control prev" aria-label="上一个评价">
<i class="fas fa-chevron-left"></i>
</button>
<button class="slider-control next" aria-label="下一个评价">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</section>
<section class="contact-cta">
<div class="container">
<h2>有项目想法？让我们一起实现它！</h2>
<p>如果您有任何问题或项目需求，请随时与我联系。</p>
<a href="contact.html" class="btn btn-primary">联系我</a>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-about">
<h3>关于我</h3>
<p>我是一名前端开发工程师和UI设计师，专注于创建美观、功能强大的网站和应用程序。</p>
<div class="social-links">
<a href="https://github.com" target="_blank" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://linkedin.com" target="_blank" aria-label="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://twitter.com" target="_blank" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://dribbble.com" target="_blank" aria-label="Dribbble">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
<div class="footer-links">
<h3>快速链接</h3>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</div>
<div class="footer-contact">
<h3>联系信息</h3>
<ul>
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:zhangsan@example.com">zhangsan@example.com</a>
</li>
<li>
<i class="fas fa-phone"></i>
<a href="tel:+8613800138000">+86 138 0013 8000</a>
</li>
<li>
<i class="fas fa-map-marker-alt"></i>
<span>北京市朝阳区某某街道123号</span>
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

复制代码

主样式表 (css/style.css)

/* CSS变量 */
:root {
--color-primary: #3498db;
--color-secondary: #2ecc71;
--color-accent: #e74c3c;
--color-dark: #2c3e50;
--color-light: #ecf0f1;
--color-text: #333;
--color-text-light: #777;
--color-white: #fff;
--color-black: #000;
--color-gray: #95a5a6;
--color-border: #ddd;
--spacing-unit: 8px;
--border-radius: 4px;
--box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
--transition-speed: 0.3s;
--font-primary: 'Roboto', sans-serif;
--font-size-base: 16px;
--line-height-base: 1.6;
}
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
line-height: var(--line-height-base);
color: var(--color-text);
background-color: var(--color-white);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-unit * 2);
}
/* 跳过链接 */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-primary);
color: var(--color-white);
padding: var(--spacing-unit);
text-decoration: none;
border-radius: 0 0 var(--border-radius) 0;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
/* 头部样式 */
.header {
background-color: var(--color-white);
box-shadow: var(--box-shadow);
position: sticky;
top: 0;
z-index: 1000;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-unit * 2);
}
.logo img {
height: 40px;
width: auto;
}
/* 导航样式 */
.main-nav {
position: relative;
}
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-unit);
}
.nav-toggle .icon-bar {
display: block;
width: 25px;
height: 3px;
background-color: var(--color-dark);
margin: 5px 0;
transition: all var(--transition-speed) ease;
}
.nav-menu {
display: flex;
list-style: none;
}
.nav-menu li {
margin-left: var(--spacing-unit * 3);
}
.nav-menu a {
text-decoration: none;
color: var(--color-dark);
font-weight: 500;
position: relative;
transition: color var(--transition-speed) ease;
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-primary);
transition: width var(--transition-speed) ease;
}
.nav-menu a:hover,
.nav-menu a.active {
color: var(--color-primary);
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
width: 100%;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: var(--spacing-unit * 1.5) var(--spacing-unit * 3);
background-color: var(--color-primary);
color: var(--color-white);
text-decoration: none;
border-radius: var(--border-radius);
border: none;
cursor: pointer;
font-weight: 500;
text-align: center;
transition: all var(--transition-speed) ease;
}
.btn:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.btn-secondary {
background-color: var(--color-secondary);
}
.btn-secondary:hover {
background-color: #27ae60;
}
.btn-light {
background-color: var(--color-white);
color: var(--color-dark);
border: 1px solid var(--color-border);
}
.btn-light:hover {
background-color: var(--color-light);
}
/* 英雄区域样式 */
.hero {
position: relative;
height: 500px;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
}
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--color-white);
width: 100%;
}
.hero-content h1 {
font-size: 3rem;
margin-bottom: var(--spacing-unit * 2);
}
.hero-content p {
font-size: 1.5rem;
margin-bottom: var(--spacing-unit * 3);
}
/* 服务区域样式 */
.services {
padding: var(--spacing-unit * 10) 0;
background-color: var(--color-light);
}
.services h2 {
text-align: center;
margin-bottom: var(--spacing-unit * 5);
color: var(--color-dark);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-unit * 4);
}
.service-card {
background-color: var(--color-white);
border-radius: var(--border-radius);
padding: var(--spacing-unit * 4);
text-align: center;
box-shadow: var(--box-shadow);
transition: transform var(--transition-speed) ease;
}
.service-card:hover {
transform: translateY(-10px);
}
.service-icon {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: var(--spacing-unit * 3);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: var(--spacing-unit * 2);
color: var(--color-dark);
}
.service-card p {
color: var(--color-text-light);
}
/* 最新作品样式 */
.recent-projects {
padding: var(--spacing-unit * 10) 0;
}
.recent-projects h2 {
text-align: center;
margin-bottom: var(--spacing-unit * 5);
color: var(--color-dark);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-unit * 4);
margin-bottom: var(--spacing-unit * 5);
}
.project-card {
background-color: var(--color-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: transform var(--transition-speed) ease;
}
.project-card:hover {
transform: translateY(-10px);
}
.project-image {
position: relative;
height: 200px;
overflow: hidden;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-speed) ease;
}
.project-card:hover .project-image img {
transform: scale(1.1);
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity var(--transition-speed) ease;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-info {
padding: var(--spacing-unit * 3);
}
.project-info h3 {
font-size: 1.25rem;
margin-bottom: var(--spacing-unit * 2);
color: var(--color-dark);
}
.project-info p {
color: var(--color-text-light);
}
.text-center {
text-align: center;
}
/* 客户评价样式 */
.testimonials {
padding: var(--spacing-unit * 10) 0;
background-color: var(--color-light);
}
.testimonials h2 {
text-align: center;
margin-bottom: var(--spacing-unit * 5);
color: var(--color-dark);
}
.testimonials-slider {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.testimonial-card {
background-color: var(--color-white);
border-radius: var(--border-radius);
padding: var(--spacing-unit * 4);
box-shadow: var(--box-shadow);
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity var(--transition-speed) ease;
}
.testimonial-card.active {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
margin-bottom: var(--spacing-unit * 3);
color: var(--color-text-light);
}
.testimonial-content p::before {
content: '"';
font-size: 3rem;
color: var(--color-primary);
line-height: 0;
position: relative;
top: 15px;
}
.testimonial-author {
display: flex;
align-items: center;
}
.testimonial-author img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: var(--spacing-unit * 2);
}
.testimonial-author h4 {
margin-bottom: 0;
color: var(--color-dark);
}
.testimonial-author p {
margin: 0;
color: var(--color-text-light);
font-size: 0.9rem;
}
.slider-controls {
display: flex;
justify-content: center;
margin-top: var(--spacing-unit * 5);
}
.slider-control {
background-color: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
margin: 0 var(--spacing-unit);
cursor: pointer;
transition: background-color var(--transition-speed) ease;
}
.slider-control:hover {
background-color: #2980b9;
}
.slider-control:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* 联系区域样式 */
.contact-cta {
padding: var(--spacing-unit * 10) 0;
background-color: var(--color-primary);
color: var(--color-white);
text-align: center;
}
.contact-cta h2 {
margin-bottom: var(--spacing-unit * 2);
}
.contact-cta p {
margin-bottom: var(--spacing-unit * 4);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.contact-cta .btn {
background-color: var(--color-white);
color: var(--color-primary);
}
.contact-cta .btn:hover {
background-color: var(--color-light);
}
/* 页脚样式 */
.footer {
background-color: var(--color-dark);
color: var(--color-white);
padding: var(--spacing-unit * 8) 0 var(--spacing-unit * 4);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-unit * 4);
margin-bottom: var(--spacing-unit * 6);
}
.footer-about h3,
.footer-links h3,
.footer-contact h3 {
font-size: 1.25rem;
margin-bottom: var(--spacing-unit * 3);
color: var(--color-white);
}
.footer-about p {
color: var(--color-gray);
margin-bottom: var(--spacing-unit * 3);
}
.social-links {
display: flex;
gap: var(--spacing-unit * 2);
}
.social-links a {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-white);
border-radius: 50%;
transition: background-color var(--transition-speed) ease;
}
.social-links a:hover {
background-color: var(--color-primary);
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: var(--spacing-unit);
}
.footer-links a {
color: var(--color-gray);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.footer-links a:hover {
color: var(--color-white);
}
.footer-contact ul {
list-style: none;
}
.footer-contact li {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-unit);
}
.footer-contact i {
margin-right: var(--spacing-unit * 2);
margin-top: var(--spacing-unit / 2);
color: var(--color-primary);
}
.footer-contact a {
color: var(--color-gray);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.footer-contact a:hover {
color: var(--color-white);
}
.footer-bottom {
text-align: center;
padding-top: var(--spacing-unit * 4);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p {
color: var(--color-gray);
}
/* 辅助类 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.text-center {
text-align: center;
}

复制代码

响应式样式表 (css/responsive.css)

/* 响应式样式 */
@media (max-width: 992px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
font-size: 1.25rem;
}
}
@media (max-width: 768px) {
/* 导航响应式 */
.nav-toggle {
display: block;
}
.nav-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--color-white);
flex-direction: column;
padding: var(--spacing-unit * 2);
box-shadow: var(--box-shadow);
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-speed) ease;
}
.nav-menu.active {
max-height: 300px;
}
.nav-menu li {
margin: var(--spacing-unit) 0;
}
/* 英雄区域响应式 */
.hero {
height: 400px;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
/* 服务区域响应式 */
.services-grid {
grid-template-columns: 1fr;
gap: var(--spacing-unit * 3);
}
/* 最新作品响应式 */
.projects-grid {
grid-template-columns: 1fr;
gap: var(--spacing-unit * 3);
}
/* 客户评价响应式 */
.testimonial-card {
padding: var(--spacing-unit * 3);
}
/* 页脚响应式 */
.footer-content {
grid-template-columns: 1fr;
gap: var(--spacing-unit * 5);
}
}
@media (max-width: 576px) {
/* 容器响应式 */
.container {
padding: 0 var(--spacing-unit);
}
/* 英雄区域响应式 */
.hero {
height: 300px;
}
.hero-content h1 {
font-size: 1.5rem;
}
.hero-content p {
font-size: 0.9rem;
}
.btn {
padding: var(--spacing-unit) var(--spacing-unit * 2);
font-size: 0.9rem;
}
/* 服务区域响应式 */
.service-card {
padding: var(--spacing-unit * 3);
}
.service-icon {
font-size: 2.5rem;
}
/* 最新作品响应式 */
.project-info {
padding: var(--spacing-unit * 2);
}
.project-info h3 {
font-size: 1.1rem;
}
/* 客户评价响应式 */
.testimonial-author img {
width: 40px;
height: 40px;
}
.testimonial-author h4 {
font-size: 1rem;
}
/* 页脚响应式 */
.footer {
padding: var(--spacing-unit * 6) 0 var(--spacing-unit * 3);
}
.footer-about h3,
.footer-links h3,
.footer-contact h3 {
font-size: 1.1rem;
margin-bottom: var(--spacing-unit * 2);
}
.footer-about p {
font-size: 0.9rem;
}
.footer-links li,
.footer-contact li {
font-size: 0.9rem;
}
}

复制代码

JavaScript文件 (js/main.js)

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
// 导航菜单切换
const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');
if (navToggle && navMenu) {
navToggle.addEventListener('click', function() {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
navMenu.classList.toggle('active');
});
// 点击菜单项后关闭菜单
const navLinks = navMenu.querySelectorAll('a');
navLinks.forEach(link => {
link.addEventListener('click', function() {
navToggle.setAttribute('aria-expanded', 'false');
navMenu.classList.remove('active');
});
});
}
// 客户评价轮播
const testimonials = document.querySelectorAll('.testimonial-card');
const prevButton = document.querySelector('.slider-control.prev');
const nextButton = document.querySelector('.slider-control.next');
if (testimonials.length > 0 && prevButton && nextButton) {
let currentIndex = 0;
function showTestimonial(index) {
testimonials.forEach((testimonial, i) => {
testimonial.classList.toggle('active', i === index);
});
}
function nextTestimonial() {
currentIndex = (currentIndex + 1) % testimonials.length;
showTestimonial(currentIndex);
}
function prevTestimonial() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
showTestimonial(currentIndex);
}
nextButton.addEventListener('click', nextTestimonial);
prevButton.addEventListener('click', prevTestimonial);
// 自动轮播
setInterval(nextTestimonial, 5000);
}
// 平滑滚动
const links = document.querySelectorAll('a[href^="#"]');
links.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 滚动时添加阴影到头部
const header = document.querySelector('.header');
if (header) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
} else {
header.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.1)';
}
});
}
// 懒加载图片
const lazyImages = document.querySelectorAll('img[data-src]');
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => {
imageObserver.observe(img);
});
} else {
// 回退到简单的滚动事件
function lazyLoad() {
lazyImages.forEach(img => {
if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationChange', lazyLoad);
lazyLoad();
}
});
// 注册Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch(function(error) {
console.log('ServiceWorker registration failed: ', error);
});
});
}

复制代码

Service Worker文件 (service-worker.js)

const CACHE_NAME = 'portfolio-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/about.html',
'/portfolio.html',
'/contact.html',
'/css/normalize.css',
'/css/style.css',
'/css/responsive.css',
'/js/main.js',
'/js/contact.js',
'/images/logo.svg',
'/images/hero-bg.jpg',
'/images/profile.jpg',
'/images/projects/project1.jpg',
'/images/projects/project2.jpg',
'/images/projects/project3.jpg',
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'
];
// 安装Service Worker并缓存资源
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// 拦截网络请求并从缓存中响应
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 如果资源在缓存中，则返回缓存的资源
if (response) {
return response;
}
// 否则发起网络请求
return fetch(event.request).then(
function(response) {
// 检查是否收到有效响应
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// 克隆响应，因为响应是流，只能使用一次
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
// 激活新的Service Worker并清理旧缓存
self.addEventListener('activate', function(event) {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});

复制代码

总结与展望

通过本教程，我们全面了解了HTML5和CSS3的强大功能，以及如何利用它们创建精美、响应式的网页。我们从基础语法开始，逐步深入到高级应用，包括响应式设计原理、Flexbox和Grid布局、CSS3动画、HTML5高级特性等，最后通过一个完整的实战项目将所学知识应用到实践中。

主要知识点回顾

1. HTML5基础：语义化标签的使用表单增强功能多媒体支持（音频和视频）Canvas和SVG图形
2. 语义化标签的使用
3. 表单增强功能
4. 多媒体支持（音频和视频）
5. Canvas和SVG图形
6. CSS3基础：强大的选择器盒模型和布局颜色和背景增强文本效果
7. 强大的选择器
8. 盒模型和布局
9. 颜色和背景增强
10. 文本效果
11. 响应式设计原理：视口设置媒体查询流式布局弹性图片
12. 视口设置
13. 媒体查询
14. 流式布局
15. 弹性图片
16. 响应式布局技术：Flexbox布局Grid布局多列布局
17. Flexbox布局
18. Grid布局
19. 多列布局
20. CSS3高级特性：过渡效果变换效果动画效果自定义属性（CSS变量）
21. 过渡效果
22. 变换效果
23. 动画效果
24. 自定义属性（CSS变量）
25. HTML5高级特性：Canvas绘图SVG图形Web存储Web WorkersGeolocation API
26. Canvas绘图
27. SVG图形
28. Web存储
29. Web Workers
30. Geolocation API
31. 性能优化：图片优化代码优化缓存策略
32. 图片优化
33. 代码优化
34. 缓存策略
35. 最佳实践：代码组织和可维护性CSS最佳实践JavaScript最佳实践可访问性最佳实践
36. 代码组织和可维护性
37. CSS最佳实践
38. JavaScript最佳实践
39. 可访问性最佳实践

HTML5基础：

• 语义化标签的使用
• 表单增强功能
• 多媒体支持（音频和视频）
• Canvas和SVG图形

CSS3基础：

• 强大的选择器
• 盒模型和布局
• 颜色和背景增强
• 文本效果

响应式设计原理：

• 视口设置
• 媒体查询
• 流式布局
• 弹性图片

响应式布局技术：

• Flexbox布局
• Grid布局
• 多列布局

CSS3高级特性：

• 过渡效果
• 变换效果
• 动画效果
• 自定义属性（CSS变量）

HTML5高级特性：

• Canvas绘图
• SVG图形
• Web存储
• Web Workers
• Geolocation API

性能优化：

• 图片优化
• 代码优化
• 缓存策略

最佳实践：

• 代码组织和可维护性
• CSS最佳实践
• JavaScript最佳实践
• 可访问性最佳实践

行业趋势与未来发展

随着技术的不断发展，网页开发领域也在持续演进。以下是一些当前和未来的趋势：

1. Web组件：通过自定义元素、Shadow DOM和HTML模板创建可重用的组件，提高代码的可维护性和复用性。
2. Progressive Web Apps (PWA)：结合Web和原生应用的优势，提供离线功能、推送通知和类似原生应用的体验。
3. WebAssembly：允许在浏览器中运行编译自其他语言（如C++、Rust）的代码，提供接近原生的性能。
4. CSS Houdini：一组新的API，允许开发者直接访问CSS引擎，创建自定义的CSS属性和值。
5. 容器查询：类似于媒体查询，但基于容器的大小而不是视口的大小，使组件级别的响应式设计更加容易。
6. WebXR：用于创建虚拟现实(VR)和增强现实(AR)体验的API。
7. AI驱动的开发：人工智能工具正在改变开发者的工作方式，从代码生成到自动化测试。

Web组件：通过自定义元素、Shadow DOM和HTML模板创建可重用的组件，提高代码的可维护性和复用性。

Progressive Web Apps (PWA)：结合Web和原生应用的优势，提供离线功能、推送通知和类似原生应用的体验。

WebAssembly：允许在浏览器中运行编译自其他语言（如C++、Rust）的代码，提供接近原生的性能。

CSS Houdini：一组新的API，允许开发者直接访问CSS引擎，创建自定义的CSS属性和值。

容器查询：类似于媒体查询，但基于容器的大小而不是视口的大小，使组件级别的响应式设计更加容易。

WebXR：用于创建虚拟现实(VR)和增强现实(AR)体验的API。

AI驱动的开发：人工智能工具正在改变开发者的工作方式，从代码生成到自动化测试。

持续学习建议

网页开发是一个快速发展的领域，持续学习是保持竞争力的关键。以下是一些建议：

1. 关注标准发展：跟踪W3C、WHATWG等组织的工作，了解HTML、CSS和JavaScript的最新发展。
2. 参与社区：加入开发者社区，如Stack Overflow、GitHub、Reddit的r/webdev等，与其他开发者交流经验和知识。
3. 实践项目：通过实际项目应用所学知识，从简单的个人网站到复杂的应用程序。
4. 阅读源码：研究优秀的开源项目，了解最佳实践和设计模式。
5. 参加培训和会议：参加在线课程、研讨会和技术会议，学习最新的技术和趋势。
6. 教授他人：通过写博客、做演讲或指导初学者来巩固自己的知识。

关注标准发展：跟踪W3C、WHATWG等组织的工作，了解HTML、CSS和JavaScript的最新发展。

参与社区：加入开发者社区，如Stack Overflow、GitHub、Reddit的r/webdev等，与其他开发者交流经验和知识。

实践项目：通过实际项目应用所学知识，从简单的个人网站到复杂的应用程序。

阅读源码：研究优秀的开源项目，了解最佳实践和设计模式。

参加培训和会议：参加在线课程、研讨会和技术会议，学习最新的技术和趋势。

教授他人：通过写博客、做演讲或指导初学者来巩固自己的知识。

结语

HTML5和CSS3为现代网页开发提供了强大的工具，使开发者能够创建美观、功能丰富且适应各种设备的网站。通过本教程的学习，您已经掌握了从基础到高级的知识，可以开始创建自己的响应式网站。

记住，网页开发是一个不断学习和实践的过程。随着技术的不断发展，保持好奇心和学习热情是成为优秀开发者的关键。祝您在网页开发的道路上取得成功！

	通知：关于部分勋章领取条件及购买价格调整的通知	05-18 21:22
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！	10-23 09:31

活动公告

轻松掌握HTML5和CSS3创建精美响应式网页的实战教程从基础语法到高级应用全面覆盖适合初学者和进阶开发者包含最新特性和行业最佳实践

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

塔罗

立华奏

站长推荐 /1

友情链接

Tencent QQ