零基础学Java第二十七天之前端-HTML5详解

在零基础学习Java的第二十七天前端HTML5详解中，我们主要关注于Web前端开发中的HTML5的学习。HTML5是最新的HTML标准，它为现代Web开发提供了丰富的功能和更好的体验。

以下是一些关键点和示例代码：

1. 语义化标签：HTML5引入了一些语义化的标签，如<header>, <nav>, <section>, <article>, <aside>, <footer>，这些标签可以让页面更容易阅读和理解，同时有助于搜索引擎优化。

<header>
  <!-- 页面或页面一部分的头部内容 -->
</header>
<nav>
  <!-- 导航链接 -->
</nav>
<section>
  <!-- 页面的一个区块，可以用来分割内容 -->
</section>
<article>
  <!-- 一块独立的内容，如博客文章 -->
</article>
<aside>
  <!-- 与页面主内容关系不大的内容，如侧边栏 -->
</aside>
<footer>
  <!-- 页面或页面一部分的底部内容 -->
</footer>

2. 画布（Canvas）和SVG：HTML5提供了<canvas>元素，允许通过JavaScript进行2D图形绘制。而SVG用于绘制矢量图形。

<!-- Canvas用于绘图 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
 
<!-- SVG用于绘制矢量图形 -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

3. 表单控件：HTML5增加了一些新的表单控件，如<email>, <url>, <range>, <date>, <time>等，这些控件提供了更好的数据校验和输入体验。

<form>
  <label for="email">Email:</label>
  <email id="email" name="email"></email>
 
  <label for="range">Range:</label>
  <range id="range" name="range" min="0" max="100" step="5">60</range>
 
  <input type="submit">
</form>

4. 本地存储：HTML5的Web存储API允许在客户端存储数据。

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
let data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();

5. 音频和视频：HTML5提供了<audio>和<video>标签，用于在页面中播放音频和视频。

<!-- 音频 -->
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

6. 地理位置（Geolocation）API：HTML5提供了地理位置API，可以获取用户的当前位置。

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude is :", position.coords.latitude);
    console.log("Longitude is :