总结介绍H5新晋级标签（附示例）

156 阅读 0 评论 103 点赞

我是靠谱客的博主幸福百合，这篇文章主要介绍总结介绍H5新晋级标签（附示例），现在分享给大家，希望可以做个参考。

一、语义化标签

<header>：头部标签

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

<section>：块级标签

<article>：内容标签

<aside>：侧边栏标签

<footer>：尾部标签

注：

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

二、多媒体标签

<video>视频标签

<audio>音频标签

三、图形标签

<canvas>定义一个图形。

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

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

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

四、新增表单元素，控件

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