HTML5学习笔记

介绍

HTML5是HTML标准的最新版本，它带来了许多新的标签和特性，使得我们能够更加轻松地构建现代网站。在本篇学习笔记中，我们将探索HTML5的一些重要概念和特性。

新标签

<header> 和 <footer>

<header>标签用于定义文档或节的页眉，通常包含网站的标题和导航菜单。<footer>标签用于定义文档或节的页脚，通常包含版权信息和联系方式。

Copy Code
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
    <p>Contact: me@mywebsite.com</p>
</footer>

<section> 和 <article>

<section>标签用于定义文档的一个章节，通常包含一组相关的内容。<article>标签用于定义独立的文章或内容块。

Copy Code
<section>
    <h2>Introduction</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod diam at libero fringilla sollicitudin.</p>
</section>

<article>
    <h3>First Article</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod diam at libero fringilla sollicitudin.</p>
</article>

<article>
    <h3>Second Article</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod diam at libero fringilla sollicitudin.</p>
</article>

<video> 和 <audio>

<video>标签用于嵌入视频，而<audio>标签用于嵌入音频。

Copy Code
<video src="myvideo.mp4" controls></video>

<audio src="mysong.mp3" controls></audio>

新特性

本地存储

HTML5引入了本地存储API，允许网站在用户的浏览器中存储数据。本地存储API提供了两种存储方式：localStorage和sessionStorage。

localStorage允许存储一些持久化的数据，即使用户关闭了浏览器也可以保留。而sessionStorage只在当前会话期间有效，即当用户关闭浏览器后就会被清除。

Copy Code
// 存储数据
localStorage.setItem('username', 'john');

// 检索数据
var username = localStorage.getItem('username');

// 删除数据
localStorage.removeItem('username');

Canvas

Canvas是一个用于绘制图形的HTML5元素。它提供了一组API来绘制线条、矩形、圆形、文本等图形。

Copy Code
// 获取Canvas元素
var canvas = document.getElementById('mycanvas');

// 获取绘图上下文
var ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

结论

HTML5为我们提供了许多新的标签和特性，使得我们能够更加轻松地构建现代网站。在学习HTML5时，掌握这些新的概念和特性是非常重要的。