HTML5 基础
HTML5 语义化标签
学习如何使用HTML5的新语义化标签如header, footer, article, section等来构建更有意义的网页结构。
表单与输入类型
掌握HTML5新增的表单输入类型和属性，创建更强大、用户友好的表单体验。
多媒体嵌入
学习如何在网页中嵌入音频、视频和其他多媒体内容，使用HTML5的audio和video标签。
CSS3 进阶
Flexbox 布局
掌握CSS Flexbox布局模型，创建灵活、响应式的页面布局，简化复杂的对齐和分布问题。
Grid 布局
学习CSS Grid布局系统，构建复杂的二维布局，实现更精确的页面结构控制。
动画与过渡
使用CSS3的动画和过渡效果，为网页添加流畅的视觉反馈和交互体验。
完整网页制作教程
HTML5 语义化结构
HTML5引入了新的语义化元素，这些元素明确地描述了其内容的意义，不仅对开发者友好，也对搜索引擎和辅助技术友好。
主要语义化标签包括：
<header>- 表示页面或部分的页眉<nav>- 表示导航链接<main>- 表示文档的主要内容<article>- 表示独立的内容块<section>- 表示文档中的通用部分<aside>- 表示与主要内容相关但不直接相关的内容<footer>- 表示页面或部分的页脚
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化HTML示例</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 网站名称. 保留所有权利.</p>
</footer>
</body>
</html>Flexbox 布局
Flexbox（弹性盒子布局）是一种一维布局模型，可以轻松地实现各种复杂的布局需求。它特别适合处理项目在容器中的对齐、方向和顺序问题。
Flexbox 主要属性：
- 容器属性：
display: flex- 定义flex容器flex-direction- 主轴方向（row, column等）justify-content- 主轴对齐方式align-items- 交叉轴对齐方式flex-wrap- 是否换行
- 项目属性：
order- 项目顺序flex-grow- 项目放大比例flex-shrink- 项目缩小比例flex-basis- 项目初始大小align-self- 单个项目对齐方式
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background-color: #f0f0f0;
}
.item {
flex: 1 0 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
transition: all 0.3s ease;
}
.item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.item:nth-child(1) {
order: 2;
flex-grow: 2;
}
.item:nth-child(2) {
order: 1;
align-self: flex-start;
}
.item:nth-child(3) {
order: 3;
}JavaScript DOM 操作
DOM（文档对象模型）是HTML和XML文档的编程接口，JavaScript可以通过DOM动态地访问和更新文档的内容、结构和样式。
常见的DOM操作包括：
- 选择元素：
document.querySelector(),document.getElementById() - 创建元素：
document.createElement() - 添加/删除元素：
appendChild(),removeChild() - 修改内容：
innerHTML,textContent - 修改样式：
element.style.property - 添加/删除类：
classList.add(),classList.remove() - 事件处理：
addEventListener()
// 选择元素
const button = document.querySelector('#myButton');
const container = document.getElementById('container');
// 添加点击事件
button.addEventListener('click', function() {
// 创建新元素
const newDiv = document.createElement('div');
newDiv.className = 'message';
newDiv.textContent = '按钮被点击了!';
// 添加样式
newDiv.style.backgroundColor = '#2ecc71';
newDiv.style.color = 'white';
newDiv.style.padding = '10px';
newDiv.style.marginTop = '10px';
newDiv.style.borderRadius = '5px';
// 添加到DOM
container.appendChild(newDiv);
// 3秒后移除
setTimeout(() => {
newDiv.classList.add('fade-out');
setTimeout(() => {
container.removeChild(newDiv);
}, 500);
}, 3000);
});
// 动态修改样式
const boxes = document.querySelectorAll('.box');
boxes.forEach((box, index) => {
box.addEventListener('mouseenter', () => {
box.style.transform = 'scale(1.05)';
box.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)';
});
box.addEventListener('mouseleave', () => {
box.style.transform = 'scale(1)';
box.style.boxShadow = 'none';
});
});学习资源
在线课程
精选的网页开发在线课程，适合不同水平的学习者，从入门到高级应有尽有。
书籍推荐
经典的网页开发书籍，深入讲解HTML、CSS和JavaScript的核心概念和最佳实践。
开发工具
提高开发效率的工具和资源，包括代码编辑器、调试工具和前端框架等。