HTML5标签

于 2017-08-23 00:30:21 发布
阅读量453 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： html5 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aomize/article/details/77489934

下面是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>
    <script type="text/javascript">
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#F00';
        ctx.fillRect(0, 0, 80, 100);
    </script>
</body>
</html>

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

command

定义和用法：command 元素表示用户能够调用的命令。

command 标签可以定义命令按钮，比如单选按钮、复选框或按钮

只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <menu>
        <command onclick="alert('hello')">点击</command>
    </menu>
</body>
</html>

注：只有 Internet Explorer 9 （更早或更晚的版本都不支持）支持 command 标签

datalist

定义和用法：datalist 标签定义选项列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist标签</title>
</head>
<body>
    <input list="code">
    <datalist id="code">
        <option value="java">java</option>
        <option value="c++"></option>
        <option value="C#"></option>
    </datalist>
</body>
</html>

这里写图片描述
注：
（1）input的list属性要与datalist的id属性一致
（2）所有主流浏览器都支持 datalist 标签，除了 Internet Explorer 和 Safari

details

定义及用法：details标签用于描述文档或文档某个部分的细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>details标签</title>
</head>
<body>
    <details>
        <summary>标题</summary>
        <p>内容：html5标签</p>
    </details>
</body>
</html>

这里写图片描述

目前只有 Chrome 和 Safari 6 支持 details 标签

dialog

定义和用法：dialog标签定义对话框或窗口

目前只有 Chrome 和 Safari 6 支持 dialog 标签

embed

定义和用法：embed标签定义嵌入的内容，比如插件

<!DOCTYPE HTML>
<html>
<body>
    <embed src="/i/helloworld.swf" />
</body>
</html>

注：embed 标签必须有 src 属性

figcaption

定义及用法：figcaption标签定义 figure 元素的标题（caption）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>figcaption标签</title>
    <style type="text/css">
        figure {
            display: inline-block;
        }
        figcaption {
            text-align: center;
        }
    </style>
</head>
<body>  
    <figure>    
        <img src="timg.jpg" width="180px" height="130px">
        <figcaption>罗小黑战记</figcaption>
    </figure>
</body>
</html>

注：（1）”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置
（2）Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 figcaption标签

figure

定义和用法：figure 标签规定独立的流内容（图像、图表、照片、代码等等）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>figcaption标签</title>
    <style type="text/css">
        figure {
            display: inline-block;
        }
        figcaption {
            text-align: center;
        }
    </style>
</head>
<body>  
    <figure>    
        <img src="timg.jpg" width="180px" height="130px">
        <figcaption>罗小黑战记</figcaption>
    </figure>
</body>
</html>

注：figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响

footer

定义和用法：footer标签定义文档或节的页脚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer标签</title>
    <style type="text/css">
    footer {
        height: 200px;
        color: #999;
        background: #333;
    }
    .footer_copyright {
        text-align: center;
        line-height: 28px;
        padding: 24px 0;
        font-size: 12px;
    }
    a {
        color: #999;
        text-decoration: none;
    }
    </style>
</head>
<body>
    <footer>
        <div class="footer_copyright">
            <p>
                <a href="#" title="关于腾讯"> 关于腾讯</a> | 
                <a href="#" title="About Tencent">About Tencent</a> |
                <a href="#" title="服务条款">服务条款</a> |
                <a href="#" title="用户服务协议">用户服务协议</a> |
                <a href="#" title="隐私政策">隐私政策</a> |
                <a href="#" title="广告服务">广告服务</a> |
                <a href="#" title="腾讯招聘">腾讯招聘</a> |
                <a href="#" title="客服中心">客服中心</a> |
                <a href="#" title="网站导航">网站导航</a> |
            </p>
            <p>
                Copyright © 1998 - <span id="time"></span>
                <a href="#">All Rights Reserved</a> 
            </p>    
            <p>
                腾讯公司
                <a href="#", target="_blank", title="版权所有">版权所有</a>   
                <a href="#", target="_blank", title="腾讯网络文化经营许可证">腾讯网络文化经营许可证</a>
            </p>  
            <p></p>
        </div>
    </footer>
    <script type="text/javascript">
        window.onload = function () {
            var time = document.getElementById('time');

            var timer =  new Date();
            time.innerHTML = timer.getFullYear();
        };
    </script>
</body>
</html>

这里写图片描述

header

定义和用法：header标签定义文档的页眉（介绍信息）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header标签</title>
    <style type="text/css">
    div, header, ul, li , h3{
        margin: 0;
        padding: 0;
    }
    header {
        height: 50px;
        color: #fff;
        background: #333;
    }
    h3 {
        float: left;
        padding: 0 20px;
        line-height: 50px;
    }
    ul {
        float: right;
    }
    li {
        height: 50px;
        float: left;
        list-style: none;
        line-height: 50px;
    }
    a {
        display: block;
        padding: 0 4px;
        color: #fff;
        text-decoration: none;
    }
    </style>
</head>
<body>
    <header>
        <h3>首页</h3>
        <ul>
            <li><a href="#">注册</a></li>
            <li><a href="#">登录</a></li>
        </ul>
    </header>
</body>
</html>

这里写图片描述

keygen

定义和用法：keygen标签规定用于表单的密钥对生成器字段

当提交表单时，私钥存储在本地，公钥发送到服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keygen标签</title>
</head>
<body>
    <form action="#" method="get">
        <p>
            <label>用户名</label>
            <input type="text" name="userName" />
        </p>
        <p>
            <label>加密</label>
            <keygen name="security" />
        </p>
        <input type="submit" />
    </form>

</body>
</html>

注：Firefox, Chrome, Opera 以及 Safari 6 支持 keygen 标签

mark

定义和用法：mark标签定义带有记号的文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mark标签</title>
    <style type="text/css">
        mark {
            background: #999;
        }
    </style>
</head>
<body>
    hello <mark>world</mark> !
</body>
</html>

这里写图片描述

注：
（1）请在需要突出显示文本时使用m标签
（2）Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持
mark 标签

meter

定义和用法：meter标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meter标签</title>
</head>
<body>
    <meter value="3" min="0" max="10"></meter><br />
    <meter value="0.6"></meter>
    </script>
</body>
</html>

这里写图片描述

注：
（1）注释：meter标签不应用于指示进度（在进度条中）。如果标记进度条，请使用progress标签
（2）Firefox, Chrome, Opera 以及 Safari 6 支持 meter 标签

nav

定义及用法：nav标签定义导航链接的部分

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        nav {
            width: 960px;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
            border-bottom: 2px solid #c60;
        }
        nav a {
            display: block;
            float: left;
            padding: 0 10px;
            color: #999;
            text-decoration: none;
        }
        nav a:hover,
        .selected {
            color: #fff;
            background: #c00;
        }
        </style>
    </head>
    <body>
        <nav>
            <a class="selected" href="http://www.baidu.com">百度浏览器</a>
            <a href="http://www.chrome.com">谷歌浏览器</a>
            <a href="http://www.sogou.com">搜狗浏览器</a>
            <a href="http://www.firefox.com">火狐浏览器</a>
        </nav>
    </body>
</html>

这里写图片描述

注：如果文档中有“前后”按钮，则应该把它放到 

output

定义及用法：output标签定义不同类型的输出，比如脚本的输出

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>output标签</title>
</head>
<body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
       <input type="range" id="a" value="50">100
       +<input type="number" id="b" value="50">
       =<output name="x" for="a b"></output>
    </form> 
</body>
</html>
progress

定义和用法：progress标签标示任务的进度（进程）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress标签</title>
</head>
<body>
    <progress value="30" max="100"></progress>
    </script>
</body>
</html>

注：Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 6 支持 progress 标签

source

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

这里写图片描述

注：Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 source 标签

summary

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>summary标签</title>
</head>
<body>
    <details>
        <summary>标题</summary>
        <p>内容：html5标签</p>
    </details>
</body>
</html>

这里写图片描述

只有 Chrome 以及 Safari 6 支持 summary 标签

video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video标签</title>
</head>
<body>
    <video src="" controls="controls"></video>
</body>
</html>

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持video标签

wbr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值