Html5新增了哪些功能

HTML5是HTML最新的版本，它新增了许多新功能和更新了一些旧有的功能。下面将详细介绍HTML5新增的主要功能。

1. 语义化标签

HTML5新增了一些语义化标签，方便开发者更好地描述网页中的内容和结构，便于搜索引擎和屏幕阅读器解析。比如：

<header>
  <h1>这是网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
    </ul>
  </nav>
</header>

其中<header>表示文档的头部；<nav>表示导航栏；<ul>表示无序列表；<li>表示列表项；<a>表示超链接。

2. 视频和音频

HTML5新增了<video>和<audio>标签，让开发者可以直接在网页上添加视频和音频，而无需使用第三方插件。例如：

<video src="movie.mp4" controls>
  您的浏览器不支持 video 标签。
</video>

<audio src="music.mp3" controls>
  您的浏览器不支持 audio 标签。
</audio>

其中src属性指定媒体文件的路径；controls属性指定显示媒体播放器的控件。

3. 表单增强

HTML5在表单处理方面也做了一些改进，例如新增了<input>标签的多个新类型，如：

• email：用于输入电子邮件地址；
• url：用于输入网址；
• tel：用于输入电话号码；
• date：用于输入日期；
• range：用于选择数值范围。

示例：

<input type="email" name="user_email">
<input type="url" name="user_website">
<input type="tel" name="user_phone">
<input type="date" name="user_birthday">
<input type="range" name="volume" min="0" max="100">

4. 本地存储

HTML5还新增了本地存储API，使得浏览器可以存储网页数据而无需使用cookie或服务器存储。例如：

localStorage.setItem('name', '张三');
localStorage.getItem('name'); // 返回 "张三"

5. Canvas绘图

HTML5新增了<canvas>标签，使得开发者可以通过JavaScript在网页上绘制图形。例如：

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

以上就是HTML5新增的一些主要功能。除此之外，还有很多其他的新功能，如缓存、地理位置、WebSocket等。开发者可以根据自己的需求灵活运用。