H5新增了哪些新特性

最新推荐文章于 2025-06-03 20:36:13 发布

前端小学弟~

最新推荐文章于 2025-06-03 20:36:13 发布

阅读量1.2w

点赞数 20

CC 4.0 BY-SA版权

文章标签： html5

本文链接：https://blog.csdn.net/weixin_45453514/article/details/120179253

本文总结了HTML5的十大新特性，包括语义化标签、Form表单增强、视频音频处理、Canvas绘图、SVG绘图、地理位置定位、拖放API、Web Worker、Web Storage以及WebSocket，并给出了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

6.地理位置定位（Geolocation API ）

前言

本期为大家总结面试时常被问到的一个问题，那就是H5新特新有哪些，目前H5的新特性在实际工作中也经常会用到。本章主要总结为主，因此没有深入记录，若想深入了解，还需单独研究哦~

1.语义化标签

HTML5新增的语义化标签主要有：
<article>、<section>、<nav>、<aside>、<header>、<footer>、<time>等等...

2.Form表单增强

Input的type新属性：number、data、month、week、time、email、url等；
Input标签新增加的特有属性

代码：

<input type="number" name="demoNumber" min="1" max="100" step="2"/>
<input type="email" name="email" placeholder="请输入注册邮箱" />
<input type="url" placeholder="请输入网址" name="url" />
<input type="tel" placeholder="输入电话" name="phone"/>
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
<input type="date" name="datedemo" />
<input type="color"/>
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />

Input标签新增加的特有属性
<input type="text" autofocus="autofocus"/>
1）autofocus属性 此属性可以设置当前页面中input标签加载完毕后获得焦点。
2）max,min,step这些上面都是跟数字相关。
3）placeholder:提示信息属性，上面有demo。
4）multiple：用于文件上传控件，设置此属性后，允许上传多个文件。

3.视频和音频标签

代码如下：

<!-- 视频标签 -->
<video src="url" controls="controls"></video> //src 视频URL  controls 展示控件，如播放按钮
<!-- 音频标签 -->
<audio src="url" loop="loop" muted="muted"></audio> //src 音频URL  loop 音频结束时重新播放  muted 静音播放