第一天：HTML5简介与基本结构
什么是HTML5？
HTML5是当前网页制作的主流语言之一，它是在HTML4.01的基础上发展而来的，增加了许多新特性和功能，使得网页设计更加丰富和强大。HTML5的核心理念是“语义化”，通过使用更具有语义的标签，使网页内容更加易于理解和搜索。
HTML5的基本结构
一个HTML5文档的基本结构如下：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
<!DOCTYPE html>：声明文档类型为HTML5。<html>：根元素，包含整个网页的内容。<head>：包含元数据，如页面的标题、字符编码等。<title>：定义页面的标题，显示在浏览器的标签页上。<body>：包含网页的实际内容。
第二天：HTML5常用标签
标题标签
HTML5提供了6个级别的标题标签，从<h1>到<h6>，分别代表标题的层级。
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- ... -->
<h6>六级标题</h6>
段落标签
<p>标签用于定义段落。
<p>这是一个段落。</p>
水平线标签
<hr>标签用于在网页中添加一条水平线。
<p>这是一段文字。</p>
<hr />
<p>这是另一段文字。</p>
第三天：HTML5文本格式化
换行标签
<br>标签用于在文本中添加换行。
<p>这是一个<br />换行。</p>
文本加粗和斜体
<strong>和<em>标签分别用于定义加粗和斜体文本。
<p><strong>加粗文本</strong></p>
<p><em>斜体文本</em></p>
列表标签
HTML5提供了无序列表、有序列表和定义列表三种列表标签。
- 无序列表：使用
<ul>和<li>标签。 - 有序列表：使用
<ol>和<li>标签。 - 定义列表：使用
<dl>、<dt>和<dd>标签。
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
<dl>
<dt>术语1</dt>
<dd>定义1</dd>
<dt>术语2</dt>
<dd>定义2</dd>
</dl>
第四天：HTML5图片和链接
图片标签
<img>标签用于在网页中插入图片。
<img src="image.jpg" alt="图片描述" />
src：指定图片的路径。alt：图片无法显示时显示的替代文本。
链接标签
<a>标签用于创建链接。
<a href="http://www.example.com">链接文本</a>
href：指定链接的目标地址。
第五天：HTML5表单
表单标签
<form>标签用于创建表单。
<form action="submit.php" method="post">
<!-- 表单内容 -->
</form>
action：指定表单提交的目标地址。method：指定表单提交的方式，如post或get。
输入标签
HTML5提供了多种输入标签，如文本框、密码框、单选框、复选框等。
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" />
<label for="password">密码：</label>
<input type="password" id="password" name="password" />
<input type="submit" value="提交" />
</form>
第六天：HTML5多媒体
音频标签
<audio>标签用于在网页中播放音频。
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
您的浏览器不支持音频播放。
</audio>
视频标签
<video>标签用于在网页中播放视频。
<video controls>
<source src="video.mp4" type="video/mp4" />
您的浏览器不支持视频播放。
</video>
第七天：HTML5画布与绘图
画布标签
<canvas>标签用于在网页中创建画布，进行绘图操作。
<canvas id="myCanvas" width="200" height="100"></canvas>
绘图API
HTML5提供了丰富的绘图API，如CanvasRenderingContext2D。
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 100);
</script>
第八天：HTML5地理位置
地理位置API
HTML5提供了地理位置API，可以获取用户的地理位置信息。
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// 处理地理位置信息
});
} else {
alert("您的浏览器不支持地理位置API");
}
</script>
第九天：HTML5拖放
拖放API
HTML5提供了拖放API，允许用户将元素拖放到指定位置。
<div id="drag" draggable="true">拖动我</div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
第十天：HTML5本地存储
本地存储API
HTML5提供了本地存储API，如localStorage和sessionStorage。
<script>
// 存储数据
localStorage.setItem("key", "value");
// 获取数据
var value = localStorage.getItem("key");
// 删除数据
localStorage.removeItem("key");
</script>
总结
通过这十天的学习，相信你已经对HTML5有了初步的了解。HTML5作为新一代的网页制作语言，具有丰富的功能和强大的扩展性。在今后的学习和工作中，你可以继续深入研究HTML5的高级特性，如CSS3、JavaScript等，从而打造出更加精美和实用的网页。祝你在HTML5的道路上越走越远！