HTML5核心语法速查手册：从入门到精通

1. HTML5 简介

HTML5 是 HTML 的第五个版本，它于 2014 年被正式标准化。HTML5 引入了许多新特性和改进，旨在使网页设计更加高效、灵活和强大。

2. HTML5 文档结构

HTML5 文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型和版本。
<html>：根元素，包含整个页面内容。
<head>：包含页面的元数据，如字符集、标题等。
<body>：包含页面的可见内容。

3. HTML5 标签

HTML5 引入了一些新的标签，同时也对一些旧的标签进行了修改。以下是一些常用的 HTML5 标签：

<header>：定义页面的页眉部分。
<nav>：定义导航链接。
<section>：定义页面中的一个区段。
<article>：定义页面中的一个文章。
<aside>：定义页面中的侧边栏内容。
<footer>：定义页面的页脚部分。

4. HTML5 新增元素

HTML5 新增了一些元素，以提供更好的语义化。以下是一些新增的元素：

<canvas>：用于绘制图形。
<audio>：用于嵌入音频。
<video>：用于嵌入视频。
<time>：用于表示时间。
<mark>：用于高亮文本。

5. HTML5 表单元素

HTML5 引入了一些新的表单元素，以提供更好的用户体验。以下是一些新增的表单元素：

<input type="email">：用于输入电子邮件地址。
<input type="tel">：用于输入电话号码。
<input type="date">：用于输入日期。
<input type="month">：用于输入月份。
<input type="week">：用于输入周。

6. HTML5 媒体元素

HTML5 提供了 <audio> 和 <video> 元素，用于嵌入音频和视频。

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

<video controls>
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持 video 元素。
</video>

7. HTML5 脚本和样式

HTML5 允许在 <head> 部分或 <body> 部分的底部添加 <script> 和 <style> 标签。

<head>
    <style>
        body { background-color: #f0f0f0; }
    </style>
</head>
<body>
    <script>
        alert('Hello, world!');
    </script>
</body>

8. HTML5 语义化标签

HTML5 强调语义化标签的使用，以下是一些常用的语义化标签：

<header>：页眉。
<nav>：导航。
<main>：主要内容。
<article>：文章。
<section>：区段。
<aside>：侧边栏。
<footer>：页脚。

9. HTML5 响应式设计

HTML5 与 CSS3 结合，可以实现响应式设计。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计示例</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        @media screen and (max-width: 600px) {
            body {
                background-color: #ff0000;
            }
        }
    </style>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

10. HTML5 与 CSS3 的结合

HTML5 与 CSS3 结合，可以实现丰富的页面效果。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 与 CSS3 结合示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            margin: 20px auto;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

11. HTML5 与 JavaScript 的结合

HTML5 与 JavaScript 结合，可以实现动态交互效果。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 与 JavaScript 结合示例</title>
    <script>
        function sayHello() {
            alert('Hello, world!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

12. HTML5 安全性

HTML5 在安全性方面进行了一些改进，如：

<iframe> 元素增加了 sandbox 属性，用于限制嵌入页面的权限。
X-Frame-Options HTTP 响应头，用于防止页面被其他页面框架嵌入。

13. HTML5 性能优化

HTML5 在性能优化方面进行了一些改进，如：

使用 <canvas> 元素进行图形绘制，可以提高性能。
使用 <video> 元素嵌入视频，可以减少页面加载时间。

14. HTML5 浏览器兼容性

HTML5 兼容性较好，大多数现代浏览器都支持 HTML5。但是，对于一些老旧的浏览器，可能需要使用一些兼容性解决方案。

15. 总结

HTML5 是一个功能强大的网页设计工具，它为网页设计带来了许多新特性和改进。通过学习 HTML5 核心语法，您可以更好地掌握网页设计技术。