HTML5：超文本标记语言

陈一男学习网站[ ChenYinan.com ] - CCF - NOI - 菜鸟教程 - 编程题库 - C++语言 - API

一、HTML5 简介

HTML5 是 HTML 的最新版本，它带来了许多新的特性和功能，使网页开发更加高效、强大和富有表现力。HTML5 旨在提供更好的用户体验，支持多媒体内容、语义化标记、离线应用等。

二、HTML5 新特性

1. 语义化标签：HTML5 引入了一系列语义化标签，如<header>（头部）、<nav>（导航）、<section>（章节）、<article>（文章）、<aside>（侧边栏）、<footer>（底部）等。这些标签使网页的结构更加清晰，便于搜索引擎优化和屏幕阅读器理解。

<header>
    <h1>页面标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

<section>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
    
    <aside>
        <h3>相关内容</h3>
        <p>侧边栏内容...</p>
    </aside>
</section>

<footer>
    <p>版权信息</p>
</footer>

2. 多媒体支持：

<video>标签用于嵌入视频。

<video src="video.mp4" controls>
    你的浏览器不支持视频播放。
</video>

<audio>标签用于嵌入音频。

<audio src="audio.mp3" controls>
    你的浏览器不支持音频播放。
</audio>

3. 表单增强：

新的输入类型，如email（邮箱）、url（网址）、number（数字）、date（日期）等，提供了更好的输入验证。

<input type="email" name="email">
<input type="url" name="website">
<input type="number" name="quantity">
<input type="date" name="birthday">

placeholder属性用于在输入框中显示提示文本。

required属性用于指定输入框为必填项。

4. 绘图和图形：HTML5 的<canvas>标签允许使用 JavaScript 在网页上绘制图形。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 75);
</script>

5. 本地存储：HTML5 提供了两种在客户端存储数据的方法：localStorage和sessionStorage。

localStorage存储的数据没有过期时间，除非被用户手动清除。

sessionStorage存储的数据在会话结束时（即关闭浏览器窗口时）被清除。

// 存储数据

localStorage.setItem('username', 'John');

sessionStorage.setItem('lastVisitedPage', 'index.html');

// 读取数据

var username = localStorage.getItem('username');

var lastVisitedPage = sessionStorage.getItem('lastVisitedPage');

</script>

6. 离线应用：通过使用manifest文件，可以使网页在离线状态下也能访问。

在 HTML 文件中添加manifest属性指向一个.manifest文件。

.manifest文件中列出了需要在离线状态下缓存的资源。

CACHE MANIFEST

# 版本号

1.0

CACHE:

index.html

styles.css

scripts.js

NETWORK:

三、HTML5 文档结构

与传统 HTML 文档类似，HTML5 文档也有基本的结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
        <link rel="stylesheet" href="styles.css">
        <script src="scripts.js"></script>
    </head>
    <body>
        <!-- 页面内容 -->
    </body>
</html>

四、HTML5 兼容性和浏览器支持

大多数现代浏览器都支持 HTML5，但不同浏览器对某些特性的支持程度可能会有所不同。为了确保网页在不同浏览器中都能正常显示，可以使用一些工具和技术来进行兼容性测试和优化，如使用 CSS 重置、渐进增强等策略。

五、总结

HTML5 为网页开发带来了许多新的可能性，使开发者能够创建更加丰富、交互性更强的网页应用。通过学习 HTML5 的新特性和使用方法，结合 CSS 和 JavaScript，可以开发出高质量的网页作品。不断探索和实践，你将能够充分发挥 HTML5 的优势，为用户提供更好的网页体验。