HTML5 简介
HTML5 是一种用于创建网页和互联网应用的标准标记语言。自 2008 年以来，HTML5 一直在不断发展和完善，成为当今网页制作的主流语言。它提供了更丰富的功能，使网页设计更加灵活和强大。
HTML5 基础语法
标签
HTML5 使用标签来定义网页的结构。以下是一些常用的标签：
<html>：定义整个 HTML 文档。<head>：包含文档的元数据，如标题、字符集等。<title>：定义文档的标题。<body>：包含网页的内容。<h1>到<h6>：定义标题，<h1>为最高级别，<h6>为最低级别。<p>：定义段落。<a>：定义超链接。
属性
属性用于进一步描述 HTML 标签。以下是一些常用的属性：
href：定义超链接的目标地址。title：定义元素的标题提示。src：定义嵌入媒体的源地址。
代码示例
<!DOCTYPE html>
<html>
<head>
<title>我的第一个 HTML5 页面</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com" title="这是一个示例链接">点击这里</a>
</body>
</html>
HTML5 新特性
视频和音频
HTML5 引入了 <video> 和 <audio> 标签，使网页直接嵌入视频和音频文件成为可能。
<video src="movie.mp4" controls></video>
<audio src="music.mp3" controls></audio>
Canvas 和 SVG
Canvas 和 SVG 是两种用于在网页上绘制图形的技术。
<canvas>：用于绘制 2D 图形。<svg>：用于绘制矢量图形。
<canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
地理定位
HTML5 提供了 <geolocation> 接口，使网页能够获取用户的地理位置信息。
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
alert('纬度: ' + position.coords.latitude +
'\n经度: ' + position.coords.longitude);
});
} else {
alert('Geolocation is not supported by this browser.');
}
HTML5 页面布局
布局技术
<div>：用于创建一个区块。<span>：用于创建一个行内元素。- CSS 布局（如 Flexbox 和 Grid）。
代码示例
<div class="container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="main">主要内容</div>
<div class="footer">底部</div>
</div>
HTML5 页面交互
事件处理
HTML5 提供了一系列事件处理方法，如 onclick、onmouseover 等。
<button onclick="alert('点击了按钮！')">点击这里</button>
表单验证
HTML5 提供了内置的表单验证功能，如 required、pattern 等。
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="提交">
</form>
总结
通过以上内容，相信你已经对 HTML5 有了一定的了解。HTML5 提供了丰富的功能和特性，使网页制作更加简单和高效。接下来，你可以通过实践和不断学习，不断提升自己的网页制作技能。祝你学习愉快！
