您的位置:首页 > 技术中心 > 前端框架 >

总结介绍H5新晋级标签(附示例)

时间:2022-09-07 11:13

本文给大家整理介绍H5新晋级标签有哪些,希望对需要的朋友有所帮助!

一、语义化标签

<header>:头部标签

<nav>:导航标签 在H4中导航栏一般用ul-li标签,H5中可以直接用<nav>标签

<section>:块级标签

<article>:内容标签

<aside>:侧边栏标签

<footer>:尾部标签

注:

1.在ie9中需要把它们转化为块级元素 display:block
2.主要用于移动端
2141fee200ac78779984d7852a75480.jpg

二、多媒体标签

<video>视频标签

<audio>音频标签

三、图形标签

<canvas>定义一个图形。

使用 JavaScript 在网页上绘制图像。

例如:显示一个红色的矩形:

  1. <canvas id="myCanvas"></canvas>
  2. <script type="text/javascript">
  3. var canvas=document.getElementById('myCanvas');
  4. var ctx=canvas.getContext('2d');
  5. ctx.fillStyle='#FF0000';
  6. ctx.fillRect(0,0,80,100);
  7. </script>

0bd6186329c06775e43f5389ba6c1e5.jpg

四、新增表单元素,控件

  1. <form>
  2. <label>
  3. 邮箱 :<input type="email" />
  4. 数量 :
  5. <input type="number" value="50" min="0" max="100" step="5">
  6. <!-- 最小值0、最大值100、步进值5、value初始值50 -->
  7. </label>
  8. </form>

76c5c32d2399ebd60306ff544eb0878.jpg

增加:

编辑本段新应用程序接口(API )
除了原先的 DOM 接口,HTML5 增加了更多 API,如:
1. 用于即时 2D 绘图的 Canvas 标签
2. 定时媒体回放
3. 离线数据库存储
4. 文档编辑
5. 拖拽控制
6. 浏览历史管理

总结:

HTML 5 有两大特点:

首先,强化了 Web 网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。

其次,追加了本地数据库等 Web 应用的功能。

相关推荐:《html5中新增加的属性与元素有哪些》

以上就是总结介绍H5新晋级标签(附示例)的详细内容,更多请关注gxlsystem.com其它相关文章!

热门排行

今日推荐

热门手游