HTML5 简介
HTML5，作为现代网页开发的核心技术之一，自从推出以来，便以其强大的功能和丰富的特性受到了广大开发者的青睐。HTML5不仅提供了更多的元素和API，还优化了网页的表现力和交互性，使得网页应用能够更加接近桌面应用。从零开始，让我们一起探索HTML5的世界，搭建属于自己的网站。
环境搭建
1. 安装开发工具
首先，我们需要安装一款适合自己的开发工具。常用的开发工具包括Sublime Text、Visual Studio Code、Atom等。以下是使用Visual Studio Code的安装步骤：
# 安装Visual Studio Code
code --install
# 打开Visual Studio Code
code .
2. 创建项目文件夹
在安装好开发工具后，我们需要创建一个项目文件夹，用于存放我们的网站代码。
# 创建项目文件夹
mkdir my-website
cd my-website
3. 配置文件结构
为了方便管理和维护，我们需要在项目文件夹中创建以下文件：
index.html：网站首页文件style.css：网站样式文件script.js：网站脚本文件
HTML5 基础元素
1. 文档结构
HTML5 的文档结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网站标题</title>
</head>
<body>
<!-- 网站内容 -->
</body>
</html>
2. 元素
HTML5 提供了丰富的元素，以下是一些常用元素：
header：头部区域，通常用于放置网站标志、导航栏等。nav：导航区域，用于存放网站的导航菜单。section：章节区域，用于组织网站内容。article：文章区域，用于存放网站中的文章内容。aside：侧边栏区域，用于存放与主内容相关的辅助信息。
3. 表单元素
HTML5 表单元素包括：
input：输入框，用于接收用户输入的数据。textarea：多行文本框，用于接收用户输入的长文本。select：下拉列表，用于提供一组选项供用户选择。button：按钮，用于提交表单或触发事件。
CSS3 基础样式
1. 选择器
CSS3 提供了多种选择器，以下是一些常用选择器：
- 类选择器：
.class-name - 标签选择器：
div - ID选择器：
#id-name - 通用选择器：
*
2. 属性
CSS3 中常用的属性包括：
color：颜色background-color：背景颜色font-size：字体大小text-align：文本对齐方式margin：外边距padding：内边距
JavaScript 基础语法
JavaScript 是一种脚本语言，用于为网页添加交互性。以下是一些JavaScript基础语法：
1. 变量声明
var a = 1;
let b = 2;
const c = 3;
2. 数据类型
JavaScript 中的数据类型包括：
- 基本类型：
number、string、boolean - 对象类型：
object、array、function
3. 控制语句
JavaScript 中的控制语句包括：
if语句for循环while循环switch语句
实战项目
1. 创建一个简单的博客
在这个项目中，我们将创建一个简单的博客，包括首页、文章列表和文章详情页面。
首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的博客</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
</ul>
</nav>
</header>
<section>
<!-- 文章列表 -->
</section>
<footer>
© 2021 我的博客
</footer>
</body>
</html>
样式文件（style.css）
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f5f5f5;
padding: 10px;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
脚本文件（script.js）
// JavaScript 代码
2. 创建一个在线相册
在这个项目中，我们将创建一个在线相册，用户可以上传图片并浏览。
首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的相册</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的相册</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="upload.html">上传图片</a></li>
</ul>
</nav>
</header>
<section>
<!-- 图片列表 -->
</section>
<footer>
© 2021 我的相册
</footer>
</body>
</html>
样式文件（style.css）
/* CSS 代码 */
脚本文件（script.js）
// JavaScript 代码
通过以上实战项目，我们可以逐步掌握HTML5、CSS3和JavaScript的技能，为成为一名优秀的网页开发者奠定基础。在今后的学习和工作中，我们还可以继续探索更多高级技术和框架，不断提升自己的能力。