HTML5新增标签与属性_html5 新标签-CSDN博客

本文链接：https://blog.csdn.net/IO14122/article/details/143672932

一、简介

HTML5 是超文本标记语言（HTML）的第五次重大修订版本。

1.1 发展背景

随着互联网技术的飞速发展，用户对于界面的界面展示与交互体验要求越来越高，这就推动着HTML也在不断进步。HTML5应运而生，为网页提供更强的交互性功能、更加丰富的多媒体支持、更好的语义化结构。

1.2 主要新增内容

语义化结构标签
多媒体支持
图形与绘图
表单属性增强
本地存储

1.3 优势与特点

提高开发效率：HTML5 的新特性减少了对插件和外部库的依赖，简化了开发过程。语义化标签和表单增强等功能使得代码更加简洁、易读，提高了开发效率。
更好的用户体验：多媒体支持、图形绘制和表单增强等特性为用户提供了更丰富、更流畅的交互体验。本地存储功能使得网页可以在离线状态下使用，提高了可用性。
增强的可访问性：语义化标签和辅助技术的支持使得网页对残疾用户更加友好，提高了可访问性。
跨平台兼容性：HTML5 可以在不同的操作系统和设备上运行，减少了开发多个版本的需求，降低了开发成本。

二、新增语义化标签

2.1 语义化定义

使用合理的HTML标签元素及其特有的属性来呈现页面结构。

2.2 语义化特点

即便是没有css样式的情况下，也能呈现清晰明了的页面结构特点；
可以增加代码的可读性，有利于团队开发合作；
有利于用户体验，特殊人群使用（alt属性，title属性）；
有利于SEO搜索引擎优化（例如：h1~h6、strong、title、table）；

2.3 语义化标签

<header>：定义文档或章节的头部，通常包含标题、导航链接、搜索框等内容。
<nav>：定义导航链接部分，用于提供网站的导航菜单，方便用户浏览不同的页面。
<section>：定义文档中的一个章节或区域，通常用于组织和划分网页的内容。
<main>：定义网页的主要内容区域，不包括网站的页眉、页脚、导航栏、侧边栏等辅助性内容。
<article>：定义独立的内容块，如博客文章、新闻报道等，具有明确的主题和结构。
<aside>：定义与主要内容相关的侧边栏内容，如广告、相关链接、注释等。
<footer>：定义文档或章节的底部，通常包含版权信息、联系方式、导航链接等内容。

2.4 示例

<body>
  <!-- 头部信息 -->
  <header>
    <nav>
      <a href="#">导航一</a>
      <a href="#">导航二</a>
      <a href="#">导航三</a>
    </nav>
  </header>
  <!-- 主体页面数据 -->
  <main>
    <!-- 内容块一 -->
    <article>
      <h2>标题一</h2>
      <p>文章段落一</p>
    </article>
    <!-- 内容块二 -->
    <article>
      <h2>标题二</h2>
      <p>文章段落二</p>
    </article>
  </main>
  <!-- 侧边栏 -->
  <aside>
    <ul>
      <li>联系我们</li>
      <li>官方客服</li>
      <li>返回顶部</li>
    </ul>
  </aside>
  <!-- 底部内容 -->
  <footer>
    <p>版权信息</p>
  </footer>
</body>

页面结构一目了然，结构清晰明了。

三、新增多媒体支持

详细介绍可以查看之前的文章：HTML5新增多媒体支持

3.1 音频audio标签

用于在网页中嵌入音频内容。例如：<audio src="audio.mp3" controls></audio>，其中src属性指定音频文件的路径，controls属性会显示音频播放的控制界面，包括播放 / 暂停按钮、音量调节滑块和进度条等。

3.2 视频video标签

用于在网页中嵌入视频内容。例如：<video src="video.mp4" controls width="640" height="360"></video>，这里src指定视频文件路径，controls显示播放控制界面，width和height设置视频的尺寸。

四、新增图形与绘图

HTML5 在图形与绘图方面带来了重大的新增功能，主要有以下几个方面：

4.1 画布canvas标签

<canvas>是 HTML5 中用于动态图形绘制的标签。它提供了一个空白的绘图区域，通过 JavaScript 可以在这个区域上进行各种图形的绘制。示例：

<canvas id="canvasBox" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById('canvasBox');
  var ctx = canvas.getContext('2d');
</script>

4.2 图形SVG标签

SVG 是一种基于 XML 的矢量图形格式，可以直接在 HTML 文档中使用。它可以创建高质量的、可缩放的图形，不会像位图图像那样在放大时出现像素化。示例：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

4.3 WebGL

WebGL 是一种基于 OpenGL ES 的 JavaScript API，用于在网页上绘制高性能的 3D 图形和动画。

<canvas id="myWebGLCanvas"></canvas>
<script>
  var canvas = document.getElementById('myWebGLCanvas');
  var gl = canvas.getContext('webgl');
  // 进行复杂的 3D 图形绘制和渲染操作
</script>

五、表单属性增强

HTML5 对表单进行了显著的增强，主要包括以下几个方面：

5.1 新的输入类型

email：用于输入电子邮件地址。浏览器会对输入的值进行格式验证，如果不符合电子邮件格式，会在提交表单时给出错误提示。例如：<input type="email" name="userEmail">。
url：用于输入 URL 地址。同样会进行格式验证。例如：<input type="url" name="userWebsite">。
number：用于输入数字。可以设置最小值、最大值和步长等属性。例如：<input type="number" name="userAge" min="18" max="100" step="1">。
range：创建一个滑块输入控件。例如：<input type="range" name="userRating" min="0" max="10">。
date、time、datetime-local：分别用于选择日期、时间和日期时间。例如：<input type="date" name="userBirthday">。
color：用于选择颜色。例如：<input type="color" name="userFavoriteColor">。

5.2 表单验证

内置验证：新的输入类型会自动进行一些基本的验证。例如，当使用email类型时，如果输入的值不是有效的电子邮件格式，提交表单时会显示错误信息。
required属性：设置输入字段为必填项。例如：<input type="text" name="userName" required>。
pattern属性：使用正则表达式进行更复杂的验证。例如：<input type="text" name="userZipCode" pattern="[0-9]{5}" title="请输入 5 位数字的邮政编码">。

5.3 表单属性增强

autofocus：自动聚焦到指定的表单元素上。例如：<input type="text" name="userSearch" autofocus>。
placeholder：在输入字段中显示提示文本。例如：<input type="text" name="userComment" placeholder="请输入您的评论">。
multiple：允许选择多个文件或多个选项。对于文件上传输入框<input type="file" multiple>；对于选择框<select multiple>。

5.4 表单元素的新属性

form属性：可以将一个表单元素与特定的表单关联起来，即使这个元素不在该表单内部。例如：<input type="text" name="userExtraInfo" form="myFormId">。
list属性：与<datalist>元素结合使用，为输入字段提供一组预定义的选项。例如：<input type="text" name="userCity" list="cities">，<datalist id="cities"><option value="New York"><option value="London"></datalist>。

5.5 进度条和计量器

<progress>元素：表示任务的进度。例如：<progress value="50" max="100">50%</progress>。
<meter>元素：表示在一定范围内的数量值。例如：<meter value="75" min="0" max="100">75%</meter>。

六、本地存储

HTML5 引入了强大的本地存储功能，主要包括以下两种：

6.1 localStorage

6.1.1 定义与特点：

localStorage用于在浏览器中持久化存储数据，数据在用户关闭浏览器窗口后仍然保留，直到被手动清除或存储容量达到限制。
它以键值对的形式存储数据，其中键和值都是字符串类型。如果要存储其他类型的数据，需要进行序列化和反序列化操作。

6.1.2 用法示例：

存储数据：localStorage.setItem('key', 'value');，例如localStorage.setItem('username', 'john');。
读取数据：localStorage.getItem('key');，如var username = localStorage.getItem('username');。
删除单个数据项：localStorage.removeItem('key');，比如要删除存储的用户名可以使用localStorage.removeItem('username');。
清空所有存储的数据：localStorage.clear();。