说说Html5的新特性 | 这道题，要么送命，要么是个good beginning

Html5 新特性

语义化标签 ：HTML5引入了很多新的标签，如 <header>、<footer>、<nav>、<article>、<section>等，这些标签都是为了更好地表达文档内容的语义而设计的。
多媒体支持：HTML5 支持多媒体内容，包括音频、视频、SVG 和 Canvas 等图形元素，这些都可以直接在网页中嵌入，无需使用第三方插件。
新的表单控件：HTML5引入了一些新的表单控件，如日期选择器、搜索框、滑块等，这些控件都能够提高用户体验。
Web 存储：HTML5 提供了两种新的客户端存储机制：localStorage 和sessionStorage，它们可以让Web应用程序在客户端上存储数据，从而提高性能和用户体验。
Web Workers：HTML5 提供了一种新的机制，即WebWorkers，它们可以让Web 应用程序在后台运行，从而提高性能和响应速度。
地理位置支持：HTML5 提供了一种新的 API，即 Geolocation APl，它可以让Web应用程序获取用户的地理位置信息。
** EventSource** ： HTML5 中的一个 API，用于建立到服务器的单向连接，以接收服务器发送的实时事件流。服务器可以按照一定的格式将数据发送给客户端，客户端通过监听 message 事件来接收和处理这些数据，实现流式输出。例如：

plain 复制代码

const eventSource = new EventSource('your_server_url');
eventSource.onmessage = function(event) {
  console.log(event.data);
};

example

语义化标签

HTML5 引入了一系列语义化标签，使代码结构更清晰，利于搜索引擎优化（SEO）和屏幕阅读器理解。

<header>：代表页面或区域的头部，通常包含网站标志、导航栏等。

html 复制代码

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

<nav>：用于定义导航链接部分。
<article>：表示一个独立的、完整的内容块，可独立于页面其他部分进行分发或重用，如博客文章、论坛帖子等。

html 复制代码

<article>
  <h2>文章标题</h2>
  <p>文章内容......</p>
</article>

<section>：定义文档中的一个章节，是相关内容的集合。
<aside>：表示与页面主要内容间接相关的部分，如侧边栏。

html 复制代码

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
  </ul>
</aside>

<footer>：代表页面或区域的底部，通常包含版权信息、联系方式等。

比如下面，就是我对语义化标签的应用~

plain 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5语义化标签示例</title>
  <style>
    body {
      background-color: #f0f0f0;
    }

    header {
      background-color: #FFD700;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 10vh;
    }

    nav {
      background-color: #87CEFA;
      display: flex;
      align-items: center;
      height: 8vh;
    }

    ol {
      display: flex;
    }

    ol li {
      list-style: none;
      padding: 15px;
    }

    ol li a {
      text-decoration: none;
      color: white;
    }

   .mid {
      display: flex;
      flex-direction: row;
      height: 70vh;
    }

    .container {
      background-color: #98FB98;
      width: 65vw;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    section {
      background-color: #FFB6C1;
      height: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    main {
      background-color: #DDA0DD;
      height: 60%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    aside {
      background-color: #FFA07A;
      width: 35vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    footer {
      background-color: #20B2AA;
      height: 12vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
  </style>
</head>

<body>
  <!-- 文档头部 -->
  <header>
    <h2>这是头部区域</h2>
  </header>
  <!-- 导航区域 -->
  <nav>
    <ol>
      <li><a href="#">导航链接1</a></li>
      <li><a href="#">导航链接2</a></li>
      <li><a href="#">导航链接3</a></li>
      <li><a href="#">导航链接4</a></li>
    </ol>
  </nav>
  <div class="mid">
    <div class="container">
      <!-- 文档章节 -->
      <section>
        <h2>这是章节区域</h2>
      </section>
      <!-- 文档主要内容 -->
      <main>
        <h2>这是主要内容区域</h2>
      </main>
    </div>
    <!-- 侧边栏内容 -->
    <aside>
      <h2>这是侧边栏区域</h2>
    </aside>
  </div>
  <!-- 文档底部 -->
  <footer>
    <h2>这是底部区域</h2>
  </footer>
</body>

</html>

表单增强

HTML5 为表单元素添加了许多新特性，提升了用户体验和数据验证能力。

新的输入类型 ：如 email、url、number、date 等，浏览器会根据输入类型提供相应的输入验证和输入界面。

html 复制代码

<input type="email" placeholder="请输入邮箱地址">

表单验证属性 ：如 required（必填项）、pattern（使用正则表达式验证）、min 和 max（用于数字和日期输入）等。

html 复制代码

<input type="text" required pattern="[A-Za-z]{3,}">

placeholder** 属性**：在输入框中显示提示信息，当用户开始输入时提示信息消失。
autofocus** 属性**：使页面加载时指定的输入框自动获得焦点。

plain 复制代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>HTML5表单DEMO</title>
</head>

<body>
    <h3>Part1：新增的input元素的属性</h3><br>
    <form method="post" action="action1.jsp">
        <!-- 文本框的placeholder(占位符）属性，这个属性可以用于未输入状态时的文本提示 -->
        <p>实验1：demo文本框的placeholder属性，这个属性可以用于未输入状态时的文本提示 <br>
            输入textfield: <input type="text" placeholder="请输入内容到文本框" /></p>
        <br>

        <!-- autofocus可以让页面打开时，这个控件自动获得焦点 -->
        <p>实验2：demo autofocus属性，这个属性可以让某控件自动获得焦点<br>
            输入搜索文本: <input type='search' autofocus /></p>
        <br>

        <!-- list属性可以和datalist配合起来使用，当用获得焦点时候可以让给用户提示，否则让用户自己输入内容 -->
        <p>实验3：demo list属性，这个属性可以和datalist配合，当用户获得焦点时候给用户提示<br>
            输入文本（有提示哦）：<input type="text" name="charles" list="charles_info">
            <datalist id="charles_info" style="display:none;">
                <option value="charles wang">charles wang</option>
                <option value="charles_wang888">charles_wang888</option>
                <option value="charles王子">charles王子</option>
            </datalist>
        </p>
        <br>
    </form>
    <hr>
    <h3>Part2：新增的input元素的类型</h3><br>
    <form method="post" action="action2.jsp">
        <!-- url类型表明专门输入url的文本框,必须是协议名+地址，否则提示报错-->
        <p>输入url: <input name="url1" type="url" size="60" value="http://www.sina.com.cn" /></p>
        <br>

        <!-- email类型表明专门输入邮箱地址 -->
        <!-- 注意，每个元素都可以用pattern，来使用正则表达式来校验输入，比如我这里就给出了邮箱地址的正则表达式 -->
        <p>输入邮箱地址: <input name="email1" type="email" size="60" value="[email protected]" pattern="^(\w -)+(\.(\w -)+)*@(\w -)+(\.(\w -)+)+$" /></p>
        <br>

        <!-- datetime类型可以输入UTC日期和时间,并且进行有效性检查，这个Opera支持，Firefox不支持-->
        <p>选择大好时间：<input name="datetime1" type="datetime" required="true" /></p>
        <br>

        <!-- number类型可以输入数字，可以上下箭头选择增减，并且进行校验 -->
        <p>输入数字: <input name="number1" type="number" value="25" min="10" max="25" step="5" /></p>
        <br>

        <!-- range类型可以输入一定范围内的数值，具有最小值和最大值 ，可以设定 ，值用滑动条指定-->
        <p>选择数值：<input name="range1" type="range" value="25" min="0" max="100" step="5" /></p>
        <br>

        <input type="submit" />
    </form>
</body>

</html>

多媒体支持

audio 和 video

HTML5 原生支持音频和视频播放，无需依赖第三方插件（如 Flash）。

<audio>** 标签**：用于在网页中嵌入音频文件。

html 复制代码

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

<video>** 标签**：用于在网页中嵌入视频文件。

html 复制代码

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

plain 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 音频和视频播放</title>
</head>
<body>
    <h2>音频播放示例</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
    </audio>

    <h2>视频播放示例</h2>
    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>
</body>
</html>

canvas

<canvas> 元素用于通过 JavaScript 动态绘制图形、动画、游戏等。

html 复制代码

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 100, 50);
</script>

SVG 支持

HTML5 支持直接在网页中嵌入 SVG（可缩放矢量图形），SVG 图形可以无损缩放，适合用于图标、图表等。

html 复制代码

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Web Storage

HTML5 提供了两种客户端存储数据的机制：localStorage 和 sessionStorage。

localStorage：数据会永久存储，除非手动删除，且同一域名下的所有页面都可以访问。

javascript 复制代码

// 存储数据
localStorage.setItem('username', 'John');
// 获取数据
const username = localStorage.getItem('username');

sessionStorage：数据仅在当前会话期间有效，关闭浏览器窗口后数据会被清除。

Web Workers

Web Workers 允许在浏览器中创建后台线程，执行 JavaScript 代码而不影响页面的响应性能。

javascript 复制代码

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello, worker!');
worker.onmessage = function (event) {
  console.log('Received from worker:', event.data);
};

// worker.js
self.onmessage = function (event) {
  console.log('Received from main:', event.data);
  self.postMessage('Hello, main!');
};

Geolocation API

Geolocation API 允许网页获取用户的地理位置信息，可用于开发地图、定位服务等应用。

javascript 复制代码

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log('Latitude:', latitude, 'Longitude:', longitude);
  }, function (error) {
    console.error('Error getting location:', error.message);
  });
} else {
  console.error('Geolocation is not supported by this browser.');
}

WebSocket

WebSocket 提供了一种在浏览器和服务器之间进行实时双向通信的机制，适用于实时聊天、实时数据更新等场景。

javascript 复制代码

const socket = new WebSocket('ws://example.com/socket');
socket.onopen = function () {
  socket.send('Hello, server!');
};
socket.onmessage = function (event) {
  console.log('Received from server:', event.data);
};

这些 HTML5 新特性大大提升了网页的功能和用户体验，推动了现代 Web 应用的发展。

4 & 5 对比

相较于 HTML4，HTML5 的语义化标签具备多方面优势，以下是详细对比：

代码可读性与可维护性

HTML4 ：在 HTML4 里，通常使用 <div> 标签来划分页面区域，然而 <div> 本身并无语义，只是起到布局作用。当页面结构变得复杂时，开发者难以快速理解代码结构和各个部分的功能。

html 复制代码

<!-- HTML4 示例 -->
<div id="header">
  <div class="logo">网站标志</div>
  <div class="nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </div>
</div>

HTML5 ：HTML5 引入了像 <header>、<nav>、<article>、<section>、<aside>、<footer> 这类语义化标签，从标签名就能清晰了解其用途，代码结构一目了然，便于开发者理解和维护。

html 复制代码

<!-- HTML5 示例 -->
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>

搜索引擎优化（SEO）

HTML4：由于缺乏语义化标签，搜索引擎难以精准理解页面内容的结构和重要性，不利于页面在搜索结果中获得更好的排名。
HTML5 ：语义化标签能让搜索引擎更清晰地识别页面的关键内容，例如 <article> 标签表明这是一篇独立的文章，有助于搜索引擎对内容进行分类和索引，从而提升页面的搜索排名。

无障碍访问

HTML4：屏幕阅读器等辅助设备在解析 HTML4 页面时，由于缺乏语义信息，难以准确向残障人士传达页面结构和内容。
HTML5：语义化标签为辅助设备提供了明确的页面结构信息，使得屏幕阅读器能够更准确地解读页面，帮助残障人士更方便地访问网页内容。

开发效率

HTML4：开发人员需要编写大量的类名和 ID 来标识不同的页面区域，增加了代码量和开发时间。
HTML5：使用语义化标签可以减少不必要的类名和 ID，简化代码编写过程，提高开发效率。

未来扩展性

HTML4：随着 Web 技术的不断发展，HTML4 的标签体系难以满足新的需求，扩展性较差。
HTML5：语义化标签的设计更具前瞻性，能够更好地适应未来 Web 应用的发展，方便后续功能的扩展和升级。

综上所述，HTML5 的语义化标签在代码可读性、SEO、无障碍访问、开发效率和未来扩展性等方面都优于 HTML4。