HTML5标签

来源：互联网发布：网路优化编辑：程序博客网时间：2024/06/10 15:15

下面是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

阅读全文

0 0