HTML5标签

下面是HTML5中新增的一些标签

article   

定义和用法:article 标签规定独立的自包含内容

一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

article元素的潜在来源:
论坛帖子
报纸文章
博客条目
用户评论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    .article {
        background: #999;
    }
    .info {
        overflow: hidden;
        white-space: nowrap;
    }
    </style>
</head>
<body>
    <article class="article">
        <h3 class="title">html标签</h3>
        <p class="info">什么是html标签?html标签是用来干什么的?</p>
    </article>
</body>
</html>

注:Internet Explorer 8 以及更早的版本不支持 article标签

aside

定义和用法:aside标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    .aside {
        width: 200px;
        height: 300px;
        padding: 40px 0;
        box-sizing: border-box;
        border-right: 2px solid #999;
    }
    .aside_item {
        list-style: none;
        text-align: center;
    }
    .aside_item__link {
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 5px 0;
        text-decoration: none;
        color: #333;
        font-size: 18px;
    }
    .aside_item__link:hover {
        color: #fff;
        background: #999;
    }
    </style>
</head>
<body>
    <aside class="aside">
        <li class="aside_item"><a class="aside_item__link" href="#">首页</a></li>
        <li class="aside_item"><a class="aside_item__link" href="#">新闻中心</a></li>
        <li class="aside_item"><a class="aside_item__link" href="#">消息中心</a></li>
        <li class="aside_item"><a class="aside_item__link" href="#">联系我们</a></li>
    </aside>
</body>
</html>

这里写图片描述

注:
(1)aside的内容可用作文章的侧栏
(2)Internet Explorer 8 以及更早的版本不支持 aside 标签

audio标签

定义和用法:audio 标签定义声音,比如音乐或其他音频流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio标签</title>
</head>
<body>
    <audio src="萧忆情 - 童话镇.mp3" controls="controls"></audio>
</body>
</html>

这里写图片描述

canvas

定义和用法:canvas标签定义图形,比如图表和其他图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas标签</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值